• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Boxen nebeneinander floaten

C

Corraggiouno

Mitglied
Hi,

mein Code:
Code: 
html {
height: 100.3%;
}

body {
font-family: Verdana, sans-serif;
font-size:12px;
background:#eeeeee;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 810px;
margin:15px auto;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:155px;
text-indent: -999em;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
width:800px;
height:35px;
margin-left:6px;
line-height:35px;
}

div#nav ul {
list-style-type:none;
}

div#nav li {
float:left;
width:160px;
text-align:center;
}

div#nav a {
display:block;
clear:left;
text-decoration: none;
color:#ffffff;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}

div#nav a.noborder {
border: none;
}

div#nav a:hover {
background: url(../images/nav_hover.gif) repeat-x;
text-decoration:underline;
}

div#nav a.enabled {
background: url(../images/nav_enabled.gif) repeat-x;
font-size:1.2em;
font-weight:bold;
color:#086be6;
text-decoration:none;

}

div#maintext {
background: url(../images/maintext_bg.gif) repeat-y;
margin-left:6px;
width:900px;
height:650px;
padding-top: 15px;
}

div#maintext_box_left_head {
background: url(../images/maintext_box_left_head.gif) no-repeat;
width: 260px;
height:30px;
float:left;
margin-left:6px;
padding-top:8px;
padding-left: 15px;
}

div#maintext_box_left_middle {
background: url(../images/maintext_box_left_middle.gif) repeat-y;
width: 260px;
margin-left:6px;
padding-left: 15px;
}

div#maintext_box_left_bottom {
background: url(../images/maintext_box_left_bottom.gif) no-repeat;
width: 260px;
height:30px;
clear:left;
margin-left:6px;
padding-left: 15px;
}

div#maintext_box_right_head {
background: url(../images/maintext_box_right_head.gif) no-repeat;
width: 510px;
height: 30px;
float:right;
margin-right:90px;
padding-top:8px;
padding-left:15px;
}

div#maintext_box_right_middle {
background: url(../images/maintext_box_right_middle.gif) repeat-y;
width: 510px;
clear:left;
float:right;
padding-left:10px;
margin-right:94px;
}
xhtml-code
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <div id="nav">
    <ul>
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
    </ul> 
  </div>
  <div id="maintext">
    <div id="maintext_box_left_head">
     <b>Kontakt</b>
     </div> 
     <div id="maintext_box_left_middle">
     NET<br />
     Cochnik<br />
     Buco<br />
     7<br />
     </div>
     <div id="maintext_box_left_bottom">
     </div>
     <div id="maintext_box_right_head">
     <b>Kontaktformular</b>
     </div>
     <!--
     <div id="maintext_box_right_middle">
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
     </div>
     -->
    </div>  
</div>
</body>
</html>
Kann mir jemand beim Floaten helfen bzw. sagen wo ich meinen Fehler habe?
Ich möchte gerne, dass die zwei Boxen nebeneinander liegen.
 
Zuletzt bearbeitet:
Gruppiere die zusammengehörenden Teile der beiden Boxen zu jeweils einer, die kannst Du dann floaten.
 
..............habe die Gruppierung in Form einer Liste gelöst.
xhtml-code:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <div id="nav">
    <ul>
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
    </ul> 
  </div>
  <div id="maintext">
    <div id="left_box">
     <ul>
     <li class="left_box_head"><b>Kontakt</b></li>
     <li class="left_box_middle">
     NE<br />
     Co<br />
     Bu<br />
     78<br />
     </li>
     <li class="left_box_bottom"></li>
     </ul>
    </div>
    <div id="right_box">
     <ul>
     <li class="right_box_head"><b>Kontaktformular</b></li>
     <li class="right_box_middle">
     NE<br />
     Bu<br />
     78<br />
     </li>
     <li class="right_box_bottom"></li>
     </ul>
    </div>
   </div>  
</div>
</body>
</html>

css-code:
Code: 
div#left_box {
width:240px;
float:left;
margin-left:6px;
}

div#left_box ul {
list-style-type:none;
}

div#left_box li.left_box_head {
background: url(../images/maintext_box_left_head.gif) no-repeat;
width:240px;
height:30px;
padding-top:8px;
padding-left:15px;
}

div#left_box li.left_box_middle {
background: url(../images/maintext_box_left_middle.gif) repeat-y;
width:240px;
margin-top:-8px;
padding-left:15px;
}

div#left_box li.left_box_bottom {
background: url(../images/maintext_box_left_bottom.gif) no-repeat;
width:240px;
height:30px;
padding-left:15px;
}


div#right_box {
width:550px;
float:right;
margin-right:104px;
}

div#right_box ul {
list-style-type:none;
}

div#right_box li.right_box_head {
background: url(../images/maintext_box_right_head.gif) no-repeat;
width:550px;
height:30px;
padding-top:8px;
padding-left:15px;
}

div#right_box li.right_box_middle {
background: url(../images/maintext_box_right_middle.gif) repeat-y;
width:550px;
margin-top:-8px;
padding-left:15px;
}

div#right_box li.right_box_bottom {
background: url(../images/maintext_box_right_bottom.gif) no-repeat;
width:550px;
height:30px;
padding-left:15px;
}

Ist die Gruppierung mit einer Liste zu empfehlen, oder kann ich dies besser machen?
...........Kann mir jemand sagen, warum ich bei der maintext_box_right_middle..........ein
Code: 
margin-top:-8px
verwenden muss?............wenn ich das margin-top nicht definiere, entsteht ein Absatz zwischen dem head und dem Mittelteil.........http://mh.netcn.de/kontakt.php
 
Zuletzt bearbeitet:
Corraggiouno schrieb:
Ist die Gruppierung mit einer Liste zu empfehlen, oder kann ich dies besser machen?
Zum Vergrößern anklicken....
Nein, das ist natürlich falsch. Denn Du hast hier ja gar keine Liste vorliegen. Du machst Designelemente zu Listeninhalten. Das ist Nonsense. Die Gruppe hast Du bereits im Elternelement der Liste gemacht. Mit dem Gruppierungs-Tag namens "div".

Du solltest aber bei der Wahl der Klassennamen auch auf die Semantik achten. Dir bringt der Name "left_box" gar nichts, wenn Du die Boxen mal tauschen willst. Dann hast Du wieder den ganzen Ärger. "Trennung von Inhalt und Layout" bezieht sich auch auf ID-/Klassennamen. Sonst ist ja alles mit dem externen Styelsheet für die Katz.

Kann mir jemand sagen, warum ich bei der maintext_box_right_middle...
Zum Vergrößern anklicken....
So ein Element gibt es nicht.

margin-top:-8px
Zum Vergrößern anklicken....
verwenden muss?[/quote]
Weil Dein #maintext ein padding-top:15px hat und somit Dein Mittelteil 15px tiefer rutscht.

Übrigens ist
Code: 
<b>Kontakt</b>
Nonsense. <b> ist physische Inhaltsauszeichnung, hat daher in HTML nichts verloren. Wenn Du eine Überschrift beabsichtigst, dann zeichne den Inhalt auch als Überschrift aus.
 
Vielen Dank für deinen Tipp.................habs nun etwas verändert
Code: 
html {
height: 100.3%;
}

body {
font-family: Verdana, sans-serif;
font-size:12px;
background:#eeeeee;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 810px;
margin:15px auto;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:155px;
text-indent: -999em;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
width:800px;
height:35px;
margin-left:6px;
line-height:35px;
}

div#nav ul {
list-style-type:none;
}

div#nav li {
float:left;
width:160px;
text-align:center;
}

div#nav a {
display:block;
clear:left;
text-decoration: none;
color:#ffffff;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}

div#nav a.noborder {
border: none;
}

div#nav a:hover {
background: url(../images/nav_hover.gif) repeat-x;
text-decoration:underline;
}

div#nav a.enabled {
background: url(../images/nav_enabled.gif) repeat-x;
font-size:1.2em;
font-weight:bold;
color:#086be6;
text-decoration:none;

}

div#maintext {
background: url(../images/maintext_bg.gif) repeat-y;
margin-left:6px;
width:900px;
height:650px;
}

div#box1 {
width:240px;
float:left;
margin-left:6px;
}

div#box1 head {
list-style-type:none;
}

.head {
background: url(../images/box1_head.gif) no-repeat;
width:240px;
height:30px;
padding-top:8px;
padding-left:15px;
}

.middle {
background: url(../images/box1_middle.gif) repeat-y;
width:240px;
padding-left:15px;
}

.bottom {
background: url(../images/box1_bottom.gif) no-repeat;
width:240px;
height:30px;
padding-left:15px;
}

xhtml-code:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <div id="nav">
    <ul>
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
    </ul> 
  </div>
  <div id="maintext">
   <div id="box1">
    <div class="head">Kontakt</div>
    <div class="middle">NET</div>
    <div class="bottom"</div> 
   </div> 
  </div>  
</div>
</body>
</html>
............leider habe ich dann wieder einen Abstand zwischen dem head und middle Teil, obwohl ich kein padding-top:15px habe.

Ist meine Änderung so besser? http://mh.netcn.de/kontakt.php
 
Zuletzt bearbeitet:
Corraggiouno schrieb:
Ist meine Änderung so besser?
Zum Vergrößern anklicken....
Besser, aber immer noch zu verbessern. :-)
div#nav ist immer noch überflüssig.
Und bei div#maintext steht keinerlei sinnvoller Inhalt, so dass man das schwer beurteilen kann. #maintext ist derzeit auf jeden Fall überflüssig und die Inhalte "KONTAKT" und "NET" sind falsch ausgezeichnet.

Ich sag ja, ERST den Inhalt, DANN das HTML, DANN ERST CSS.
Du hast schon seit vielen Postings wieder beim CSS angefangen, anstatt das einfach mal zu vergessen und Deinen Inhalt niederzuschreiben (der weitestgehend ja noch fehlt).

............leider habe ich dann wieder einen Abstand zwischen dem head und middle Teil, obwohl ich kein padding-top:15px habe.
Zum Vergrößern anklicken....
Natürlich hast Du den Abstand immer noch. Guck doch mal rein in Deinen div#wrapper. Da stehts doch...15px.
 
Vielen Dank für deine Hinweise :-)
Natürlich hast Du den Abstand immer noch. Guck doch mal rein in Deinen div#wrapper. Da stehts doch...15px
Zum Vergrößern anklicken....
.........aber der wrapper hat doch nichts mit dem div#box1 zu tun?
Ich habe die 15px aus dem wrapper genommen, leider ist der Abstand noch immer da
 
Äh, entschuldige, das war mein Fehler, da hab ich margin mit padding vertauscht.

Mach das mal wieder rein und dann gib nochmal den Link zur Seite. Ich schau da mit Firebug drauf, da erkennt man solche Dinge besser als im Code hier im Forum.
 
Welcher "head"? Meins tDu div#nav? Zwischen div#nav und div#box1 ist bei mir kein Abstand.

Ach Du meinst zwischen h1 und div#nav?
Na, das Image ist 149px hoch, die Größe von h1 hast Du auf 155px gesetzt. Dann sind da natürlich 6px Abstand.

Übrigens verstehe ich nicht, warum Du das Bild als Hintergrundbild eingebunden hast. Da ist doch Content im Bild, das bindet man dann - wie allen Content - per HTML ein.
 
......nein. Ich meine zwischen
Code: 
<div class="head">Kontakt</div>
<div class="middle">NET</div>
.........also zwischen dem head Bild und dem "Middle-Bild"
Code: 
div#box1 {
width:240px;
float:left;
margin-left:6px;
}


.head {
background: url(../images/box1_head.gif) no-repeat;
width:240px;
height:30px;
padding-top:8px;
padding-left:15px;
}

.middle {
background: url(../images/box1_middle.gif) repeat-y;
width:240px;
padding-left:15px;
}
 
Da ist es genau das selbe. Das Bild ist 30px hoch, das Element aber 38px.

height:30px + padding-top:8px = 38px.
Ein Hintergrundbild erstreckt sich immer auch über das padding, nicht aber über margin.
 
vielen dank für den Tipp mit dem padding. Das habe ich verstanden :-)
Übrigens verstehe ich nicht, warum Du das Bild als Hintergrundbild eingebunden hast. Da ist doch Content im Bild, das bindet man dann - wie allen Content - per HTML ein.
Zum Vergrößern anklicken....
............also die Box soll doch Inhalt bekommen. Wenn ich das mit
Code: 
<img src="box1_head.gif">
definiere, dann sieht das ganze so aus
NET
 
Zuletzt bearbeitet:
Der Inhalt soll aber in der Box stehen und nicht unter der Box. Dann muss ich doch wohl das Bild mit
Code: 
background
in den Hintergrund definieren, oder?
Kannst du mir vielleicht einen Code-Schnipsel geben, damit ich weis wie du das meinst, Efchen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben