Div's im Div richtig postionieren

  • Themenstarter Themenstarter chaosente
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
Eigenltihc steh ich noch am Anfang. Also was ich will hab ich da oben ja schon beschrieben. Hoffe das war genau genug. Das was ich bis her hab ist folgendes

HTML: 
<div class="box">
	<div class="inner_border">
	<div class="mail_navi"><a href="#">bla</a></div>
	<div class="mail_navi"><a href="#">bla</a></div>
	</div>
</div>

HTML: 
.mail_navi {
border: 1px dashed gray;
margin: auto 0 0 20px;
display: inline;
}
.box {
background-color:#666666;
border: 1px solid black;
width: 100%;
margin-bottom: 10px;
}
.inner_border {
background-color:#DDDDDD;
border:1px dashed gray;
margin: 2px;
}

So sind sie schon schön nebeneinander und so aber das sieht alles noch nicht gut aus. Der rahmen soll nciht dierekt um den text sein und wie gesagt fehlt noch der content bereich, der am unterem border der navigation stehen soll.
 
Schau dich mal auf Listamatic um, wie sich horizontale Menüs mit Hilfe des Listenelements auszeichnen und anschliessend mit CSS formatieren lassen.
 
So, da ich z.Zt. im Urlaub bin und somit über etwas mehr Zeit verfüge, habe ich mal was für dich gestrickt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
.box {
background-color:#666666;
border: 1px solid black;
margin-bottom: 10px;
}

.inner_border {
background-color:#DDDDDD;
border:1px dashed gray;
margin: 2px;
}

ul#mail_navi {
margin: 0;
padding: 0;
list-style: none;
}

ul#mail_navi li {
display: inline;
}

ul#mail_navi li a {
border: 1px dashed gray;
margin: auto 0 0 20px;
padding: 5px 25px;
float: left;
}

.content {
background: ghostwhite;
}

/* Floatumgebung "clearen" */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div class="box" >
        <div class="inner_border">
             <ul id="mail_navi" class="clearfix">
                 <li><a href="#">bla</a></li>
                 <li><a href="#">bla</a></li>
             </ul>
        </div>
        <div class="content">Hier folgt der Inhalt</div>
</div>

</body>
</html>
 
Hi schon mal nen riesen dankeschön, aber der inhalt sollte mit in die zwei äußeren divs und wenn ich den da einfach reinstecke hängt er dort ganz oben...
 
Naja, wo genau was hin soll, kann ich auch nicht riechen ;)

Stellst du dir das so vor?

Code: 
<div class="box" >
        <div class="inner_border">
             <ul id="mail_navi" class="clearfix">
                 <li><a href="#">bla</a></li>
                 <li><a href="#">bla</a></li>
             </ul>
             <div class="content">Hier folgt der Inhalt</div>
        </div>
</div>
Code: 
.content {
background: ghostwhite;
clear: left;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück