Qualche piccolo aggiustamento al layout..please

**dvd2005** · 04-10-2007, 22:11

Ciao a tutti...a forza di smanettare,leggere le guide e scopiazzare ho quasi realizzato la home page come vorrei...ho solo qualche aggiustamento da fare che non riesco proprio a realizzare

Ecco come si presenta attulamente la mia home page...

Vorrei riuscire ad avere un bordo che colleghi tutto il layout (una specie di cornice) senza quello spazio fra titolo e menù e poi riuscire ad abbassarlo verso il centro della pagina (tuttora è appoggiato in alto)..ho provato in vari modi ma al momento non ho ancora trovato il dritto!!!

Qualcuno m sa aiutare??

...dimenticavo...riuscire a centrare la barra del menù

**Pacio88** · 04-10-2007, 22:52

Se magari posti il codice è più semplice aiutarti

...

**dvd2005** · 04-10-2007, 22:55

Hai ragione..ci stavo smanettando :master: :master:

Ecco qui...

<style type="text/css">
body{
background-color:white;margin: 0;
padding: 0;
text-align: center; /*centra in IE 5.x */
}

div#container{
width: 770px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
}
div#header{ background-color:black;

height: 40px;
border:1px; color:white;
}
<style type="text/css">

.menu{
margin: auto;
padding: 0;
float: center;
font: 13px Courier new;
width: 770px;
border-width: 1px 0;
background: black center center repeat-x;
}

.menu li{
display: inline;
}

.menu li a{
float: center;
color: black;
padding: 5px 16px;
text-decoration: none;

}

.menu li a:visited{
color: white;
}

.menu li a:hover, .menu li .current{
color: red;
background: trasparent center center repeat-x;
}

div#footer{
width: 770px;
margin: 0px auto;
text-align: center;
background-color: #000000;
color: white;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 30px;
}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

</style>
</head>

<body >

<div id="container">
<div id="header">
<h1> <font color="red"> MD</font> Fotografia</h1>

</div>

</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>

</style>

<ul class="menu">[*]Home[*]Biografia[*]Attrezzatura[*]Appunti[*]Elaborazione[*]Gallery[*]Video[*]Contatti[/list]

</div>
</div>

</div>

<table align="center" cellpadding="0" cellspacing="0" width="770" height="600" border="1" bgcolor="#000000" >
<tr>
<td align="center" bgcolor="#FFFFFF" bordercolor="#000000" height="600" width="770"></td>
</tr>
</table>

<div id="footer">...........</div>
</div>
</body>
</html>

**Pacio88** · 04-10-2007, 23:22

Innanzitutto non so se te ne sei dimenticato copiandolo...comunque mancano i tag <html> e <head>..

Per abbassare il tutto verso il centro devi modificare il margin al container. Attualmente è impostato nel seguente modo: margin:0px auto; sostituisci il parametro 0 in base a quanto vuoi che cali.

Per adesso non posso fare più di così perchè si è fatto tardi

ed il tuo codice mi appare al quanto incasinato,se mi permetti un consiglio in futuro usa un foglio di stile esterno al posto di uno incorporato,personalmente rende più ordinato il codice.

Ciao

**oldover** · 05-10-2007, 11:23

Mmm, secondo me puoi ovviare applicando un bordo al div contenitore.

Per il posizionamento del container puoi seguire quanto gia postato da Pacio88, se invece è il link del header che ti interessa allora inserisci il titolo (o link) che sia in un div all'interno del div header e dai istruzioni a lui

Infine ti consiglierei di strutturare la tua pagina in div piuttosto che distribuire classi agli elementi interessati ed attribuire a loro le tue regole di stile

(vedi <ul class="menu">[/list]che puoi sostituire con <div id="menu><ul>[/list]</div>)

Ti posto un template semplice che ho adattato alle tue esigenze, bada bene NON è un sito completo ed e testato solo con firefox 2 (devo andare all'uni ho poco tempo!) ma la teoria e quella.
Per delucidazioni controlla la sezione CSS del sito ed in particolare leggiti questo

Parte HTML:

<html>
<head>
</head>

<body>
<div id="container">
<div id="header">
<div class="headlnk">
SITO
</div>
</div>
<div id="menu">
<ul>[*]Home[*]Biografia[*]Attrezzatura[*]Appunti[*]Elaborazione[*]Gallery[*]Video[*]Contatti[/list]
</div>
<div id="content">
</div>
<div id="footer">
<div class="footlnk">
made by old[O]ver
</div>
</div>
</div>
</body>

</html>

Parte CSS:

body{
margin: 0;
padding: 0;
}

#container{
position: relative;
margin: 20px auto;
width: 770px;
height: 740px;
min-height: 100%;
border: 1px solid #cccccc
}

h1,h2,h3,ul,p,a{
margin: 0;
pading: 0;
}

#header{
height: 100px;
background-color: #333333;
}
.headlnk{
position: absolute;
margin: 30px;
}
#header a{
font: 30px Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #ffffff
}
#menu{
position: relative;
padding: 5px 0;
}
#menu ul{
margin: 0 auto;
list-style-type: none;
}
#menu li{
margin: 0 12px;
display: inline;
}
#menu a{
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #666666
}

#content{
border-top: 1px solid #cccccc
}

#footer{
position: absolute;
height: 40px;
width: 100%;
bottom: 0;
background-color: #333333
}
.footlnk{
position: absolute;
margin: 10px;
text-align: right;
}
#footer a{
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #ffffff
}

Spero di esserti stato d'aiuto, se qualcosa non ti è chiaro mandami pure un PM

Ciauz

**dvd2005** · 05-10-2007, 14:42

Grazie a entrambi...sostituendo il margine sono riuscito ad abbassarlo.
Le guide Css ormai le ho lette e rilette non so quante volte e infatti vorrei metter giù un codice un pò più pulito ma finisco per scopiazzare quello che trovo in giro

Grazie mille Oldover per l'aiuto,sei stato gentilissimo..purtroppo il codice che mi hai fornito su IE mostra un menu verticale e la scrittta in alto mentre tutto il Css appare sotto...non ho firefox e quindi

...proverò a seguire comunque la tua traccia.Gentilissimo.

Comunque,tanto per rendere l'idea questo è quello che vorrei realizzare (non mi sembra impossibile) http://www.elliotterwitt.com/lang/it/index.html

Grazie ancora per l'attenzione.

**Pacio88** · 05-10-2007, 15:57

Non so se lo sai, comunque se vuoi un sito stile quello che hai postato ti informo che è stato realizzato in fash.

**dvd2005** · 05-10-2007, 16:55

Si..si..ho visto che è in flash infatti mi accontento anche di un semplice rettangolo a centro pagina...era solo per mostrarvi l'idea.

Ecco uno schizzo...

Discussione: Qualche piccolo aggiustamento al layout..please

Strumenti discussione

Ricerca discussione

Visualizza

Qualche piccolo aggiustamento al layout..please

Permessi di invio