Problem mit Anordung

Furien · 22. Juli 2010 um 23:15

Hi Leute,
Ich habe ein Problem mit der Anordung von 3 DIVs.
Sie sollen alle nebeneinander sein und deswegen sieht mein CSS folgendermaßen aus:

.newstitel {background-color:#f7eed3; width:100px; float:left;} .newsdatum {background-color:#f7eed3; width:100px; clear:left; margin: 0 auto;} .newsautor {background-color:#f7eed3; width:100px; float:right; } .newscontent {background-color:#f7eed3; width:100%;}HTML:

[CODE]

Titel

Datum

Autor

MoinMoin

[/CODE]Die DIVs werden auch fast richtig positioniert, aber zur besseren Verständlichkeit hänge ich ein Bild an, da wird der Fehler klarer. http://img207.imageshack.us/img207/8674/unbenanntcq.png

mfg furien

Achja noch die Frage: Da DIVs hier ja eigentlich semantisch nicht korrekt sind: würde es auch mit p gehen?
Ist ja auch ein Block Element. Wo wir zu der Frage kommen, wozu es Divs eigentlich gibt, aber egal

Elroy · 23. Juli 2010 um 04:16

Hallo.

Schon mal das clear: left entfernt und es dann versucht?

Ein div ist dazu da mehrere Elemente zusammen zu fassen.

Gruss
Elroy

Furien · 23. Juli 2010 um 11:58

Jaja ich hatte zu erst auch p.
Kann ich ja auch wieder verändern…
Naja ich probiers mal.

.newstitel {background-color:#f7eed3; width:100px; float:left;} .newsdatum {background-color:#f7eed3; width:100px; margin: 0 auto;} .newsautor {background-color:#f7eed3; width:100px; float:right;} .newscontent {background-color:#f7eed3; width:100%; }

Sieht jetzt so aus:

http://a.imageshack.us/img707/4264/unbenanntwjr.png

mfg furien

Furien · 2. August 2010 um 19:52

Also ich war zwar im Urlaub, aber das Problem ist immernoch da^^
mfg

mermshaus · 3. August 2010 um 01:44

Floats vor Nicht-Floats in den Sourcecode schreiben:

[html]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>

    <style type="text/css">
        .newstitel {background-color:#f7eed3; width:100px; float:left;}
        .newsdatum {background-color:#f7eed3; width:100px; margin: 0 auto;}
        .newsautor {background-color:#f7eed3; width:100px; float:right;}

        .newscontent {background-color:#f7eed3; width:100%; }
    </style>

</head>

<body>

    <div class="newstitel">Titel</div>
    <div class="newsautor">Autor</div>
    <div class="newsdatum">Datum</div>

    <div class="newscontent">MoinMoin</div>

</body>

[/html]

Loon3y · 3. August 2010 um 05:59

Guten Morgen.

man könnte dem Newscontent auch noch ein clear:both geben (wer floatet, der muss auch clearen. )

Gruß
Loon3y

Furien · 3. August 2010 um 11:19

Okay, das geht nun alles, allerdings habe ich ein neues Problem.
Und zwar ist der Navidiv nicht genau am Content und die Überschrift nicht am oberen Ende
des Divs sowie der Text nicht an der Überschrift.
Code:
Html:

[code]

Konoha Crew | Startseite

Start
Start
Start
Start
Start
Start
Start

Lorem?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

[/code] CSS: [code]* { margin: 0; padding: 0; }

body {
background: url(„img/bg1.png“) #2E2E2B repeat-x;
text-align:left;
font-family:Verdana;
font-size:12px;
text-decoration:none;
font-style:normal;
font-color: ffffff;
}

h1 {
background: url(„img/button_bg.png“);
font-size: 1.1em;
border:1px solid #161938;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
text-decoration:none;
}

a,a:link,a:visited,a:active{
color: #ffffff;
}
a:hover {
color: #000000;
}

/DIVs/

div#wrapper {
margin: 0 auto;
position: relative;
width: 994px;
}

div#logo {
height: 70px;
width: 146px;
}

div#content {
width: 100%;
background: #fb5300;
white-space: pre;
border:1px solid #161938;
padding: 3px;
clear: left;
}

div#navibar {
height: 35px;
}

div#navibar li {
background: url(„img/button_bg.png“);
list-style-image: none;
list-style-type: none;
border:1px solid #161938;
float:left;
margin-right: 2px;
display:block;
}

div#navibar li:hover {background: url(„img/button_bg2.png“);}

div#navibar a {
text-transform: uppercase;
padding: 5px 5px 5px 5px;
display: block;
font-weight: bold;
text-decoration:none;
}

