✔ Layout die 13*20^13te

Geflügel · 16. März 2006

Das Problem im Anhang.

- der IE lässt Platz zwischen dem Menu und dem Body
- Der Mozilla verschiebt das erste Wort im Body

Hier mal der QC:

Code:

<!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: relative;
			width: 759px;
			margin-top: 30px;
		}
		div#tabs {
			background-image: url(border.top.png);
			background-repeat: no-repeat;
			height: 35px;
		}
		div#tabs div {
			background-repeat: repeat-x;
			float: left;
			height: 41px;
			margin: 0px;
		}
		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;
			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 style="float: left; clear: both; background-color: #000;">&nbsp;</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>

' bin hier gleich am Durchdrehen, vielen Dank!

Maik · 16. März 2006

Hier der überarbeitete Quelltext:

[edit @ 7:00]

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;
                        padding: 0;
                }
                div {
                        margin: 0px;
                        padding: 0;

                }
                div#main {
                        left: 10px;
                        position: relative;
                        width: 759px;
                        margin-top: 30px;
                }
                div#tabs {
                        background-image: url(border.top.png);
                        background-repeat: no-repeat;
                        height: 35px;
                }
                div#tabs div {
                        background-repeat: repeat-x;
                        float: left;
                        /*height: 41px;*/
                        margin: 0px;
                }
                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;
                        padding: 10px;
                        margin: 0;
                }
                /* 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 style="clear:left;margin:0;padding:0;height:0;font-size:0;line-height:0;">&nbsp;</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>

Geflügel · 16. März 2006

Sehe ich das richtig, dass du nur das "height: 41px;" auskommentiert und den Clear-Layer eingeführt hast?

Nach deiner Variante wird zwar der Zwischenraum nicht mehr angezeigt und der Text im Body wird auch korrekt positioniert, aber die Navigation macht jetzt Probleme. Sie weiss ja jetzt schließlich nicht mehr wie hoch sie ist.

Problem im Anhang.
Vielen Dank schonmal *freu*

Maik · 16. März 2006

Ich hatte die Höhe 'testweise' auskommentiert, da sie nicht im Einklang mit der Höhenangabe height:35px für das übergeordnete DIV#tabs steht, in dem die Navigation eingebettet ist.

Ersetze also mal die 41px durch 35px.

Geflügel · 16. März 2006

Ach Gott, das war schon der erste Fehler. Ich weiss garnicht wo die 35 Pixel herkommen. :/ Es sind natürlich 41 Pixel.

Mit deinem Clear Layer in Mozilla entsteht jetzt immernoch diese Fette Lücke. Lasse ich den Layer weg, das passt alles, AUßER, dass das erste Wort im "Body" wieder im Raum steht...

Ich hab' dir die Dateien mal angehängt. DANKE schonmal im Vorraus. ;-)

Maik · 16. März 2006

Erweitere mal die 'Komponenten' mit den fett-markierten CSS-Eigenschaften:

Code:

div#tabs div {
                        background-repeat: repeat-x;
                        float: left;
                        height: 41px;
                        margin: 0px;
                        padding: 0;
                }

Code:

<div style="clear:left;margin:0;padding:0;height:0;font-size:0;line-height:0;">&nbsp;</div>

Geflügel · 16. März 2006

Danke.

Und wie positioniere ich jetzt meinen Text innerhalb der Tabs richtig?
Ich meine, durch das padding: 0; werden meine padding-Angaben zur Ausrichtung der Tabbeschriftungen verschmissen...

Maik · 16. März 2006

Bin jetzt auf'm Sprung ins Office..., werde der offenen Frage heute Nachmittag mal nachgehen.

Geflügel · 16. März 2006

Das wäre super. Danke.

Maik · 17. März 2006

Habe gestern Abend zwei Stunden mit dem CSS-Code experimentiert, leider ohne Erfolg

✔ Layout die 13*20^13te

Geflügel

Erfahrenes Mitglied

Anhänge

Maik

Geflügel

Erfahrenes Mitglied

Anhänge

Maik

Geflügel

Erfahrenes Mitglied

Anhänge

Maik

Geflügel

Erfahrenes Mitglied

Anhänge

Maik

Geflügel

Erfahrenes Mitglied

Maik

Neue Beiträge