nicht angemeldet
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%;
}