✔ Probleme mit Hintergrund/Positionierung von DIV

Status
Nicht offen für weitere Antworten.
J

julchen

Erfahrenes Mitglied
Probleme mit DIV ...

Hallo,
unter folgendem Link erhaltet Ihr einen groben Entwurf einer Website, wie diese in etwa aussehen soll. Ich hatte vor einigen Tagen schon mal nach einem ersten Eindruck in einer anderen Rubrik gefragt. Dieses ist zwar das gleiche Projekt aber ein neuer Entwurf.

Meine Frage ist nun wie Ihr das ganze lösen würdet.

Ich dachte mir, das ich mir einen Bereich erstelle der eine feste Breite hat. In diesen Bereich das Bild mit dem Bachlauf als Hintergrundbild. Alle anderen Element wie Navigation und Text lege ich in fest positionierte Divs mit jeweiligen Abständen vom Rand und Top. Ich denke das diese die einfachste Methode ist.

Würdet Ihr das auch so machen, oder anders?

http://www.assedo.de/kunden/becker/entwurf_bach.jpg

Gruss
Julchen
 
Zuletzt bearbeitet:
Hallo Julchen,

im Prinzip ist dein Plan nicht schlecht, allerdings würd ich keine absolut positionierte Divs nehmen. Ich würd es nach dem Boxenmodell lösen.
Grober Plan:

Hintergrund: grün wie rechts der Streifen

Wrapper mit fester Breite: <= 720px bzw evtl. in prozent dann is es auch bulletproof


im Wrapper würd ich dann 2 Boxen float left machen, in der linken ist dann dein menü,
in der rechten div ist dann oben dein topmenü und darunter der content

ich häng mal noch ne grafik an wie ich das gedacht hatt

gruß tobi
 

Anhänge

  • 24688attachment.gif
    24688attachment.gif
    4,6 KB · Aufrufe: 14
hallo,
wo soll ich denn meine hintergrundgrafik unterbringen. die muss unbedingt mit rein, oder meinst du mit wrapper die grafik mit dem bachlauf? muss ich die dann auf die 3 bereiche zuschneiden und jedem bereich ein stück als hintergrund zuweisen? Oder wie hast du es sonst gemeint. du wolltest doch, dass der bereich flexibel gehalten wird. wird dann auch die hintergrundgrafik mit skaliert?

vielleicht könntest du mir mal ein beispiel posten, wie du das meinst.

Gruss
julchen
 
Hallo,
ich habe mein zuvor gepostestes Beispiel einmal umgesetzt.

Leider hab ich ein Problem mit dem mittleren Teil. Ich bekomme einfach keine Hintergrundfarbe (weiss) nur für den Bereich gesetzt, wo der eigentliche Content-Text ist. Ich habe das Beispiel anhand eines Vorentwurf umgebastelt. Vielleicht sollte man die ganze Sache anders angehen, aber ich hab leider keine Lösung, bzw. bräuchte mal Hilfe bei der Umsetzung. Es geht wie geagt vorerst nur um den mittleren Bereich.

Wäre nett, wenn mir jemand einen Tipp geben könnte, wie ich das realieren kann.

http://www.assedo.de/kunden/becker/bg_bach/index.html

Gruss
julchen
 
Dein Contentbereich ist eine Box. Ergo kannst du dieser Box eine Hintergrundfarbe zuweisen.
Bsp: background-color: #fff;

Oder versteh ich was falsch?
 
Wenn du uns einen Einblick in den dazugehörigen Quelltext (HTML, CSS) gewährst, können wir dir sicherlich den einen oder anderen Tipp geben, warum es mit der Hintergrundfarbe nicht funktioniert.

Die beiden Themen, die sich mit der Umsetzung deines Vorentwurfs befassen, werden von mir an dieser Stelle zusammengeführt.
 
Hallo,
hier ist mein Quellcode:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>Zimmerei Becker - Moderner Holzhausbau</title>
 	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />      
	<link href="style/becker_style.css" rel="stylesheet" type="text/css" media="all" />	
	<!--[if lte IE 6]>
	<link rel="stylesheet" media="all" type="text/css" href="style/becker_style_ie.css" />
	<![endif]-->
</head>
<body>
	<div id="outer">
	  <div id="top">
      </div>
	  <div id="menu_top">
	  	<p><a href="save/save_080606/null">News</a></p>
		<p>|</p>
		<p><a href="save/save_080606/null">Presse</a></p>
		<p>|</p>
		<p><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="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 id="midcontent">
      	<div id="content">
		  <div id="inner">
		  		<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>
            		<p><img src="http://www.tutorials.de/forum/images/logo_home.gif" alt="Zimmerei Becker - Moderne Holzh&auml;user / Holzrahmenbau" width="206" height="51" /></p>
       	  </div>
        </div>
      </div>
    </div>
</body>
</html>

Code: 
* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	*height: 100%;
}
body {
	font-family: trebuchet ms, verdana, arial, helvetica, sans-serif;
	font-size: 100.01%;
	color: #FFFFFF;
	background-color:#575758;
	background-image:url(../images/spacer.gif);
	background-repeat:repeat-y;
}

#outer {
	width: 790px;
	*height: 100%;
	*min-height: 100%;
	color: #333;
	background-image:url(../images/bg_body.jpg);
	background-repeat:no-repeat;					/* Hintergrundfarbe f?r #menue */

}

#top {
	position: absolute;
	z-index: 1;
	left: 190px;
	width: 600px;
	height: 160px;
	color: #000;
}
#top_2 {
	position: absolute;
	z-index: 3;
	left: 190px;
	top: 160px;
	width: 580px;
	height: 90px;
	color: #333;
	background-image:url(../images/top_2_header_home.jpg);
	background-repeat:repeat-x
}
#midcontent {
	margin-left: 190px;
	height: 100%;
	min-height: 100%;
	color: #333;
	width:580px;
}
#content {
	margin-left: 0px;
	height: 100%;
	min-height: 100%;
	color: #333;
	font-size: 0.7em;
}
#inner {
padding: 270px 1em 0 1em;
		/* padding-top damit erster Inhalt im sichtbaren Bereich dargestellt wird. margin-top funktioniert nicht in Netscape. */
}
#inner p {
	padding: 0.7em 0;
}

/*  ******************** übrige Formatierungen ******************************* */
#guetezeichen {
left:35px;
top:340px;
position:absolute;
z-index:3;
}
#inner_home {
	padding: 160px 1em 0 1em;
	/* padding-top damit erster Inhalt im sichtbaren Bereich dargestellt wird. margin-top funktioniert nicht in Netscape. */
}
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 *************************** */
#menu {
	position: absolute;
	left: 25px;
	width: 130px;
	font-size: 100%;
	z-index:3;
	/* Hintergrundfarbe und Schriftfarbe f?r diesen Container wurde in #outer formatiert. Dieser Container muss durchsichtig bleiben. */
}
/* 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. */
}
#menu_top{
position:absolute;
top:10px;
left:580px;
z-index:3;
font-size:0.7em;
color: #fff;
}
#menu_top p{
float: left;
padding-left: 10px;
}
#menu_top p a {
color:#fff;
}
#menu_top p a:visited {
color: #fff;
}
#menu_top p a:hover {
color:#E27500;
}

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

saila hat gesagt.:
Dein Contentbereich ist eine Box. Ergo kannst du dieser Box eine Hintergrundfarbe zuweisen.
Bsp: background-color: #fff;

Oder versteh ich was falsch?
Zum Vergrößern anklicken....

Wenn ich dem Contentbereich eine Hintergrundfarbe gebe, erhält der komplette DIV die Farbe. Dieser erstreckt sich aber dann von ganz oben nach ganz unten und nicht nur auf den Textbereich.

Gruss
Julchen
 

*back to topic*

Vielleicht solltest du dem DIV #inner die gewünschte Hintergrundfarbe zuweisen.
 
Hallo,
das geht auch nicht, da dieser mit padding vom oberen Rand positioniert ist. Somit bekommt dieser auch die komplette Hintergrundfarbe und nicht nur der Textbereich.

Gruss
Julchen
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück