• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Logo auf Seite zentrieren

Status
Für weitere Antworten geschlossen.
farchris

farchris

Mitglied
Hallo,
wie kann ich es machen, dass ein Logo immer genau in der Mitte ist (egal bei welcher Auflösung).

Ich hab es so probiert:

Code: 
*{
padding:0px;
margin:0px;
border:none;
}

body 
{
background-color: #B2FFFF;
}	


#logo
{
position:fixed;

}

Ich weiß allerdings nicht, welche Angabe ich bei "postion:fixed" eintragen soll, damit das Logo zentiert ist.

Danke für Antworten!
 
Werbung:
bin mir nicht sicher, aber versuchs mal so

Code: 
#logo
{
position:fixed;
left: auto;
right: auto;
top: auto;
bottom:auto;
}
 
Werbung:
Hallo,
ich habe es nun so:

CSS:
Code: 
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color: #B2FFFF;
} 

#logo
{
width: 800px;
border: 1px solid blue;
margin: 100px auto;
}

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="comuse.css">
</head>

<body>
<div id="logo">
<p>
<img src="http://www.html.de/images/comuse_entwurf.png">
</p>
</div>
</body> 
</html>

Nun ist es links und rechts zentriert. Oben und unten allerdings nicht.
Wenn man nun einen Höhe Auflösungen hat, ist es oben/unten nie zentriert bzw. wenn man ggf. scrollt.
Ich würde es gerne so haben, dass das Logo immer genau in der Mitte ist, auch wenn man scrollen muss oder etc.
Gibts da eine Möglichkeit?
 
Zuletzt bearbeitet:
Werbung:
farchris schrieb:
wie kann ich es machen, dass ein Logo immer genau in der Mitte ist (egal bei welcher Auflösung).
Zum Vergrößern anklicken....
Das hat nichts mit der Auflösung zu tun. An der zu zentrieren geht nur mit JavaScript und würde keinen Sinn machen.

Was Du vermutlich willst ist das Zentrieren im Viewport.
 
Hallo,
ich hab nun mal durch den Artikel "Horizontale und vertikale Zentrierung" folgenden Entwurf online gestellt:
http://comuse.org/entwurf/test.html

1. Wie bekommt man den Abstand zwischen dem Div und dem Logo auf 0px. (Logo soll direkt an der schwarzen Linie sein)
2. Bekommt man das Logo genau Mittig in das Div? (das Logo soll IMMER in der Mitte sein auch wenn sich das Div verschiebt)

Danke!
 
1. Indem man den Abstand des Textabsatzes, den die meisten Browser auf etwas ungleich 0 einstellen, auf 0 setzt.
2. Ja.
 
Werbung:
1. Logo ohne Zwischenabstand:
Lass den p-Tag einfach weg.

2. Logo in der Mitte:

Code: 
.logo {margin-top: 150px;}

Code: 
<img class="logo" src="images/entwurf.png" width="800 height="200px" alt="Logo">
 
Werbung:
Es geht auch so:
Code: 
#logo
{
background-color: #FFFFFF;
width: 800px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -100px;
}

Code: 
<img id="logo" src="images/entwurf.png" 200px="" alt="Logo" width="800">

Auf die Klasse .logo kannst du dann in HTML und CSS verzichten.

Die Margin-Werte entsprechen der Hälfte der Bildgröße mit negativem Vorzeichen.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben