Hilfe bei CSS Containern

[Pro2k]

Ich bin gerade dabei mich näher mit CSS zu beschäftigen um von den Tabellen weg zu kommen. Jetzt häng ich aber, ich hab mir einen einen "Container" gebaut und den will ich jetzt 4 mal anwenden. So wie ich es zuvor über eine Tabelle gemacht habe siehe www.fox-label.com.

<div id="main">
<div id="indexbox">
<div id="boxheader"><a class="box" href="$home/general_info/intro.htm">Our Estate</a></div>
<div id="boxcontent"><img src="pics/home/winter_house.jpg" alt="Our Estate" width="127" height="111" hspace="5" vspace="5" align="right">
Welcome to Lingenfelder Estate Winery, a family operated winery with 13 generations of wine-growing experience in the sunny Pfalz region of
Germany. If you are interested in the history of our winery, want to learn some interesting facts about the Pfalz winegrowing region, need
directions for your next visit, or just want to say hello, this is the place to go.</div>
</div>
<div id="indexbox">
<div id="boxheader"><a class="box" href="$home/general_info/intro.htm">Our Estate</a></div>
<div id="boxcontent"><img src="pics/home/winter_house.jpg" alt="Our Estate" width="127" height="111" hspace="5" vspace="5" align="right">
Welcome to Lingenfelder Estate Winery, a family operated winery with 13 generations of wine-growing experience in the sunny Pfalz region of
Germany. If you are interested in the history of our winery, want to learn some interesting facts about the Pfalz winegrowing region, need
directions for your next visit, or just want to say hello, this is the place to go.</div>
</div>
</div>
Und im CSS steht folgendes:

#main {
width: 540px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 10px 0;
}

#indexbox {
background-color: #FFFF99;
width: 260px;
float: left;
}

#boxheader {
background-image: url(/gif/tap.gif);
text-align: left;
}

#boxcontent {
border-width: 2px;
border-style: solid;
border-color: #B92845;
text-align: justify;
}

Wie bekomm ich das jetzt so hin wie es in der Tabelle war?

[mithrandir]

Es sieht doch auch mit CSS gut aus, oder? Lediglich die Positionierung der Objekte muss noch erledgit werden. Du kannst auch einfach margins zwischen den einzelnen Boxen setzen, z.B. so:

http://selfhtml.teamone.de/css/eigenschaften/randabstand.htm

bye, mith

[Pro2k]

Das Problem ist nur wenn ichmargins setze, dann stehen die Boxen nicht mehr nebeneinander sondern untereinander.

[mithrandir]

Also ich habe deinen Code lediglich um das margin erweitert und habe damit eben 20 Pixel Abstand zwischen den beiden Boxen (die weiterhin nebeneinander sind):

<div id="main">

<div id="indexbox" style="margin-right:10px">
[..]
</div>

<div id="indexbox" style="margin-left:10px">
[..]
</div>

</div>

Ergebnis: http://staff.withingames.net/mithrandir/test.png (mit Mozilla Firefox 0.8 auf Win2K)

bye, mith

[Pro2k]

Danke mir ist es jetzt doch gelungen, mit dem Margin. Hab auch schon alles direkt in die css geschrieben, alles wunderbar. Jetzt wollt ich den #boxcontent mit einem Hovereffekt versehen. Läuft auf Opera wunderbar, doch der IE6 hat NULL checkung vom Hover was kann ich da tun. Hab einfach #boxcontent im css kopiert ":hover" dahinter gesetzt und die hintergrundfarbe geändert.

Außerdem zeigt mir der IE6 die Boxen nicht zentriert an.

EDIT:
So ich hab jetzt die Designtemplates des CMS von Tabellen auf CSS Container umgestellt. Hat erstaunlich gut geklappt. Opera zeigt alles einwandfrei an. Paar Änderungen sind zwar noch nötig, aber OK. Jetzt wurmt mich nur noch der IE, der zeigt mir noch nicht alles so an wie ich es gern hätte.