div#navibar a:hover{color: #ffffff;}

[/code]

_Thor · 3. August 2010 um 11:26

Ein Link zur Seite würde helfen, das Problem schneller zu finden, statt jetzt jede CSS-Eigenschaft durchzugehen und sich das Ergebnis vorzustellen.

Enthält dein Logo Text? Den Namen der Seite z.B.? Dann wäre es sinnvoller als h1 ausgezeichnet und der Alternativtext sollte den Inhalt des Logos beschreiben, oder könntest du mit dem Text ‚logo‘ etwas anfangen, wenn du das Bild nicht sehen könntest?

Das div um die Navigation ist überflüssig, es gruppiert nichts und die Formatierungen kannst du auch direkt der ul geben.

Furien · 3. August 2010 um 11:49

Hey Thor,
das Navidiv zu entfernen was sogar die Lösung eines Problems
Die Navi hängt jetzt brav am Content Div.
Ich ladt die Seite eben hoch, kommt gleich.
Hier der Link: http://konohacrew.square7.ch

Furien · 3. August 2010 um 18:51

Zur besseren Veranschaulichung habe ich noch ein Bild hochgeladen:

http://a.imageshack.us/img829/3361/unbenannt1d.jpg

mfg furien

Loon3y · 3. August 2010 um 19:10

Hallo.

css.css → zeile 49 → white-space: pre; entfernen.

→ white-space: Textumbruch: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Gruß
Loon3y

Furien · 3. August 2010 um 23:25

Danke Loon3y,
aber jetzt muss ich Zeilenumbrüche ja mit br erzeugen,
was ja eher nicht richtig ist ^^
Was soll ich da machen?

mfg

MrMurphy · 4. August 2010 um 04:18

Hallo,

Zeilenumbrüche läßt man den Computer machen. Nur dann, wenn es ausnahmsweise mal notwendig ist greift man zum br.

Der Text wird in semantisch korrekte Tags eingeschlossen (h1,h2, p u.s.w.), was du ja bereits getan hast. Jeder Absatz wird in ein eigenes p-Tag eingeschlossen.

Wenn es um Abstände geht, werden die nun in der CSS Datei definiert, bei dir zur Zeit die css.css.

Wenn du unter der Überschrift Abstand gewinnen möchtest kannst du dort z. B folgendes eintragen bzw. den bereits vorhanden Eintrag erweitern:

h1 { margin-bottom: 1.2em; }Statt eines Kommas für Nachkommastellen musst du in css immer den Punkt benutzen.

Wenn du über der Überschrift etwas Leerraum haben möchtest erweiterst du den Eintrag:

h1 { margin-top: 0.5em; margin-bottom: 1.2em; }Gleiches gilt für den Abstand unter den Absätzen:

p { margin-bottom: 0.9em; }Damit dir nicht alles zerschießt darfst du z. B. das h1-Tag nur dort benutzen wo es angebracht ist. Oder benutzt für weitere Überschriften auf der Seite h2. Das Logo als h1 zu definieren ist unsinnig, da solltest du ein div benutzen.

Genau wie zwei h1-Überschriften direkt hintereinander folgen zu lassen. Die zweite und alle gleichartigen solltest du als h2 definieren. Dann kannst du mit css auch die Abstände vernünftig regulieren.

Gruss

MrMurphy