Homepageproblem

naidhir

Hi,
ich bin gerade dabei eine Seite für eine Homepage zu erstellen.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>weltkehrt</title>
<link rel="stylesheet" type="text/css" href="localhost/weltkehrt_1/main.css">
</head>
<body>


<div id="menu"><ul>
    <li><a href="#">Bilder und Kunstwerke</a></li>
    <li><a href="#">Briefe und Texte</a></li>
    <li><a href="#">Tutorials und FAQ</a></li></ul>
</div>
<div id="v_navi">
    <h2>weltkehrt</h2>
    <div class="circle"><img href="#"></div>
    <ul><li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li></ul>
</div>
<div id="content">
    <h2>Herzlich Willkommen</h2>
<p>Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.
Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.
Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.
Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.
Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.
Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.
Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.Lorem ipsum dolor sit edmet.
</p></div>


<div id="footer">2013 - 2014</div>


</body>
</html>

Alles anzeigen

und CSS

Code

body {
    background_color: #FAFAFA;
}


#content {
    float: right;
    width: 80%;
    text-align: justify;
    height: 100%;
    background-color: yellow;
}
#v_navi {
    float: left;
    width: 20%;
    margin-right: 0 auto;
    text-align: right;
    height: 100%;
    background-color: red;
}


#menu {
    position: relative;
    width: 100%;
    margin: 20px auto;
    background-color: blue;
}


#menu ul {
    position: abolsute;
    margin: 0 auto;
    list-style: none;

}


#menu ul li {
    float: left;
    margin: 0 0 0 20px;
}


.#footer {
    clear:both;
    overflow:hidden;
    text-align: center;
    font-size:16px;
    line-height:1.3;
} 


.circle {border-radius: 50%;
width: 200px;
height: 200px;
}

Alles anzeigen

Und hier ein Bild damit ihr euch vorstellen könnt wie es aussehen soll

Danke für eure Hilfe

threadi

Was genau ist jetzt die Frage?

naidhir

Was die Lösung ist, damit mein Code so angezeigt wird wie in dem Bild.

Bandit

Guck mal: http://www.css4you.de/wslayout1/index.html

naidhir

Hab mir die Seite mal angeguckt. Mir ist das mit dem FLOAT schon logisch, aber ich weiß nicht was ich falsch gemacht habe, dass es einfach nicht funktioniert...:?

Bandit

Bitte mal einen Link zur Seite posten, damit man sich das mal ansehen kann.

Was mir merkwürdig erscheint ist

MrMurphy

Hallo,

ich denke auch das dir ohne Link zu der Seite (eventuelle bei einem Freeware-Provider wie bplaced.net) nicht zu helfen ist.

Das fängt schon damit an, das deine Grafik offensichtlich nicht zu deinem Quelltext passt. So ist in deinem Quelltext links die schmale Spalte und rechts die breite. In der Grafik ist das genau anders rum. In dem Quelltext hat die obere Navi einen blauen Hintergrund, in der Grafik der footer.

Außerdem hast du verschiedene Tippfehler / Rechtschreibfehler im Quelltext, z. B. background_color, abolsute.

Das Grundproblem scheint zu sein, das du dich vor den HTML- / CSS-Grundlagen drücken willst. Du hast zum Beispiel ein float (#menu ul li), das nicht durch ein clear oder ein clearfix abgeschlossen ist. Sowas geht bei der Vererbung beim CSS gar nicht. Lösch einfach mal dieses float um die Auswirkungen zu testen.

Außerdem sollte man heutzutage bei neuen Seiten HTML5 und CSS3 und deren Elementen und Möglichkeiten benutzen.

Gruss

MrMurphy

Tags