indicazioni su come creare un determinato layout (era:come creare un..)

19-04-2009, 18.04.49

ciao a tutti. volevo creare per il mio sito una base come questa non so come spiegare(non intendo il contenuto ma quella specie di tabella che occupa tutta la pagina)

opppure come questa

se potete darmi il codice grazie

**seneca** · 19-04-2009, 18.20.16

Se sei interessato al solo codice html, ti basta guardare il sorgente della pagina.
Ciao!

19-04-2009, 18.23.18

ma il problema che le immagini le ho trovate sulla storia del sito xkè ora il sito è diverso

19-04-2009, 18.24.25

vai a quel sito guardi l'html e lo imiti

19-04-2009, 18.25.33

ora il sito ha cambiato tutto non è piu impostato così

**LastWings** · 19-04-2009, 18.58.42

Studiando un po' di html, puoi benissimo farlo.
http://xhtml.html.it/guide/leggi/51/guida-html/

19-04-2009, 19.03.26

un po lo so l'html esempio il colore del testo immagini link...

ma mi potete dare il codice?

**LastWings** · 19-04-2009, 20.51.45

Css

Codice HTML:

 #center{
    float: left;
    width: xxpx; /* xx = dimensione  px = pixel */
    background: red; /*colore parte centrale */
    height: yypx;     /* yy= dimensione  px = pixel */
  }
  #left{
    float: left;
    widht: xxpx; /* xx = dimensione  px = pixel */
    background: yellow;/*colore parte sinistra*/
    height: yypx; /* yy= dimensione  px = pixel */
  }
  #right{
    float: left;
    widht: xxpx;/* xx = dimensione  px = pixel */
    background: green;/*colore parte destra*/
    height: yypx; /* yy= dimensione  px = pixel */
  }

html

Codice HTML:

  <div id="left"> Sinistra </div>
  <div id="center"> Centro </div>
  <div id="right"> Destra </div>

ovviamente va modificato ed integrato in base alle tue esigenze, questo è solo un' esempio.

Come detto prima, studiando un po' di html puoi benissimo farlo, ergo per lavorare sull'esempio ti rimando a http://forum.it.altervista.org/basi-...-iniziare.html dove puoi trovare diversi link a diverse guide html / css

20-04-2009, 14.03.50

si possono mettere le percentuale al posto dei pixel? se si come?

io ho fatto così ma non occupa tutta la pagina come mai?

<Style>
#center{
float: left;
width: 60%; /* xx = dimensione */
background: red; /*colore parte centrale */
height: 100%; /* yy= dimensione */
}
#left{
float: left;
widht: 20%; /* xx = dimensione */
background: yellow;/*colore parte sinistra*/
height: 100%; /* yy= dimensione */
}
#right{
float: left;
widht: 20%;/* xx = dimensione */
background: green;/*colore parte destra*/
height: 100%; /* yy= dimensione */
}

body{margin:0;}

</Style>

20-04-2009, 14.23.56

Così, ad intuito, direi indicando la percentuale anzichè il numero in pixel... ad intuito eh...

ciao!

20-04-2009, 14.30.54

pokemonpersempre

Codice HTML:

#center{float: left; width: xxpx; background-color: red; height: yypx}
#left{float: left width: xxpx; background-color: yellow; height: yypx}
#right{float: left; width: xxpx; background-color: green; height: yypx}

Basta sostituire al posto di xx e yy il loro valore in percentuale(in base alla pagina) e levare px alla fine...Ad es:

Codice HTML:

#center{float: left; width: Numero%; background-color: red; height: 50%}
#left{float: left width: Numero%; background-color: yellow; height: 40%}
#right{float: left; width: Numero%; background-color: green; height: 30%}

LastWings cerca di essere più precisa quando scrivi un codice o una parte di CSS, ho trovato 2 o 3 errori.

EDIT: Il CSS va racchiuso tra i tag <style> e </style>, ma è meglio scrivere <style type="text/css"> e chiuderlo con il solito marcatore.
Il CSS è meglio se viene messo nell'Head del sito.
In questo caso, per usare il tuo codice:

Codice:

<style type="text/css">
#center{float: left; width: 60%; background-color: red; height: 100%}
#left{float: left; width: 20%; background-color: yellow; height: 100%}
#right{float: left; width: 20%; background-color: green; height: 100%}
body{margin:0;}
</style>

Vedi se così ti funziona.

20-04-2009, 18.08.38

ok ma quando metto il bordo me sfasa delle cose volevo mettere nella parte sinistra il bordo destro e nella parte destra il bordo sinistro come spessore tutti e due 1px

ecco il codice

Codice HTML:

<html>
<head>
<title>Pok&egrave;mon per sempre</title>

<style type="text/css">

#titolo{float: left; width: 100%; background-color:#009bff ; height: 20%; border-bottom: 1px solid black;}
#left{float: left; width: 20%; background-color: #009bff; height: 100%;}
#center{float: left; width: 60%; background-color: #00ceff; height: 100%;}
#right{float: left; width: 20%; background-color: #009bff; height: 100%;}
#fondo{float: left; width: 100%; background-color:#009bff ; height: 20%; border-top: 1px solid black;}
body{margin:0;}

</style> 
</head>
<body lang="it">

  <div id="titolo"><center> <img src=url immagine></center></div>
  <div id="left"> Sinistra </div>
  <div id="center"> Centro </div>
  <div id="right"> Destra </div>
  <div id="fondo"> fondo </div>
  
  </body>
</html>

20-04-2009, 20.11.20

Puoi linkarmi il sito con il codice?
Spiegati meglio non ho capito che intendi e cosa vuoi fare...

21-04-2009, 14.05.55

Il link è questo http://pokemonpersempre.altervista.org/loyout.php (quando l'ho finito al posto di loyout.php sarà home.php)

posto un immagine come lo voglio fare diventare

(la qualità dell'immagine non è il massimo fate finta che non cii sono quei pallini bianchi)

21-04-2009, 14.10.47

Ok, ma cosa vuoi fare esattamente?
Non vorrei postarti codici inutilmente...

21-04-2009, 14.18.20

mettere solo i bordi poi ho finito

**nukta** · 21-04-2009, 14.22.34

Originalmente inviato da pokemonpersempre

ok ma quando metto il bordo me sfasa delle cose volevo mettere nella parte sinistra il bordo destro e nella parte destra il bordo sinistro come spessore tutti e due 1px

<div id="titolo"><center> <img src=url immagine></center></div>
<div id="left"> Sinistra </div>
<div id="center"> Centro </div>
<div id="right"> Destra </div>
<div id="fondo"> fondo </div>

per il "fondo", ossia footer (piè di pagina):

#fondo{clear: both; width: 100%; background-color:#009bff ; border-top: 1px solid black;}

note:
clear "pulisce" il float degli elementi della pagina e lo fa posizionare sotto.
"heigh: 20%" NO!! altrimenti occuperà il 20% dello schermo. usa un valore in px o non mettere niente.
per gli altri elementi il valore "height: 100%" non serve a nulla. avranno tutti altezza diversa. per far si che le tre colonne abbiano la stessa altezza devi modificare la struttura.

21-04-2009, 14.22.44

Ma mettere il bordo al centro no eh?Così si ripercuote su entrambi gli spazi...

Codice:

<html>
<head>
<title>Pok&egrave;mon per sempre</title>

<style type="text/css">

#titolo{float: left; width: 100%; background-color:#009bff ; height: 20%}
#left{float: left; width: 20%; background-color: #009bff; height: 100%}
#center{float: left; width: 60%; background-color: #00ceff; height: 100%
#fondo{clear: both; width: 100%; background-color:#009bff ; border-top: 1px solid black}
body{margin: 0}

</style> 
</head>
<body lang="it">

  <div id="titolo"><center> <img src=url immagine></center></div>
  <div id="left"> Sinistra </div>
  <div id="center"> Centro </div>
  <div id="right"> Destra </div>
  <div id="fondo"> fondo </div>
  
  </body>
</html>

Dimmi se così tu funziona.

21-04-2009, 14.25.33

no la parte destra me la mette in fondo

(non sto facendo le prove sul sito sto provando a copiare il codice sul blocco note e poi lo salvo in html)

**nukta** · 21-04-2009, 14.52.20

http://www.intensivstation.ch/en/templates/

Originalmente inviato da theunknown

Ma mettere il bordo al centro no eh?Così si ripercuote su entrambi gli spazi...

Se la somma dei tre elementi della pagina (#left, #center e #right) è 100%, non puoi aggiungere i bordi! (le dimensioni dei bordi vengono sommate a quelle dei div)

Come altri ti hanno consigliato,se vuoi realizzare un sito web devi conoscere l'html e non limitarti a chiedere il codice sul forum.
Comunque, qui trovi 15 template css con il codice già fatto per la struttura di pagina.

21-04-2009, 16.57.55

Risolto grazie a tutti!

Discussione: indicazioni su come creare un determinato layout (era:come creare un..)

LinkBack

Strumenti discussione

Display

indicazioni su come creare un determinato layout (era:come creare un..)

Regole di scrittura