Layout due colonne

**ana4ever-vids** · 09-07-2006, 18:26

Ciao a tutti,
sto realizzando una bozza per una nuova versione di un sito. Volevo realizzare una cosa come l'immagine allegata qui. Con FF tutto ok, ma con IE ho dei problemi (se volete posso postare il print di IE).

Il problema è che IE non mi estende l'immagine di sfondo del menu e lo sfondo bianco dove dovrebbero esserci i contenuti fino al footer, ma solo fino a dove finisce il contenuto o il menu.
Posto nel prossimo post il print con IE.

Per realizzare questo layout ho creato 4 div: header, menu, contenuti, footer. Ho assegnato loro con i css l'attributo position:absolute; e li ho posizionati utilizzando le proprietà left: xxxpx;, top: xxxpx;, right: xxxpx; e bottom: xxxpx;.

**ana4ever-vids** · 09-07-2006, 18:28

Ecco il print con IE:

**ana4ever-vids** · 09-07-2006, 19:30

Nessuno??

**ana4ever-vids** · 10-07-2006, 09:02

uppete

**webdemo** · 10-07-2006, 09:42

prova a postare il codice.

ciaux

**ana4ever-vids** · 10-07-2006, 09:51

Ok

HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//IT">
<html>
<head>
<title>::RainerumGroup::</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
</head>
<body>
<div id="header">
	<p id="logo">[img]images/logo.gif[/img]</p>
</div>
<div id="menu">
	<h1>. News</h1>
	<blockquote>News dal Mondo</blockquote>
	<blockquote>News del Sito</blockquote>
	<blockquote>ANSA News</blockquote>
	<h1>. RainerumGroup</h1>
	<blockquote>RainerumGroupForum</blockquote>
	<blockquote>RainerumGroupWebGallery</blockquote>
	<h1>. Multimedia</h1>
	<blockquote>I Videos pi&ugrave; Belli del Web</blockquote>
	<h1>. Altro</h1>
	<blockquote>Links</blockquote>
	<blockquote>Contattaci</blockquote>
	<blockquote>Prossimamente...</blockquote>
</div>
<div id="page">
gvddtfyhgjlkj.kò,hlmk
</div>
<div id="footer">
	<div id="contact">
	<marquee scrollamount="3" direction="left" loop="-1" onmouseover="this.stop()" onmouseout="this.start()">RainerumGroupWebStaff: Maurizio Giaffredo e Sebastian Cincelli</marquee>
	</div>
</div>
</body>
</html>

CSS:

codice:

body {
	font-family: Verdana;
	font-size: 15px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	background-color: #000000;
	color: #FFFFFF;
}
a, a:link, a:active, a:visited {
	color: #FFFFFF; 
	text-decoration: underline;
	font-weight: 900;
}

a:hover {
	color: #FFFFFF; 
	text-decoration: none;
	font-weight: 900;
}


#header {
	padding: 0px;
	margin: 0px;
	left: 0px;
	top: 50px;
	right: 0px;
	heigth: 100px;
	width: 100%;
	position: absolute;
	background: url(../images/bg_top.gif);
}

#logo {
	padding: 0px;
	margin: 0px;
	text-align: center;
}

#menu {
	padding: 15px;
	margin: 0px;
	left: 0px;
	top: 150px;
	bottom: 100px;
	width: 300px;
	position: absolute;
	font-weight: 900;
	background: url(../images/bg.gif) repeat-y;
	overflow: visible;
}

h1 {
	padding: 0px;
	margin: 0px;
	font-weight: 900;
	font-size: 20px;
}

blockquote {
	font-style: italic;
}

#page {
	padding: 15px;
	margin: 0px;
	left: 330px;
	top: 150px;
	right: 0px;
	bottom: 100px;
	position: absolute;
	background: #FFFFFF;
	color: #000000;
}

#footer {
	padding: 0px;
	margin: 0px;
	left: 0px;
	bottom: 50px;
	right: 0px;
	height: 50px;
	width: 100%;
	position: absolute;
	background: url(../images/bg_bottom.gif) repeat-x top;
}

#contact {
	text-align: right;
	padding: 15px;
	margin: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	position: absolute;
	font-weight: 900;
}

**webdemo** · 10-07-2006, 10:26

credo sia un problema sul CSS
ti sposto

ciaux

**ana4ever-vids** · 10-07-2006, 10:33

Grazie!! Ciauz

Voi del forum CSS sapete darmi una mano???

**ana4ever-vids** · 10-07-2006, 13:26

Questa sezione del forum non è molto frequentata...

**Mich_** · 10-07-2006, 14:28

Non e` facile metter mano al tuo layout fisso.
Credo che ad IE non piaccia che sia definito contemporaneamente top e bottom nonche` left e right. Lui preferisce width e height (che pero` per lui sono come min-width e min-height).

L'unico consiglio semplice che ti posso dare e` passare a XHTML 1.0 Strict: non credo sia complesso con il tuo codice 9ma devi eliminare il <marquee>, che peraltro non esiste neppure in HTML Strict.

Fai passare la pagina dai validatori: validatore HTML e validatore CSS.

Discussione: Layout due colonne

Strumenti discussione

Ricerca discussione

Visualizza

Layout due colonne

Permessi di invio