Div Boxen nebeinander

steve46 · 02.04.2009

Hallo

Ich will eine zwei Boxen nebeneinander stellen beide haben jeweils die Breite von 150px und eine Höhe von 100px wenn ich display: inline; schreibe bekomme ich als Ausgabe gar nichts was muss ich machen das diese Boxen horizontal nebeneinander stellen.

steve46 · 02.04.2009

Wie auf http://www.w-b-s.org

steve46 · 03.04.2009

So lautet der Code aber kein Erfolg

HTML:

<html>
<head>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
#linkbox {
width: 150px;
height: 100px;
background-color: #999999;
border-bottom: 5px solid black;
}
#linkbox li {
display: inline;
list-style-type: none;
}
#linkbox:hover {
background-color: white;
border-bottom: 5px solid orange;
text-decoration: none;
}
a {
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="linkbox">
<li>Item one<li>
</div>
<div id="linkbox">
Item two
</div>
</body>
</html>

cmddegi · 03.04.2009

Ohne viel Erfahrung zu haben, würde ich sagen, der Browser ignoriert die li-Tags, weil die nicht in einer Liste stehen. Versuch mal, die in eine ul-Liste reinzupacken.

Savior · 03.04.2009

Float ist für sowas ungemein praktisch.

Hier mal nen einfaches Beispiel: Klick

steve46 · 03.04.2009

Nein, das geht auch nicht

futtlui · 03.04.2009

also wenn ich Savior's Link aufrufe geht's - und bei dir nicht???

cmddegi · 03.04.2009

Also, Savior's Tipp geht bei mir wunderbar:

HTML:

<html>
<head>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
#linkbox {
width: 150px;
height: 100px;
background-color: #999999;
border-bottom: 5px solid black;
}
#linkbox li {
display: inline;
list-style-type: none;
}
#linkbox:hover {
background-color: white;
border-bottom: 5px solid orange;
text-decoration: none;
}
a {
text-decoration: none;
}
-->
</style>

</head>
<body>
<div id="linkbox" style="float:left;">
<ul>
<li>Item one</li>
</ul>
</div>
<div id="linkbox" style="float:left;">
<ul>
<li>Item two</li>
</ul>
</div>
</body>
</html>

Das float:left kann natürlich auch direkt im Stylesheet stehen; je nachdem was man vor hat.

skyborla · 03.04.2009

nochmal zur ausgangsfrage: wenn man display:inline verwendet, ignoriert der browser höhen und breitenangaben ... um das zu umgehen habe ich immer 2 divs verschachtelt und dem äußeren div display:inline gegeben und dem inneren display:block und die größenangaben ... dann sollte es gehen
(irgendwann soll es mit css3 ein attribut inline-block oder ähnlich geben, mit dem man sich die schachtelung sparen kann, aber das ist momentan soweit ich weis noch nicht praktikabel) ... alternativ kann man natürlich auch float verwenden ...

steve46 · 04.04.2009

Vielen Dank für eure Hilfe, es geht endlich

Div Boxen nebeinander

steve46

steve46

steve46

cmddegi

Savior

steve46

futtlui

cmddegi

skyborla

steve46

Div Boxen nebeinander

ANGEBOTE & SPONSOREN

Neueste Beiträge

Statistik des Forums