✔ Weissen Hintergrund-Div mit abgerundeten Ecken anpassen

T

tobm_knows_best

Erfahrenes Mitglied
Hallo zusammen,

weiss jemand wie ich meinen weissen Hintergrund-DIV, welcher den Seiten-Inhalt etwas *hervorheben* soll entsprechend an den Inhalt der Index-Seite anpassen kann?



Mit einer automatischen Höhe funktioniert das nicht (es wird wie hier dargestellt leider sehr knapp gehalten :D) - und ich möchte auch gleich vorweg erwähnen, dass ich nicht allzu fit im Bereich Web-Design bin - aber ich versuche mein Möglichstes. Bei den Seiten *Impressum* & *Vita* konnte ich komischerweise mit der entsprechenden automatischen Höhe dieses Div´s arbeiten....

Fein wäre natürlich noch eine Art schwarzer Schein nach Aussen.... oder ist das zuviel des Guten ?! Was meint Ihr?

Haben die Cracks unter Euch vielleicht eine Lösung parat? Würde mich über jede Hilfe freuen!

Hier mal der HTML-Code zur Startseite:

HTML: 
code entfernt

und das CSS
Code: 
.fett_weiss_12px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #EEE;
}
.fett_gruen_12px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #C7D725;
	font-size: 12px;
}
.fett_grau_12px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	font-size: 12px;
}
.fett_gruen_14px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #C7D725;
	font-size: 14px;
}
.fett_grau_14px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	font-size: 14px;
}
.fett_blau_14px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #0070B3;
	font-size: 14px;
}
.fett_blau_12px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #0070B3;
	font-size: 12px;
}
.normal_grau_12px {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555;
	font-weight: normal;
}
.normal_hellgrau_10px {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #888;
}
.div_top {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 100%;
	padding-bottom: 12px;
	padding-top: 13px;
	position: fixed;
	top: 0px;
	background-image: url(pics/background.gif);
	left: auto;
	right: auto;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #EEE;
}
.div_top_inner {
	width: 1024px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.div_mid {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #555;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
	float: none;
	padding: 0px;
	height: auto;
	background-image: url(pics/background_4.png);
}
.div_mid_index {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #555;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
	float: none;
	padding: 0px;
	height: auto;
	background-image: url(pics/background_4.png);
}
.div_mid_vita {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #555;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
	float: none;
	padding: 0px;
	height: auto;
	background-image: url(pics/background_4.png);
}
.aufgabenbereich {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #888;
	text-align: center;
	float: left;
	width: 100%;
	margin-top: 10px;
	font-weight: normal;
	text-decoration: none;
}
.ueber_mich {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.leistungen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.folgen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #DDD;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.kontaktformular {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.code {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.div_mid_linksbuendig_in_table  {
	text-align: left;
	background-image: url(pics/vertical_line.png);
	background-repeat: no-repeat;
	background-position: 260px;
}
.div_mid_rechtsbuendig_in_table {
	text-align: right;
}
.navigation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	color: #777;
}
.navi_offline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #C7D725;
}
.horizontal_line {
	border:none;
	border-top: 1px dotted #EEE;
	background-color: #4B4B4D;
	height: 1px;
}
.horizontal_line_content {
	border:none;
	border-top: 1px dotted #4B4B4D;
	background-color: #cccccc;
	height: 1px;
}
.div_intro_index {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	float: none;
}
.div_intro_vita {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	float: none;
}
.div_intro_impressum {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	float: none;
	background-image: url(pics/Logo.png);
	background-repeat: no-repeat;
	background-position: 200px 0px;
}
.div_vita_comment {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
	float: none;
}
.div_vita_table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
	float: none;
}
.div_content {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	float: none;
	height: auto;
}
.footer_schatten {
	float: left;
	width: 100%;
	clear: left;
	background-image: url(pics/schlagschatten_footer.png);
	background-repeat: repeat-x;
	background-position: top;
	height: 15px;
}
.div_banner {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 55px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	float: none;
	height: auto;
	padding-top: 15px;
}
.top_schlagschatten {
	background-image: url(pics/schlagschatten_top.png);
	background-repeat: repeat-x;
	height: 15px;
	width: 100%;
	background-position: bottom;
	position: fixed;
	float: none;
	margin-top: -8px;
	margin-bottom: 0px;
}
.div_footer {
	height: 100%;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	left: auto;
	right: auto;
	bottom: 0px;
	background-image: url(/Test/pics/background.gif);
	background-repeat: repeat;
	float: left;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #EEE;
}
.footer_inner {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 190px;
}
.div_aktuelles {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-bottom: 10px;
	padding-right: 0px;
	height: 200px;
}
.div_leistungen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	height: 200px;
	padding-right: 16px;
	padding-left: 16px;
	margin-bottom: 10px;
}
.div_vita {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	height: 200px;
	margin-bottom: 10px;
}
.div_beratung {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 200px;
}
.div_fachchinesisch {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 200px;
	padding-left: 16px;
	padding-right: 16px;
}
.div_kontakt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 200px;
}

MFG
 
Zuletzt bearbeitet:
Hi,
also der Hintergrund wird von der Höhe nicht angepasst weil du deine Bildchen etc floatest. Floaten heißt die Elemente werden in ein Blockelement umgewandelt und aus dem Zeilenfluss genommen dies wiederum bedeutet aber auch dass dein Hintergrund nicht auf diese Elemente reagieren kann.
Da dies ja statische Elemente sind gib doch dem
HTML: 
<div id="div_content" class="div_content">
eine Feste Höhe mit dann funktioniert es auch wieder mit deinem Hintergrund.
Noch was, versuche Klassen und IDs nicht gleich zu benennen, es ist zwar erlaubt aber führt zu Verwirrungen.

