divs --> float left problem

Alada · 08.08.2012

hallo,

ich möchte eine seite folgendermaßen aufbauen:
links eine grafik die sich von oben bis unten waagerecht über die seite zieht,
dann oben links direkt daneben ein logo/suche/suchmaske,
dann nächste zeile: navigation.
mit meinem code habe ich das problem, dass erst die linke grafik kommt (float:left) dann logo und suche und suchmaske und dann rutscht die navigation nicht eins weiter runter, sondern ganz ans ende von der ersten grafik.
muss ich hier mit position:relative arbeiten oder habei ch einen fehler im code:

Code:

#hintergrund-links
{
width:149px;
height:1000px;
float:left;
background: url(images/hintergrund-links.png);
}

#logo
{
float:left;
width:518px;
height:70px;
background: url("images/logo.png");
}

#suche 
{
width:290px;
height:70px;
float:left;
background: url("images/suche.png");
background-color: white;
}

#suchmaske {
position:relative;
top:25px;
left:-210px;
float:left;

}

#navigation
{
clear:both;
width:808px;
height:35px;
float:left;
}

patrick_l · 08.08.2012

AW: divs --> float left problem

Es wäre hilfreich wenn du auch dein HTML hier posten würdest.
Ohne den Aufbau zu kennen, kann man schlecht etwas sagen.

Grüße Patrick

Alada · 08.08.2012

kein thema:

Code:

<body>
<div id="hintergrund-links">
</div>

<div id="logo">
</div>
    
    
    <div id="suche">
    </div>
    <div id="suchmaske">
        <form method="get" id="searchform" action="">
<input type="text" value/>
<input type="image" src="http://www.psd-tutorials.de/forum/images/go-small.png" id="search_submit" value="Suchen" >
</form>

    </div>
    
    <div id="navigation">
        <img src="http://www.psd-tutorials.de/forum/images/home.png" style=float:left;>
<img src="http://www.psd-tutorials.de/forum/images/ueberuns.png"style=float:left;>

<img src="http://www.psd-tutorials.de/forum/images/loesungen.png"style=float:left;>

<img src="http://www.psd-tutorials.de/forum/images/produkte.png"style=float:left;>

<img src="http://www.psd-tutorials.de/forum/images/kontakt.png"style=float:left;>


    </div>
    
<div id="sub-header">
    
    </div>
    <div id="karriere">
        
    </div>
    <div id="support">
        
    </div>
    <div id="news">
        
    </div>

hier die bilder - einmal die idee:

dann mein ergebnis:

cebito · 08.08.2012

AW: divs --> float left problem

patrick_l schrieb:
Es wäre hilfreich wenn du auch dein HTML hier posten würdest.

Nicht wirklich. Erstens haben wir die Bilder nicht und keiner hat Lust das ganze nachzubauen und zweitens ist aus der Beschreibung nicht wirklich ersichtlich, wie es denn nun richtig aussehen soll. Ein Link zur Seite oder einem Testcase + einem Bild, wo das gewünschte Ergebnis dargestellt ist, sollten es dann schon sein.

patrick_l · 08.08.2012

AW: divs --> float left problem

cebito schrieb:
Nicht wirklich. [...]

Ein Link zur Seite oder einem Testcase + einem Bild, wo das gewünschte Ergebnis dargestellt ist, sollten es dann schon sein.

Ok, da muss ich dir recht geben. Vor allem an die fehlenden Grafiken habe ich nicht gedacht. Aber man sieht schon das dort einiges schief läuft bzw. nicht korrekt umgesetzt wurde.

Alada · 08.08.2012

AW: divs --> float left problem

Grafiken sind ja jetzt da

fth · 08.08.2012

AW: divs --> float left problem

Ich würde zunächst einmal 2 Spaten über die ganze Seite machen und dann in die Rechte logo/suche/suchmaske und navigation geben.
eventuell noch 2 eigene Zeilen erstellen und dort erst die einzelnen Elemente hineingeben ...

patrick_l · 08.08.2012

AW: divs --> float left problem

Ich würde erst einmal ein ordentliches Grundgerüst erstellen.
Bei deiner Website könnte das ganze so aussehen.

HTML:

<!-- (x)HTML -->
<div class="wrapper">
    <div id="navigation">
        <div id="logo">
        </div>
        <div id="search">
        </div>
        <ul id="menue">
            <li><a href="#">Punkt1</a></li>
            <li><a href="#">Punkt2</a></li>
            <li><a href="#">Punkt3</a></li>
        </ul>
    </div>
    <div id="header">
        <!-- Teaserbild / Subnav -->
    </div>
    <div id="main">
        <div id="content">
            <!-- Content -->
        </div>
        <div id="sidebar">
            <!-- Sidebar -->
        </div>
    </div>
    <div id="footer">
        <!-- Footer -->   
    </div>
</div>

Wenn du mit HTML5 arbeiten würdest, könntest du entsprechend den Header, Nav, Section (+Article), Aside und Footer-Tag verwenden. Aber das nur so am Rande.

Edit:
Danach kannst du auch die einzelnen Bereiche problemlos mit CSS positionieren bzw. alle Bereiche leicht anpassen. Unter anderem durch das Floaten, sowie mit margin und padding.

Grüße Patrick

leveler · 08.08.2012

AW: divs --> float left problem

http://www.intensivstation.ch/templates/

patrick_l · 08.08.2012

AW: divs --> float left problem

leveler schrieb:
http://www.intensivstation.ch/templates/

An dieser Stelle mal ein Danke für den Link. Direkt mal in meinen Bookmarks geparkt. Wenn es mal schnell gehen soll ganz gut

Grüße Patrick