Zur Navigation

Foto anpassen an höhe fenster div

1 trudi

hallo,

ich habe die internetseite www.spadinisa.ch in verschiedene box div unterteilt. je nach länge des textes der content box verändert sich auch die länge der internetseite.
die linke kolonne ist nur einen bild der je nach seite einen anderes bild ist.
jetzt meinen problem auf die seite http://www.spadinisa.ch/contatto.html obwohl das bild für die linke colonne (col sinistra) viel länder wäre (600px) bleibt er immer auf die min länge von 360 px, obwohl ich als height angabe für col sinistra auto angegeben hab und auch bei content hab ich height auto gemacht. wie kann ich das beheben, dass das bild doch länger angezeigt wird, also so lang wie es nötig ist für die seite?

ich hoffe ich konnte es erklären...

hier der css code
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

body {
font: 70%  Verdana, Arial, Helvetica, sans-serif;
color:#3C0763;

text-align:center; 
background: url(../images/body_back.gif) repeat ;

}

a, a:link {
	text-decoration:none;
	color:#3C0763;
}

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

#capopagina-navi a
#capopagina-navi a:link, 
#capopagina-navi a:hover  {
	color:#3C0763;
}


	
ul, ol {
	list-style-type:none;
}

h1 {
	font-weight:bold;
	font-size: 11px;
	}


.clearer {
	display:block;
	clear:both;
	line-height:0;
	height:1px;
	font-size:0;
	visibility:hidden;
}

.clear {
	clear:both;
}




/*	Struttura della pagina web ************************************/

#pagina {
	margin:20px auto;
	width:989px;
	border:2px solid #DF2111;
	text-align:left;
	background:#D8E5E7 url(../images/bg_website.gif) repeat-y;
}


#meta {
	float:left;
	width:100%;
}

#meta #content {
	margin:0 187px 0 327px;
 	height: auto;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
}

html>body #meta #content {
	height:auto;
	min-height:340px;
}








/*	capopagina *****************************************************************
*******************************************************************************/
#capopagina {
	position:relative;
	height:100px;
	background:#ffffff;
	border-bottom:1px solid #DF2111
}


#capopagina-navi {
	position:absolute;
	top:70px;
	left:755px;
	color:#3C0763;
}
#capopagina-navi li {
	display: inline;
	padding: 3px 6px;
	font-size: 11px;
	color:#3C0763;	
}

#logo {
	display:inline;
	position: absolute;
	top: 5px;
	left: 0px;
	width:327px;
	height: 40px;
	background:#ffffff;
}

#titolo {
	position: absolute;
	top: 30px;
	left:380px;
	width:473px;
	height: 40px;
	background:#ffffff;
}


	
/*	Navigation *****************************************************************
*******************************************************************************/
#hauptnavi {
	margin: 0px;
	width:473px;
	height: 38px;
	background:#99ABCD;
	border-top:1px solid #99ABCD;
	border-bottom:1px solid #DF2111;
}

#rot {background-color:#FC284C;
	}
	
#orange {background-color:#FCA044;
	}
	
#gelb {background-color:#FFFF00;
	}
#grün {background-color:#00CC00;
	}
#blau {background-color:#0000FF;
	}

#hauptnavi ul {
margin:0 40px;
padding:0;
}


#hauptnavi li {
	display:inline;
	padding: 10px 0;
    margin:0 0px;
	border-right:2px solid #DF2111;
	font-size:12px;
	line-height: 38px;
}

#hauptnavi li a:link, #hauptnavi li a:visited  {
	display:inline;
	text-decoration:none;
	color:#3C0763;
	line-height: 38px;
	padding: 10px;

}

#hauptnavi li a:hover {
	display:inline;
	text-decoration:none;
	background-color:#D8E5E7;
	padding: 10px;
	line-height:38px;
	margin:0px;	
}




/*	col-sinistra******************************************************************
*******************************************************************************/
html>body #col-sinistra {
	height:auto;
	min-height:360px;
}



