✔ Probleme mit Hintergrund/Positionierung von DIV

Status
Nicht offen für weitere Antworten.
Dann verwende mal die margin-Eigenschaft (= Außenabstand) anstelle von padding (= Innenabstand).
 
Hallo,
das interpretiert der FF aber falsch.

Gibt es nicht irgendwo ein vordefiniertes Layout (siehe Posting am Anfang von Tobi) in diesem 3 Spalten Layout. Ich habs schon versucht bekomme es aber nicht hin.

Gruss
Julchen
 
Also jener Text, welche mit der Hintergrundfarbe belegt werden soll ist dieser?

Code: 
#content {
	margin-left: 0px;
	height: 100%;
	min-height: 100%;
	color: #333;
	font-size: 0.7em;
}

Ändere obiges ab in

Code: 
#content {
	margin-left: 0px;
	height: 100%;
	min-height: 100%;
	color: #333;
	font-size: 0.7em;
	background-color:#fff;
}

Was mir noch fehlt ist die Breitenangabe des Contents.
Ansonsten ergänze im Bereich #inner
 
Was interpretiert der Firefox falsch?

Ich tippe eher auf den IE, der die Werte verdoppelt.

Code: 
#inner {
margin: 270px 1em 0 1em;
}

* html #inner { /* Für IE */
margin: 135px 1em 0 1em;
}
@ saila: es handelt sich hierbei um das DIV mit der ID #inner und nicht #content.
 
Frage am Rande an @Maik,

was willst du damit aussagen?
Zitat: Interpol und Deutsche Bank, FBI und Scotland Yard, Finanzamt und das BKA haben unsere Daten da.
 
He stimmt ;) kann mich entfernt erinner.....

Zur Hintergrundfarbe:
es kann entweder im
#content oder im
#inner

background-color:#fff;

eingesetzt werden.

Ungeachtet dessen fehlt die Anweisung für den Abstand nach oben ;)
 
Hallo,

michaelsinterface hat gesagt.:
Was interpretiert der Firefox falsch?

Ich tippe eher auf den IE, der die Werte verdoppelt.

Code: 
#inner {
margin: 270px 1em 0 1em;
}

* html #inner { /* Für IE */
margin: 135px 1em 0 1em;
}
@ saila: es handelt sich um das DIV #inner und nicht #content.
Zum Vergrößern anklicken....

das klappt alles nicht! Damit zerschießt er mir das komplette Layout. Und mit der Background-color im Content funktioniert auch nicht.

Vielleicht müsste ich von Grund auf alles anders machen.

Leider bin ich noch nicht lange auf dem Gebiet mit Layern tätig (seit Jahren immer nur Tabellen). Wer kann mir anhand von Tobis Beispiel dieses mit DIVs und Float umsetzen?

Oder soll ich wie von mir vorab geplant alles mit fester positionieren der einzelnen Elemente ohne 3-spaltiges Layout umsetzen.

Wäre euch für eure Hilfe echt nochmal dankbar.

Gruss
Julchen
 
Ich gebe dir gleich ein Beispiel für dein Vorhaben... Minuten.....

Hast du das mit background-color probiert? Dann siehst du das nächste Problem, wenn du es so beibehälst.

Die CSS im groben überarbeitet bzgl. Boxen
Code: 
html, body {
	margin: 0px 0px 0px 0px;
	background-color:#575758;
	}

body {
	font-family: trebuchet ms, verdana, arial, helvetica, sans-serif;
	font-size: 100.01%;
	color: #FFFFFF;
	background-image:url(../images/spacer.gif);
	background-repeat:repeat-y;
	}

#koerper {
	width: 790px;
	\width: 784px;
	w\idth: 790px;
	margin-left:auto;
	margin-right:auto;
	}

#top {
	width:auto;
	margin-left:0px;
	margin-right:0px;
	height: 160px;
	text-align:center;
	color: #000;
}

#menu_top {
	padding-left: 580px;
	}

#top_2 {
	width:auto;
	padding-right: 90px;
	text-align:right;
	background-color:#acc; /* Als Test um zu sehen, wo die Box ist */
	background-repeat:repeat-x;
}

#left_box {
	width: 20%;
	\width: 144px;
	w\idth: 150 px;
	height:100%;
	float:left;
	}

	/* Start Menü links */
	#menu {
		width: 130px;
		font-size: 100%; /* Hintergrundfarbe und Schriftfarbe f?r diesen Container wurde in #outer formatiert. Dieser Container muss durchsichtig bleiben. */
		margin-bottom:30px;
	}
	/* common styling */
	#menu ul li a, .menu ul li a:visited {
		display:block;
		text-decoration:none;
		color:#333;
		width:120px;
		height:20px;
		line-height:19px;
		font-size:0.7em;
		padding-left:10px;
		background-color:#FFFFFF;
		filter:alpha(opacity=85);
		-moz-opacity: 0.85;
	}
	#menu ul { padding:0; margin:0;list-style-type: none; }
	#menu ul li {float:left; margin-right:1px; position:relative;}
	#menu ul li ul {display: none;}

	/* specific to non IE browsers */
	#menu ul li:hover a {color:#fff; background-color: #61796D;}
	#menu ul li:hover ul {display:block; position:absolute; top:0; left:130px; width:150px;}
	#menu ul li:hover ul li a.hide {background-color: #fff; color:#333;}
	#menu ul li:hover ul li:hover a.hide {width:164px;}
	#menu ul li:hover ul li ul {display: none;}
	#menu ul li:hover ul li a {display:block; color:#333; background-color: #ffF; width:164px;}
	#menu ul li:hover ul li a:hover {color:#fff; background-color: #61796D;}
	#menu ul li:hover ul li:hover ul {display:block; position:absolute; left:300px; top:0; color:#33;}
	#menu ul li:hover ul li:hover ul li a {display:block; width:150px; background-color: #C6CEBF; color:#333;}
	#menu ul li:hover ul li:hover ul li a:hover {color:#fff; background-color: #61796D;}
	#menu p { margin-top: 160px; } /* margin-top damit erster inhalt im sichtbaren Bereich dargestellt wird. */

	#guetezeichen {
		margin-top:40px;
	}
/* Ende Leftbox */

/* Start Contentbox */
#content {
	width: 80%;
	background-color:#fff;
	float:right;
	}
	
#content_inhalt {
	padding:5px;
	color: #333;
	font-size: 0.7em;
}


/*  ******************** übrige Formatierungen ******************************* */

	
a, a:link, a:visited, a:active {
color:#E27500;
font-weight:normal;
text-decoration:none;
}
#liste{
padding:0;
list-style-image:none;
list-style:none;
}
#liste li{
line-height:20px;
padding:0 0 0 1em;
background-image:url(../images/arrow_liste.gif);
background-position:left center;
background-repeat:no-repeat;
}
/* **************************** Klasseneinträge **************************** */
.logo_home{
vertical-align:super;
}

/* ********************** Menueinträge *************************** */


/* fix for IE-win, hide from IE-mac \*/
* html #menu_l li, * html #menu_l li a {
height: 1px;
}
/* end fix/hide */

und der HTML Code angepasst dazu.

