nicht angemeldet
3 Block elemente nebeneinander, 3 Blockelement rutsch aber tief
0 0 0
0 
Gunnar Bittersmann
3 Block elemente nebeneinander, 3 Blockelement rutsch aber tief
Hallo,
habe ein proplem, ich möchte 3 div elemten nebeneinander, 2 funktionieren (float:left und float:none) aber floar:right geht irgednwie nicht, den das 3 block element bleibt eine zeile zu tief. hier ein bild:
meine css:
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
color: #FFF;
}
body {
background-color: #000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
}
a {
font-size: 15px;
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color: #CCC;
}
a:active {
color: #CCC;
}
#BF3_HTML {
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:1000px;
height:2050px;
}
#header {
background:url(images/header.png);
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:1000px;
height:258px;
}
#nav {
background:url(images/nav_bg.png);
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:1000px;
height:57px;
}
#content {
background:url(images/content.png);
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:1000px;
height:1597px;
}
#news_box_left {
background:url(images/news_box_left.png);
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:333px;
height:345px;
float:left;
}
#news_box_center {
background:url(images/news_box_center.png);
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:333px;
height:345px;
float:none;
}
#news_box_right {
background:url(images/news_box_right.png);
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:333px;
height:345px;
float:right;
}
#footer {
background:url(images/footer.png);
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:1000px;
height:88px;
}
meine 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" />
<link href="style.css" style type="text/css" rel="stylesheet" />
<title>Home</title>
</head>
<div id="BF3_HTML">
<div id="header"></div>
<div id="nav">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="content">
<div id="news_box_left"></div>
<div id="news_box_center"></div>
<div id="news_box_right"></div>
</div>
<div id="footer"></div>
</div>
<body>
</body>
</html>
-
Hi,
habe ein proplem, ich möchte 3 div elemten nebeneinander, 2 funktionieren (float:left und float:none) aber floar:right geht irgednwie nicht, den das 3 block element bleibt eine zeile zu tief.
Im Gegenteil: *Weil* du es nach rechts floatest, muss es unter den anderen Elementen platziert werden.
Wenn du es auf gleicher Höhe haben wolltest, müsste es vor den anderen im Quellcode stehen.
Grundlagen für Spaltenlayout mit CSS
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Und was muss ich ändern damit es geht?? Also das alle 3 in einer Reihe sind?
-
Und was muss ich ändern damit es geht?? Also das alle 3 in einer Reihe sind?
Ohne die Reihenfolge im Quelltext zu ändern?
Alle drei nebeneinander floaten lassen (left _oder_ right) und dann die "falsch" positionieren mittels position: relative vertauschen.
-
Om nah hoo pez nyeetz, suit!
Alle drei nebeneinander floaten lassen (left oder right)
entweder left oder right :p
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Alle drei nebeneinander floaten lassen (left _oder_ right)
entweder left oder right :p
Ach was,
#foo, #bar, #baz { float: left; float: right }tut’s doch. ;-)Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Ach was,
#foo, #bar, #baz { float: left; float: right }tut’s doch. ;-)Hätte ich left XOR right schreiben sollen? :)
-
Grüße,
entweder left oder right :p
Ach was,
#foo, #bar, #baz { float: left; float: right }tut’s doch. ;-)wenn ich mich recht errinere, ist es insgesamt float:right; ohne wenn und aber.
MFG
bleicher-
Om nah hoo pez nyeetz, bleicher!
Grüße,
entweder left oder right :p
Ach was,
#foo, #bar, #baz { float: left; float: right }tut’s doch. ;-)wenn ich mich recht errinere, ist es insgesamt float:right; ohne wenn und aber.
genau darin besteht die Komik dieses Gesamtkunstwerkes.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-
@@thundrill:
nuqneH
<div id="news_box_left"></div>
<div id="news_box_center"></div>
<div id="news_box_right"></div>Benenne IDs und Klassen nie nach der gegenwärtig(!) gewünschten Darstellung!
Wenn du später mal linke und rechte Spalte vertauschen willst, solltest du nur das Stylesheet ändern müssen. Dann passen die Bezeichner aber nicht mehr.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
