Sono all'inizio con i css e vorrei dei consigli e delle dritte
Finche si tratta di due colonne o tre colonne lo schema l'ho capito pero se dovessi fare un lavoro del genere:
non so da dove iniziare...
vorrei fare larghezza fissa 700px e anche tutti i box ad altezza fissa
qualcuno mi puo fare un html-css di base?
forse è meglio farlo con tabelle e css?
grassie!!
Originariamente inviato da 2e6
forse è meglio farlo con tabelle e css?
non credo...
HTML:
Per il css ci vuole un pò di tempo intanto prova a fare qualcosina..Codice PHP:<body>
<div id="testata">
immagne di sfondo fisso con link alla home
<div id="menu">
menu di navigazione in flash
</div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
<div id="content3">
</div>
<div id="content4">
[img]#[/img]
</div>
</body>
Questa volta, più che un voto.. è favoreggiamento.
Dopo un pomeriggio intero a picchiarmi con i css ho fatto uno schema anche se mi da l'idea di essere solo un gran casino
qualcuno mi puo correggere?
Codice PHP:<html>
<head>
<title>prova layout</title>
<style type="text/css">
body {
background: white;
text-align: center;
}
div#container{
width: 700px;
margin: 0px auto;
text-align: left;
}
div#header{
position:absolute;
width:700px;
height:120px;
border-width: 1px;
border-style: solid;
border-color: black;
}
div#navigation{
position:absolute;
right:0px;
bottom:0px;
width:510px;
height:30px;
border-width: 1px;
border-style: solid;
border-color: black;
}
div#content1{
position:relative;
width:390px;
height:200px;
left:0px;
top:128px;
border-width: 1px;
border-style: solid;
border-color: black;
}
div#content2{
position:absolute;
width:300px;
height:200px;
right:0px;
top:128px;
border-width: 1px;
border-style: solid;
border-color: black;
}
div#content3{
position:absolute;
width:570px;
height:120px;
left:0px;
top:336px;
border-width: 1px;
border-style: solid;
border-color: black;
}
div#content4{
position:absolute;
width:120px;
height:120px;
right:0px;
top:336px;
border-width: 1px;
border-style: solid;
border-color: black;
}
div#footer{
width:700px;
position:absolute;
top:472px;
text-align:center;
}
.container2{
width:700px;
position:absolute;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="navigation">
</div>
</div>
<div class="container2">
<div id="content1">
</div>
<div id="content2">
</div>
</div>
<div class="container2">
<div id="content3">
</div>
<div id="content4">
</div>
</div>
<div id="footer">
footer</p>
</div>
</div>
</body>
</html>
Io sono assolutamente contrario ai posizionamenti (hanno delle controindicazioni quando non conosci le dimensioni dei contenuti, cosa che e` vera nel 90% dei siti), per cui ti consiglio di togliere tutti i position, i left e right e top.
Poi aggiungi
float:left;
ai blocchi che devono stare affiancati, ed ai blocchi che li contengono (quest'ultimo e` per evitare un bug di alcuni browser).
Dovresti ottenere all'incirca quello che vuoi (potrebbero mancare dei bordi e padding, da settare in modo diverso per IE rispetto agli altri).
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Il bordo lo puoi scrivere anche cosi
border: 1px solid #000000;
Usa l'esadecimale che ti offre una gamma piu vasta di colorazioni e sfumature..
Questa volta, più che un voto.. è favoreggiamento.
non c'è nessuno che puo farmi una base di css da utilizzare al posto di quella che ho postato? questa la posso utilizzare o devo per forza modificarla?
Credo che se dal tuo codice elimini tutti i posizionamenti (quindi position, top, left, e sim)
E metti float:left nei blocchi che vuoi affiancare (in certi browser potrebbe essere necessario dare float:left anche ai blocchi che contengono quelli da affiancare).
Hai gia` una buona base da cui partire.
Per le prove ti conviene dare dei colori diversi agli sfondi dei vari blocchi, in modo da inviduarli con sicurezza.
Se puoi vuoi gli esempi dei guru del CSS, ti basta cercarli tra i layout nei "link utili".
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
ho fatto questa pagina che si vede bene con IE,firefox e netscape pero non riesco a mettere la barra grigia in basso a destra rispetto al header,come faccio?
mentre questo è l'html:Codice PHP:body {
text-align: center; /*centra in IE 5.x */
}
div#container{ /* Contenitore principale centrato rispetto al browser e di larghezza 700px */
width: 700px; /* Larghezza contenitore principale */
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
}
div#header{
width: 698px;
height: 120px;
background-color: #ccc;
border: 1px solid #000;
margin-bottom: 6px;
}
div#navigation{
float: right;
background-color: #555;
width: 510px;
height: 30px;
}
div#content1{
float: left;
width: 390px;
height: 200px;
background-color: #ccc;
border: 1px solid #000;
margin-right: 4px; /* Margine per distanziare i due blocchi content1 e content2 */
margin-bottom: 6px; /* Va messo sia in content2 che in content1 per Netscape 6 */
}
div#content2{
float: right;
width: 300px;
height: 200px;
background-color: #ccc;
border: 1px solid #000;
margin-bottom: 6px; /* Va messo sia in content2 che in content1 per Netscape 6 */
}
div#content3{
float: left;
width: 570px;
height: 120px;
background-color: #ccc;
border: 1px solid #000;
margin-right: 4px; /* Margine per distanziare i due blocchi content1 e content2 */
}
div#content4{
float: right;
width: 120px;
height: 120px;
background-color: #ccc;
border: 1px solid #000;
}
div#footer{
clear: both;
width: 700px;
text-align: center;
}
Codice PHP:<div id="container">
<div id="header">
<div id="navigation">
</div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
<div id="content3">
</div>
<div id="content4">
</div>
<div id="footer">
footer</p></div>
</div>
Conviene che i vari contentX, siano inseriti tutti dentro un <div> unico, al quale puoi dare il clear.
Questo dovrebeb aiutarti a non sovrapporre il footer sopra il contenuto in alcuni brwoser.
Non so cosa sia la "barra grigia in basso a dx rispetto all'header".
Se e` uno sfondo, lo puoi inserire con un background-image, che puoi anche posizionare dove vuoi.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
La barra grigia sarebbe il menu.
non so ancora se farlo in flash , semplici immagini roll-over o in testo
Permessi di invio
Rispondi quotando