CSS Design

V

vloop22

Grünschnabel
Guten Tag,
ich habe ein Problem.
Ich bekomme die Content Box nicht richtig in die Seite. Alles verschiebt sich immer.
Habe auch nicht so viel ahnung. Hoffe es kann einer helfen.
Mfg

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!--CONTAINER-->
<div id="container">

<!--HEADER BACKGROUND-->
<div id="header">

<!--MENU BAR-->
<div id="nav">
</div>
<!--MENU BAR END-->

<!--HEADER LOGO-->
<div id="logo"></div>
<!--HEADER LOGO END-->

</div>
<!--HEADER BACKGROUND END-->
<div class="content_box">
<div class="content_top">
<h3>Content Box One</h3>
</div>
<div class="content_main">
<p>some text</p>
</div>
<div class="content_bottom">
<p>Posted on 04/01/2009</p>
</div>
<!--FOOTER-->
<div id="footer">
<p>Copyright copy; Yoursite.com | All Rights Reserved<br />
<br />
</a></p>
</div>
<!--FOOTER END-->

<!--CONTAINER END-->

</body>
</html>

Code: 
*{
padding:0;
margin:0;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/bg.gif);
background-repeat:repeat-x;
background-color:#eae5cf;
padding:0;
margin:0;
}

/* HEADER LOGO */
#logo {
background-repeat:no-repeat;
background-image: url(images/logo.gif);
height: 298px;
width: 315px;
float:left;
}
/* HEADER LOGO END*/

/* CONTENT BOX*/
.content_box {
width:485px;
float:left;
margin:auto;
}

.content_top{
background:url(images/content_top.gif);
background-repeat:no-repeat;
width:485px;
height:38px;
}

.content_top h3{
color: #5C5741;
font-family: Impact;
font-size: 24px;
font-weight: normal;
padding-top: 6px;
padding-left: 20px;

}

.content_main{
background:url(images/content.gif);
background-repeat:repeat-y;
width:485px;
padding-top: 6px;
padding-left: 20px;
padding-right: 0px;
}

.content_main p {
font-family: Verdana;
color: #A09484;
font-size: 11px;
padding-right: 30px;
}

.content_bottom {
background:url(images/content_bottom.gif);
background-repeat:no-repeat;
width:485px;
height:36px;
margin-bottom: 10px;
}

.content_bottom p {
font-family: Verdana, Arial, Helvetica, sans-serif, Impact;
color: #5C5741;
font-size: 9px;
float: right;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;

}
/* CONTENT BOX END*/

/* FOOTER*/
#footer {
height:101px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/footer.gif);
background-repeat:repeat-x;
background-color:#2F2519;
clear:both;
}

#footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EAE5CF;
margin: auto;
text-align: center;
padding-top: 20px;

}
/* FOOTER END*/
 
Hi,

kannst du bitte etwas näher erläutern, was mit der "Content-Box" konkret in dem "CSS-Design" nicht stimmt, denn ich kann darin soweit browserübergreifend keinen Darstellungsfehler entdecken.

Eine Vorschaugrafik des "Soll-Zustands" des erwünschten Designs könnte hier auch unterstützend weiterhelfen, da wir ihn bislang ja noch nicht kennen.

//edit: Deinem gezeigten HTML-Code zufolge, fehlen zwei schliessende </div>-Tags für #container und .content_box, was mitunter ein Grund für das vermeintliche Darstellungsproblem sein dürfte.

mfg Maik
 
die zweite grüne Box soll zwischen header und footer sein also auch das man was rein schreiben kann.
So und das versuche ich die ganze Zeit, aber irgendwie hängt die Box dann immer im header drinne.
 
Zuletzt bearbeitet:
Sollte mein nachgereichter Hinweis noch nicht endgültig weiterhelfen, stellt sich desweiteren die Frage, wie überhaupt die CSS-Regeln für #container, #header und #nav lauten?

Denn so wie es derzeit den Eindruck erweckt, muß für .content_box die Eigenschaft clear:left deklariert werden, um die Ausrichtung dieser Box unterhalb des Headers zu erzwingen, ansonsten greift hier nämlich die float:left-Deklaration für #logo, sodass das Logo vom nachfolgenden Content an seiner rechten Flanke umflossen wird, und er deshalb unerwünschter Weise nach oben in den Headerbereich rutscht.

mfg Maik
 
Aus meinen Schlußfolgerungen ergeben sich dadurch folgende Ergänzungen im HTML-Code und Änderung im Stylesheet:

  • Fehlerbereinigtes Markup:
Code: 
<body>

<!--CONTAINER-->
<div id="container">
     <!--HEADER BACKGROUND-->
     <div id="header">
          <!--MENU BAR-->
          <div id="nav">nav</div>
          <!--MENU BAR END-->
          <!--HEADER LOGO-->
          <div id="logo">logo</div>
          <!--HEADER LOGO END-->
     </div>
     <!--HEADER BACKGROUND END-->
     <!--CONTENT_BOX-->
     <div class="content_box">
          <div class="content_top">
               <h3>Content Box One</h3>
          </div>
          <div class="content_main">
               <p>some text</p>
          </div>
          <div class="content_bottom">
               <p>Posted on 04/01/2009</p>
          </div>
     </div>
     <!--CONTENT_BOX END-->
     <!--FOOTER-->
     <div id="footer">
          <p>Copyright copy; Yoursite.com | All Rights Reserved<br />
          <br />
          </p>
     </div>
     <!--FOOTER END-->
</div>
<!--CONTAINER END-->

</body>
  • Geänderte CSS-Regel:
Code: 
.content_box {
width:485px;
clear:left;
margin:auto;
}

mfg Maik
 
ahhhh jawoll. Vielen Dank!

ah jetzt habe ich noch das problem das der footer nicht ganz unten ist, der hintergrund geht sogesagt drunter durch.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück