nicht angemeldet
2 exakte div container verschiedene größen
Hallo!
Ich war mir nicht sicher unter was ich dies hier reinstellen sollte, da es sich sowohl um HTML als auch CSS handelt (wobei ich mehr von CSS als "Problem" ausgehe).
Ich bin dabei eine Seite zu gestalten. Komischerweise habe ich nun das Problem, dass sich 2 div Container mit exakt gleichen Angaben (Höhe, margin, padding) in der Größe unterscheiden und ich einfach nicht drauf komme weshalb!
w3c konform sind sowohl css als auch html code.
Der div-Container "section" ist hier die gewünschte Größe nach der die Container "placeholder" und "urgent" ausgerichtet werden sollen.
Viele Dank für Hilfe seit 2 Tagen am verzweifeln.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<title>Schwarzes Brett</title>
</head>
<body>
<div id="head_bg">
<div id="header">
<div>
<div id="header_field1"></div>
<div id="header_field2"></div>
<div id="header_field3"></div>
<div id="header_field4"></div>
<div id="header_field5"></div>
<div style="clear:both"></div>
</div>
Digitales Schwarzes Brett
</div>
</div>
<div id="main">
<div class="section">
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
<div>Section 4</div>
</div>
<div class="placeholder">
<div></div>
</div>
<div class="urgent">
<div> Meldungen</div>
</div>
<div class="section_article">
section_article
</div>
<div class="section_article">
section_article
</div>
</body>
</html>
body{
cursor:default;
background-color:#D9D9D9;
font-family:arial;
color:black;
margin:0%;
}/*rdy*/
/* Ab hier die Klassen */
.section div{
background-color:#FFE773;
height:20px;
padding:0.5%;
width:20%;
margin: 1% 4% 0% 0%;
float:left;
text-align:center;
text-decoration: none;
font-weight:bold;
}/*rdy*/
.section{
width:70%;
float:left;
padding: 0% 0% 0.5% 0%;
margin: 0%;
border-bottom:solid silver 3px;
border-right:solid silver 3px;
background-color:black;
}/*rdy*/
.placeholder{
width:3.5%;
float: left;
padding: 0% 0% 0.5% 0%;
margin: 0%;
border-bottom:solid silver 3px;
}/*rdy*/
.placeholder div{
background-color:green;
height:20px;
padding:0.5%;
margin: 1% 4% 0% 0%;
float:left;
}/*rdy*/
.urgent{
/*width:25.3%;
height:2%;
float: right;
padding: 0.5% 0% 0% 0%;
margin: 0% 0% 0% 0%;
background-color:#FD7279;
border-left:none;
text-decoration:underline;
text-align: center;
font-weight:bold;
color:#A30008;
font-size: 135%;*/
width:15%;
float:left;
padding: 0% 0% 0.5% 0%;
margin: 0%;
background-color:black;
border-bottom:solid yellow 3px;
border-right:solid yellow 3px;
}
.urgent div{
background-color:#FD7279;
height:100%;
padding:0.5%;
width:60%;
margin: 1% 0% 0% 0%;
text-align:center;
text-decoration:underline;
font-weight:bold;
clear:both;
}
.urgent_article{
background-color:#FD7279;
color:#A30008;
}
.section_content{
}
.section_article{
border:solid gray 3px;
padding: 0%;
margin: 5% 1% 0.5% 10%;
width: 50%;
height: 11%;
}
/* Ab Hier die Elemente */
#head_bg{
background-color:#FFC273;
height:120px;
margin:0% 0% 1% 0%;
padding: 2% 5% 1% 5%;
} /*rdy*/
#header{
background-color:#FFAC40;
padding: 1% 0% 0% 2%;
margin: 0% 0% 10% 0%;
font-size:170%;
font-weight:bold;
text-decoration: underline;
height: 100%;
overflow: hidden;
}/*rdy*/
#header_field1 {
width:14%;
height:40px;
float:left;
padding: 0%;
margin: 0% 3% 1% 0%;
background-color:#BF8130;
} /*rdy*/
#header_field2 {
width:14%;
height:40px;
float:left;
padding: 0%;
margin: 0% 3% 1% 0%;
background-color:#A65E00;
} /*rdy*/
#header_field3 {
width:14%;
height:40px;
float:left;
padding: 0%;
margin: 0% 3% 1% 0%;
background-color:#FF9000;
} /*rdy*/
#header_field4 {
width:14%;
height:40px;
float:left;
padding: 0%;
margin: 0% 3% 1% 0%;
background-color:#FFC273;
} /*rdy*/
#header_field5 {
width:32%;
height:40px;
float:left;
padding: 0%;
margin: 0% 0% 1% 0%;
background-color:#E6A866;
} /*rdy*/
#main{
margin: 0% 5% 2% 5%;
background-color: #FFFFFF;
padding: 1% 2% 5% 2%;
}
-
Servus,
w3c konform sind sowohl css als auch html code.
<div class="section_article">
wird nicht geschlossen-1UP
-
Servus,
w3c konform sind sowohl css als auch html code.
<div class="section_article">
wird nicht geschlossen-1UP
ich habs einfach Copy&Paste um es zu veranschaulichen.
Die gehören da eigentlich NOCH gar nicht rein.Hmm... wenn sich die Elemente nach den Eltern orientieren, wieso klappt es denn bei dem div SECTION, nicht aber bei den divs URGENT und PLACEHOLDER?
die müssten ja alle 3 vom eltern Element abhängig sein, haben trotzdem unterschiedliche Größen trotz gleicher Angaben-
Hallo,
Hmm... wenn sich die Elemente nach den Eltern orientieren, wieso klappt es denn bei dem div SECTION, nicht aber bei den divs URGENT und PLACEHOLDER?
die müssten ja alle 3 vom eltern Element abhängig sein, haben trotzdem unterschiedliche Größen trotz gleicher Angabenschau doch mal mit Firebug drüber, dann siehst du, was vererbt wird.
Ich seh auch nirgends Angaben zu position, somit sind alle http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=static
Grüße
Siri-
Danke für die Antworten bisher.
Also soll ich alles nochmal neu anfangen mit positions?
ich wollte es halt vermeiden Tabellen zu nehmen.
Wäre es sonst ratsam meine divs durch spans zu ersetzen und neu auszurichten?!
die einfachste Lösung wäre nun grade anstatt prozentuale
Höhenangaben feste px Werte zu verteilen..Was im Endeffekte am besten wäre weiß ich allerdings nicht :(
-
Danke für die Antworten bisher.
Also soll ich alles nochmal neu anfangen mit positions?Du musst deinen alten Stylesheet dafür nicht übern Haufen werden. Es reicht doch wenn du die positions noch einträgst.
Wäre es sonst ratsam meine divs durch spans zu ersetzen und neu auszurichten?!
Nein. Divs sind Block-Elemente, Spans sind Inline-Elemente. Das kannst du zwar auch über CSS manipulieren, aber dein markup würde dadurch unverständlich.
die einfachste Lösung wäre nun grade anstatt prozentuale
Höhenangaben feste px Werte zu verteilen..Du hast sowieso ein ziemlich merkwürdiges Gemisch aus relativen und absoluten Angaben gemacht. Wenn du Zeit lies dir mal etwas zu Responsible Webdesign durch. Es gibt ein Haufen Konventionen, die dir eine Hilfstellung bieten, wann du relative und wann absolute Angaben verwenden solltest.
-1UP
-
-
-
Hmm... wenn sich die Elemente nach den Eltern orientieren, wieso klappt es denn bei dem div SECTION, nicht aber bei den divs URGENT und PLACEHOLDER?
die müssten ja alle 3 vom eltern Element abhängig sein, haben trotzdem unterschiedliche Größen trotz gleicher AngabenWeil dein Elternelement #main keine zugewiesene Größe hat.
Sieh dir den Link an, den ich gepostet habe, da wird es sehr verständlich erklärt.
-
-
-
Der div-Container "section" ist hier die gewünschte Größe nach der die Container "placeholder" und "urgent" ausgerichtet werden sollen.
Mir fällt keine Lösung ein, wie das nur mit CSS in deinem markup funktionieren könnte. Die CSS-Eigenschaft "height" orientiert sich bei relativen Angaben immer am Eltern-Element in deinem Fall also an:
<div id="main">Hier ist ein Artikel der in weiten Teilen auf dein Problem eingeht:
http://www.gn-webdesign.de/css-tutorials/css-div-height-100.htmlHoffe es hilft.
Grüße
-1UnitedPower