Ciao,
volevo fare uno sfondo con i css per il mio sito:
lo vorrei fare nero con una riga a sx di 2px verticale ad una distanza tale da farmi stare una serie di immagini a sx della riga e a dx, più grande una serie di testi. questa riga però dovrebbe iniziare un tot più in basso. Vi allego immagine. Come posso fare?
dovrebbe adattarsi a tutte le risoluzioni.
grazie
prima devi decidere la struttura logica del sito.
L'immagine postata fa pensare ad un titolo (fascia alta), ad un menu (a sinistra) e del contenuto.
Una volta sistemata la logica del contenuto, e` facile dare sfondi e bordi ai blocchi per avere l'effetto desiderato.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Ho fatto come l'immagine, ora ho messo il logo ef il menu in alto ed a sx un form di login.
il css è:
mentre il codice HTML è:body {background-color=black; font:80% Verdana, Arial, Helvetica, sans-serif;color: #FFD300}
img#imgINperc {margin: 1% 1% 1% 1%;padding: 1px;display:block;width:30%;float:right}
img#imgINpercTot {display:block;width:100%}
div {border:1px solid #FFD300;margin-top: 1%;margin-right: 1%;margin-bottom: 1%;margin-left: 1%}
#logo {border:1px solid #FFD300;width:21%;margin-top: 0%;margin-right: 0%;margin-bottom: 0%;margin-left: 8%;z-index: 20}
#barraVert {border:0px solid #FFD300; background-color:#FFD300;width:0.5%;height:100%;margin-top: 17%;margin-right: 0%;margin-bottom: 0%;margin-left: 25%;z-index: 20}
#sx {float: left;border:1px solid green;width: 16%;margin-top: 15%;margin-right: 0%;margin-bottom: 0%;margin-left: 4%;z-index: 10}
#cerca {float: left;border:0px solid yellow;width: 6%;margin-top: 2%;margin-right: 0%;margin-bottom: 0%;margin-left: 4%;z-index: 10}
#centrale {float: right;border:1px solid #FFD300;width:68%;margin-top: 15%;margin-right: 4%;margin-bottom: 0%;margin-left: 1%;z-index: 10}
<!--
.menuNavigazione{margin:-8%;margin-left:36%;padding:1% 0%;border-bottom:1px solid #FFD300;width: 70%;text-align:center;font-weight:bold;}
.menuNavigazione li{display:inline;margin:0%;height:0%;border-left:1px solid #FFD300;padding:0 1em;}
.menuNavigazione li.primaVoce{border-left:none;}
.menuNavigazione a:link,.menuNavigazione a:visited{color:#FFD300;text-decoration:none;}
.menuNavigazione a:hover,.menuNavigazione a:focus,.menuNavigazione a:active{background:#000;color:#FFF800;text-decoration:underline;}
-->
come mai, mette tutto sotto il div "barraVert"? mi sembra di aver messo giusto anche gli z-index<%@ Language=VBScript %>
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1E/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style_page.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Gamma Datrfo</title>
</head>
<body>
<div id="logo">[img].\images\LogoPicc.gif[/img]</div>
<ul class="menuNavigazione"><li class="primaVoce">Chi Siamo<li class="voceCorrente">Servizi[*]Novità[*]Catalogo[*]Area Privata[/list]
<div id="barraVert"></div>
<div id="sx">
</div>
<div id="centrale">...[img].\images\informatica.jpg[/img]...</div>
<div id="cerca"><a href="Cerca.asp">[img].\images\cerca.gif[/img]</div>
</body>
</html>
grazie
Non e` che si capisca molto. Quando posti del codice, inseriscilo dentro i tag [ code ] ... [ /code ] (senza gli spazi) (non tra [ quote ], ceh serve per altri scopi), altrimenti si perde la formattazione.
Inoltre vedo che nell'HTML ci sono due richiami a due CSS diversi. Tieni presente che il secondo sovrascrive il primo (se ci sono definizioni contrastanti).
Non postare il codice ASP trae solo in inganno. Posta il codice come arriva nel browser (click destro e visualizza sorgente).
Nel codice HTML, c'e` il prologo XML. Questo impedisce ad IE6 di leggere il DOCTYPE, per cui tu scrivi in XHTML Strict, mentre IE interpreta in quirk mode.
Dato che il prologo non e` obbligatorio per XHTML 1.0, conviene ometterlo.
PS nel tuo caso (da come era il layout), non serve usare gli z-index: i vari blocchi non devono sovrapporsi.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
grazie mille
Permessi di invio
Rispondi quotando