[DIV] Struttura di partenza

mercoledì 23 febbraio 2011 - 15.02
Tag Elenco Tags  CSS 2.1  |  CSS 3.0

marco.santilli Profilo | Junior Member

Sto impaginando un sito, quindi creando la struttura
Inizialmente era fatta con tabella:
http://www.senigalliakitesurfing.com/home2.asp

ma ora mi servono i DIV in quanto devo mettere un testo nel riguardo celeste come si vede in foto.....

Ho iniziato a creare la struttura da zero, ma ho grosse difficoltà.
http://www.senigalliakitesurfing.com/indexprova.asp

ora devo togliere il nero tra la prima immagine e la seconda
e poi mettere un testo nel riguadro celeste.....
ma non riesco...

mi potete aiutare?

ciao e grazie

alexmed Profilo | Guru

Ciao
Ti posto questa struttura:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Dimmi se va bene.

Ciao

alexmed

marco.santilli Profilo | Junior Member

Bellissimoooooooooooooooooooooooo

Ora provo a mettere la mia grafica e vediamo come mi trovo...
se ho problemi posso chiedere???

Ciao e grazie

marco.santilli Profilo | Junior Member

Ci sono......
guarda un pò che bel lavoretto????


http://www.senigalliakitesurfing.com/indexprova.asp

adesso voglio mettere la scritta dentro il riguadro celeste....uso lo sfondo rosso per vedere come si sposta il quadrato

su IE si muove bene
su FF mi scende il div centrale

ho aggiunto questo:

#testointroduttivo
{
margin: 20px 0px 0px 20px;
padding: 0px;
height: 150px;
width: 200px;
background-color: Red;
background-repeat: no-repeat;
}


mentre nell'impaginazione ho fatto cosi:

<div id="content">
<div id="testointroduttivo">
La Senigalliakitesurfing è un’Associazione <br>
Sportiva Dilettantistica nata nel 2004 con lo scopo di promuovere
attività <br>
legate all’ ”aquilonismo da trazione” come il kitesurfing, lo
snowkite, il <br>
landboarding o il kitesailing.<p>&nbsp;</p>
</div>
</div>

come posso risolvere???
ciao e grazie

alexmed Profilo | Guru

Ciao
Ci sono vari modi per posizionare un DIV ed uno è questo:

#testointroduttivo { position: relative; top: 227px; left: 794px; width: 210px; height: 160px; background-color:Aqua; padding: 5px; filter: alpha(opacity=60); }

Una volta stabilite le dimensioni vai semplicemente a posizionarlo dandogli le coordinate LEFT e TOP. Con l'attributo "position: relative" le coordinate sono riferite al DIV che lo contiene (content).
Quindi se ad esempio lo volessi allargare a 300px devi ridurre la coordinata LEFT di 90px.
Mettendogli "background-color:Aqua; filter: alpha(opacity=60);" puoi evitare di mettere il rettangolo trasparente che hai impostato nell'immagine di background del DIV "content" (sf_home.jpg)

Chiedi pure, se posso ti rispondo volentieri.

Ciao


alexmed

marco.santilli Profilo | Junior Member

Grandeeeeeeeeeeeeeeeeeeee.............

Perfetto.... che spettacolo......

Vado avanti se trovo difficoltà te lo dico......

una cosa te la posso dire subito

filter: alpha(opacity=60);

su IE si vede la trasparenza
su FF no

alexmed Profilo | Guru


#testointroduttivo
{
position: relative;
top: 227px;
left: 704px;
width: 300px;
height: 160px;
background-color:Aqua;
padding: 5px;
filter: alpha(opacity=60);
opacity: 0.60;
-moz-opacity: 0.60;
}

alexmed

marco.santilli Profilo | Junior Member

madonna che bomba che sei.....

grazie ancoraaaaaaaaaaaaa

marco.santilli Profilo | Junior Member

Altro problemo da risolvere.......

nell'id="content"
devo mettere due DIV sopra

cosi come si vede qui sotto è perfetto

#quadro1sinistra
{
position: relative;
top: 4px;
left: 4px;
width: 612px;
height: 389px;
background-color: Blue;
padding: 5px;
}
#quadro1destra
{
position: relative;
top: 4px;
left: 637px;
width: 355px;
height: 22px;
background-color: yellow;
padding: 5px;
}


<div id="content">
<div id="quadro1sinistra">
<div id="quadro1destra">
<div align="center"><strong>KITESURFING - <em>NEWS</em></strong></div>
</div>
</div>
</div>


ora devo mettere delle scritte nel riguardo di sinistra <div id="quadro1sinistra">
appena scrivo qualsiasi cosa il <div id="quadro1destra"> si sposta di posizione....
perchè?

come si risolve?

Ciao e grazie

alexmed Profilo | Guru

Se ho capito bene vorresti realizzare due colonne.
Guarda se così va bene:

CSS
#quadro1sinistra { float: left; margin: 10px 0px 0px 10px; width: 612px; height: 377px; background-color: Blue; padding: 5px; } #quadro1destra { float: right; margin: 10px 10px 10px 0px; width: 362px; height: 22px; background-color: yellow; padding: 5px; text-align: center; }

HTML:
<div id="content"> <div id="quadro1sinistra"> <p>Lorem ipsum ...</p> </div> <div id="quadro1destra"> <p><strong>KITESURFING - <em>NEWS</em></strong></p> </div> </div>


