Antworten zum Thema „Frage zu Divs“

[saint44]

hey,

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

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

 

[Melzebub]

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?

 

[saint44]

AW: Frage zu Divs

Super mit dem Float= left gehts!!

 

[TheDon0Ne]

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 ^^

 

[Melzebub]

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]

AW: Frage zu Divs

was soll das mit 2 div?

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

css

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

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

 

[Melzebub]

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]

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 !!