Container zentrieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anmelden
bild
code
container
datei
design
display
forum
header
hilfe
http
image
impressum
login
position
profil
support
text
type
verfassen
-
Hallo,
ich möchte meinen Container so zentrieren: margin:##WERT##px auto" aber wie genau bzw. woher bekomme ich die Pixel? Und passt das was da dran steht mit margin.....
Danke Gruß Markus. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Nicht margin, sondern align suchst du. http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm
-
Zentrierung mittels "text-align: center" ist zwar auch möglich, ist aber nur ein Workaround für IE <7 und muss natürlich für die Kind-Elemente wieder korrigiert werden.
Ich brauch Prozent Angabe da es in jedem Browser funktioniert.
Beitrag zuletzt geändert: 8.11.2010 17:39:16 von wakeboarder -
left: 50%;
margin-left: -"halbe Containerbreite in Pixel"
Durch das left: 50% wird der Container um 50% nach rechts verschoben, allerdings ist dann die linke Kante bei 50%, also der Hälfte der Bildschirmbreite. Deshalb musst du mit margin-left: -500px (Beispiel für einen Container mit 1000px Breite) den Container wieder zur Hälfte zurückschieben.
Dadurch kannst du ihn für jede Bildschirmauflösung zentriert anzeigen. -
Hallo,
Das funktioniert irgendwie nicht, mir verschiebt es dann die komplette Webseite. Hier mal der Code hatte das margin-left: -500 im CSS Code unten reinkopiert. Woher weiß ich wie breit es tatsächlich ist?
Domain: http://Wakeboarder.lima-city.de
<? session_start();?> <?php print "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <? include("connect.inc.php"); include("inc/onlinestatus.inc.php"); include("inc/status.inc.php"); $usernasme_session = $_SESSION["username"]; $username_get = $_GET["username"]; if($username_session == $username_get){$s = "mp";} ###################User Daten########################### $abfrage_ud = "SELECT * FROM member WHERE username = '$username_session'"; $ergebnis_ud = mysql_query($abfrage_ud); $user_daten = mysql_fetch_object($ergebnis_ud) ; ?> <? $domain = "http://".$_SERVER['SERVER_NAME']; ?> <table><tr><td> <title>Wen kennst Du - Wer kennt dich - Vernetze dich mit anderen</title> <script type="text/javascript" src="<?echo $domain;?>/design/JS.js"></script> <script type="text/javascript" src="<?echo $domain;?>/design/bbcode.js"></script> <script type="text/javascript" src="<?echo $domain;?>/design/suche_username.js"></script> <link rel="stylesheet" type="text/css" href="<?echo $domain;?>/design/standart.css"> <meta name="description" content="WakeStars" /> <meta name="keywords" content="WakeStars" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Language" content="de" /> <meta name="robots" content="INDEX" /> <link href="<?echo $domain;?>/design/style.php" rel="stylesheet" type="text/css" /> <link href="<?echo $domain;?>/design/template.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="<?echo $domain;?>/favicon.ico" type="image/x-icon" /> <link rel="alternate" type="application/rss+xml" title="Galerie Feed" href="<?echo $domain;?>/RSS/galerie.php" /> </script> <style type="text/css"> <!-- #ft-title-ft{ font-weight:normal; padding:5px; width:458px; color:#D3D600; font-size:11px; } #ft-title-ft a{ color:#FFF; font-size:15px; } #ft-title-ft a:hover{ text-decoration: underline; curser: pointer; } --> a, img { border: 0px none; } </style> </head> <body> <div id="zentrierer" style="display: none;"> </div> <div id="header"> <div class="bildHochladen"><a href="<?echo $domain;?>/Bild-hochladen.php" class="icona"> <img src="<?echo $domain;?>/icon_header/icon_plus.gif" alt="Bild hochladen" width="16" height="16" /></a> <ul class="bildHochladenDown round"> <li> <a class="pict" href="<?echo $domain;?>/Bild-hochladen.php" style="text-decoration: none">Bild hochladen</a></li> <li> <a href="<?echo $domain;?>/Tutorial-hochladen.php" style="text-decoration: none">Tutorial hochladen</a></li> <li> <a href="<?echo $domain;?>/Download-hochladen.php" style="text-decoration: none">Download hochladen</a></li> <li> <a href="<?echo $domain;?>/Anzeige-aufgeben.php" style="text-decoration: none">Inserat verfassen</a></li> <li> <a href="<?echo $domain;?>/Blog/eintragen.php" style="text-decoration: none">Blogeintrag verfassen</a></li> </ul> </div> <div class="dn icona"><span class="dnHide"><strong> <a href="login/">Login</a></strong></span><a class="icona" style="margin-top: 0pt;" target="_blank" href="<?echo $domain;?>/login/"><img src="<?echo $domain;?>/icon_header/icon_key.gif" alt="Login" width="16" height="16" /></a></div> <div class="dn icona"><span style="margin-left: -30px;" class="dnHide"><strong><a href="<?echo $domain;?>/anmelden/">Kostenlos registrieren</a></strong></span><a href="<?echo $domain;?>/anmelden/" style="margin-top: 0pt;" class="icona"><img src="<?echo $domain;?>/icon_header/icon_profil.gif" alt="Registrieren" width="16" height="16" /></a></div> <a href="register"> <img src="<?echo $domain;?>/icon_header/logo.gif" class="logo" alt="WakeStars" width="180" height="36" /></a> <br class="clear" /> </div> <div id="navigation" class="round"> <form name="dieSuche" class="search" action="<?echo $domain;?>/Suchen.php" method="post"> <input name="suche" class="field" value="" type="text" size="20" /> <input alt="Absenden" src="<?echo $domain;?>/icon_header/icon_search.gif" class="button" type="image" width="33" height="23" /> </form> <div class="bildHochladen"><a href="Forum" class="navi sonst"> <img src="<?echo $domain;?>/icon_header/icon_more.gif" alt="Tutorials" style="margin-top: 6px;" width="11" height="7" /> </a> <ul style="margin-left: -107px;" class="bildHochladenDown round"> <li><a class="extra forums" href="<?echo $domain;?>/Forum/">Forum</a></li> <li><a class="extra tut" href="<?echo $domain;?>/Suchen/">Suchen</a></li> <li><a class="extra down" href="<?echo $domain;?>/Support/">Support</a></li> <li><a class="extra markt" href="<?echo $domain;?>/downloads.php">Downloads</a></li> </ul> </div> <?php if ($username_session !== null) { ?> <!-- Eingeloggter Bereich --> <a class="navi wallpaper" href="<?echo $domain;?>/logout.php/" style="text-decoration: none">Logout</a> <a class="navi wallpaper" href="<?echo $domain;?>/gruppen/" style="text-decoration: none">Gruppen</a> <a class="navi wallpaper" href="<?echo $domain;?>/veranstaltungen/" style="text-decoration: none">Events</a> <a class="navi wallpaper" href="<?echo $domain;?>/nachrichten/" style="text-decoration: none">Nachrichten</a> <a class="navi wallpaper" href="<?echo $domain;?>/meinefreunde/" style="text-decoration: none">Freunde</a> <a class="navi wallpaper" href="<?echo $domain;?>/News/" style="text-decoration: none">News</a> <a class="navi wallpaper" href="<?echo $domain;?>/$username_session" style="text-decoration: none">Profil</a> <?php } else { ?> <a href="<?echo $domain;?>/impressum.php" class="navi sonst" style="text-decoration: none">Impressum</a> <a href="<?echo $domain;?>/hilfe.php" class="navi zeich" style="text-decoration: none">Hilfe</a> <a class="navi wallpaper" href="<?echo $domain;?>/Forum/" style="text-decoration: none">Forum</a> <a class="navi dim" href="<?echo $domain;?>/Support/livezilla.php?code=U0VSVkVSUEFHRQ__" style="text-decoration: none">Support</a> <a class="navi digku" href="<?echo $domain;?>/anmelden/" style="text-decoration: none">Anmelden</a> <?php } ?> <a class="navi foto" href="<?echo $domain;?>" style="text-decoration: none">Startseite</a> <a class="navi uebersicht" href="<?echo $domain;?>"> <img src="<?echo $domain;?>/icon_header/icon_home.gif" alt="WakeStars" width="16" height="16" /></a><a href="<?echo $domain;?>" class="navi uebersicht"> </a> </div> <ul class="color"> <li class="red"> </li> <li class="orange"> </li> <li class="yellow"> </li> <li class="green"> </li> <li class="mh"> </li> <li class="blue"> </li> </ul> <div id="men" style="width: 220; height: 314; float:left;"> <p class="img"> <img id="profile_pic" class="logo img" alt="User Bild" src="<?php echo $domain;?>/img/thumb1/<?php echo $bild;?>" width="200" height="150"> <a href="">Fotos von mir zeigen</a> <a href="">Mein Profil bearbeiten</a> </p> <p class="bsection"><a href="">Schreib etwas über dich</a></p> <div class="bsection"> <h2>Informationen</h2> <dl> <dt>Geburtstag:</dt> <dd>20. Januar 1994</dd> <dt>Derzeitiger Wohnort:</dt> <dd>Germany</dd> </dl> </div> </div> <div id="content"> </div> </body> </html> -
Ja du musst doch wissen welchen "Container" du zentrieren möchtest, und für den muss natürlich dann der Code gelten.
Welchen Wert du bei margin-left einfügen musst hängt von der Gesamtbreite des Containers ab, falls du die auch nicht kennen solltest würde ich mir Gedanken machen, oder einfach den Ersteller des Codes fragen ;) -
Siehe mal http://wakeboarder.lima-city.de und das sollte in der Mitte sein ;)
-
warum hast du außen ne Tabelle drumrumgebaut???
mach den Table-Mist weg und setz statt dessen einen DIV wo du alles reinpackst.
Diesen gibtst du dann eine ID und gibst dieser ID mittels CSS die Werte wie alfr3d es schon beschrieben hat.
Allerdings solltest du da noch ein width und position:absolute mit angeben.
-
Ok, habe es nun.
Folgendes Problem:
Habe einen Header und darunter werden ja sämtliche Dateien angezeigt. Der Header zeigt aber die Dateien darunter falsch an. Wenn ich die Datei z.B. Impressum.php oder Hilfe.php aufrufe ohne Header wird es richtig angezeigt... aber mit Header wird es falsch dargestellt auch in der falschen Schriftgröße. Ich glaube es liegt an dem Menü links mittig.
Screen: http://s13.directupload.net/images/101108/lvy2oagj.jpg
Code CSS:
* {margin:0;padding:0;font:normal normal normal 1em/1em sans-serif;text-decoration:none;} body {font-size:10px;} #men {width:218px;} #men p, #men div {margin:9px;} .img a {border-bottom:1px solid #99f;} .bsection {border:1px solid #99f;} .img a, .bsection * {padding:.3em;} a, dt {color:#aad;display:block;} h2 {background:#eef;color:#779;font-weight:bold;font-size:1.1em;}
Was ist darin falsch, das den restlichen Code mit falsch anzeigt? Oben passt alles am Header.
-
Hier ein CSS-Script, bei dem es funzt! Die Werte musst du natürlich anpassen.
#container
{
position:absolute;
left:50%;
top:50%;
margin-left:-430px;
margin-top:-600px;
width:860px;
height:1200px;
} -
Habs schon ;) aber kannst ja mal mein letzten Thread lesen.
-
...hmm, könnte an der kurzschreibweise (font) in der 1. Zeile liegen. Kommentiere sie doch mal aus. Wenn der darunterliegende Text dann korrekt dargestellt wird, definiere die Fontangaben einzeln. Guckst du hier...
http://www.css4you.de/Schrifteigenschaften/font.html
wakeboarder schrieb: Ok, habe es nun.
Folgendes Problem:
Habe einen Header und darunter werden ja sämtliche Dateien angezeigt. Der Header zeigt aber die Dateien darunter falsch an. Wenn ich die Datei z.B. Impressum.php oder Hilfe.php aufrufe ohne Header wird es richtig angezeigt... aber mit Header wird es falsch dargestellt auch in der falschen Schriftgröße. Ich glaube es liegt an dem Menü links mittig.
Screen: http://s13.directupload.net/images/101108/lvy2oagj.jpg
Code CSS:
* {margin:0;padding:0;font:normal normal normal 1em/1em sans-serif;text-decoration:none;} body {font-size:10px;} #men {width:218px;} #men p, #men div {margin:9px;} .img a {border-bottom:1px solid #99f;} .bsection {border:1px solid #99f;} .img a, .bsection * {padding:.3em;} a, dt {color:#aad;display:block;} h2 {background:#eef;color:#779;font-weight:bold;font-size:1.1em;}
Was ist darin falsch, das den restlichen Code mit falsch anzeigt? Oben passt alles am Header.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
