nicht angemeldet
Warum funktioniert die Float-eigenschaft nicht richtig?
Hi, ich will ein dreispaltiges layout bauen, aber der packt mir die container immer untereinander. Hier ist mein code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Klausur Internettechniken 09.01.2008 Henrik Greger (BMD1062026)</title>
<link href="_m/css/main.css" rel="stylesheet" media="all" type="text/css" />
</head>
<body>
<div id="pgwrap">
<div id="head">
<img src="_m/img/head/head.jpg" alt="Banner" class="banner" />
</div>
<div id="contwrap">
<div id="navwrap">
<ul class="nav">
<li class="dunkel"><a href="#"><span class="indent">Startseite</span></a></li>
<li class="hell"><a href="#"><span class="indent">Mehrsprachigkeit</span></a></li>
<li class="dunkel"><a href="#"><span class="indent">Kulturelle Vielfalt</span></a></li>
<li class="hell"><a href="#"><span class="indent">Sprachwandel & -politik</span></a></li>
<li class="dunkel"><a href="#"><span class="indent">Veranstaltungsübersicht</span></a></li>
<li class="hell"><a href="#"><span class="indent">Das Projekt</span></a></li>
<li class="dunkel"><a href="#"><span class="indent">Kongress-Festival</span></a></li>
</ul>
</div>
<div id="page">
<div class="teaserleft">
<h1>EU-HHB 700 Bluetooth Headset</h1>
<img src="_m/img/content/01.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="teaserright">
<h2>Haute Coture</h2>
<p class="narrow">Lorem ipsum dolor sit ametnt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="teaserleft">
<h1>Dekorationsstoff Borsellini</h1>
<img src="_m/img/content/02.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="teaserright">
<h2>Bernhard Wilhelm</h2>
<p class="narrow">Lorem ipsum dolor sit ametnt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="teaserleft half">
<h1>Gateway to Fashion & Style</h1>
<img src="_m/img/content/03.jpg" alt="" />
</div>
<div class="teaserright half">
<h2>Bernhard Wilhelm</h2>
<p class="narrow">Duis autem vel eum iriure dolor in hen consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</div>
<div id="shadowr"></div>
<div class="clr"> </div>
<div id="shadowu"></div>
<div id="footer">
<img src="_m/img/footer/footer.jpg" alt="" />
</div>
</div>
</body>
</html>
body,html{
font-size : 100.01%;
background-image : url(../img/bg/bg.jpg);
background-repeat : repeat-x;
margin : 0;
padding : 0;
}
/*boxing*/
#pgwrap{
width : 47.625em;
height : 71.125em;
margin : 1.8125em auto 0 auto;
}
#head{
width : 47.625em;
height : 11.9375em;
}
#contwrap{
width : 47.25em;
height : 56.625em;
background-image : url(../img/bg/bgcont.jpg);
background-repeat : repeat-x;
float : left;
}
#navwrap{
padding-top : 1.1875em;
width : 10.3125em;
float : left;
}
#page{
width : 36.9375em;
float : left;
}
#shadowr{
float : right;
height : 56.625em;
width : 0.375em;
background-image : url(../img/bg/shadowr.jpg);
background-repeat : no-repeat;
}
#shadowu{
width : 47.5em;
height : 0.375em;
background-image : url(../img/bg/shadowu.jpg);
background-repeat : no-repeat;
}
#footer{
width : 47.6875em;
height : 2.5em;
}
/*content*/
.teaserleft{
height : 22.5em;
width : 26.4375em;
background-color : #fff;
float : left;
}
.teaserright{
height : 22.5em;
width : 10.5em;
float : left;
background-image : url(../img/bg/bgteaser.jpg);
}
.half{
height : 11.6em;
}
/*text*/
h1{
padding : 0 0 0.2em 0;
margin : 0;
color : #fff;
font-family : Arial, sans-serif;
font-size : 0.9em;
font-weight : normal;
width : 29em;
height : 1.1em;
background-color : #f47500;
}
h2{
padding : 0 0 0.2em 0.4em;
margin : 0;
color : #fff;
font-family : Arial, sans-serif;
font-size : 0.9em;
font-weight : normal;
width : 11.275em;
height : 1.1em;
background-color : #5dbc2c;
}
p{
font-family : Arial, sans-serif;
line-height : 140%;
font-size : 0.75em;
padding-left : 0.4em;
margin-right : 0.6em;
}
p.narrow{
margin-right : 0.4em;
}
/*navigation*/
ul.nav{
list-style-type : none;
width : 10.3125em;
padding : 0;
margin : 0;
}
ul.nav li.hell{
font-family : Arial, sans-serif;
font-size : 0.8em;
color : #fff;
height : 1.71875em;
background-color : #f47500;
}
ul.nav li.dunkel{
font-family : Arial, sans-serif;
font-size : 0.8em;
color : #fff;
height : 1.71875em;
background-color : #f43f00;
}
ul.nav li a{
text-decoration : none;
color : #000;
display : block;
width : 12.7em;
height : 1.6em;
}
ul.nav li a:hover{
text-decoration : none;
color : #fff;
display : block;
border : 1px solid #fff;
}
.indent{
margin-left : 0.75em;
}
/*imgclasses*/
.banner{
width : 47.625em;
height : 11.9375em;
}
/*helpful*/
.clr{
clear : both;
visibility : hidden;
height : 0;
}
-
<li class="hell"><a href="#"><span class="indent">Sprachwandel & -politik</span></a></li>
<li class="dunkel"><a href="#"><span class="indent">Veranstaltungsübersicht</span></a></li>mal unabhängig von deinem problem:
hell und dunkel sind schlechte klassennamen - was ist wenn du die farben ändern willst und beide gleich hell haben willst und nur dir sättigung der farbe änderst oder den farbton?im übrigen scheint ist indent auch kein guter klassenname und wahrscheinlich hinreichend überflüssig, da du ohnehin ein li und ein a-element zum formatieren hast
-
Mega verkackt.
ICh brauch Nachhilfe bis September! -
Hi!
Wie stellst Du dir denn Dein Layout vor, und was funktioniert nicht? Ich sehe hier (IE6) eine Seite die ungefaehr so aussieht:
-------------------------------------------------------------
riesiges Banner
-------------------------------------------------------------
| Orange Ueberschrift | gruene Uberschrift
Menue | Bild | Text
| Text |
| |
| Orange Ueberschrift | gruene Uberschrift
| Bild | Text
| Text |
| |Mag sein, dass etwas nicht ganz konform ist und nur der IE es so darstellt. Das pruefe ich jetzt aber nicht, dazu ist mir das zuviel Code zum Durchsehen. Nen anderen Browser hab ich leider nicht.