Css ?.?

Css ?.? postato il 16/09/2011 20:30:41 nel forum programmazione, gdrcd, open source, hosting

Ciao a tutti ^^
Probabilmente sono diventato stupido , ma ho ri iniziato ad utilizzare il css dopo molto tempo che non lo facevo e stavo facendo delle prove sulle proprietà. Ricordavo che funzionasse , ed invece.

A questo Link trovare il mio problema.
http://www.nobgdr.altervista.org/css.html

Problema che è il seguente :
Perchè quando cerco di posizionare il quadrato rosso dando un margine dall'alto rispetto all'imaggine e NON rispetto all'intera pagina , non funziona ?

Il codice html è
codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<link rel="stylesheet" href="cssprova.css" type="text/css" />
</head>
<body>
<div id="contenuto">
<div id="main">
<div id="submain">
Prova
<div id="menu">
</div>
<div id="content">
<div id="upcont">
<div id="leftupcont"></div>
<div id="rightupcont"></div>
</div>
<div id="downcont">
<div id="leftdowncont"></div>
<div id="rightdowncont"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Mentre il css
codice:

body {
background-color:#cec5b4;
}

#contenuto {
background:blue;
}

#main {
width:801px;
height:737px;
margin:auto;
background:url('Loginsplit/1level.png');
position:relative;
}

#submain {
width:672px;
height:473px;
background:red;
position:relative;
margin: 20px 0px 0px 0px;
}

Si cercano Porgrammatori e Aiuto Grafico per Gdr su Naruto .

quota

Pagine → 1

:giocatorelibero:

SCRIVI

16/09/2011 20:47:46

Su è un pagina html o xml?

CRSED: F.O.A.D. ↗
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita nell'arena! Ogni giocatore sarà accompagnato da armi realistiche e magie!

quota

leoblacksoul

SCRIVI

16/09/2011 20:47:54

Scusa puoi spiegarti meglio?
Nel tuo codice non c'è nessuna immagine, non puoi cercare di posizionare un blocco rispetto a uno sfondo

---
Non chiedetemi aiuto in privato per questioni di programmazione; chiedete sul forum e eventualmente vi risponderò lì.
http://gdrportal.eu ↗ - Hosting per GDR

quota

narakul2

SCRIVI

16/09/2011 20:52:24

Allora ^^
Spostiamo la nostra attenzione 3 div.
Il primo contenitore
Il secondo main
Il terzo submain

come mai se do un margine al submain rispetto al main il margine viene dato rispetto al body ?

Si cercano Porgrammatori e Aiuto Grafico per Gdr su Naruto .

quota

blancks

SCRIVI

16/09/2011 21:00:23

Credo che la domanda precisa sia: "perchè pur impostando un margine sul lato superiore del div submain, questi non si discosta in basso usando come riferimento il bordo superiore del div main ?"

Risposta: il margine discosta solo dagli elementi sullo stesso nodo, se metti un altro div in main e gli dai margin-top, vedrai che si discosta di quel margine dal div superiore poichè si trovano nello stesso contesto.

Essendo in questo il div submain in un contesto differente dal div main e da quello superiore ancora, il margin non viene calcolato.. anzi firefox addirittura abbassa il body inventando una zona visiva superiore che nel dom non esiste pur di rispettare in qualche modo il margine.

Soluzione: usa il padding-top dell'elemento superiore, quindi il div main per spostare submain, e il padding del div contenuto per spostare il div main.

GitHub: https://github.com/GDRCD/GDRCD ↗
Discord: https://discord.gg/zh69CDUf3V ↗

quota

narakul2

SCRIVI

16/09/2011 21:13:24

Colpito ed affondato u.u
Una volta comunque credo che funzionasse xD

Si cercano Porgrammatori e Aiuto Grafico per Gdr su Naruto .

quota

amer

SCRIVI

16/09/2011 23:12:34

blancks ha scritto: Credo che la domanda precisa sia: "perchè pur impostando un margine sul lato superiore del div submain, questi non si discosta in basso usando come riferimento il bordo superiore del div main ?"

Risposta: il margine discosta solo dagli elementi sullo stesso nodo, se metti un altro div in main e gli dai margin-top, vedrai che si discosta di quel margine dal div superiore poichè si trovano nello stesso contesto.

Essendo in questo il div submain in un contesto differente dal div main e da quello superiore ancora, il margin non viene calcolato.. anzi firefox addirittura abbassa il body inventando una zona visiva superiore che nel dom non esiste pur di rispettare in qualche modo il margine.

Soluzione: usa il padding-top dell'elemento superiore, quindi il div main per spostare submain, e il padding del div contenuto per spostare il div main.

ottima risposta !!
rubi sempre le parole =) agli altri !!! xD