[Risolto] qualche aiutino

naples.my.love

[Risolto] qualche aiutino

Ragazzi sto provando a realizzare un sito css senza poche fatiche.
Ho creato la parte header, il menù di navigazione, il contenitore e il footer.
Adesso vorrei chiudere e mettere lo sfondo solo per i bordi sinistro, destro, sopra e sotto.
Come faccio?
Se non avete capito posso postare una foto

meryk

ciao! COme prima cosa ti consiglio di dare un'occhiata alle faq di sezione, troverai molti consigli utili per risolvere il tuo problema. Ti consiglio inoltre di guardare il layoutizzatore di Laburno. http://www.giorgiotave.it/forum/css/54753-layout-izzatore.html#post364262
potrebbe risolvere il tuo problema in poco tempo.

naples.my.love

Scusate ragazzi ho capito quale era il problema, non avevo usato le tabelle! :bho:

naples.my.love

ragazzi mi distereste come impostare una tabella nel file html e nel relativo css per avere due linee nere separatrici come da me disegnate?
Va bene anche se la dimensione nn è precisa xkè è chiaro vedendo solo un immagine, poi l' aggiusto io

karedas

Io innanzitutto ti consiglio di non usare le tabelle poichè esse sono adibite di base alla visualizazzione e di dati come può essere ad esempio l'elenco dei prezzi delle camere di un hotel, il punteggio di un campionato e via scorrendo.

Puoi fare la medesima cosa con i div che hanno invece lo scopo del "contenitore".

Ciao!

naples.my.love

ok e come posso fare con i div?
Mi manca solo quel div, xkè come si può vedere dei div già gli ho messi naturalemente (x l' header, il footer ecc)

karedas

Che tipo di bordi vuoi?
Dei bordi semplici creati tramite gli attributi del css (tratteggiati, a punti, lineari..) o bordi creati da te?

naples.my.love

Creati tramite gli attributi di css.

karedas

Bene
Ad occhio e come mostri nel tuo template vuoi che due bordi lineari-verticali vadano a delimitare il tuo intero sito.

Quindi cosa facciamo noi?
Dobbiamo racchiudere la porzione di codice html - che genera la pagina centrale - all'interno di un div:

[html]<div id="container">

</div>[/html]Nel css impostiamo così:

#container{
...
** border-left**:1px solid #000000;
** border-right**:1px solid;
}

La parte in grassetto è il nome del nostro attributo (border, border-left,border-right,border-top,border-bottom)
Il valore rosso sta per la larghezza del tuo bordo.
Quello verde per il tipo di bordo (solid, dotted, ridge, double ecc)
Quello viola per il valore alfanumerico riferito al colore.

Potrebbe creare problemi la parte del div
In caso postaci un *link non attivo *della tua pagina o qualcosa di più sostanzioso per aiutarti al meglio.

Ciao!

naples.my.love

Grazie ci sn riuscito, non sarà la fine del mondo questo template però per uno che nn conosceva proprio i css...

naples.my.love

oh no!!! con IE si vede male
Posto il codice del css e dell' html nella speranza che qualcuno capisca xkè nn si vedono uguali con tutti e due i browser

CSS:



/* CSS Document */
#container{
border-left:2px solid #000000;
border-right:2px solid;
}
#page {
    margin: 1px auto;
    padding: 0;
    width: 662px;    
       border: 0px;
    }
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:0px;background: #0000CC; ;color:}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#FFFFFF}
div#container{width:700px;margin:0 auto}
div#content{float:left;width:80px}
body {background-image: url(sfondo.gif); background-repeat: repeat; }
div {background-image: url(sfondo.gif); background-repeat: repeat-x; }
div#navigation {font-style:normal; font-family:Arial, Helvetica, sans-serif; font:status-bar}
div#navigation ul{list-style-type: none;margin: 0; padding: 0}
div#navigation li{float:left; margin:0 3px 0 0; padding:0}
div#navigation a{display: block; width: 90px; line-height: 30px; text-decoration: none; border: 1px solid #666;
background: url(bottoni.jpg) no-repeat top left; color:#333;
font-variant: small-caps; text-indent: 27px}
div#navigation a:hover{background-position: -130px; color: #336}
div#navigation li#activelink a, div#navigation li#activelink a: hover{background-position: -260px 0; color: #fff}
div#footer{background: #FFFF00;color:}
div#footer p{margin:0;padding:80px 10px; width: 20;}
A:LINK {
    text-decoration: none;
    color: #0000FF
}
A:VISITED {
     text-decoration: none;
     color: #FF00FF
}
A:HOVER {
      text-decoration: none;
      color: #FF0000
}


```HTML:

<body>
<div id="container">
<div id="header"><h1><img src="logo.gif"></h1></div>
<div id="navigation">
<ul>
<li id="activelink"><A href="#">nomelink</A></li>
<li><A href="#">nomelink</A></li>
<li><A href="#">nomelink</A></li>
<li><A href="#">nomelink</A></li>
<li><A href="#">nomelink</A></li>
<li><A href="#">nomelink</A></li>
<li><A href="#">nomelink</A></li>
</ul>
</div><br><br>
Benvenuti nel sito.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer"><center>nomesito &copy 2007/08. All rights reserved.<br>Realizzato da <A href="#">link</center></A></div>
</div>
</body>
</html>

karedas

Io l'ho provato sia su IE6, 7 e Firefox e non trovo problemi.
Cos'è che non vedi bene?

naples.my.love

Ho l' impressione che tra IE 6 e Firefox le dimensioni siano diverse, apparte che in IE 6 nn è al centro come in firefox...

naples.my.love

nessuno mi sa dire niente?

karedas

Ciao Naples scusa se non sono riuscito a risponderti in tempo.
Comunque: ti chiederei a questo punto di inserire un link (non attivo!) della tua pagina poichè attualmente non saprei come aiutarti dato che, tramite le risorse che hai postato, riesco a vederla bene.
Forse c'è qualche elemento nascosto o la presenza di immagini che ti creano problemi e che io non posso vedere in locale.

Ciao!

naples.my.love

Karedas ci sono riuscito e tutto questo grazie a te!!!
Grazie