| Autor |
Nachricht |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 12.03.2008 13:25
Titel
|
 |
|
#box1 möchte "Layout": http://onhavinglayout.fwpf-webdesign.de/
Außerdem stört sich der IE an Deinem clear per br. Ich würde aber eh nicht mit einem inhaltslosen Element clearen - allenfalls per hr, da diese auch semantisch einen Sinn ergibt (aber sie ist aufgrund nicht wirklich ermittelbarer erhöhter Außenabstände im IE nicht immer ideal).
Alternativen: Lasse ein folgendes Element clearen (es kommen ja sicher noch mehr dazu), oder cleare ohne Zusatz-Markup: http://jassesnee.de/easyclear/index.html
|
|
| |
|
 |
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht:
|
Verfasst Mi 12.03.2008 15:47
Titel
|
 |
|
vielen dank für deine hilfe bisher, aber das mit dem clear läuft leider immer noch nicht so wie es soll.
das float soll ja nach dem div mit der suchfunktion aufgehoben werden, aber an der stelle erzeugt es nicht den gewünschten effekt. habe dann vor dem rahmen eine weiteres div objekt mit einer clear eigenschaft gestellt, dann war zwar das float korrekt aufgehoben, aber ich bekam einen abstand von etwa 2px zwischen meinem kopf und rahmen.
html
css
das ist meine erste seite, wo ich versuche wirklich sauber zu coden, vorher habe ich dem bereich links immer float left gegeben und dem rechten teil ein float right. hinterher mit einem br -> clear both alles aufgehoben.
ist der restliche quelltext soweit 'sauber', oder würde man nicht so viele divs verschachteln?
ich habe außerdem versucht, so wenig größen angaben wie möglich zu verwenden, um die seite leicht editierbar zu gestalten
|
|
| |
|
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 12.03.2008 16:12
Titel
|
 |
|
Sieht doch schon ganz gut aus. Aber Du solltest unbedingt validieren: http://validator.w3.org/
Außerdem: #rahmen sollte noch clearen, und damit #seitenkopf die Floats einschließt, kannst Du es z.B. ebenfalls floaten lassen (statt der height-Deklaration). Allerdings hat Netscape 7 (sowie einige Operas der Version 7) diesbzgl. einen Bug und "vergisst" dann das pos. rel., aber letztlich brauchst Du innerhalb von #seitenkopf eh kein Float. In jedem Falle braucht das Logo noch display: block; (entfernt die Grafik-Unterlänge).
Und zuguterletzt: Du verwendest zuviele divs. Umgib nie einzelne Elemente mit einem div (das gilt auch für die Navi-ul).
|
|
| |
|
 |
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht:
|
Verfasst Mi 12.03.2008 16:18
Titel
|
 |
|
wenn ich im #rahmen nen clear nutze, bekomme ich auch diese lücke da rein
siehe hier
ups schon klar, vergessen das display: block anzuwenden.
vielen dank!
Zuletzt bearbeitet von stry am Mi 12.03.2008 16:21, insgesamt 1-mal bearbeitet
|
|
| |
|
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 12.03.2008 16:55
Titel
|
 |
|
|
Zu Deiner PN: Wenn #seitenkopf floatet und #rahmen cleart, stehen sie unverändert ohne jegliche Überlappung untereinander, nur innerhalb von #seitenkopf muss halt nicht mehr gecleart werden. Diese Methode wende ich persönlich so oft wie möglich an (vorausgesetzt das betreffende Element darf eine width-Deklaration bekommen). Siehe auch http://orderedlist.com/articles/clearing-floats-the-fne-method
|
|
| |
|
 |
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht:
|
Verfasst Do 13.03.2008 12:51
Titel
|
 |
|
die sache mit dem float ist mir immer noch nicht so ganz geläufig.
jpg
html
html-code:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="beispiel2.css">
</head>
<body>
<div id='container'>
<div id='rahmen'>
<div id='seite'>seite</div>
<div id='inhalt'>
<div id='box1'>box1</div>
<div id='box2'>box2</div>
<div id='box3'>box3</div>
<div id='box4'>box4</div>
</div>
</div>
<div id='footer'></div>
</div>
</body>
</html> |
css-code:
| Code: | *
{
padding: 0;
margin: 0;
}
#container
{
width: 800px;
}
#rahmen
{
width: 798px;
border: 1px solid #cc0001;
}
#seite
{
width: 200px;
height: 400px;
float: left;
background-color: #cccccc;
}
#inhalt
{
float: left;
width: 578px;
margin: 0px 0px 0px 220px;
}
#box1
{
width: 250px;
height: 250px;
float: left;
background-color: #aaaaaa;
}
#box2
{
width: 250px;
height: 250px;
margin: 0px 0px 0px 328px;
background-color: #888888;
}
#box3
{
width: 250px;
height: 250px;
clear: both;
float: left;
margin: 20px 0px 0px 0px;
background-color: #666666;
}
#box4
{
width: 250px;
height: 250px;
margin: 20px 0px 0px 328px;
background-color: #444444;
}
#footer
{
clear: both;
} |
habe auch #inhalt nun ein float gegeben, leider immer noch nicht optimal.
|
|
| |
|
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 13.03.2008 13:00
Titel
|
 |
|
Sein margin-left muss noch angepasst werden
|
|
| |
|
 |
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht:
|
Verfasst Do 13.03.2008 13:06
Titel
|
 |
|
dann passts im ff, aber der ie macht da nicht mit...
wenn ich ein div hab der float left hat und den div, der rechts den ersten div umfließen soll 20px abstand von dem haben soll, dann muss ich doch margin-left 20+width vom ersten div nehmen, oder?
manchmal klappt es dann, manchmal nicht
edit: außerdem muss dann nach dem #inhalt vor ende des #rahmen noch ein clear stattfinden, sonst ist der rahmen nicht um alles drum. und da kommt ja kein element mehr zwischen, dem ich ein clear geben kann
Zuletzt bearbeitet von stry am Do 13.03.2008 13:08, insgesamt 1-mal bearbeitet
|
|
| |
|
 |
| |
|
 |
| Ähnliche Themen |
[CSS] DIV ausrichten
[CSS] <p> im <div> unten ausrichten
CSS: drei <div>-tags ausrichten
Problem mit div-Bereichen
3 Spaltige sLayout mit div-Bereichen...
Vertikales CSS Menü
|
 |