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

problem mit 2 spalten Layout

W

Wurstuk

Neues Mitglied
Hi ich versuche gerade html und CSS zu lernen. Jetzt wollte jetzt mal ein Layout machen wo die navigation links neben dem Inhalt ist und rechts noch ein extra spalte für werbung oder so ist(auch neben dem Inhalt). aber i-wie klappt das ganze noch nicht so ganz....;ugl

Hier mal ein Bild wie es jetzt aussieht.


Ich möchte aber dass das Navi links und Navi rechts neben dem Inhalt sind.

Hier mal meine css datei:
HTML: 
*
{
    padding: 0px;
    margin: 0px;
}
html, body
{
    height: 100%;
}
#wrapper
{
    min-height: 100%;
}
#header
{
    background-color: #800000;
}
#inhalt
{
    background-color: #FFFF00;
}
#inhalt h1
{
    padding-bottom: 5px;
}
#inhalt p
{
    padding-bottom: 8px;
}
#navi-left
{
    background-color: #FF8000;
    width: 150px;
    float: left;
}
#navi-right
{
    background-color: #800080;
    width: 150px;
    float: right;
}
#footer
{
    background-color: #808080;
    height: 1.5em;
    margin-top: -1.5em;
}

und meine Index.html

HTML: 
<body>
    <div id="wrapper">
        <div id="header">
            <p>Header und Logo</p>
        </div>
        <div id="inhalt">
            <h1>&Uuml;berschrift</h1>
            <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt    </p>
        </div>
    </div>
    <div id="navi-left">
        <p>Navi-left</p>
    </div>
    <div id="navi-right">
        <p>Navi-right</p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</body>

Ich hoffe jemand kann mir helfen :D
 
HTML: 
    <div id="footer">
        <p>Footer</p>
    </div>
Die <div>'s sind überfällig. Gib einfach dem <p> des Footers die id "footer", und gut schon ein <div> weniger. Bei der Navigation das selbe. :)
 
Bevor du mit CSS anfängst, solltest du dich lieber noch etwas mit HTML beschäftigen, denn was du da fabriziert hast, ist die allgemein bekannte div-Suppe. Du hast zwar Textabsätze schon als <p> definiert und die Überschrift als <h1>, aber die ganzen div um die Elemente sind absolut überflüssig.

CSS macht erst richtig Sinn, wenn das HTML vernünftig ist.
 
So stand dis in nim Tutorial... komisch naja ok hat vielleicht jemand eine gute Seite zum "richtigen" Html und CSS lernen?
 
OK danke hab aber trotzdem noch ein problem... ich habe immer noch das selbe problem wie oben, blos das die navi-leisten den footer begrenzen und nicht den inhalt:



Hier mal meine CSS:

HTML: 
*
{
    padding: 0px;
    margin: 0px;
}
#header
{
    background-color: #800000;
}
#content
{
    background-color: #FFFF00;
    margin-right: 175px;
    margin-left: 175px;
}
#navi_left
{
    background-color: #FF8000;
    width: 175px;
    float: left;
}
#navi_right
{
    background-color: #800080;
    width: 175px;
    float: right;
}
#footer
{
    background-color: #808080;
}

was mach ich flasch?^^

fg
 
OK nachdem mir hier keiner helfen konnte hab ich es selbst raus gefunden.^^

Das Navi muss im html Code über dem stehen an dessen seite es sein soll, in meinem fall über dem inhalt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben