• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Anordung

Furien

Furien

Mitglied
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 :D
 
Hallo.

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

Ein div ist dazu da mehrere Elemente zusammen zu fassen.

Gruss
Elroy
 
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
 
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>
 
Guten Morgen.

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


Gruß
Loon3y
 
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;}
 
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.
 
Danke Loon3y,
aber jetzt muss ich Zeilenumbrüche ja mit br erzeugen,
was ja eher nicht richtig ist ^^
Was soll ich da machen?

mfg
 
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben