Antworten auf deine Fragen:
Neues Thema erstellen

divs --> float left problem

Alada

Nicht mehr ganz neu hier

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

Hat es drauf

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

Nicht mehr ganz neu hier

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:
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

AW: divs --> float left problem

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

Hat es drauf

AW: divs --> float left problem

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.
 

fth

Noch nicht viel geschrieben

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

Hat es drauf

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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.479
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben