✔ float Box will sich nicht anpassen lassen

[xkoy]

Servus,

wieder ein kleineres problem !

http://www.sonnberg-rose.at/start.php

Die Flaggen sollen rechts vom text !

ich kann saber die DIV Box der Flaggen nicht anpassen (margin etc.), versteh es nicht.
Und floaten lässt sich die Box nur mit den Flaggen wenn ich es als CALSS definiere:

Das ist die Startseite momentan:

<div id="startrahmen">
<div><img src="fotos/start.jpg" alt="Startbild" width="720px" height="486" /></div>
<div id="starttext">Willkommen // Bitte wählen Sie ihre Sprache<br />Welcome // Please choose your language<br />Benvenuto // Scegli la tua lingua</div>
<div id="flaggen"><img src="bilder/deu.jpg" alt="Deutsch" width="65" height="51" /><img src="bilder/eng.jpg" alt="Englisch" width="65" height="51" style="margin-left: 20px" /><img src="bilder/ita.jpg" alt="Italienisch" width="65" height="51" style="margin-left: 20px" /></div>
</div>
<div style="clear:both;">
</div>

Und das die css einträge dazu:

#startrahmen {
width: 720px;
margin:0 auto;
margin-top: 25px;
}
.flaggen {
height: 51px;
width: 300px;
padding: 10px;
background-color:#0F0;
}
#starttext {
padding: 10px;
width: 300px;
height:51px;
float:left;
background-color:#CF3
}

Vielleicht sieht jemand den Fehler.

Danke

 

[Quaese]

Hi,

das DIV-Element für die Flaggen ist mit einem ID-Attribut, nicht mit einer Klasse ausgezeichnet. Der CSS-Selektor muss deshalb mit einer Doppelraute eingeleitet werden, nicht mit einem Punkt.

#flaggen {
	height: 51px;
	width: 300px;
	padding: 10px;
	background-color:#0F0;
}

Ciao
Quaese

 

[xkoy]

Hi,

also eine "#" vor die Flagge ?

#flaggen {
height: 51px;
width: 300px;
padding: 10px;
background-color:#0F0;
}

Wenn ich es so ausschreibe, dann funktioniert mein Float nicht mehr...

 

[Sven Mintel]

verpasse #flaggen auch ein float:left

 

[xkoy]

Danke Scen, funktioniert Super

Wenn du Lust hats kannst mir ja mal schreiben warum...
nach dem DIV Flaggen wird ja nichts gefloatet...

 

[Maik]

Hi,

alternativ zu float:left ginge hier auch:

#flaggen {
height: 51px;
width: 300px;
padding: 10px;
background-color:#0F0;
margin-left:320px; /* width:300px + 2*10px padding = 320px von #starttext */
}

mfg Maik

 

[xkoy]

Hi, danke ! genauso ist auch mein Seiten layout strukturiert, hat was gedauert bis ich rausgefunden hatte das man da rechnen muss

jetzt habe ich meine page optisch bisschen überarbeitet, und habe ein weiteres Problem.

100% höhre, einen Bildes, bzw. Hintergrund..

Zu sehen hier: http://www.sonnberg-rose.at/

Unten würd ich das gern bis zum Seitenende gehen lassen, geht das mit css

DANke

 

[Maik]

Wenn du die beiden nachfolgenden Boxen #spacer und #copy (testweise) im HTML-Code entfernst, reicht das Hintergrundbild von #bottom2 auch bis zum unteren Fensterrand.

Im Umkehrschluß solltest du die beiden "bottom"-Grafiken stattdessen als Hintergrundbild für #main definieren und es mittels background-position an seinem unteren Elementrand positionieren.

mfg Maik

 

[xkoy]

Hallo Maik !

habe es mal Testweise gelöscht gehabt ! Aber die "Main" Box geht nicht bis runter ! mit height 100% erreiche ich auch nichts ! oder versteh ich dich falsch ?

 

[Maik]

Hi,

füg mal die beiden Grafiken "bottom1.jpg" und "bottom2.jpg" in einer Grafikdatei zusammen, und setz folgendes Stylesheet um:

/* "margin-/padding-Reset" zu Beginn des Stylesheets notieren! */
* {
margin:0;
padding:0;
}
/* Ende "margin-/padding-Reset" */

body { ... }

#main {
width:810px;
margin:0 auto;
background:url(bottom.jpg) no-repeat left bottom;
}

#bottom1 {
float:left;
display:inline; /* verhindert "Double-Float-Margin-Bug" im IE6 */
/*background-image:url(bottom1.jpg);*/ /* auskommentiert = deaktiviert */
height:115px;
width: 151px;
}

#bottom2 {
	/*background-image:url(bottom2.jpg);*/ /* auskommentiert = deaktiviert */
	height: 103px;
	margin-left: 151px;
	text-align:right;
	padding-top: 12px;
	padding-right: 20px;
}

mfg Maik