Tavola con i CSS

lord.baron

Tavola con i CSS

Salve a tutti,

Ho tre DIV, uno piu grande a sinistra e due piu' piccoli a destra. Il piu' grande e' alto quanto i due piu' piccoli incolonnati.

Essendo riuscito a far stirare il DIV piu' grande con l'inserzione di contenuto, adesso ho bisogno che un DIV piu' piccolo (specificamente quello piu' basso tra i due incolonnati) si stiri al pari di quello piu' grande, mentre il DIV piu' piccolo in alto deve rimanere tale e quale.

Spero di essermi spiegato. Comunque posto qui il codice CSS:

 a img {
    border: none; /*Eliminates the border from all pictures*/
}

html, body {
    height: 100%; /*Grants that the page always stretches full length. Necessary for div height stretching*/
    width:100%;
}

body {
    background: #ebe8d9;
    color: #666;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;  
    margin: 0;
    padding:0;
    text-align:center;
}

#header {
    background:#ffffff;
    height: 140px;
    margin-left:auto;  /*Governs white top part above banner*/
    margin-right:auto;
    width:100%;
}
 p {
    background: url('http://www.sito.com/images/general_images/ytv_header.jpg') top left no-repeat #ffffff;
    font: bold 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    height:140px;
    width:800px; 
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    color: #b3a492
}

#headernav a {
    color:;
    text-decoration: none;        /*Governs header links*/
}
 a:hover {
    color: #888;                  /*Governs header links*/
    text-decoration: none;
}
 {
    position:absolute;
    font: bold 90% 'Times New Roman', Times, serif;
    left:54%;
    top:120px;
    letter-spacing:-0.1mm;        /*Governs header links*/
    text-align:left;
    margin-left:auto;
    margin-right:auto;
}

#headbanner {
    background: url('http://www.sito.com/images/general_images/pool_rental_siena_vacation.jpg') top center no-repeat;
    padding:0px;
    position: relative;
    width: 800px;
    margin-top:0px;               /*Governs site head banner*/
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    height:166px;
}

#dec3lines {
    background: url('http://www.sito.com/images/general_images/3line_bg.gif') top center repeat-x;
    padding:0px;
    position: relative;
    width: 800px;                /*Governs the 3 line stripe above the head banner*/
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    height:21;
}

#propmenubar {
    background:#b3a492;
    padding:0px;
    position:relative;
    width:646px;
    margin-top:0px;                /*Governs the property menu bar*/
    margin-left:0px;
    margin-right:5px;
    margin-bottom:0px;
    height:22;
    float:left;
    display: inline;
}

#topmenubar {
    background:#b3a492;
    padding:0px;
    position:relative;            /*Governs site's sections top menu bar*/
    width:149px;
    margin:0px;
    height:22;
    float:right;
    display: inline;
}

#container {
    background:#ebe8d9; 
    padding:0px;
    position:relative;
    width:800px;
    margin-top:0px;
    margin-left:auto;            /*Contains and #propmenu bar*/
    margin-right:auto;
    margin-bottom:0px;
    height:22;
}

#allcontainer {
    background:transparent; 
    padding:0px;
    position:relative;
    width:800px;
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:5px;
    height:100%;
    display:table;
}

#btcontainer {
    background:#ebe8d9; 
    padding:0px;
    position:relative;
    width:800px;
    margin-top:0px;                /*Contains #bodytext and #containmainmenu*/
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
    height:100%;
    display:table;
}
 {
    font: 90% Tahoma, Verdana, Arial, Helvetica, sans-serif;
    background:#d7caba;
    padding:0px;
    position:relative;
    width:646px;
    margin-top:0px;                /*Governs the main section of the page, the text area*/
    margin-left:0px;
    margin-right:5px;
    float:left;
    height: 100%;
    display: inline;
    text-align:left;
}
 {
    background:#ebe8d9; 
    padding:0px;
    position:relative;
    width:149px;
    margin-top:0px;
    margin-left:auto;
    margin-right:0;
    margin-bottom:0px;
    float:right;
    display: table;
    height:100%;
}

#mainmenutop {
    background:#d7caba;
    padding:0px;
    width:149px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    height: 350px;
    display: inline;
    float:left;
}

#mainmenubottom {
    background:#b3a492;
    padding:0px;
    width:149px;
    margin-top:5px;
    margin-left:0px;
    margin-right:0px;
    position:relative;
    display: inline;
    float:left;
}

#footer {
    background: url('http://www.sito.com/images/general_images/footer.jpg') top center no-repeat;
    height:140px;
    margin-left:auto;            /*Governs footer*/
    margin-right:auto;
}
 a {
    font: bold;                    /*Governs footer links*/
    color: #999966;
    text-decoration: underline;
}
 a:hover {
    font: bold;                    /*Governs footer links*/
    color: #bdbd9b;
    text-decoration: underline;
}
 p {
    background:transparent;
    font: 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
    width:800px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    color: #666666;
    padding-top:30px;
}

#copyright {
    position:relative;
    background:#ffffff;
    font: 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
    width:100%;
    margin-top:0px;        
    margin-left:auto;
    margin-right:auto;
    color:;
    padding-top:30px;
}

        E qui il codice HTML:

 <HTML>
<HEAD>
<TITLE></TITLE>
<link rel="stylesheet" href="styles.css">
</HEAD>
<BODY>
<div id="header">
<p></p>
</div>
<div id="headernav"><a href="http://www.sito.com">home</a>&nbsp;|&nbsp;<a href="http://www.sito.com/contact_us/tel.htm">phone n?go</a>&nbsp;|&nbsp;<a href="">Live chat Support</a></div>
<div id="dec3lines"></div>
<div id="headbanner"></div>
<div id="container"><div id="propmenubar"></div><div id="topmenubar"></div></div>

<div id="allcontainer">
    <div id="btcontainer">
        <div id="bodytext"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></div>
        <div id="containmainmenu"><div id="mainmenutop"></div><div id="mainmenubottom"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>jhsdgvjksga</div>
        </div>
    </div>
</div>

<div id="container"><div id="propmenubar"></div><div id="topmenubar"></div></div>
<div id="footer"><p><a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a></p><div id="copyright">© 2006 All rights reserved. | <a href="">Privacy</a> | Online Payment</div></div>
</BODY>
</HTML>

Scusate il post kilometrico....

Grazie!!

*Editato da Claudioweb: *faccio notare che bisogna usare il tag [CODE]

lumpi

Ho lo stesso problema, ma non ci sono riuscito,
penso si debba fare con un immagine background, però è difficile dovendo cambiare i colori a dx.
Il height:100% a me non funziona

Speriamo in un guru

Valentino

lord.baron

No, sono sicuro che si possa fare... ci deve essere un trucchetto cross browser, o simile.

L'immagine in BG, come dici, limita molto, e poi non mi consente di "elasticizzare" solo il div piu' piccolo in basso e lasciare il div piu' piccolo sopra di esso invariato.

Si speriamo in un guru...

C'e' un guru che mi possa aiutare la fuori? Sono solo... fa freddo.... he he.

Grazie!

lord.baron

Ecco... e' la prima volta che IE non mi fa le bizze e Firefox si!!

Ho messo la seguente dicitura

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

in testa all' HTML (che trovate sopra nel primo post) ed IE non fa una piega, mentre Firefox perde DIV e scompagina tutto.

Il CSS lo trovate sempre sopra nel primo post.

Se volete in privato vi do l'URL.

Grazie dell'aiuto... perche' mi aiutate vero?! Vi scongiuro....Mi ci sto ingobbendo su 'sto codice!

cali1981

Ciao, hai provato a mettere i due div in colonna dentro un altro div? Forse riesci meglio a gestire il tutto così...

lord.baron

Ciao, e grazie della risposta...

Se leggi i css ed il codice html vedrai che l'ho gia fatto... si chiama "containmainmenu". Scusa, ma uno posta i codici apposta....

cali1981

@Lord Baron said:

Ciao, e grazie della risposta...

Se leggi i css ed il codice html vedrai che l'ho gia fatto... si chiama "containmainmenu". Scusa, ma uno posta i codici apposta....

Non me n'ero accorto.. Provato a mettere height dei due div in percentuale, ad esempio 20% e 80 %?

lord.baron

Come ho specificato nel post sopra, vorrei che il primo DIV rimanesse tale e quale (percio' ho dato altezza fissa) mentre il secondo deve variare, e mettergli 100% o 80% o qualunque altra percentuale non funziona.

Devo trovare un metodo per raggirare questa lacuna dei browser. Ho trovato qualche hack ma non funzionano.

cali1981

@Lord Baron said:

Come ho specificato nel post sopra, vorrei che il primo DIV rimanesse tale e quale (percio' ho dato altezza fissa) mentre il secondo deve variare, e mettergli 100% o 80% o qualunque altra percentuale non funziona.

Devo trovare un metodo per raggirare questa lacuna dei browser. Ho trovato qualche hack ma non funzionano.
Capisco... Che so, provato a noin mettere per niente l'altezza e dare i margini a zero?

lord.baron

Gia provato tutto cio che piu di comune si possa pensare.... mi servirebbe qualcuno davvero smanettone ed esperto con i CSS che arrivasse laddove noi comuni mortali non arriviamo.
Grazie comunque dell'aiuto. Magari la soluzione e' proprio comune e non ci ho pensato.

lord.baron

Risolto il problema del Doctype strict... era davvero strict! Se non gli mettevo tutte le specifiche nelle misure mi sballava tutto (tipo se erano px o % o em o quello che volete) bene.. una meno

Sto thread me lo sto scrivendo praticamente tutto da solo e con l'aiuto di cali1981...grazie cali!

Quindi mi rimane solo il problema dei div che non si adattano da soli.

Idee?

Grazie in anticipo

LB

lord.baron

I codici Xhtml e CSS sono cambiati, quindi li riposto:

Questo l' XHTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<link rel="stylesheet" href="ytvstyles.css">
</HEAD>
<BODY>
<div id="allpage">
	<div id="header"><p>trips to central Italy<br><br><br>Realizing your tuscan dream</p></div>

	<div id="headernav"><a href="http://www.sito.com">home</a>&nbsp;|&nbsp;<a href="http://www.sito.com/contact_us/tel.htm">phone n?go</a>&nbsp;|&nbsp;<a href="">Live chat Support</a></div>

	<div id="dec3lines"></div>

	<div id="headbanner"></div>

	<div id="container">
		<div id="propmenubar"></div>
		<div id="topmenubar"></div>
	</div>

	<div id="allcontainer">
		<div id="btcontainer">
			<div id="bodytext"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
			<div id="containmainmenu">
					<div id="mainmenutop"></div>
					<div id="mainmenubottom"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><br><br><br><br><BR><BR><BR><BR><BR><BR>menu</div>
			</div>
		</div>
	</div>
	<div id="container">
		<div id="propmenubar"></div>
		<div id="topmenubar"></div>
	</div>
	<div id="footer"><p><a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a> - <a href="">Tuscany Accommodation</a></p>
		<div id="copyright">© 2006 Inc. All rights reserved. | <a href="">Privacy</a> | Online Payment</div>
	</div>
</div>
</BODY>
</HTML>

Questo il CSS


 /*Eliminates the border from all pictures*/
a img {
	border: none;
}

/*Grants that the page always stretches full length. Necessary for div height stretching*/
html, body {
    height: 100%;
	width:100%;
}

/*Body properties*/
body {
	background: #ebe8d9;
	color: #666;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding:0px;
	text-align:center;
}

/*Governs white top part above banner*/
#header {
	background:#ffffff;
    height: 140px;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

/*governs what's in a paragraph in the header*/ p {
	background: url('http://www.sito.com/images/general_images/ytv_header.jpg') top left no-repeat #ffffff;
	font: bold 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	height:140px;
	width:800px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	color: #b3a492
}

/*Governs header links*/
#headernav a {
	color:;
	text-decoration: none;
}

/*Governs header links*/ a:hover {
	color: #888;
	text-decoration: none;
}

/*Governs header links*/ {
	position:absolute;
	font: bold 90% 'Times New Roman', Times, serif;
	left:54%;
	top:120px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}

/*Governs the 3 line stripe above the head banner*/
#dec3lines {
	background: url('http://www.sito.com/images/general_images/3line_bg.gif') top center repeat-x;
	padding:0px;
	position: relative;
	width: 800px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	height:21px;
}

/*Governs site head banner*/
#headbanner {
	background: url('http://www.sito.com/images/general_images/pool_rental_siena_vacation.jpg') top center no-repeat;
	padding:0px;
	position: relative;
	width: 800px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	height:166px;
}

/*Contains #btcontainer, #container, #footer and #copyright*/
#allcontainer {
	background:transparent; 
	padding:0px;
	position:relative;
	width:800px;
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
	height:100%;
	display:table;
}

/*Contains #topmenubar and #propmenu bar*/ {
	background:#ebe8d9; 
	padding:0px;
	position:relative;
	width:800px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	height:22px;
}

/*Governs the property menu bar*/
#propmenubar {
	background:#b3a492;
	padding:0px;
	position:relative;
	width:646px;
	margin-top:0px;
	margin-left:0px;
	margin-right:5px;
	margin-bottom:0px;
	height:22px;
	float:left;
	display: inline;
}

/*Governs site's sections top menu bar*/ {
	background:#b3a492;
	padding:0px;
	position:relative;
	width:149px;
	margin:0px;
	height:22px;
	float:right;
	display: inline;
}

/*Contains #bodytext and #containmainmenu*/ {
	background:#ebe8d9; 
	padding:0px;
	position:relative;
	width:800px;
	margin:0px;
	display:table;
	height:100%;
}

/*Governs the main section of the page, the text area*/ {
	font: 90% Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background:#d7caba;
	padding:0px;
	position:relative;
	width:646px;
	margin-top:0px;
	margin-left:0px;
	margin-right:5px;
	float:left;
	height: 100%;
	display: inline;
	text-align:left;
}

/*Contains #mainmenutop and #mainmenubottom*/ {
	background:#ebe8d9; 
	padding:0px;
	position:relative;
	width:149px;
	margin:0px;
	float:right;
	display: table;
	height:100%;
}

/*Governs top general section right menu*/ {
	background:#d7caba;
	padding:0px;
	width:149px;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	display: inline;
	height:350px;
	float:right;
}

/*Governs bottom general contact right menu*/ {
	background:#b3a492;
	padding:0px;
	width:149px;
	margin-top:5px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	position:relative;
	display: inline;
	float:right;
	height:100%;
}

/*Governs footer*/ {
	background: url('http://www.sito.com/images/general_images/footer.jpg') top center no-repeat;
    height:140px;
	margin-left:auto;
	margin-right:auto;
}

/*Governs footer links*/ a {
	font: bold;
	color: #999966;
	text-decoration: underline;
}

/*Governs footer links*/ a:hover {
	font: bold;
	color: #bdbd9b;
	text-decoration: underline;
}

/*governs what's in a paragraph in the header*/ p {
	background:transparent;
	font: 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
	width:800px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	color: #666666;
	padding-top:30px;
}

/*governs the copyright line of the footer*/ {
	position:relative;
	background:#ffffff;
	font: 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
	width:100%;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	color:;
	padding-top:30px;
}

Adesso sono riuscito a fare si che IE e FF diano gli stessi risultati in Strict.

Se provate ad aumentare il contenuto di uno dei due div oltre la lunghezza dell'altro adesso si sorpassano, ma non vanno mai legati assieme.

Nessuna idea per legarli? (veramente in FF il div di destra allunga anche quello di sinistra, ma non viceversa, mentre in IE sono completamente slegati).

lord.baron

Forse col codice otterro' pochi risultati. Avere il problema sotto gli occhi e' molto piu' accessibile anche per chi non avesse voglia di creare due file dal codice dato.

Comunque se vi interessa in privato ve li mando i link al CSS e codice....

lord.baron

Fatto, finito riuscito, veni vidi vici.

Fatto con una falsa colonna. Un po sdrucciolevole, ma solido come web design. Funziona con tutto e dappertutto (ris. crossbrowser, riduzione finestra, testo ingrandito), e' css puro, e quindi non mi lamento.

Adesso sono stanchino, ma mettero' i dettagli poi. Se foste interessati ed aveste fretta disapere postate o mandatemi un privato (meglio il privato)

cali1981

@Lord Baron said:

Fatto, finito riuscito, veni vidi vici.

Fatto con una falsa colonna. Un po sdrucciolevole, ma solido come web design. Funziona con tutto e dappertutto (ris. crossbrowser, riduzione finestra, testo ingrandito), e' css puro, e quindi non mi lamento.

Adesso sono stanchino, ma mettero' i dettagli poi. Se foste interessati ed aveste fretta disapere postate o mandatemi un privato (meglio il privato)

Fretta no, ma mi piacerebbe saperlo!
Ciao!

lord.baron

Ciao Cali1981
sono riuscito a fare si che il div si riempia usando una immagine alta 1px ed emulante il layout, e l'ho fatto ripetere lungo l'asse verticale del background del div avente funzione di contenitore.

Usando "clear" nel CSS:

hr.clear {
clear:both;
display:none; <-- Permetteuna giusta visualizzazione in IE ed altri browser. Puoi pure mettere "block", ma IE crea uno spazio
visibility:hidden;
width:800px; <-- Stessa larghezza della immagine ripetuta in background
margin:0px;
padding:0px;
}

e nel xhtml metti (subito dopo la fine del div che ti interessa):

questo fa si che il background non si ripeta all'infinito e ti scombini tutto.

Le altezze poste a 100% dei vari div le puoi anche togliere.

Comunque se hai solo due colonne che si devono allungare in parallelo, il discorso e' molto piu' semplice. Io ne avevo tre (due in colonna di cui una fissa e l'atra estensibile, in parallelo ad un'altra).

Se cerchi "3 column stretch" o "2 column stretch" trovi abbastanza.

Ciao!