#col-sinistra {
	position:relative;
	float:left;
	margin-left:-989px;
	padding-top:60px;
	width:327px;
	height:auto;
	background-color:#D8E5E7;
}


#col-sinistra ul {
	display:inline;
	float:left;
	width:287px;
	margin:0 20px;
}

#col-sinistra ul li {
	clear:both;
	list-style:none;
}


/*	col-destra ******************************************************************
*******************************************************************************/
#col-destra {
	float:left;
	margin-left:-187px;
	padding-top:60px;
	width:187px;
	background: url(../images/bg_rcol1.gif) no-repeat;
}

#col-destra p {
	margin:0 10px;
	padding-bottom:1em;
	line-height:1.4em;
}

#col-destra img {
	border: 1px solid #DF2111;
	}


/*	Content ********************************************************************
*******************************************************************************/
#content #testo {
	margin-left:20px;
	margin-top: 10px;
	margin-bottom:-1px;
	padding:0px;
	border:0px none;
}

#testo #box3 ul {
	list-style-type: disc;
	color: #DF2111;
	text-decoration: none;
	margin-bottom: 10px;
}

#testo #box3 ul li {
	clear:both;
	text-decoration: none;
	padding-bottom: 8px;
	margin: 0px;
	text-align: left;
}


#content .margin-b {
	margin-bottom: 20px;
}




/*	Footer ********************************************************************
*******************************************************************************/

#footer {
	clear:both;
	float:left;
	width:100%;
	background: #D8E5E7 url(../images/bg_ftr1.gif) no-repeat ;
	border-top:1px solid #DF2111;
	text-align:center;
	height: 50px;
}


#footer p {
	font-size:10px;
}



und der xhtml code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">




<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="impresa pittura" />
<meta name="Keywords" content="verniciature, intonaci, pittura, antonio spadini" />
<title>Spadini SA</title>
<link rel="stylesheet" type="text/css" href="styles/spadini.css" />

<script type="text/javascript">
</script>
	<style type="text/css">
			/*<![CDATA[*/
			#left-col {
				height:200px;
			}

			html>body #left-col {
				height:auto;
				min-height:200px;
			}
		
			/*]]>*/
		</style>
		
		

		


</head>

<body>


<div id="pagina">

<!-- start capopagina -->

<div id="capopagina">
	<div id="logo">
	 <a href="index.html" title="ritorno home"><img src="images/logo3.gif" height="95" width="327" border="none" alt="logo" /></a>    </div>

	<div id="titolo">
	<span style="font-size:24px; color:#DF2111; font-weight:bold">IMPRESA DI PITTURA</span>	</div>
	
	<div id="capopagina-navi">
		<ul>
		<li><a href="index.html">&raquo; &raquo; Home</a></li>
		<li><a href="index.html">&raquo; &raquo; Impressum</a></li>
		</ul>
	</div>
</div>
<!-- fine capopagina -->
	
<!-- start web -->	
	<div id="meta">
	<div id="content">
	
		<div id="hauptnavi">
		<ul>
		<li id="rot"><a href="impresa.html">Azienda</a></li>
		<li id="orange"><a href="servizi.html">Servizi</a></li>
		<li id="gelb"><a href="contatto.html">Contatto</a></li>
		<li id="grün"><a href="contatto.html">Foto</a></li>
		<li id="blau"><a href="contatto.html">Links</a></li>
		</ul>
	    </div>
	
		<div id="testo">
		
	 	<img  src="images/contatto_titolo.jpg" alt="contatto"  />
		
		
	 	<h1 style="padding-top:10px">Non esitate a contattarci</h1>
	 	<p>Spadini SA <br />
		Impresa pittura<br />
		Viale Stazione 9<br />
		Casella postale 2544<br />
		6500 Bellinzona - Svizzera</p>

		<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		Natel: 079 445 48 26<br />
		antonio.spadini@spadinisa.ch</p> 
		
		<h1 style="padding-top:20px">Indirizzo di fornitura GRONO</h1>
		<p>Spadini SA <br />
		Impresa pittura<br />
		6537 Grono
		
		
<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		magazzino@spadinisa.ch</p> 
		
		<h1>Indirizzo di fornitura CAMORINO</h1>
		<p>Spadini SA <br />
		Impresa pittura<br />
		Centro Monda, stabile A<br />
		Via Monda 1/2<br />
		6528 Camorino
		
		
<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		magazzino@spadinisa.ch</p> 
		
		
	    <div class="margin-b"></div>			
		<div class="clearer"> </div>
		</div>
	</div>
	</div>
<!-- fine web -->		
	
	<div id="col-sinistra" style="background-image:url('images/contatto.jpg');">	</div>
	
	<div id="col-destra">
	<p><img src="images/antonio.jpg" height="200" width="154" alt="antonio spadini"  /></p>

    <p><span style="font-size:10px">
     Antonio Spadini<br />Maestro pittore dipl. fed.  </p></span>

     <div class="margin-b"></div>	
  </div>
	
	<!-- start piedipagina -->
<div id="footer">
		<p>&nbsp;</p>
	<p> &copy; Copyright 2008: Spadini SA </p>
	</div>
<!-- fine piedipagina -->	




   <br class="clear" />


</div> 

<!--fine web -->

</body>
</html>

vieleicht hast du wieder mal einen tipp ...

saluti trudi

15.04.2008 15:54 | geändert: 15.04.2008 15:55

2 Jörg

Hallo trudi,

der Wert auto richtet sich nach dem Inhalt, aber #col-sinistra hat keinen Inhalt - so wird dann nur die Mindesthöhe angezeigt.

Wenn das Hintegrundbild in Höhe des Contents angezeigt werden soll, würde ich folgendermaßen vorgehen:

#col-sinistra, #col-destra und #content in einen gemeinsamen Eltern-Container packen; dieser erhält dann das Bild als Hintergrundbild. Das Bild wird dann automatisch so lang angezeigt wie das längste Kindelement, in diesem Fall #content. Da das Hintergrund-Bild automatisch links angezeigt wird, sollte es hinter #col-sinistra zu sehen sein (andernfalls kann man es mit den Background-Eigenschaften positionieren)

15.04.2008 18:17

3 trudi

hallo jörg,

danke für antwort. aber die hintergrundfarbe von col sinistra und col destra passen sich doch mit der länge des content an. wieso wird es dann auch nicht der hintergrundbild contatto.jpg (der ist lang genug) von col sinistra auch nicht länger angezeigt?
das verstehe ich nicht????

hast du vieleicht eine erklärng?


hab so probiert wie du meinst, aber da haben sich alle bilder von col destra und sinistra verschoben und hab es nicht hingekriegt sie wieder an die richtige stelle zuruckzubringen. der bild von col sinistra hab gar nicht mehr gesehen...aber sehr wahrscheinlich hab nicht korrekt gemacht...

saluti trudi



16.04.2008 07:57

4 trudi

ciao jörg,

hat sich erledigt, hatte vergessen dass am anfang von xhtml code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">




<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="impresa pittura" />
<meta name="Keywords" content="verniciature, intonaci, pittura, antonio spadini" />
<title>Spadini SA</title>
<link rel="stylesheet" type="text/css" href="styles/spadini.css" />

<script type="text/javascript">
</script>
	
	<style type="text/css">
			/*<![CDATA[*/
			
			#col-sinistra {
				height:529px;
			}

			html>body #col-sinistra {
				height:auto;
				min-height:529px;
			}
		
			/*]]>*/
		</style>
		
		

		


</head>

<body>


<div id="pagina">

<!-- start capopagina -->

<div id="capopagina">
	<div id="logo">
	 <a href="index.html" title="ritorno home"><img src="images/logo3.gif" height="95" width="327" border="none" alt="logo" /></a>    
	 </div>

	<div id="titolo">
	<span style="font-size:24px; color:#DF2111; font-weight:bold">IMPRESA DI PITTURA</span>	</div>
	
		<div id="capopagina-navi">
		<ul>
		<li><a href="index.html">&raquo; &raquo; Home</a></li>
		<li><a href="index.html">&raquo; &raquo; Impressum</a></li>
		</ul>
		</div>
</div>
<!-- fine capopagina -->
	
<!-- start web -->	
	<div id="meta">
		<div id="content">
	
			<div id="hauptnavi">
		<ul>
		<li id="rot"><a href="impresa.html">Azienda</a></li>
		<li id="orange"><a href="servizi.html">Servizi</a></li>
		<li id="gelb"><a href="contatto.html">Contatto</a></li>
		<li id="grün"><a href="contatto.html">Foto</a></li>
		<li id="blau"><a href="contatto.html">Links</a></li>
		</ul>
	    	</div>
	
			<div id="testo">
		
	 	<img  src="images/contatto_titolo.jpg" alt="contatto"  />
		
		
	 	<h1 style="padding-top:10px">Non esitate a contattarci</h1>
	 	<p>Spadini SA <br />
		Impresa pittura<br />
		Viale Stazione 9<br />
		Casella postale 2544<br />
		6500 Bellinzona - Svizzera</p>

		<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		Natel: 079 445 48 26<br />
		antonio.spadini@spadinisa.ch</p> 
		
		<h1 style="padding-top:20px">Indirizzo di fornitura GRONO</h1>
		<p>Spadini SA <br />
		Impresa pittura<br />
		6537 Grono
		
		
		<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		magazzino@spadinisa.ch</p> 
		
		<h1>Indirizzo di fornitura CAMORINO</h1>
		<p>Spadini SA <br />
		Impresa pittura<br />
		Centro Monda, stabile A<br />
		Via Monda 1/2<br />
		6528 Camorino
		
		
		<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		magazzino@spadinisa.ch</p> 
		
		
	    <div class="margin-b"></div>			
		<div class="clearer"> </div>
				</div>
		</div>
	</div>
<!-- fine web -->		
	
			<div id="col-sinistra" style="background-image:url('images/contatto.jpg');">	</div>
	
			<div id="col-destra">
	<p><img src="images/antonio.jpg" height="200" width="154" alt="antonio spadini"  /></p>

    <p><span style="font-size:10px">
     Antonio Spadini<br />Maestro pittore dipl. fed.  </p></span>

     <div class="margin-b"></div>	
 	 		</div>
	
	<!-- start piedipagina -->
<div id="footer">
		<p>&nbsp;</p>
	<p> &copy; Copyright 2008: Spadini SA </p>
	</div>
<!-- fine piedipagina -->	




   <br class="clear" />


</div> 

<!--fine web -->

</body>
</html>

die height höhe nicht angepasst hatte...

saluti trudi

16.04.2008 08:31

5 Jörg

aber die hintergrundfarbe von col sinistra und col destra passen sich doch mit der länge des content an.

Ja, aber da hattest du genau das bereits umgesetzt, was ich jetzt empfohlen habe :) Hierbei handelt es sich um Hintergrundfarbe und Hintergrundgrafik des Elternelements von #col-sinistra, #col-destra und #content, nämlich #pagina:

#pagina {
	margin:20px auto;
	width:989px;
	border:2px solid #DF2111;
	text-align:left;
	background:#D8E5E7 url(../images/bg_website.gif) repeat-y;
}

Nur kannst du natürlich keine zwei Hintergrundgrafiken einbinden. Du könntest allerdings noch eine Ebene dazwischenschieben, welches dann das Hintergrundbild für #sinistra anzeigt

Edit:

hat sich erledigt, hatte vergessen dass am anfang von xhtml code die height höhe nicht angepasst hatte...

Ah ok :) unsere Antworten hatten sich überschnitten ;)

16.04.2008 08:32 | geändert: 16.04.2008 08:36

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]