nicht angemeldet
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