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

Layout Gerüst problem

Status
Für weitere Antworten geschlossen.
J

Juventino

Neues Mitglied
Hi, ich hab html erst vor kurzem gelernt und ich hab ein paar fragen...
Mein Hauptproblem hab ich mit dem Layout Gerüst.
Ich will das die linke navigation die Hauptseite und die rechte box in einer Reihe sind... Nur klappt das nicht so wirklich ich hab hier mal den Code eingefügt

Index.html

Code: 
 <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
        <!--HEAD-->

<div><div id="head">
<img src="../MY PAGE/Style 1/bilder/header.JPG" width="971" height="65" border="0" alt=""></div>
        <!--Ende HEAD-->

        <!--NAVIGATION LINKS--><div id="navigation">
</div>

        <!--Ende NAVIGATION LINKS-->

        <!--HAUPTTEIL-->
<div id="main">
</div>

        <!--Ende HAUPTTEIL-->

        <!--RECHTE MENÜBOX 1-->
<div id="box1">
</div></div>
        <!--Ende RECHTE MENÜBOX 1-->

        <!--RECHTE MENÜBOX 2-->
<!--<div id="box2">
</div>
        <!--Ende RECHTE MENÜBOX 2-->


                 <!--RECHTE MENÜBOX 3-->
<!--<div id="box3">
</div>
<!--Ende RECHTE MENÜBOX 3-->

</body>
Jetzt noch die css datei
Code: 
#head{
width:1000px;
height:200px;
border:3px blue solid;
margin-left:3cm;
}

#navigation{
width:200px;
height:800px;
border:3px blue solid;
border-top:none;
border-bottom:3px blue solid;
margin-left:3cm;
float:left;}

#main{
width:594px;
height:800px;
border-bottom:3px blue solid;
border-right:3px blue solid;
margin-right:3cm;

}

#box1{
width:200px;
height:800px;
border:3px blue solid;
border-left:none;
border-top:none;
margin-right:3cm;
margin-bottom:10cm;
float:right;
}

#box2{
width:200px;
height:250px;
border:3px blue solid;
float:right;
}

#box3{
width:200px;
height:250px;
border:3px blue solid;
float:right;
Meiner meinung nach sollte alles stimmen ich bin mir nur bei margin und float nicht so sicher...

PS:Ich benutze den Phase 5.4 Editor ist der gut oder nicht?
MfG Juventino
 
Wenn ich dich richtig verstehe willst du eine Seite bauen bei der links die Navigation ist, in der Mitte der Content und rechts eine weitere Leiste.

Dein Problem ist: du hast die Reihenfolge im HTML-Code nicht ganz beachtet und verwendest "float: right;". Nimm für solch einfache Strukturen lieber "float: left;" und ordne die anzuzeigenden divs gleich in der Reihenfolge an. Also

HTML
Code: 
<div id="links">linke Navigation</div><div id="main">Inhalte</div><div id="rechts">rechte Navigation</div>

CSS
Code: 
#links { float: left;width: 200px; }
#main { float: left;width: 500px; }
#rechts { float: left;width: 200px; }
 
hmm aber ich habe doch zuerst head dann navigation(links)dann hauptteil(content)dann rechte menübox 1... Oder?
Das mit dem float hab ich auch schon ausprobiert aber dann macht der editor das immer ne zeile weiter unten halt links anstatt rechts...
Und noch was... wenn ich über phase 5 mir das anguck sieht das abgesehen von meinem prob. gut aus aber wenn ich über ie7 oder firefox mir das anguck ist alles verutscht und man er kennt gar nix... Ist das wenn ich die site online stell auch so?Gibt es da so ein prog wo Phase5 zu firefox optimiert?^^
Thx 4 answers Juventino
 
Ich denke Du solltest dein css-code komplettieren.
die divs haben zwar eine Festlegung der Groesse aber nicht der Position.
Ausserdem hast Du eine div in einen grossen div reingelegt.
Den fuer den head kannst Du rausnehmen und zuerst aufrufen.
Ich denke auch dein grosser div endet an der falschen Stelle. Aber den brauchst Du sowieso nicht.
 
edi schrieb:
Ich denke Du solltest dein css-code komplettieren.
die divs haben zwar eine Festlegung der Groesse aber nicht der Position.
Zum Vergrößern anklicken....
Wie? Sry aber ich bin neu bei HTML und kenn mich nich aus aber ich denke du meinst margin oder?
edi schrieb:
Ausserdem hast Du eine div in einen grossen div reingelegt.
Zum Vergrößern anklicken....
Welche? Könntest du die zeile von oben kopieren?
edi schrieb:
Den fuer den head kannst Du rausnehmen und zuerst aufrufen.
Zum Vergrößern anklicken....
Wie rausnehemen und aufrufen?
edi schrieb:
Ich denke auch dein grosser div endet an der falschen Stelle. Aber den brauchst Du sowieso nicht.
Zum Vergrößern anklicken....
Wie an falsche stelle? Und wieso brauch ich ihn nich? Ist doch übersichtlicher als das ohne div zu machen.
Naja wie gesagt ich bin noch Anfänger und entschuldige mich über die vielen dummen fragen^^
PS:Danke für die antworten MfG Juventino
 
Juventino schrieb:
Wie? Sry aber ich bin neu bei HTML und kenn mich nich aus aber ich denke du meinst margin oder?
Welche? Könntest du die zeile von oben kopieren?
Zum Vergrößern anklicken....

zweite Zeile
Code: 
<div> <div id="head">
es sind also zwei container offen.Wozu?
Code: 
 <div id="main"> </div>
hier machst Du den container auf und leer sofort wieder zu.

Code: 
         <!--RECHTE MENÜBOX 1-->
<div id="box1">
</div></div>
Und hier machst du deine box auf und leer wieder zu.Danach schliesst Du den ersten Container von oben, den Du garnicht brauchst.

vieleicht so?
Code: 
div.box1 {position: absolute;
             top:20px;
             left:20px;
             width:..px;
             height:...px;
}

der naechste div bekommt dann bei Left die Summe der verhergehenden px (left:20px + width:....px + ?px fuer Abstand zwischen den divs) :shock:

es gibt keine dummen Fragen, nur dumme Antworten
 
edi schrieb:
Code: 
 <div id="main"> </div>
hier machst Du den container auf und leer sofort wieder zu.
Zum Vergrößern anklicken....
weil wie gesagt nur das gerüst und ich den text später reinschreiben will
edi schrieb:
div.box1 {position: absolute;
top:20px;
left:20px;
width:..px;
height:...px;
}
Zum Vergrößern anklicken....
1. muss das doch so heisen oder? #box1 oder hab ich da was flasch gemacht?
2.was bringt postion absolute und top...?Was veränder ich damit?
edi schrieb:
es gibt keine dummen Fragen, nur dumme Antworten
Zum Vergrößern anklicken....
Na dann kann ich ja weiter fragen^^
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben