Barre laterali sul sito

05-11-2009, 22.27.21

Allora... è da qualche giorno che cerco dei modi per inserire due barre laterali sul mio sito, ma, non trovando nulla di utile, ho deciso di fare direttamente io la domanda...
Vi spiego: sto provando a rifare quasi del tutto il mio sito, sia dal punto di vista del contenuto, che da quello grafico e del layout... ma il problema sta proprio nel fatto che per ora la pagina non ha un layout che dia l'idea di qualcosa di ordinato...
Per iniziare ho pensato che mi avrebbe aiutato aggiungere due barre laterali (una a destra e una a sinistra :asd: ) che "rachiudessero" tutto il contenuto della pagina, con magari uno sfondo diverso dall'esterno di queste.
Ho provato soluzioni come (quella che utilizzo al momento):

Codice:

 #centrale {background-color: #2D2D2D; margin:0 auto; width: 85%;
border: 20px solid #131313; margin-top: 40px; margin-bottom: 40px}

(ovviamente scritto nel css) e poi

Codice:

 <div id="centrale"> CONTENUTO PAGINA </div>

nella pagina (in questo modo in realtà formo una"cornice" che ha dei lati anche orizzontali, sopra e sotto)
Ma in ogni caso mi si presenta lo stesso problema: la "cornice" arriva fino a un pezzo del sito (bloccandosi al cambio tra </head> <body> ) e in alcuni casi sposta tutta la pagina a destra o sinistra, non so per quale motivo.
Quest'ultimo (scritto sopra) che uso adesso, non da questi errori su Internet Explorer (dove è solo un pò spostato a sinistra, lasciando molto più spazio di bordo a destra) ma li da comunque su Firefox...
Infine aggiungo una cosa: stavo provando a fare in questo modo perchè era l'unico sapevo potesse funzionare (anche se non è stato così), ma in realtà avrei preferito avere proprio solo le barre orizzontali, che si prolungassero per tutta la pagina...
Qualcuno sa aiutarmi? :) Grazie

**acsocmel** · 05-11-2009, 22.42.19

al momento il tuo codice è un macello, devi fare un passo indietro e studiarti una guida come quelle indicate nei link utili
http://forum.it.altervista.org/basi-...-iniziare.html
devi sapere cosa va nell'head e cosa nel body e cominciare con poche cose scritte bene
cosi sarà più facile aiutarti :)

05-11-2009, 22.45.58

Si, se devo essere onesto non ho mai capito più di tanto il significato di distinguere tra head e body..... più che altro lo utilizzavo come trucchetto per posizionare più alto o più in basso alcune tabelle :asd:
Comunque grazie, mi guardo subito il link poi magari edito il post e ti dico :)

EDIT: Ok, ho letto proprio la guida che avevo utilizzato per imparare le base tempo fa, facendo più attenzione a quel pezzo in particolare (head/body) ... adesso credo di aver sistemato da quel punto di vista, ho messo come dice tutte le tag " non visibili" nell'head, e tutto il contenuto della pagina in body... giusto così no?

**acsocmel** · 06-11-2009, 00.04.08

aggiungi overflow auto al css del div centrale
e ripulisci dai tag ripetuti :)

06-11-2009, 11.31.54

Ho provato, ma non mi pare abbia cambiato qualcosa.... E poi, anche se forse è un po troppo pretenzioso, preferirei sapere proprio un codice per mettere delle barre laterali, e non la cornice, come ho scritto nel post principale :)
Comunque grazie mille per aver risposto!

**popoworld** · 06-11-2009, 13.29.27

Premettendo che "sapere il codice" (cioé, ricopiarlo pari-pari da chi te lo posta) non ti aiuterà poi ad una gestione ottimale del tuo sito (se non hai idea del 'perchè' hai scritto un certo codice, avrai poi delle difficoltà nel mettervi mano da solo per variarlo quando ti sarà necessario), prova comunque a vedere se questa "cosa" ti viene bene per il lavoro che vuoi fare:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>QUELLO CHE VUOI SCRIVERE TU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="subject" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="rating" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="description" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="abstract" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="keywords" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="language" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="author" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="copyright" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />
<meta name="robots" content="Leggi una GUIDA SUI 'META TAG' per capire quello che devi inserire qui" />

<link href="prova.css" type="text/css" rel="stylesheet" />

</head>

<body>
<div id="box">

   <div id="header"> 
CONTENUTO DELLA TESTATA
   </div>

   <div id="menu">
CONTENUTO DELLA COLONNA DI DESTRA
   </div>

  <div class="content">
CONTENUTO DELLA COLONNA DI SINISTRA
  </div>

</div>
<br /><div style="z-index:3" class="smallfont" align="center">SEO by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.3.2</div>
<br /><div style="z-index:3" class="smallfont" align="center">SEO by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.3.2</div>
</body>
</html>

...e nella pagina "prova.css" (la pagina dei CSS la potrai chiamare come vuoi, ma ricordati di cambiarne il nome anche nel richiamo che c'è tra i tag <HEAD> e </HEAD>) quest'altra "cosa" qui:

Codice:

/********** PARAMETRI GENERALI **********/

body {  
        text-align : center;
        background : #6D7F8C; 
        color : #000000; 
    margin : 1em 2em; 
        padding : 1em 2em;
        font : 11px Verdana, Tahoma, Helvetica, sans-serif; }


/********** BOX **********/

div#box {
        width : 800px;       
        margin: 0 auto 0 auto; }


/********** HEADER **********/

div#header {
        width : 790px;
    height : 90px; 
    background : #AEC8CF; 
    border: 5px solid #FFFFFF;
        border-bottom: 10px solid #FFFFFF;
        text-align : center; }


/********** COLONNA MENU **********/

div#menu {
    font-family : Tahoma, Verdana, Helvetica, sans-serif; 
    background : #AEC8CF;
        float : right;
    text-align : center;
    width : 200px; 
    line-height : 18px;
    border-color : #FFFFFF; 
    border-style : solid; 
    border-width : 0 5px 5px 5px;
    padding-bottom: 3px; }


/********** COLONNA CONTENUTI **********/

div.content {
        float : left;
        width : 580px;
    background : #AEC8CF;
    color : inherit;
    border-style : solid; 
    border-color : #FFFFFF; 
    border-width : 0 5px 5px 5px; 
        text-align : center; }

... Questo potrebbe esserti d'aiuto come "base di partenza", poi potrai fare delle prove cambiando tutti i parametri necessari per costruirti il sito come meglio credi (larghezza dei DIV, colore dello sfondo, spessore/colore dei bordi ecc... ecc...), potrai aggiungere altri DIV all'interno di quelli già presenti, crearti un'altra colonna a sinistra, MA, ripeto, dovresti anche ogni volta che cambi qualche parametro, andarti a leggere la funzione dello stesso su una delle tantissimi guide HTML presenti in rete, così da capire quello che stai facendo e 'perché' lo fai.

...E buona fortuna...

06-11-2009, 15.01.01

Grazie anche a te per aver risposto :D
Per il codice che hai scritto.... non penso lo utilizzerò per intero, più che altro perchè mi da l'idea di una pagina troppo schematizzata, invece preferirei fare un qualcosa di più personale, di più mio :D Comunque torna utilissima quando devo estrapolare pezzi di codice, quindi grazie mille ancora! :)

Discussione: Barre laterali sul sito

LinkBack

Strumenti discussione

Display

Barre laterali sul sito

Regole di scrittura