Antworten auf deine Fragen:
Neues Thema erstellen

Frage zu Divs

saint44

Schlingel

hey,

ich lerne grade mit divs und css umzugehen, da die tabellelayouts out sind :D

ich kriege alles ganz gut hin bis auf das eine:

ich will z.b. einen header aus 2 divs gestalten:
links oben soll ein kleinen bild sein und im div daneben die schrift

wenn ich 2 divs nebeneinander mache, wird der 2. (also die schrift) unter den 1. div gepackt...

also kurz und knapp: wie schaffe ich es, dass 2 divs nebeneinander sind??


mfg saint :D
 

M

Melzebub

Guest

AW: Frage zu Divs

divs sind sogenannte Block elemente, nehmen also die ganze breite ein, solltest du ihnen keine breite zugewiesen haben. Also entweder du kennste die breite (%, em, pixel), oder aber du gibst dem ersten div "float:left". Dann umfließt alles was danach kommt das erste div. Nach dem 2. Div solltest du dann allerdings clearen. entwerder mit einem neuen Element, oder mit einem Zeilenumbruch und clear:left;.

Alles kloar?
 
AW: Frage zu Divs

in die entsprechende id des divs einfach
float:left;
im css einfügen


EDIT:
na super das du alles löscht in deinem edit ^^
 
M

Melzebub

Guest

AW: Frage zu Divs

<div id="leaf"></div>
<div id="header"><h1>Herzlich willkommen!</h1></div>
<br clear:left>

#header {
width:700px;
height:100px;
margin-bottom:10px;
}

#leaf {
background-image:url(leaf.gif);
width:150px;
height:100px;
float:left;
}

so sollte passen...
 

Herr_D

offline

AW: Frage zu Divs

was soll das mit 2 div?

HTML:
<div id="header"><img src="leaf.gif" alt="" class="leaf"><h1>Herzlich willkommen!</h1></div>

css
Code:
#header {
width:850px;
height:100px;
margin-bottom:10px;
}

.leaf {
width:150px;
height:100px;
border:none;
float:left;
}
 
M

Melzebub

Guest

AW: Frage zu Divs

hm, dann kannst es noch einfacher machen

<div id='header'><h1>Herzlich willkommen</h1></div>

#header{
background: url(leaf.gif) no-repeat top left;
padding: 0 0 0 150px;
width:850px;
}
 

saint44

Schlingel

AW: Frage zu Divs

hm, dann kannst es noch einfacher machen

<div id='header'><h1>Herzlich willkommen</h1></div>

#header{
background: url(leaf.gif) no-repeat top left;
padding: 0 0 0 150px;
width:850px;
}
naja das is nich das was ich gefragt ahbe. das trifft zwar aufsbeispiel zu aber sonst nicht ^^

danke frage gelöst super danke !!
 
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.476
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben