Richtig, weil ich es aus dem body rausgenommen habe und einen weiteren (wahrscheinlich sinnlosen) div-container eingesetzt habe, der eigentlich die gleiche funktion wie body hat. Wenn ich das aber nicht machen will (sondern es im body lassen), was muss ich dann anders machen als im 1. der beiden geposteten quelltexte?
Ich werde das ganze system nochmal überdenken bezgl. semantik.
EDIT:
So… habe nun alles einmal überarbeitet und die Bilder in ne Liste gepackt. Dies (in Verbindung mit dem Löschen mancher Box) hat viele Probleme gelöst.
JEDOCH: Jetzt sind die Bilder zwar alle in der Liste und die erste Zeile Bilder ist auch am richtigen Platz. Die zweite Reihe jedoch nicht. Wie kann ich das semantisch richtig ändern?
Außerdem verwundert mich etwas, dass der Rahmen, der die Liste (ul) umgeben sollte nicht die Listen-Elemente umfasst, sondern präzise davor aufhört.
Wenn ich das float:left rausnehme, dann umschließt der Rahmen die gesamte Liste, allerdings sind die Bilder dann wieder an der falschen Stelle.
Außerdem: wenn ich das Bild jetzt sehr stark heranzoome, dann verändern die Bilder auch wieder ihre relative Position zum Hintergrund.
Falls wieder Fehler in dem Aufbau dieser Sache sind: ich habe mich nach diesem Tutorial gerichtet.
Das Bilderpositionsproblem habe ich gelöst und auch deren Verschiebung beim reinzoomen. (Aber lasst mich raten… da 2 Tabellen draus zu machen war wieder semantisch nicht korrekt, nicht wahr? Wie dann aber sonst?)
<UPDATE 2>
Ich habe nun auch das mouseover per css gelöst, was aber den Code nicht unbedingt verkürzt hat. Aber es funktioniert.
Was ich mich weiterhin frage: Warum ist der Rahmen, der die Liste umrahmen soll nur gerade groß genug um an die Bilder heran zureichen?
Hier der aktuelle Code:
[CODE]
"float: right" element in containing box
body { padding: 0 0 0 0 ;
margin: 0 0 0 0;
}
#seite {
background-image:url(img/bg.jpg); background-repeat:no-repeat;
background-position: center 0px;
min-width: 760px;
margin: 0;
padding: 0;
}
#rahmen {
text-align: center; /* Seiteninhalt wieder links ausrichten /
margin: 0 auto; / standardkonforme horizontale Zentrierung */
width: 760px;
height: 1080px;
min-width: 760px;
padding: 0 0 0 0;
}
#inhalt {
border: solid 1px #FFFFFF;
width: 610px;
height: 900px;
padding-left: 75px;
padding-right: 75px;
}
ul#liste { list-style-type: none;
padding-left: 150px;
padding-top: 45px;
margin: 0;
border: #BCBCBC solid 1px;
}
ul#liste2 { list-style-type: none;
padding-left: 150px;
padding-top: 0px;
margin: 0;
border: #BCBCBC solid 1px;
}
ul#liste li, ul#liste2 li{
display: inline;
}
ul#liste li a
{
float: left;
position: relative; top: 0px; left: 0px;
}
ul#liste2 li a
{
float: left;
position: relative; top: -21px; left: 0px;
}
#liste img, #liste2 img
{ border: 0px;
}
a#exp {
display:block;
height:38px;
width:108px;
border:0px;
padding:0px;
background: transparent url(img/menu/a1.png) 0px 0px no-repeat;
}
a:hover#exp{
background: transparent url(img/menu/a1u.png) 0px 0px no-repeat;
}
a#char {
display:block;
height:38px;
width:174px;
border:0px;
padding:0px;
background: transparent url(img/menu/a2.png) 0px 0px no-repeat;
}
a:hover#char{
background: transparent url(img/menu/a2u.png) 0px 0px no-repeat;
}
a#the {
display:block;
height:45px;
width:133px;
border:0px;
padding:0px;
background: transparent url(img/menu/a3.png) 0px 0px no-repeat;
}
a:hover#the{
background: transparent url(img/menu/a3u.png) 0px 0px no-repeat;
}
a#fol {
display:block;
height:59px;
width:123px;
border:0px;
padding:0px;
background: transparent url(img/menu/a4.png) 0px 0px no-repeat;
}
a:hover#fol{
background: transparent url(img/menu/a4u.png) 0px 0px no-repeat;
}
a#sze {
display:block;
height:42px;
width:170px;
border:0px;
padding:0px;
background: transparent url(img/menu/b1.png) 0px 0px no-repeat;
}
a:hover#sze{
background: transparent url(img/menu/b1u.png) 0px 0px no-repeat;
}
a#aut {
display:block;
height:42px;
width:164px;
border:0px;
padding:0px;
background: transparent url(img/menu/b2.png) 0px 0px no-repeat;
}
a:hover#aut{
background: transparent url(img/menu/b2u.png) 0px 0px no-repeat;
}
a#kon {
display:block;
height:42px;
width:126px;
border:0px;
padding:0px;
background: transparent url(img/menu/b3.png) 0px 0px no-repeat;
}
a:hover#kon{
background: transparent url(img/menu/b3u.png) 0px 0px no-repeat;
}
}
[/CODE]Das ergibt dann diese Seite.
Wenn ich allerdings den Code von #Seite in den body {…} packe:
body { padding: 0 0 0 0 ;
margin: 0 0 0 0;
background-image:url(img/bg.jpg); background-repeat:no-repeat;
background-position: center 0px;
min-width: 760px;
}dann kommt diese Seite ( Alter Code aber der entscheidende Teil sit noch gleich. Fenster bitte ganz schmal ziehen… dann verschieben sich Inhalt und Hintergrundbild zueinander.)