Was du nicht so wirklich beachtest ist auch ein vernünftiges Clearen der Floats. Das kann zu komischen Problemen führen welche man auch nur schwer debuggt weil man einfach nicht dran denkt das es vielleicht an einem Float liegt. Hab mir dabei schon mal eine ganze Nacht für nicht um die Ohren geschlagen.

Von dem Schatten würde ich abraten.

Viele Grüße

PS: Ich habe deinen Quelltext mal etwas zensiert, siehe Oben.
 
Zuletzt bearbeitet:
Jan-Frederik Stieler hat gesagt.:
Hi,
also der Hintergrund wird von der Höhe nicht angepasst weil du deine Bildchen etc floatest. Floaten heißt die Elemente werden in ein Blockelement umgewandelt und aus dem Zeilenfluss genommen dies wiederum bedeutet aber auch dass dein Hintergrund nicht auf diese Elemente reagieren kann.
Zum Vergrößern anklicken....

Hat denn die Eigenschaft "float:left" nicht schon dem Element dann gesagt es soll mehr od. weniger *floaten* ?

Jan-Frederik Stieler hat gesagt.:
Da dies ja statische Elemente sind gib doch dem
HTML: 
<div id="div_content" class="div_content">
eine Feste Höhe mit dann funktioniert es auch wieder mit deinem Hintergrund.
Noch was, versuche Klassen und IDs nicht gleich zu benennen, es ist zwar erlaubt aber führt zu Verwirrungen.
Zum Vergrößern anklicken....

OK - diesbezüglich hab ich sogar das Gegenteil gehört - damit man weiss welcher DIV zu welcher Eigenschaft gehört bzw. umgekehrt - den Sinn warum es dabei zu Verwirrungen kommen kann habe ich leider noch nicht ganz verstanden :/

Jan-Frederik Stieler hat gesagt.:
Was du nicht so wirklich beachtest ist auch ein vernünftiges Clearen der Floats. Das kann zu komischen Problemen führen welche man auch nur schwer debuggt weil man einfach nicht dran denkt das es vielleicht an einem Float liegt. Hab mir dabei schon mal eine ganze Nacht für nicht um die Ohren geschlagen.
Zum Vergrößern anklicken....

Hmm...was genau meinst du denn mit clearen? Ich habe bereits den ein oder anderen DIV mit dieser Option versehen - nur um zu sehen wie´s wirkt - teilw. musste ich um dann eine zentrierte Darstellung zu erreichen entsprechend "clear:left" als Eigenschaft hinterlegen - aber so recht bewusst was ich mit dieser anfangen kann weiss ich wirklich nicht.

So nebenbei gefragt....Soll ich bei entsprechendem Aufbau bleiben oder ratest du mir gleich generell bei solchen Dingen zu einer horiziontal angeordneten Liste...?!

PS. Merci für die Zensur ;) soweit habe ich da nicht mitgedacht... :/
 
Hallo,
Hat denn die Eigenschaft "float:left" nicht schon dem Element dann gesagt es soll mehr od. weniger *floaten* ?
Zum Vergrößern anklicken....
Also „Floaten“ bedeutet im Deutschen Umfließen dies ist ein Begriff aus dem Textsatz.
Die heißt du hast ein Bild und der Text umfließt das Bild, nicht das Bild den Text.
Durch das Floatattribut bekommt das Element halt bestimmte Eigenschaften und auf die musst du dann reagieren.
OK - diesbezüglich hab ich sogar das Gegenteil gehört - damit man weiss welcher DIV zu welcher Eigenschaft gehört bzw. umgekehrt - den Sinn warum es dabei zu Verwirrungen kommen kann habe ich leider noch nicht ganz verstanden :/
Zum Vergrößern anklicken....
Die Verwirrungen entstehen weil du eine Klasse mehren Elementen zuweisen darfst, IDs aber nur einem. Und wenn du deine Klasse so nennst wie deine ID lässt es sich durch die Bezeichnung von dir aus der Systematik nicht mehr eindeutig identifizieren. Technisch natürlich schon.
Ich bin halt ein Freund des OOCSS.
Aber wie ich schon geschrieben hatte ist es nicht verboten und wenn du damit klar kommst dann mach es so.
Hmm...was genau meinst du denn mit clearen? Ich habe bereits den ein oder anderen DIV mit dieser Option versehen - nur um zu sehen wie´s wirkt - teilw. musste ich um dann eine zentrierte Darstellung zu erreichen entsprechend "clear:left" als Eigenschaft hinterlegen - aber so recht bewusst was ich mit dieser anfangen kann weiss ich wirklich nicht.
Zum Vergrößern anklicken....
Es geht darum einem Element zu sagen das es nicht auf Elemente reagiert welche gefloatet sind. Da dies dann auch vererbt wird kannst du somit auch Problemen bei verschachtelten Elementen vorbeugen.

Aber so wie es mir scheint hast du das Thema Float noch nicht verstanden und ich würde dir zu etwas Lektüre raten: http://www.thestyleworks.de/ref/float.shtml

So nebenbei gefragt....Soll ich bei entsprechendem Aufbau bleiben oder ratest du mir gleich generell bei solchen Dingen zu einer horiziontal angeordneten Liste...?!
Zum Vergrößern anklicken....
Generell kann man so was eigentlich nciht beantworten da eine Ul ja auch eine Semantik hat und somit von deinem Inhalt abhängt.
In dem Aktuellen Fall wäre es wohl keine schlechte Idee da du über display:inline wahrscheinlich dein float-Problem umgehen könntest.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück