Layout con colonna centrale: da tabelle a CSS

**teejay** · 08-01-2011, 01:27

Salve a tutti,

ho questo sito http://www.l4tn.net/junk/projects/florenc/index.php

Il layout è quello tipico della colonna centrale fixed size.

Ai lati ho due sfondi, left.jpg e right.jpg, che occupano lo spazio disponibile.
Quello a sinistra è allineato a destra, quello a destra è allineato a sinistra, in modo da abbaracciare la colonna centrale.

Il tutto fatto con le tabelle.

Soluzione che tra l'altro presenta alcuni problemi, es. ho dovuto fissare un'altezza per la tabella principale (altrimenti gli sfondi veninano tagliati), e questo segherà i contenuti eccedenti, quando ci saranno.

Ovviamente anche in assenza di contenuti, gli sfondi left e right dovranno riempire l'altezza della pagina (sempre che questa non si più alta degli sfondi stessi, 1125 px, nel caso non si ripeteranno in altezza).

Se qualcuno può darmi una mano a buttare giù un css...

Grazie a tutti

**sandrone65** · 10-01-2011, 18:40

Ciao teejay,
ciò che ti serve lo puoi realizzare ad esempio inserendo la colonna centrale, centrandola sullo schermo ed impostando il posizinamento relativo.
All'interno del div della colonna centrale inserisci le due colonne laterali con posizionamento assoluto impostando i valori negativi di left e right pari alla larghezza delle immagini.
Ecco il codice, ovviamente privo dei contenuti della colonna centrale

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Teejay</title>
<style type="text/css">
body {background:#000;}
#container {
width:608px;
position:relative;
margin:auto;}
#background-left {
background:url(left.jpg) no-repeat;
width:298px;
height:1125px;
position:absolute;
top:0;
left:-298px;}
#background-right {
background:url(right.jpg) no-repeat;
width:298px;
height:1125px;
position:absolute;
top:0;
right:-298px;}
</style>
</head>
<body>
<div id="container">
<div id ="background-left"></div>
<div id ="background-right"></div>
</div>
</body>
</html>

**carlomarangoni** · 10-01-2011, 19:16

Vedi se ti va bene questo codice

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>DJ eF pro Bi</title>
		<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="global.css" />

		<style type="text/css">
.box-1 {
	border: none;
	height: 1125px;
	position: relative;
	text-align: left;
	width: 981px;
}

.box-1-1 {
	border: none;
	height: 0px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 0px;
}

.box-1-2 {
	border: none;
	height: 1125px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 981px;
}

.box-2 {
	border: none;
	height: 40px;
	position: relative;
	text-align: left;
	width: 608px;
}

.box-2-1 {
	border: none;
	height: 34px;
	left: 2px;
	line-height: 34px;
	padding: 1px;
	position: absolute;
	top: 2px;
	width: 87px;
}

.box-2-2 {
	border: none;
	height: 34px;
	left: 93px;
	line-height: 34px;
	padding: 1px;
	position: absolute;
	top: 2px;
	width: 103px;
}

.box-2-3 {
	border: none;
	height: 34px;
	left: 200px;
	line-height: 34px;
	padding: 1px;
	position: absolute;
	top: 2px;
	width: 88px;
}

.box-2-4 {
	border: none;
	height: 34px;
	left: 292px;
	line-height: 34px;
	padding: 1px;
	position: absolute;
	top: 2px;
	width: 79px;
}

.box-2-5 {
	border: none;
	height: 34px;
	left: 375px;
	line-height: 34px;
	padding: 1px;
	position: absolute;
	top: 2px;
	width: 90px;
}

.box-2-6 {
	border: none;
	height: 34px;
	left: 469px;
	line-height: 34px;
	padding: 1px;
	position: absolute;
	top: 2px;
	width: 135px;
}

.box-1-3 {
	border: none;
	height: 0px;
	left: 981px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 0px;
}
</style>
	</head>
	<body>
		<div class="box-1">
			<div id="leftSide" class="box-1-1">
				

</p>
			</div>
			<div class="box-1-2">
				<div id="container" align="center">
					<div class="spaced box-2">
						<div class="box-2-1">HOME</div>
						<div class="box-2-2">EVENTI</div>
						<div class="box-2-3">STAFF</div>
						<div class="box-2-4">FOTO</div>
						<div class="box-2-5">VIDEO</div>
						<div class="box-2-6">PLAYLIST</div>
					</div>
					

					[img]top.jpg[/img]
					
					<p style="margin: 70px 0px;">musica House, RnB, Rap, Hip hop, Pop, Reggaeton & more

ballerini, violino, chitarra, vocalist, dj...

un mix di arti per poter fare di ogni serata un evento indimenticabile</p>
					<p style="margin-bottom: 10px;">per info:
e-mail: florenc.bocaj [at] libero.it
cell: 334.2747938</p>
				</div>
			</div>
			<div id="rightSide" class="box-1-3">
				

</p>
			</div>
		</div>
	</body>
</html>

**ResianTaxidrive** · 10-01-2011, 20:06

scusate, ma se per ogni voce di menu dovessimo dare una classe diversa e posizionarla in maniera assoluta, tantovale tenersi le tabelle!

Il menu si fa semplicemente con:

codice:

<ul id="menu">[*]Home[*]Staff[*]Eventi[/list]

eccetera. Visto che le voci sono fisse e tutte occupano la stessa larghezza, basta dare ai[*] uno stile che prevede la larghezza, l'immagine di sfondo con la sfumatura e il float left.
Basta, fatto in 10 righe.

**teejay** · 13-01-2011, 00:34

Grazie a tutti voi e anche a JVM che mi ha risposto in PM.

Scusate se rispondo solo ora, ma pensavo di avere le notifiche via email attivate e invece non era così, quindi sono ritornato solo oggi!

Provo e vedo, grazie ancora a tutti!

Discussione: Layout con colonna centrale: da tabelle a CSS

Strumenti discussione

Ricerca discussione

Visualizza

Layout con colonna centrale: da tabelle a CSS

Permessi di invio