Wrapper e testata

**reddy1** · 16-09-2008, 22:20

Ho una pagina i cui contenuti sono tutti all'interno di un div wrapper centrato, vorrei però che il div barranera (e anche il footer) si estendesse a tutta la pagina e non occupasse solo il 100% del wrapper...come posso fare?

<div id="wrapper"> <div id="barranera">...

#wrapper { margin: 0; position: relative; width: 66em; margin: 0 auto; text-align: left; } #barranera { background-color: #000000; height: 3.41em; position: relative; left: 0; top: 0; width: 100%; }

Gia che ci sono...

ho anche un menù con float:right e posizionamento relativo.
Sul mac funziona tutto sia con safari che con firefox, con il pc, mi raddoppia la distanza dal top sia con firefox che con IE (dal 5 al 7).
Che cosa potrei fare?

**reddy1** · 16-09-2008, 22:53

Ecco l'intero codice...

body {
background: url(immagini/bg.jpg) no-repeat fixed 0;
font: 12px Arial, Helvetica, Geneva, sans-serif;
margin: 0;
padding: 0;
height: 100%;
text-align: center;
}

* a {
border: 0;
color: #000000;
text-decoration: none;
}

* a img{
border: 0em;
}

#wrapper {
margin: 0;
position: relative;
width: 66em;
margin: 0 auto;
text-align: left;
}

#barranera {
background-color: #000000;
height: 3.41em;
position: relative;
left: 0;
top: 0;
width: 100%;
}

#diretto {
float: right;
position: relative;
top: 0.7em;
left: -0.8em;
display: inline;
}

#logo {
display: inline;
position: relative;
top: 2em;
left: 1.8em;
clear: left;
}

/* @group menu */

#menu {
position: relative;
display: block;
top: 2em;
left: -0.7em;
float: right;
}

#menu li{
padding-left: 0;
display: inline;
font-size: 1em;
margin-left: -0.6em;
height: 0;
}

#menu a{
color: #000000;
text-decoration: none;
padding: 0.4em 0.5em;
}

#menu a:hover{
color: #ffffff;
background-color: #ffff33;
}

/* @end */

/* @group Sx */

#sinistra {
float: left;
position: relative;
margin-left: 1.9em;
width: 44.4em;
display: inline;
}

#boxmaster {
background-color: #b7ced6;
margin-bottom: 1.6em;
padding-left: 1.3em;
margin-top: 7em;
padding-top: 1em;
padding-bottom: 1em;
}

#boxmaster:hover {
background-color: #a5bac1;
}

#box1 {
background-color: #d5d5d5;
margin-bottom: 1.6em;
padding-left: 1.3em;
padding-top: 1em;
padding-bottom: 1em;
}

#box1:hover {
background-color: #bbbbbb;
}

#box2 {
background-color: #d5d5d5;
margin-bottom: 1.6em;
padding-left: 1.3em;
padding-top: 1em;
padding-bottom: 1em;
}

#box2:hover {
background-color: #bbbbbb;
}

/* @end */

/* @group Dx */

#destra {
width: 13.3em;
float: right;
margin-top: 7em;
margin-left: 5.6em;
margin-bottom: 5.6em;
display: inline;
}

* hr {
border: 0;
color: #ffff33;
background-color: #ffff33;
height: 0.41em;
width: 100%;
}

#ultimi {
margin-top: 1.5em;
margin-bottom: 1.5em;
}

#ultimi a {
color: #000000;
text-decoration: none;
}

#news {
margin-top: 1.5em;
margin-bottom: 1.5em;
}

#news a {
color: #000000;
text-decoration: none;
}

p.dx {
font-size: 1.25em;
margin-top: 0.6em;
margin-bottom: 0.6em;
}

/* @end */

h1 {
font-size: 2.6em;
margin-bottom: -0.35em;
line-height: 1.2em;
letter-spacing: -0.05em;
margin-top: -0em;
}

h1 a {
color: #000000;
text-decoration: none;
}

h2 {
font-size: 1.5em;
line-height: 1.2em;
letter-spacing: -0.06em;
margin-bottom: 0;
}

#footer {
background-color: #000000;
height: 2.58em;
position: relative;
left: 0;
width: 100%;
bottom: 0;
clear: both;
}

#footersx {
color: #ffffff;
display: block;
font-size: 0.8em;
word-spacing: 0.1em;
position: relative;
left: 1.9em;
float: left;
}

#footerdx {
color: #ffffff;
display: block;
font-size: 0.8em;
word-spacing: 0.1em;
position: relative;
left: -1.3em;
float: right;
}

**reddy1** · 16-09-2008, 22:53

<!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="it" lang="it">
<head>
<link rel="stylesheet" type="text/css" href="diario.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Diariosette</title>
</head>
<body>
<div id="wrapper">
<div id="barranera">
[img]immagini/diretto.gif[/img]
</div>
<div id="testata">
[img]immagini/logo.gif[/img]
<ul id="menu">
<li class="interni">INTERNI
[*]ECONOMIA
[*]ESTERI
[*]CRONACA
[*]LOCALE
[*]CULTURA
[*]CONTATTI
[*]ARCHIVIO
[*]RSS
[/list]
</div>
<div id="sinistra">
<div id="boxmaster">
<div class="testo">
<h1>Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</h1>
<h2>Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</h2>
</div>
</div>
<div id="box1">
<div class="testo">
<h1>Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</h1>
<h2>Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</h2>
</div>
</div>
<div id="box2">
<h1>Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</h1>
<h2>Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</h2>
</div>
</div>
<div id="destra">
[img]immagini/ultimi.gif[/img]
<div id="ultimi">
<p class="dx">Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</p>
<hr/>
<p class="dx">Beijing 2008: a poche ore d medaglie per gli azzurri.</p>
<hr/>
<p class="dx">Beijing 2008: a poche ore dalla fine nuove medaglie per gli.</p>
<hr/>
<p class="dx">Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</p>
</div>
[img]immagini/news.gif[/img]
<div id="news">
<p class="dx">Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</p>
<hr/>
<p class="dx">Beijing 2008: a poche ore d medaglie per gli azzurri.</p>
<hr/>
<p class="dx">Beijing 2008: a poche ore dalla fine nuove medaglie per gli.</p>
<hr/>
<p class="dx">Beijing 2008: a poche ore dalla fine nuove medaglie per gli azzurri.</p>
</div>
</div>
<div id="footer">
<p id="footersx">Diariosette Reg.Trib.Salerno n.32 del 18/10/2006</p>
<p id="footerdx">n.32 anno III del 25/11/2008</p>
</div>
</div>
</body>
</html>

Grazie mille in anticipo

**reddy1** · 17-09-2008, 12:23

up

**reddy1** · 17-09-2008, 16:37

risolto mettendo i div incriminati fuori da wrapper e aggiungendo un div che li centrasse, un contenitore solo per loro insomma...

Discussione: Wrapper e testata

Strumenti discussione

Ricerca discussione

Visualizza

Wrapper e testata

Permessi di invio