layout centrato + box centrato

**Airude** · 12-05-2006, 20:56

sto realizzando un layout a 3 colonne di dimensione fissa e lo ho posizionato al centro della pagina..

è possibile posizionare graficamente il mio il menu che è in #extraDiv1 al centro dell'header(magari con position: absolute ????

) senza inserire nel codice html #extraDiv1 all'interno dell header???

vi quoto sia html che css...

<body>

<div id="container">

<div id="header"> header </div>
<hr />
<div id="wrapper" class="clearfix">

<div id="twocols" class="clearfix">
<div id="maincol"> Main Content Column </div>
<div id="rightcol"> Right Column </div>
</div>
<hr />

<div id="leftcol"> Left Column </div>
</div>
<hr />
<div id="footer">Footer</div>
</div>
<div id="extraDiv1">
<ul>[*]Sample[*]Sample[*]Sample[*]Sample[*]Sample[*]Sample[*]Sample[*]Sample[/list]
</div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div>
<div id="extraDiv6"><span></span></div>

</body>
</html>

e il mio css..

html, body {
margin:0;
padding:0;
text-align:center;
}
hr{
display: none;
}

#container {
width:990px;
text-align:left;
margin-left:auto;
margin-right:auto;
}

#header{
position:relative;
height:100px;
background-color:#FFFFFF;
width:100%;
}

#leftcol{
width:150px;
float:left;
position:relative;
}

#twocols{
width:840px;
float:right;
position:relative;
}

#rightcol{
width:150px;
float:right;
position:relative;
}

#maincol{background-color: #FFFFFF;
float: left;
display:inline;
position: relative;
width:690px;
}

#footer{
height:50px;
background-color:#FFFFFF;
clear:both;
}

#extraDiv1 {
position: absolute;
top:50px;
height: 40px;
border: 1px solid black;
width:690px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

#extraDiv1 ul{
list-style: none;
}

#extraDiv1 ul li{
display: block;
float: left;
width: 50px;
height: 21px;
}

#extraDiv1 li a{
display: block;
width: 50px;
height: 21px;
text-decoration: none;
}

grazie..

**Airude** · 14-05-2006, 14:12

**Airude** · 16-05-2006, 12:12

proprio nessuno sà come aiutarmi???

**Mich_** · 16-05-2006, 14:38

Non e` che hai una pagina dove hai implementato quel codice?
In alternativa:
Puoi fare uno schemino grafico?

Non riesco a seguire tutta la descrizione, e nn capisco perche` vuoi usare posizionamenti assoluti (che rendono piu` complessa la sistemazione dei vari pezzi).

E poi i posizionamenti relativi, presuppongono che ci siano delle posizioni (es. top e left) per spostare il bloocco dalla posizione default.

**Airude** · 17-05-2006, 11:03

Originariamente inviato da Mich_
Non e` che hai una pagina dove hai implementato quel codice?
In alternativa:
Puoi fare uno schemino grafico?

Non riesco a seguire tutta la descrizione, e nn capisco perche` vuoi usare posizionamenti assoluti (che rendono piu` complessa la sistemazione dei vari pezzi).

E poi i posizionamenti relativi, presuppongono che ci siano delle posizioni (es. top e left) per spostare il bloocco dalla posizione default.

ok ho provato a mettertelo in linea su un link provvisorio...
http://provaplay.altervista.org/provacss/prova.html

il menu a sfondo bianco mi piacerebbe fosse posizionato sempre sopra il main al centro dell'header con si può vedere con una risoluzione 1024x768..
ad altre risoluzioni o ridimensionando la finestra essendo la suia posizione fissa si sballa la visualizzazione..
spero che l'esempio sia più chiaro delle mie spiegazioni..

**Mich_** · 17-05-2006, 11:48

Hai fatto tutta una serie di blocchi rigidi, e in allegato ti mostro come lo vedo io (un pezzetto, per ridurre le dimensioni del file).

Ecco una proposta per iniziare la sistemazione

codice:

<body>
  <div id="header">
    <h1>Header</h1>
    <ul id="menu">[*]Sample[*]Sample
      ...[/list]
  </div> 

  <div id="content">
    <div id="pink">
      

Left Column</p>
    </div> 
    <div id="pink">
      

Right Column</p>
    </div> 
    <div id="main">
      

Main Content Column</p>
    </div> 
  </div> 
  <div id="footer">
    

footer</p>
  </div> 
</body>

CSS:
html, body {
  width: 100%;
  font-size: 100%;
}
#header {
  width: 100%
  height: 100px;
  text-align: center; /* per IE */
}
h1 {
  width: 100%
  test-align: left; /* per contrastare il center */
  /* quello che vuoi */
}
#menu {
  margin: 0 auto;
  max-width: 70em;
  width: 70em;
  list-style: none;
  text-align: left;  /* per contrastare il center */
}
#menu li {
  width: 7em;
  flaot: left;
}
#content {
  width: 100%;
}
#pink {
  float: left;
  width: 150px;
}
#yell {
  float: right;
  width: 150px;
}
#main {
  float: left;
}
#footer {
  clear: both;
}

Non ho inserito gli sfondi, ma puoi farlo tu. Invece non ho usato position e non ho usato <hr> (penso che non vadano usati)
Il codice e` compatibile XHTML Strict.
In qualche caso dovrai inserire degli height, ma e` un discorso complesso. Piuttosto prova ad inserire piu` linee di testo, o altri elementi per allungare i blocchi.

**Airude** · 17-05-2006, 12:36

scusami ma il codice html da te proposto in una visualizzazione senza css proprone quelli che per me sarebbero 3 menu (coldx colsx menu) prima del contenuto (maincol) e questo secondo il mio punto di vista non è proprio il massimo..
se fosse possibile mi piacerebbe trovare una soluzione mantenendo la posizioni dei div del mio html anche modificando totalmente il css...

**Mich_** · 17-05-2006, 15:33

Pero` hai visto cosa succede inserendo posizionamenti assoluti.
Tieni presente che:
- non hai il controllo sui caratteri usati dal browser
- non hai il controllo sulle dimensioni della finestra
- non hai il controllo sulle dimensinoi del monitor e del pixel
- (ovviamente) non sai quanto e` l'acutezza visiva dell'utente

Piuttosto mettici il classico:
<a href="#maincontent" title="vai al contenuto">vai al contenuto<a/>
nella head, in un box invisibile.

PS: il blocco della colonna destra, puoi anche inserirlo dopo il main; gli altri no: devono stare prima per un posizionamento naturale.

Se proprio puoi fare due <div> grandi come il body, da posizionare con posizionamento assoluto in top:0; left:0; sovrapposti; dentro il primo ci metti il alcuni box trasparenti per lasciare lo spazio, dentro il secondo ci metti i vari menu.

Ti ricordo che esiste anche il tabindex, per modificare l'ordine di ricerca dei link analizzati con il pulsante tab.

**Airude** · 17-05-2006, 16:58

quindi anche secondo te non si riesce a posizionare il div al centro pagina col posizionamento assoluto?

vorrà dire che sposterò il container a left: 0px; (invece che auto)
e posizionerò il div in modo assoluto di conseguenza..

anche se il sito al centro mi sarebbe piaciuto molto di più...

**Mich_** · 17-05-2006, 17:37

Originariamente inviato da Airude
quindi anche secondo te non si riesce a posizionare il div al centro pagina col posizionamento assoluto?

No, non ho detto questo. Ho detto che con pos assol. ci sono grossi problemi di compatibilta` con i vari browser/risoluzioni

Per centrare con posiz assol:
position: absolute;
left: 50%;
width: 600px;
margin-left: 300px; /* la meta` del width */

Discussione: layout centrato + box centrato

Strumenti discussione

Ricerca discussione

Visualizza

layout centrato + box centrato

Permessi di invio