nicht angemeldet
Zentrierung von Body-Elementen
Hallo Ihr Lieben,
arbeite seit ein paar Tagen an meiner ersten Homepage. Es soll eine Seite für eine Musik-Band werden. Also bisher hab ich eigentlich meine Ideen umsetzen können und ich bin auch zufrieden damit. Ich hab´s zumindest geschafft eine Galerie (pop-ups) und einzelne Lieder (mithilfe von <audio controls>) einzubinden :), auch wenns eine schwere Geburt war. Meine Seite besteht eigentlich nur aus einer Tabelle mit zwei Spalten. Die einzelnen Zellen sind jeweils Weiss mit einem transparenten Rand und einem Abstand zwischen den einzelnen Zellen (cellspacing). Somit entsteht halt der Effekt dass jeder Absatz einer Spalte eine einzelne "Zelle" bekommt. Die Tabelle ist auch schon zentriert (zumindest auf meinem Monitor) und mithilfe eines wrappers geschützt vor überlappungen und verschiebungen etc. Also eigentlich alles in Ordnung soweit. Und jetzt beisst es aber aus. Mein Problem: Ich habe zwei Monitore. Zieh ich nun mein Browser Fenster nach rechts weiter so dass es in x-achse größer wird bleibt mein Inhalt (Tabelle) stehen. Wenn ich mir andere Seiten anschau geht der Inhalt mit und bleibt immer zentriert, egal wie groß das Fenster ist. Ich will nicht dass die Seite auf größeren Monitoren linkslastig ist. Ich hab schon viel probiert mit absoluten positionierungen und %-werten bei der Angabe von breiten, höhen etc. Eigentlich müsste doch die Tabelle oder der wrapper der sie einhüllt zentral auf der Seite positioniert werden können. Ich bin mir sicher dass es in Prozenten angegeben werden muss, nur wo und was genau. Kann man nicht den kompletten body so zentrieren? Hier mal mein Html Code und das Stylesheet. Sicher sind da einige Fehler drinnen daher bin ich für jeden Ratschlag oder Feedback dankbar. Ich hab mein bestes gegeben :), ich hab links, namen und allgemeine persönliche angaben geändert:
HTML5:
<!doctype html>
<html>
<head>
<title>unserbandname</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta name="date" content="2013-07-02To11:08">
<meta name="author" content="meinname">
</head>
<body>
<div id="wrapper">
<table border="0" cellspacing="40" cellpadding="10" frame="void">
<colgroup>
<col width="400">
<col width="300">
</colgroup>
<tr>
<td><p id="k1">welcome... Check it out and have fun
while <a href="soundcloud link">listening</a>.Greez</p>
<p>music</p>
<p id="k3">trackname<br><img src="cover.gif" width="400" height="400" alt="grafik"><audio controls height="100" width="100">
<source src="trackname.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio><a href="bandcampseite"> buy</a></p>
<p id="k3">trackname<br><img src="cover.gif" width="400" height="400" alt="grafik"><audio controls height="100" width="100">
<source src="trackname.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio><a href="bandcampseite"> buy</a></p>
<p id="k3">trackname<br><img src="cover.gif" width="400" height="400" alt="grafik"><audio controls height="100" width="100">
<source src="trackname.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio><a href="bandcampseite"> buy</a></p>
<td> <p id="k3">news</p>
<p id="k4">13-09-16 @ da und da<br>13-02-08 @ beim sepp<br>13-09-24 @ radio bux<br>13-08-22 @ bloskabein<br>new on..<br>check this..<br>here is this
<p id="k4">contact and bookings:<br>bookings@daunda.de<br><a href="facebookprofil</a></p>
<p id="k3">pics</p>
<p id="k2"> <a href="hirsch big.jpg"
onClick="F1 = window.open('hirsch big.jpg','Fenster1','width=400,height=380,left=0,top=0'); return false;"><img src="hirsch small.jpg" width="80" height="60" border="0" alt="Vorschaubild"></a>
<a href="base big.jpg"
onClick="F1 = window.open('base big.jpg','Fenster1','width=400,height=380,left=0,top=0'); return false;"><img src="base small.jpg" width="80" height="60" border="0" alt="Vorschaubild"></a>
<a href="baum big.jpg"
onClick="F1 = window.open('baum big.jpg','Fenster1','width=400,height=380,left=0,top=0'); return false;"><img src="baum small.jpg" width="80" height="60" border="0" alt="Vorschaubild"></a>
<a href="oma big.jpg"
onClick="F1 = window.open('oma big.jpg','Fenster1','width=400,height=380,left=0,top=0'); return false;"><img src="oma small.jpg" width="80" height="60" border="0" alt="Vorschaubild"></a>
<a href="flo big.jpg"
onClick="F1 = window.open('opa big.jpg','Fenster1','width=400,height=380,left=0,top=0'); return false;"><img src="opa small.jpg" width="80" height="60" border="0" alt="Vorschaubild"></a></td>
</tr>
</table>
</div>
</body>
</html>
und hier mein Stylesheet:
body {
margin: 300px 100px 10px 100px;
background-color: #000000;
background-image: url("back gscheid.gif");
background-repeat: repeat-y;
background-attachment:fixed;
background-position:-220px 50px;
}
p {
font-family: "andele mono", serif;
text-align: left;
text-align: justify;
font-size: 14px;
letter-spacing: 3px;
background: white;
border-width: thin;
border-color: transparent;
border-style: solid;
}
table {
margin-left:auto;
margin-right:auto;
margin-top: -40px;
padding-top: 0px;
}
#k1 {
color: black;
margin: auto;
text-indent: 30px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
#k2 {
color: black;
margin-top: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
#k3 {
color: black;
margin-top: auto;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
#k4 {
color: grey;
margin-top: auto;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
td {
height: 200px;
vertical-align:top;
}
a {
color: grey;
text-decoration:none;
}
a:hover {
color: blue;
}
#wrapper {
background-color: transparent;
width: 1200px;
}
Ich hoffe mir kann jemand sagen was ich falsch gemacht habe bzw. mir zeigen wies richtig geht. Ich vermute dass ich allgemein was falsch verstanden hab bei der positionierung von elementen und eben deren werte (%,px,em..). Das Forum is nebenbei echt super, hab ziemlich alles was ich wissen wollte bisher hier erfahren. Danke Grüße
-
Hallo Ihr Lieben,
moin!
also viele werden hier wahrscheinlich noch schreiben, dass du dich von der Tabelle verabschieden solltest, da eine Tabelle für Tabellen ist und nicht für layout, aber ich lass das mal, da ich selbst gern mal Tabellen nutze ^^und hier mein Stylesheet:
body {
margin: 300px 100px 10px 100px;
also links und rechts ist schonmal ein 100px breiter rand, welcher erstmal grundsätzlich NICHTS mit der zentrierten Positionierung zu tun hat
was ich persönlich immer mache, ist erstmal zu sagen, dass das komplette dokument auch erstmal tatsächlich 100% der breite des browserfensters einnehmen soll über html, body { width:100%; }
zumindest kann das schonmal ein grund sein, warum es nicht mittig gezeigt wird, andere mögen mich hier korrigierenbackground-color: #000000;
background-image: url("back gscheid.gif");
background-repeat: repeat-y;
background-attachment:fixed;
background-position:-220px 50px;
}table {
margin-left:auto;
margin-right:auto;
margin-top: -40px;
padding-top: 0px;
}#wrapper {
background-color: transparent;
width: 1200px;
}<!doctype html> <html> <head> <title>unserbandname</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <meta name="date" content="2013-07-02To11:08"> <meta name="author" content="meinname"> </head> <body> <div id="wrapper"> <table border="0" cellspacing="40" cellpadding="10" frame="void"></table> </div> </body> </html>also der wrapper ist ein div, ein div ist standardmäßig ein blockelement, ergo nimmt es die volle breite des elternelementes ein, was ja der Body ist.
innerhalb des div sitzt nun ein weiteres element, in diesem fall die Tabelle.
WARUM sollte die Tabelle nun mittig im wrapper sitzen?
es gibt keinen grund für den browser dies zu tun
du könntest also im #wrapper-scc sowas wie text-align: center; verwenden, ich habe es zwar jetzt nicht geetestet, aber es sollte abhilfe schaffen (hoffe ich)LG SorgenKind Mech
-
Hallo sorgenkind,
danke für den tipp erstmal! das zentrieren funktioniert einwandfrei ->
body, html {width:900px;margin:0 auto;} und mit <section> die position der tabelle (ohne wrapper!!) im bezug zum elternelement zentriert. den hintergrund hab ich durch
background-position:center center; ebenfalls mittig positioniert. Genau so hab ichs mir auch vorgestellt. ;) Egal wie groß das Browserfenter ist, es bleibt zentral.
Was mich jetz noch nervt obwohl ich schon damit gernechnet habe: Im Internet Explorer werden Hintergrund Position,Tabellen Position,Schriftart und Parallax Background (stellar.js) falsch dargestellt. Das stellar plugin funktioniert garnicht, was auch evtl. zur falschen positionierung des backgrounds im IE führt. Hab die Seite mit Opera, Firefox, Cyberfox und Internet Explorer10 getestet. Nur IE macht probleme. Kennt vielleicht jemand ein tool, plugin etc. mit dem man stylesheets IE tauglich machen kann?Lg Noob
-
Hallo sorgenkind,
danke für den tipp erstmal! das zentrieren funktioniert einwandfrei ->
body, html {width:900px;margin:0 auto;} und mit <section> die position der tabelle (ohne wrapper!!) im bezug zum elternelement zentriert. den hintergrund hab ich durch
background-position:center center; ebenfalls mittig positioniert. Genau so hab ichs mir auch vorgestellt. ;) Egal wie groß das Browserfenter ist, es bleibt zentral.hm ... warum setzt du Body und html auf 900px fest? theoretisch müsste ja, wenn das innere browserfenster über 900px geht die Zentrierung nicht mehr funktionieren? was ist mit 100%?
Was mich jetz noch nervt obwohl ich schon damit gernechnet habe: Im Internet Explorer werden Hintergrund Position,Tabellen Position,Schriftart und Parallax Background (stellar.js) falsch dargestellt.
das js kenn ich leider nicht, aber im IE lässt sich alles recht gut mittels der entwicklerkonsole nachvollziehen (F12)
Lg Noob
LG mech
-
-