✔ Layout die 13*20^13te

Status
Nicht offen für weitere Antworten.
Auweia.. Trozdem VIEL DANK.

Hast du denn eine Idee, wie ich das anders realisieren könnte?
Ist mein Konzept so schei*e?
 
Das will ich so nicht sagen, aber irgendwas stimmt da nicht, wenn ich die unterschiedlichen Darstellungen im Firefox und IE vergleiche.
 
Ja, jetzt schon.

Aber ich rede vom ursprünglichen Layout mit den unterschiedlichen Darstellungen (siehe dein Eingangsposting).
 
Achso, hast Recht. Ich werd' nochmal rumfummeln. Ist ja sehr merkwürdig, dass das Ganze nicht funktionobelt.. Danke dir!!
 
Okay, ich habe jetzt die Lösung gefunden. Das Stichwort lautet Boxmodell ;)

Code: 
div#tabs div {
                        float: left;
                        height: 28px; 
                        margin: 0px;
                        padding: 13px 0 0 0; 
                }
Anmerkung: die CSS-Eigenschaft clear:left lässt sich auch für das DIV#body festlegen und macht das DIV.clear überflüssig.

Hier nochmal der überarbeitete HTML- und CSS-Code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>n/a</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen, projection">
                body {
                        background-color: #efefef;
                        margin: 0px;
                }
                div {
                        margin: 0px;
                }
                div#main {
                        left: 10px;
                        position: absolute;
                        width: 759px;
                        margin-top: 30px;
                }
                div#tabs {
                        background-image: url(border.top.png);
                        background-repeat: no-repeat;
                        height: 41px;
                }
                div#tabs div {
                        background-repeat: repeat-x;
                        float: left;
                        height: 28px;
                        margin: 0px;
                        padding: 13px 0 0 0;
                }
                div#tabs a {
                        font-family: Tahoma, Arial, Verdana;
                        font-size: 11px;
                        font-weight: bold;
                        text-decoration: none;
                }
                div.inact_default_bg a {
                        color: #ededed; /* grey */
                }
                div.inact_default_bg a:hover {
                        color: #fff;
                }
                div.act_default_bg a {
                        color: #fff;
                }
                div.act_default_bg,
                div.inact_default_bg {
                        padding-left: 4px;
                        padding-right: 4px;
                }
                div.inact_special_left {
                        background-image: url(inactive.special.left.png);
                        background-repeat: no-repeat;
                        width: 15px;
                }
                div.inact_default_left {
                        background-image: url(inactive.default.left.png);
                        background-repeat: no-repeat;
                        width: 6px;
                }
                div.inact_default_bg {
                        background-image: url(inactive.default.bg.png);
                        background-repeat: repeat-x;
                        display: inline;
                        padding-top: 13px;
                }
                div.inact_default_right {
                        background-image: url(inactive.default.right.png);
                        background-repeat: no-repeat;
                        width: 6px;
                }
                div.inact_right_next_active {
                        background-image: url(inactive.right.next.active.png);
                        background-repeat: no-repeat;
                        width: 6px;
                }
                /* describes an active tab */
                div.act_default_left {
                        background-image: url(active.default.left.png);
                        background-repeat: no-repeat;
                        width: 1px;
                }
                div.act_default_bg {
                        background-image: url(active.default.bg.png);
                        background-repeat: repeat-x;
                        display: inline;
                        padding-top: 10px;
                        /* a caption of an active tab is white */
                        color: #fff;
                }
                div.act_default_right {
                        background-image: url(active.default.right.png);
                        background-repeat: no-repeat;
                        width: 5px;
                }
                /* body */
                div#body {
                        background: url(border.left.right.png) repeat-y #fff;
                        clear: left;
                        padding: 10px;
                }
                /* footer */
                div#footer {
                        height: 8px;
                        background-image: url(border.bottom.png);
                        background-repeat: no-repeat;
                }
        </style>
        </head>
<body>

<div id="main">
        <div id="tabs">
                <div class="inact_special_left"></div>
                <div class="inact_default_bg"><a href="#">Ich</a></div>
                <div class="inact_default_right"></div>

                <div class="inact_default_left"></div>
                <div class="inact_default_bg"><a href="#">lerne</a></div>
                <div class="inact_default_right"></div>

                <div class="inact_default_left"></div>
                <div class="inact_default_bg"><a href="#">heute</a></div>
                <div class="inact_default_right"></div>

                <div class="inact_default_left"></div>
                <div class="inact_default_bg"><a href="#">wieder</a></div>
                <div class="inact_right_next_active"></div>

                <div class="act_default_left"></div>
                <div class="act_default_bg"><a href="#">CSS</a></div>
                <div class="act_default_right"></div>
        </div>
        <div id="body">ssd<br />xsd<br />ddsssd<br />xsd<br />ddsdsssd<br />xsd<br />ddsdsds</div>
        <div id="footer"><!-- empty --></div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück