• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

div-elemente hintereinander

schwerminator

schwerminator

New member
mir ist es entfallen: wie kann man div-elemente nebeneinander und nich untereinander positionieren? kurz: wie verhindere ich einen zeilenumbruch?

schwerminator
 
<div style="clear:both">
<div style="float:left"></div>
<div style="float:left"></div>
<div style="float:left"></div>
</div>

clear:both dient hier für, damit nachfolgende element nicht mit gefloatet werden.
 
jo danke klappt soweit (auch ohne both). aber wie mache ich ein space dazwischen? mit   wird der zweite kasten nur weiter nach unten (!!!) gesetzt, aber nicht nach rechts.
 
clear:both ist wichtig!
mit nachfolgenden elementen meine ich element die unter dem gesetzt werden:
<div style="clear:both">
<div style="float:left"></div>
<div style="float:left"></div>
<div style="float:left"></div>
</div>

<div></div> etc.

zwecks abstand:
versuchs mal mit style="float:left;margin-right:1px"
 
Hallo,
wo muss ich den oben genannten Code in meinem (s.u.) einfügen?
CSS:
Code: 
/* Menu CSS Start */
#menu {
float: left;
width: 200px;

}
#navi {
float: left;
width: 240px;
margin-top: 75px;
}
#navi a {
font: bold 12px Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
border: 1px solid #fff;
width: 150px;
margin: 3px 100;
color: #fc0;
background: #257;
text-align: center;
}
#navi a:link {
color:#fc0;
background: #257;
}
#navi a:visited {
color:#fff;
background: #257;
}
#navi a:hover {
color:#000;
border:1px solid #257;
background: #fff;
}
#navi a:active {
color: #fc0;
background: #fff;
}
#navi a .showcase {
display: none;
}
#navi a:hover .showcase {
position: absolute;
top: 100px;
left: 50px;
display: block;
width: 150px;
font: bold 0.92em Verdana, Arial, Helvetica, sans-serif;
background: #fff;
border: 1px dashed #257;
color: #000;
padding: 5px;
}

HTML:
Code: 
<html>
<head>
<title>HSG Eintracht Gadderbaum Jugendseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="basic.css" type="text/css" />
<link rel="stylesheet" href="menu1.css" type="text/css" />

</head>

<body>
  <div id="navi">
  <a href="#">m-A-Jugend</a>
  <a href="#">m-B-Jugend</a>
  <a href="#">m-C-Jugend</a>
  <a href="#">m-D-Jugend</a>
  <a href="#">gem.-E-Jugend</a>
  <a href="#">E-Jugend-Sonderstaffel</a>
  <a href="#">Minis</a>
 <!--navi--></div>

<div id="inhalt">
hallo
 <!--inhalt--></div>
</body>
</html>
 
NewNoise schrieb:
Hallo,
wo muss ich den oben genannten Code in meinem (s.u.) einfügen?
CSS:
Code: 
/* Menu CSS Start */
#inhaltundnavi {
clear:both;
}
#inhalt {
float:left;
}
#menu {
float: left;
width: 200px;

}
#navi {
float: left;
width: 240px;
margin-top: 75px;
}
#navi a {
font: bold 12px Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
border: 1px solid #fff;
width: 150px;
margin: 3px 100;
color: #fc0;
background: #257;
text-align: center;
}
#navi a:link {
color:#fc0;
background: #257;
}
#navi a:visited {
color:#fff;
background: #257;
}
#navi a:hover {
color:#000;
border:1px solid #257;
background: #fff;
}
#navi a:active {
color: #fc0;
background: #fff;
}
#navi a .showcase {
display: none;
}
#navi a:hover .showcase {
position: absolute;
top: 100px;
left: 50px;
display: block;
width: 150px;
font: bold 0.92em Verdana, Arial, Helvetica, sans-serif;
background: #fff;
border: 1px dashed #257;
color: #000;
padding: 5px;
}

HTML:
Code: 
<html>
<head>
<title>HSG Eintracht Gadderbaum Jugendseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="basic.css" type="text/css" />
<link rel="stylesheet" href="menu1.css" type="text/css" />

</head>

<body> 
  <div id="inhaltundnavi">
  <div id="navi">
  <a href="#">m-A-Jugend</a>
  <a href="#">m-B-Jugend</a>
  <a href="#">m-C-Jugend</a>
  <a href="#">m-D-Jugend</a>
  <a href="#">gem.-E-Jugend</a>
  <a href="#">E-Jugend-Sonderstaffel</a>
  <a href="#">Minis</a>
 <!--navi--></div>

<div id="inhalt">
hallo
 <!--inhalt--></div>
 <!--inhaltundnavi--></div>
</body>
</html>
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben