[DIV] Struttura di partenza

mercoledì 23 febbraio 2011 - 15.02

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

Elenco Tags CSS 2.1 | CSS 3.0

marco.santilli Profilo | Junior Member

139 messaggi | Data Invio: mer 23 feb 2011 - 15:02

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

1.186 messaggi | Data Invio: mer 23 feb 2011 - 21:59

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

139 messaggi | Data Invio: gio 24 feb 2011 - 08:38

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

139 messaggi | Data Invio: gio 24 feb 2011 - 23:13

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> </p>
</div>
</div>

come posso risolvere???
ciao e grazie

alexmed Profilo | Guru

1.186 messaggi | Data Invio: ven 25 feb 2011 - 09:25

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

139 messaggi | Data Invio: ven 25 feb 2011 - 10:26

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

1.186 messaggi | Data Invio: ven 25 feb 2011 - 10:31

#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

139 messaggi | Data Invio: ven 25 feb 2011 - 11:43

madonna che bomba che sei.....

grazie ancoraaaaaaaaaaaaa

marco.santilli Profilo | Junior Member

139 messaggi | Data Invio: ven 25 feb 2011 - 17:09

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

1.186 messaggi | Data Invio: ven 25 feb 2011 - 18:49

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

139 messaggi | Data Invio: ven 25 feb 2011 - 19:06

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

1.186 messaggi | Data Invio: ven 25 feb 2011 - 19:22

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

139 messaggi | Data Invio: mar 1 mar 2011 - 15:45

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

1.186 messaggi | Data Invio: mar 1 mar 2011 - 16:24

>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

139 messaggi | Data Invio: mar 1 mar 2011 - 19:00

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

1.186 messaggi | Data Invio: mar 1 mar 2011 - 20:39

>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

Torna su

Stanze Forum

Elenco Threads

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 !