sto realizzando il mio primo layout con css/html e volevo qualche consiglio a riguardo
per ora ho definito solo la struttura fissa e i tre livelli (header,center,footer) con i div
il sito è dedicato a un fantacalcio e i contenuti saranno pochi e da aggiornare solo un paio di volte all'anno, credo di arrivare a max 5 pagine effettive per cui l'impostazione in html credo che vada bene che ne dite?
ho iniziato a lavorare sull'header che sto provando a realizzare in stile facebook così che i miei amici che sono poco esperti di web ma che sanno usare facebook lo troveranno facile da utilizzare, poi credo che come prima prova personale sia fattibile
per realizzarlo ho trovato sulla rete una guida e l'ho seguita >> http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
ottenendo questo risultato per ora: http://bit.ly/bmjOMO
questi sono html e css
- <body>
- <div id="container">
- <div id="header">
- <div id="logo"><a href="home.html" class="header_logo"></a></div>
- <div id="navigation">
- <ul id="list-nav">
- <li><a href="#">Storia</a></li>
- <li><a href="#">Allenatori</a></li>
- <li><a href="#">Regolamento</a></li>
- </ul>
- </div>
- </div>
- <div id="center">
- </div>
- <div id="footer">
- </div>
- </div>
- </body>
- body{
- background-color:#8b8b8b;
- font-size:16px;
- margin:0;
- padding:0;
- font-family: Georgia, "Times New Roman", Times, serif;
- }
- #container {
- position: absolute;
- left: 50%;
- margin-left: -480px;
- }
- #header{
- background-color:#678F5F;
- height:40px;
- width: 960px;
- border-bottom-width: 1px;
- border-bottom-style: solid;
- border-bottom-color: #FFF;
- }
- #center {
- background-color:#78BF69;
- min-height:500px; /* for modern browsers */
- height:auto !important; /* for modern browsers */
- height:500px; /* for IE5.x and IE6 */
- width: 960px;
- }
- #footer {
- clear:both;
- background-color:#678F5F;
- height:50px;
- width: 960px;
- border-top-width: 3px;
- border-top-style: solid;
- border-top-color: #FFF;
- }
- #logo {
- position: absolute;
- height: 40px;
- width: 200px;
- float: left;
- }
- .header_logo { /*rollover su logo principale*/
- background-image: url(../images/header_logo_sx.png);
- background-position: 0px 0px;
- display: block;
- height: 40px;
- width: 200px;
- }
- .header_logo:hover { /*rollover su logo principale*/
- background-image: url(../images/header_logo_sx.png);
- background-position: 0px 40px;
- }
- #navigation {
- height: 40px;
- width: 360px;
- float:right;
- }
- #list-nav {
- margin:20;
- padding:0;
- list-style-type: none;
- width: 360px;
- }
- #list-nav li {
- display: inline;
- }
- #list-nav li a {
- text-decoration: none;
- float: left;
- width: 120px;
- padding-top: 5px;
- padding-right: 0px;
- text-align: center;
- color: #FFF;
- }
- #list-nav li a:hover {
- background-color: #a1df94;
- }
chiedo un vostro parere su una serie di cose
Primo punto
I due div (logo & navigation) li ho posizionati bene all'interno del div header? ho usato float left e right per inserirli
Secondo punto
Se voglio centrare verticalmente il menu su cosa devo agire? sul div navigation oppure sulla lista list-nav proprio? Che codice devo usare?
Terzo punto
Finché non avevo settato la famiglia di caratteri non avevo problemi nel rollover (vedere immagine seguente), ora invece mettendo Georgia mi esce una sottile riga verde scuro al di sotto. Da che dipende?
grazie in anticipo a tutti
edit mi è venuto fuori un ulteriore problema: se ridimensiono la finestra del browser il layout non mi viene mostrato interamente, è una conseguenza della struttura fissa in particolare oppure ho commesso qualche errore io?
), ma appena ho il tempo sicuramente faccio quelle modifiche: ieri ci ho lavorato su per l'intera giornata, infatti dopo che ho postato qui per l'header ho iniziato anche il contenitore centrale *_*