HTML: 
<body>  
<div id="koerper">
	<div id="menu_top">  
		<p class="menu_top"><a href="save/save_080606/null">News</a> | <a href="save/save_080606/null">Presse</a> | <a href="save/save_080606/null">Impressum</a></p>
	</div>
	<div id="top_2">
		<img src="http://www.tutorials.de/forum/images/top_2_header_home.jpg" alt="" width="580" height="100" />
	</div>
	<div id="left_box">
		<div id="menu">
		<p>
		<ul>
		<li><a class="hide" href="save/save_080606/null">Home</a>  
		<!--[if lte IE 6]>  
		<a href="null">Home <table><tr><td><![endif]-->  <!--[if lte IE 6]></td></tr></table>  
		</a>  
		<![endif]-->
		</li>
		<li><a class="hide" href="save/save_080606/null">Firma</a>
		<!--[if lte IE 6]>
		<a href="null">Firma <table><tr><td>
		<![endif]-->  <!--[if lte IE 6]>  </td></tr></table>  </a>  <![endif]-->  </li>  <li><a class="hide" href="save/save_080606/null">Mein Traumhaus</a>  <!--[if lte IE 6]>  <a href="null">Mein Traumhaus <table><tr><td>  <![endif]-->  <ul>  <li><a href="save/save_080606/null">Planung</a></li>  <li><a href="save/save_080606/null">Fertigung</a></li>  <li><a href="save/save_080606/null">Auslieferung</a></li> </ul>
		  <!--[if lte IE 6]>  </td></tr></table>  </a>  <![endif]-->  </li>  
		  <li><a class="hide" href="save/save_080606/null">Leistungen</a>  <!--[if lte IE 6]>  <a href="null">Leistungen <table><tr><td>  <![endif]-->  
		  <ul>  <li><a href="save/save_080606/null">Holzhausbau</a></li>  <li><a href="save/save_080606/null">Allgemeiner Holzbau</a></li>  <li><a href="save/save_080606/null">Aufstockungen</a></li>  
		  <li><a href="save/save_080606/null">Dacharbeiten</a></li>  <li><a href="save/save_080606/null">Planung/Statik/Finanzierung</a></li>  </ul>  
		  <!--[if lte IE 6]>  </td></tr></table>  </a>  <![endif]-->  </li>  <li><a class="hide" href="save/save_080606/null">Bauen mit Holz</a>  
		  <!--[if lte IE 6]>  <a href="null">Bauen mit Holz <table><tr><td>  <![endif]-->  
		  <!--[if lte IE 6]>  </td></tr></table>  </a>  <![endif]-->  </li>  <li><a class="hide" href="save/save_080606/null">Zertifizierung</a>  
		  <!--[if lte IE 6]>  <a href="null">Zertifizierung <table><tr><td>  <![endif]-->  <ul>  
		  <li><a href="save/save_080606/null">Einfamilienh&auml;user</a></li>  <li><a href="save/save_080606/null">Zimmermannsarbeiten</a></li>  
		  <li><a href="save/save_080606/null">Öffentliche Bauten</a></li>  </ul>  <!--[if lte IE 6]>  
		  </td></tr></table>  </a>  <![endif]-->  </li>  
		  <li><a class="hide" href="save/save_080606/null">Referenzen</a>  <!--[if lte IE 6]>  
		  <a href="null">Referenzen <table><tr><td>  <![endif]-->  <ul>  <li><a href="save/save_080606/null">Holzhausbau</a></li>  <li><a href="save/save_080606/null">Kundenstimmen</a></li>  </ul>  <!--[if lte IE 6]>  </td></tr></table>  </a>  <![endif]-->  </li>  <li><a class="hide" href="save/save_080606/null">Kontakt</a>  <!--[if lte IE 6]>  <a href="null">Kontakt <table><tr><td>  <![endif]-->  <!--[if lte IE 6]>  </td></tr></table>  </a>  <![endif]-->  </li>  </ul>  
		</p>  
		</div>
		<div id="guetezeichen">
			<img src="http://www.tutorials.de/forum/images/guetezeichen_menue_l.gif" alt="RAL Gütezeichen, Qualitätszeichen Holzhausbau" width="60" height="200" border="0px" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="2,27,58,132" href="#" alt="" /> <area shape="circle" coords="31,169,29" href="#" alt="" /> </map>  
		</div>
	</div>
	<div id="content">
		<div id="content_inhalt">
			<p>Diesen Grundsatz machen wir uns zunutze und bauen Ihnen <strong>Ihr Traumhaus aus Holz!</strong><br />
			<br />Wir, die Zimmerei Becker stehen f&uuml;r Qualitativ, Innovativ hochwertige Holzbauprodukte. Dabei stehen Sie mit Ihren 
			W&uuml;nschen bei uns im Mittelpunkt.</p>
			<p> Unser Leistungsspektrum erstreckt sich vom individuell geplanten ...</p>
			<ul id="liste">
				<li><strong>Einfamilienhaus</strong> in Holzrahmenbauweise &uuml;ber</li>  
				<li><strong>Anbauten</strong></li>  
				<li><strong>Aufstockungen</strong></li>  
				<li><strong>Br&uuml;ckenbau</strong></li>  
				<li><strong>Carports</strong></li>  
				<li><strong>Gewerbebau</strong>, bis hin zu</li>  
				<li>hochkomplexen <strong>Dachbauten</strong>.</li>  
			</ul>
			<p>Wir sind Mitglied der QHA und der GHAD und sind RAL G&uuml;tezeichentr&auml;ger. Dieses garantiert Ihnen eine st&auml;ndige 
			externe &Uuml;berwachung durch die VHT in Darmstadt und somit ein 1a Holzbau nach den aktuellen Richtlinien im Holzbau.</p>  
			<p>In die Planung eines Bauvorhabens beziehen wir unsere Kunden mit Ihren Ideen, W&uuml;nschen und Vorstellungen ein. Wir 
			arbeiten von Anfang an mit modernster CAD Technik. W&auml;hrend der Planungsphase k&ouml;nnen wir diese Daten in der Fertigung 
			mittels CNC Millimetergenau f&uuml;r Sie produzieren. </p>  
			<p>Wir werden alles tun um Ihnen diese W&uuml;nsche aus dem Werkstoff Holz zu verwirklichen.</p>  
		</div>
	</div>  
</div>

Ist eine von vielen Möglichkeiten. Musste noch was anderes zwischendurch erledigen, deshalb mit etwas mehr Minuten ;-)
 
Hallo,
vielen Dank schon mal für deine Hilfe.

Leider funktioniert dein Beispiel nicht (siehe Anhang). Das komplette Layout ist zerschossen und erinnert nicht an das was ich gerne hätte.

Weisst Du woran das liegt? Ausserdem fehlt mit mein Hintergrundbild mit dem Bach.

Gruss
Holli
 

Anhänge

  • 24707attachment.gif
    24707attachment.gif
    45,4 KB · Aufrufe: 7
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück