nicht angemeldet
Website mittig anzeigen lassen
0 0 0 0 0 0
0 
Gunnar Bittersmann
0
Website mittig anzeigen lassen
Hallo, ich hab folgenden CSS-Code geschrieben, und wollte jetzt erreichen, dass alles in der Mitte des Bildschirms steht. Wie erreiche ich das?
body{
background:#9ACD32;
color: #fff;
font-family: arial;
}
#navigation{
width: 900px;
height: 35px;
}
#navigation a{
width: 145px;
height: 35px;
display: inline-block;
color: #0000CD;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #A9A9A9;
}
#navigation a:Hover{
color: #CCFF33;
}
#navigation a.activ{
width: 145px;
height: 35px;
color: #000000;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #d7d7d7;
body{
background:#9ACD32;
color: #fff;
font-family: arial;
}
#navigation{
width: 900px;
height: 35px;
}
#navigation a{
width: 145px;
height: 35px;
display: inline-block;
color: #0000CD;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #A9A9A9;
}
#navigation a:Hover{
color: #CCFF33;
}
#navigation a.activ{
width: 145px;
height: 35px;
color: #000000;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #d7d7d7;
body{
background:#9ACD32;
color: #fff;
font-family: arial;
}
#navigation{
width: 900px;
height: 35px;
}
#navigation a{
width: 145px;
height: 35px;
display: inline-block;
color: #0000CD;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #A9A9A9;
}
#navigation a:Hover{
color: #CCFF33;
}
#navigation a.activ{
width: 145px;
height: 35px;
color: #000000;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #d7d7d7;
-
Hallo, ich hab folgenden CSS-Code geschrieben, und wollte jetzt erreichen, dass alles in der Mitte des Bildschirms steht. Wie erreiche ich das?
Das ist unmöglich - du kannst das Zeug höchstens in der Mitte des Viewports (horizontal, vertikal, beides ...) positionieren.
-
Oh, das tut mir leid, irgendwie ist der css-code mehrmals kopiert worden, hier ist die Richtige Version ;)
body{
background:#9ACD32;
color: #fff;
font-family: arial;}
#navigation{
width: 900px;
height: 35px;}
#navigation a{
width: 145px;
height: 35px;
display: inline-block;
color: #0000CD;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #A9A9A9;}
#navigation a:Hover{
color: #CCFF33;}
#navigation a.activ{
width: 145px;
height: 35px;color: #000000;
text-align: center;
line-height: 35px;
font-size: 24px;
background: #d7d7d7; -
Hallo,
Hallo, ich hab folgenden CSS-Code geschrieben, und wollte jetzt erreichen, dass alles in der Mitte des Bildschirms steht. Wie erreiche ich das?
Es wird aus deinem Text leider nicht ganz klar was du denn Zentrieren möchtest, aber ich nehme an dass du die komplette Seite zentrieren möchtest? Und möchtest du sie vor allem vertikal zentrieren oder ist dir auch wichtig dass sie horizontal zentriert ist?
suit meinte man kann es im Browserfenster, nicht aber auf dem Bildschirm zentrieren, da nicht jeder seinen Browser in Vollbild laufen lässt.
Wenn es darum geht den Inhalt der Webseite in einem Container zentriert im Browserfenster zu haben dann hilft dir vielleicht dieser Codeausschnitt:
CSS:
#container { width: 800px; // sehr wichtig eine breite zu haben sonst gibt es rechts und links keinen Abstand margin: 0 auto; // oben und unten kein abstand, rechts und links auto damit es zentriert wid }HTML:
<!doctype html> <html> <body> <div id="container"> ... weitere inhalte ... </div> </body> </html>Jeena
-
Buhu - da du schon so lange dabei bist, ist das besonders ärgerlich.
-
-
@@Schuer:
nuqneH
Ich würde es genauso machen wie Jeena, der alte Cowboy.
Yippee! Den Colt zücken und wild um sich ballern?
Die Indianer können’s besser. Oder konnten’s, bevor sie dem Feuerwasser des weißen Mannes verfallen sind.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Die Indianer können’s besser. Oder konnten’s, bevor sie dem Feuerwasser des weißen Mannes verfallen sind.
Damals waren aber die Zeiten anders und die Prärie dünn besiedelt. Heute benutzt man mobile Endgeräte und responsive Design statt fluider Bohnensuppe überm offenen Feuer.
Viele Grüße
_Dirk -
Die Indianer können’s besser. Oder konnten’s, bevor sie dem Feuerwasser des weißen Mannes verfallen sind.
http://www.buffalotalks.allthingsnative.com/modules.php?op=modload&name=News&file=article&sid=145
-
-
-
Hallo,
Buhu - da du schon so lange dabei bist, ist das besonders ärgerlich.
Papperlapapp, ich hab jetzt vor allem weil ich so lange dabei bin schon so viele Seiten ohne <div id="container"> gemacht und den Container dann im nachhinein dazubasteln müssen weil da noch ein Schatten oder ein Rahmen, etc. dazu musste dass ich den heutzutage meist automatisch dazu mache und ich habe es noch nie bereut. Spätestens beim nächsten Redesign (was ja alle 2-4 Jahre passiert) bin ich froh dass ich just deshalb das HTML gar nicht anfassen muss.
Jeena
-
-
@@Jeena Paradies:
nuqneH
width: 800px; // sehr wichtig eine breite zu haben sonst gibt es rechts und links keinen Abstand
Nein. Es ist eher wichtig, _keine_ Breite zu haben, sonst gibt es (bei kleineren Viewports) einen horizontalen Scrollbalken.
Die Beschränkung auf eine Breite kann sinnvoll sein, um zu lange Zeilen (und damit Ping-Pong-Blick) zu vermeiden. Diese ist dann aber als _Maximal_breite ('max-width') anzugeben – zweckmäßigerweise in Abhängigkeit von der Schriftgröße, also in em.
Für rechts und links einen kleinen Abstand sorgt 'padding'. Beispiel – ohne überflüssiges Container-'div'.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Nein. Es ist eher wichtig, _keine_ Breite zu haben, sonst gibt es (bei kleineren Viewports) einen horizontalen Scrollbalken.
Scrollbalken? Wurden die nicht längst den Löwen zum Fraß vorgeworfen?
Die Beschränkung auf eine Breite kann sinnvoll sein, um zu lange Zeilen (und damit Ping-Pong-Blick) zu vermeiden. Diese ist dann aber als _Maximal_breite ('max-width') anzugeben – zweckmäßigerweise in Abhängigkeit von der Schriftgröße, also in em.
Schriftgröße hat vor einiger Zeit einen Bruder bekommen. Sie haben ihn »Full Page Zoom« genannt, und seitdem sind die beiden unzertrennlich.
Ich finde es zu einseitig, Dinge allein von Schriftgröße abhängig zu machen. Ältere Schwester hin oder her.
Viele Grüße
_Dirk-
Nein. Es ist eher wichtig, _keine_ Breite zu haben, sonst gibt es (bei kleineren Viewports) einen horizontalen Scrollbalken.
Scrollbalken? Wurden die nicht längst den Löwen zum Fraß vorgeworfen?
Nein, auch dort gibt es scrollbalken, allerdings sind die unsichtbar und werden erst angezeigt wenn man Pan-Gesten ausführt.
Das hat aber etwas damit zu tun, wie Apple die Welt sieht - darum gibt es z.B. auf iOS-Geräten kein position: fixed, weil da eben nicht gescrollt sonder gepanned wird.
-
-
-
Ganze Seite mittig setzen:
<body style="margin: 0px auto"></body>So hab ich es halt gemacht... hat ohne Probleme funktioniert (bislang halt^^)
-
@@hrastyy:
nuqneH
<body style="margin: 0px auto"></body>
So hab ich es halt gemacht...So macht man’s nicht.
hat ohne Probleme funktioniert
Inline-Styles sind problematisch. Trenne Markup (HTML) und Darstellung (CSS)!
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-