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:

Code :

1 2 3 4 5 6 7

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

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#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

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.

Code :

1 2 3 4 5 6

[B][COLOR="Red"]#[/COLOR][/B]flaggen {     height: 51px;     width: 300px;     padding: 10px;     background-color:#0F0; }

Ciao
Quaese

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

verpasse #flaggen auch ein float:left

Danke Scen, funktioniert Super

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

Hi,

alternativ zu float:left ginge hier auch:

Code :

1 2 3 4 5 6 7

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

mfg Maik

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

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

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 ?

Hi,

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

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

/* "margin-/padding-Reset" zu Beginn des Stylesheets notieren! */ [b]* { margin:0; padding:0; }[/b] /* Ende "margin-/padding-Reset" */   body { ... }   #main { width:810px; margin:0 auto; [b]background:url(bottom.jpg) no-repeat left bottom;[/b] }   #bottom1 { float:left; display:inline; /* verhindert "Double-Float-Margin-Bug" im IE6 */ [b]/*background-image:url(bottom1.jpg);*/[/b] /* auskommentiert = deaktiviert */ height:115px; width: 151px; }   #bottom2 {     [b]/*background-image:url(bottom2.jpg);*/[/b] /* auskommentiert = deaktiviert */     height: 103px;     margin-left: 151px;     text-align:right;     padding-top: 12px;     padding-right: 20px; }

mfg Maik

Und irgendwie versteh ichs nicht, weil du nirgends den "spacer.jpg" hast. das wäre der Hintergrund der sich wiederholen sollte, also 1px dick. wo dann die 2 Farben mit dem lila strich ist !

Soll sich ja variabel verlängern, weil zb. bei kontakt, muss eine halbe seite ausgefüllt werden..

So habs geändert, aber kann es sein das wir aneinandergeredet haben ?

ich wollte nicht das Ende der Page unten halten, sondern nur den lila Hintergrund, diesen Streifen...



Ach jetzt, hab was gefunden:

http://www.css4you.de/wslayout1/ex0001.html

kaum war das drin :

html {height:100%;}

und height 100%, schon gehts, bis unten ! SEHR GUT !!

hier mal ein test: http://www.sonnberg-rose.at/test.php

Danke Dir trotzdem !!

Wenn es dir um http://www.sonnberg-rose.at/spacer2.jpg geht, heißt die Tageslosung eben: "Kommando zurück"

Code :

1 2 3 4 5 6 7 8 9 10

#main { width:810px; margin:0 auto; [B]background:url(spacer2.jpg) repeat-y left bottom;[/B] } #spacer { /[B]*background-image:url(spacer2.jpg);*/[/B] height: 100%; text-align:center; }

mfg Maik

Hi, sry habs vielleicht erst falsch erklärt

Aber drehe langsam durch, im test gings Super, jetzt zieht er mir den solang 3 x solang wie die eigentliche Page..

Ich hab einfach ein DIV unter den MAIN gehangen:

</div> <---- SCHLIESST DAS MAIN

<div id="spacer"> SPACER </div>

</body>
</html>

Und so siehts imm style.css aus:

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

}
#spacer {
margin:0 auto;
background-image:url(spacer2.jpg);
height: 100%;
width: 810px;
text-align:center;
/*background-image:url(spacer2.jpg);*/
}

ich seh langsam nicht mehr durch !

Wenn ich im "spacer DIV" nicht den spacer2.jpg angebe, kommt unten garnichts an...

Dann setz die Box #spacer im HTML-Code wieder an die Stelle zurück, wo sie vorhin noch saß (u.a. auch innerhalb von #main).

Code :

1 2 3 4 5 6 7 8

#spacer { [b]/*margin:0 auto;*/[/b] [b]/*background-image:url(spacer2.jpg);*/[/b] height: 100%; [b]/*width: 810px;*/[/b] text-align:center; /*background-image:url(spacer2.jpg);*/ }

mfg Maik

Puh, also habs drin, vorhin gings auch, aber der will nciht mehr bis zum Rand runter, hab sicher irgendwo den hund begraben, vielleicht siehst du was:

HTML-Code:

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



html {height:100%;}

body {
	background: #efe2ff;
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: smaller;
	margin-top: 0px;
	height: 100%;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: underline;
}

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

}
#spacer {
margin:0 auto;
/*background-image:url(spacer2.jpg);*/
height: 100%;
width: 810px;
text-align:center;
/*background-image:url(spacer2.jpg);*/
}

<div id="spacer"> SPACER </div>
<div id="copy" class="copy1">
2008 &copy; <a href="http://www.pixelgenau.at">pixelgenau.at</a> | <a href="http://www.validome.org/referer">
<img style="border:none"
src="http://www.validome.org/images/set4/valid_xhtml_1_0.gif"
alt="Valid XHTML 1.0" width="80" height="15" /></a></div>
</div>
</div>
</body>
</html>