alexmed

marco.santilli Profilo | Junior Member

Ok, si va bene

ho visto che hai messo un
float: left;
e un
float: right;

praticamente li hai ancorati a destra e sinistra?

seconda domanda se sotto il div di destra ci voglio vedere un altro div?
mi crea problemi???

alexmed Profilo | Guru

Allora facciamo una piccola modifica:
Trasformiamo gli elementi in classi

CSS:
.quadro1sinistra { float: left; margin: 10px 0px 0px 10px; width: 612px; height: 377px; background-color: Blue; padding: 5px; } .quadro1destra { float: right; margin: 10px 10px 10px 0px; width: 362px; height: 22px; background-color: yellow; padding: 5px; text-align: center; }


HTML:
<div id="content"> <div class="quadro1sinistra"> <p>Lorem ipsum ...</p> </div> <div class="quadro1destra"> <p><strong>KITESURFING - <em>NEWS</em></strong></p> </div> <div class="quadro1destra" style="background-color: #FF3300"> <p><strong>KITESURFING - <em>NEWS</em></strong></p> </div> </div>


Per la proprietà "float" guarda qui: http://www.w3schools.com/css/pr_class_float.asp

alexmed

marco.santilli Profilo | Junior Member

Ok...
le classi da come ho capito serve per replicare un DIV...sbaglio?

Ho provato a fare la stessa cosa sia con la classi che con il metodo normale

ma la visualizzazione è diversa da IE e FF

http://www.senigalliakitesurfing.com/news.asp

altrimenti per il resto di ci siamo

in FF è perfetto...

alexmed Profilo | Guru

>Ok...
>le classi da come ho capito serve per replicare un DIV...sbaglio?

Le classi servono per applicare gli stili agli elementi che compongono la pagina.
Ad esempio la classe ".evidenzia" (la riconosciamo perchè ha il punto davanti)

.evidenzia
{ background-color: #FFFF00;}

la posso attribuire a tutti i tag della pagina quindi

<p class="evidenzia">Lorem ipsum ...</p>

<div class="evidenzia">
<p>Lorem ipsum ...</p>
<h2>Lorem Ipsum ...</h2>
<div>

<span class="evidenzia">Lorem ipsum ...</span>

Mentre Elementi ID (contrassegnati da #) li puoi assegnare solo ad un marcatore (tag) nella pagina che sia questo un "div" piuttosto che un "p"

Infine abbiamo gli 'elementi' ovvero i tag stessi:
Se adesempio volessimo che su tutta la pagina il testo racchiuso tra i tag <p> sia sempre di colore rosso dobbiamo scrivere così

p
{color: Red;}

Quindi se scrivo
<p class="evidenzia">Lorem ipsum ...</p>

Il testo sarà rosso e lo sfondo giallo
Mentre
<h2>Lorem Ipsum ...</h2>
sarà "normale" quindi di default nero

>ma la visualizzazione è diversa da IE e FF

Per alcune caratteristiche (ad esempio l'ombra o la trasparenza) i browser hanno sintassi diverse quindi per ognuno dei browser devi impostare l'attributo corretto.
E qui nascono i problemi. Ci sono addirittura delle funzioni Javascript che riconoscono il browser e quindi impostano il foglio di stile appropriato.
>http://www.senigalliakitesurfing.com/news.asp
>
>altrimenti per il resto di ci siamo
>
>in FF è perfetto...

Ti faccio solo un'osservazione: hai impostato come larghezza del corpo i 1024px. Sappi che chi ha un monitor 15 pollici con una risoluzione 800X600 non vedrà l'intera pagina e quindi si dovrà spostare con la barra orizzontale.

alexmed

marco.santilli Profilo | Junior Member

Ok....ottima spiegazione che bomba.....
tutto chiaro...

per le dimensioni le hanno scelte io sto solo costruendo il sito...

adesso sto impazzendo con l'ASP
l'ho sempre usato anche perchè programmo in vb.net e quindi l'asp non mi spaventa

c'ho qualche problemi sui diritti della cartella del DB, riesco a vedere una volta la pagina se clicco su refresh:
Tipo di errore:
Provider (0x80004005)
Errore non specificato.
/news.asp, line 6

devo attendere circa un minuto per fare refresh, quando fa cosi è la cartella che non ha i diritti sufficienti, ma non mi ricordo...

alexmed Profilo | Guru

>Ok....ottima spiegazione che bomba.....
>tutto chiaro...
>
>per le dimensioni le hanno scelte io sto solo costruendo il sito...
Ok
>adesso sto impazzendo con l'ASP
>l'ho sempre usato anche perchè programmo in vb.net e quindi l'asp
>non mi spaventa
In asp non sono forte neache io ... fosse stato ASP.NET allora qualche cosa in più la saprei.
>c'ho qualche problemi sui diritti della cartella del DB, riesco
Di quale DB si tratta? Access, MySql o Sql Server?
Come si chiama la cartella in cui hai inserito il DB?
>a vedere una volta la pagina se clicco su refresh:
>Tipo di errore:
>Provider (0x80004005)
>Errore non specificato.
>/news.asp, line 6
Cosa c'è nella riga 6 di news.asp?
>devo attendere circa un minuto per fare refresh, quando fa cosi
>è la cartella che non ha i diritti sufficienti, ma non mi ricordo...
Se ti riferisci alla pagina che mi hai linkato a me non capita.


alexmed
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5