Problem mit Anordung

Furien · 23 Juli 2010

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:

Code:

.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:

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

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

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

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

Code:

.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

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

mermshaus · 3 August 2010

Floats vor Nicht-Floats in den Sourcecode schreiben:

HTML:

<!DOCTYPE html>

<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

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

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="robots" content="all" />
        <meta name="keywords" content="Naruto, Shippuuden, Anime, Manga, Konoha, Crew, Ninja, Charaktere, Jutsu, Livestream, Infos" />
        <meta name="copyright" content="© by Konoha Crew" />
        <title>Konoha Crew | Startseite</title>
        <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="css.css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="logo"><img src="img/logo.png" alt="logo"/></div>
            <div id="navibar">
                <ul>
                    <li><a href="#">Start</a></li>
                    <li><a href="#">Start</a></li>
                    <li><a href="#">Start</a></li>
                    <li><a href="#">Start</a></li>
                    <li><a href="#">Start</a></li>
                    <li><a href="#">Start</a></li>
                    <li><a href="#">Start</a></li>
                </ul>
            </div>
            <div id="content">
                <h1>Lorem?</h1>
                <p>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.</p>
            </div>
        </div>
    </body>
</html>

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;}

_Thor_ · 3 August 2010

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

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

Zur besseren Veranschaulichung habe ich noch ein Bild hochgeladen:

mfg furien

Loon3y · 3 August 2010

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 · 4 August 2010

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

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:

Code:

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:

Code:

h1 {
    margin-top: 0.5em;
    margin-bottom: 1.2em;
}

Gleiches gilt für den Abstand unter den Absätzen:

Code:

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

Problem mit Anordung

Furien

Mitglied

Elroy

Senior HTML'ler

Furien

Mitglied

Furien

Mitglied

mermshaus

Senior HTML'ler

Loon3y

Neues Mitglied

Furien

Mitglied

_Thor_

Aktives Mitglied

Furien

Mitglied

Furien

Mitglied

Loon3y

Neues Mitglied

Furien

Mitglied

MrMurphy

Senior HTML'ler

Neueste Beiträge