[CSS] Un div che si scosta un po'...

14-09-2009, 13.21.16

Ciao a tutti
il dedicarmi all'ozio deve avermi arrugginito parecchio, tanto che inizio a ricadere negli errorini dei primi tempi

Sto realizzando un layout a due colonne con float, ed il blocco di destra(quello con i contenuti, perchè a sinistra c'è quello con il menu) si scosta un po' dal div che gli sta subito sopra. Questo problema non si presenta con il menu laterale, che si accosta perfettamente al div che gli sta sopra. Da cosa può dipendere? Ecco i CSS...

Codice:

@charset "utf-8";
/* CSS Document */

body { 
	background-color: #660000;
	background-image: url(images/body.png); 
	background-repeat: repeat-x;
}

p {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}

#navi, #head, #menu_top, #foot { width: 760px; }

#navi { margin: auto; }

#head {	height: 150px; }

#menu_top {
	height: 50px;
	background-image: url(images/menu_top.png);
}

#menu_top_left, #menu_left {
	width: 152px;
	float: left;
}

#menu_top_left {
	padding-top: 10px;
}

#menu_top_right, #cont {
	width: 608px;
	float: right;
}

#menu_top_right {
	width: 608px;
	float: right;
	text-align: right;
}

#menu_left { background-image: url(images/menu_left.png); }

#cont { background-image: url(images/cont.png); }

14-09-2009, 15.21.01

Posta anche l'html od un link di esempio...

14-09-2009, 15.46.01

Originalmente inviato da musicanapoli

Posta anche l'html od un link di esempio...

L'immagine che sta sotto al codice è riferita al problema che mi si presenta. Il codice è il seguente:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<link href="style.css" rel="stylesheet" type="text/css"  />
</head>

<body>
	<div id="navi">
    	<div id="head">
        	<img src="images/head.png" />
        </div>
        <div id="menu_top">
        	<div id="menu_top_left">
        		<!-- Link Home -->
        	</div>
            <div id="menu_top_right">
                    <!-- Bottoni lingua -->
            </div>
        </div>
        <div id="menu_left">
                <!-- link del menu con float: left -->
        </div>
        <div id="cont">
        	<p>Here's some text</p>
        </div>
        <div id="foot">
        	<p>Copyright e altra roba</p>
        </div>
    </div>
</body>

14-09-2009, 18.37.34

definisci il margin delle due sezioni a zero e poi facci sapere =)

14-09-2009, 23.23.55

Originalmente inviato da arazz

definisci il margin delle due sezioni a zero e poi facci sapere =)

Provato, ma niente da fare... il blocco rimane lì messo in quel modo. Altre idee?

15-09-2009, 00.42.32

Originalmente inviato da mksoftware

Provato, ma niente da fare... il blocco rimane lì messo in quel modo. Altre idee?

Io ho preso il codice html e il CSS che hai postato, mettendo al posto dei background-image un background-color diverso per ogni div, e l'ho provato sul mio pc.
Il risultato è perfetto, nel senso che il div del contenuto risulta attaccato (come il div del menù) all'header...sia su Firefox che su IE.

Fai una pagina di prova e la inserisci sul tuo sito web, e poi posta qui il link, magari c'è qualcosa che hai omesso nel codice che hai postato o è un problema delle immagini o cose del genere.

15-09-2009, 17.33.48

Alla fine ho risolto, ma la cosa è parecchio strana... In pratica, ho specificato l'altezza per i due blocchi interni a menu_top. Ma non dovrebbe applicarsi la proprietà dell'ereditarietà? Io pensavo che prendessero in automatico l'altezza del contenitore padre

17-09-2009, 23.48.33

E come era facile pensare, mi è ricapitato... Ho uppato tutto sul mio spazio web all'indirizzo http://mksoftware.altervista.org/test/ Stavolta i blocchi che non si mettono al loro posto sono due: il div dei prezzi (#prcs) e il div del footer (#foot). Il comando margin non me lo fila di striscio :S

Any idea?

18-09-2009, 09.10.03

Perchè usi i paragrafi quando sono semplici righe di testo? Usa gli span.

Il paragrafo ha un margin e padding standard che elabora il browser.
Cambia così:

Codice:

#prcs { 
	width: 660px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 0px;
	clear: both;
	background-image: url(images/prcs.png);
}

Il margin-bottom è quello che ti lascia il div del footer staccato.

18-09-2009, 11.06.49

Originalmente inviato da biccheddu

Perchè usi i paragrafi quando sono semplici righe di testo? Usa gli span.

Il paragrafo ha un margin e padding standard che elabora il browser.
Cambia così:

Codice:

#prcs { 
	width: 660px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 0px;
	clear: both;
	background-image: url(images/prcs.png);
}

Il margin-bottom è quello che ti lascia il div del footer staccato.

Ciao Biccheddu =)
Ho apportato le modifiche che mi hai suggerito ma purtroppo il problema persiste (sto utilizzando firefox per i test nello sviluppo). Tra l'altro avevo già provato a modificare quel valore, ma qualsiasi indicazione io gli dia lui non si muove! Ho provato anche a mettergli 200px, ma il blocco non si distanzia affatto come dovrebbe. Come mai?

Inoltre, grazie per il consiglio sugli span. Potresti darmi un esempio pratico su quando mi conviene usare i paragrafi o gli span? Te ne sarei grato, così potrei fare un lavoro più pulito

18-09-2009, 11.10.11

I paragrafi servono appunto per scrivere periodi, non una frase o una linea di testo, per questo ci sono gli span.

Allora il problema è delle altezza, hai provato a variare queste per vedere se i div si spostano e si avvicinano/allontanano?

18-09-2009, 11.17.14

Ok grazie biccheddu, modifico quanto prima ;)
Per quello che riguarda l'altezza, se modifico il valore height sia del div prcs sia del div foot, i blocchi aumentano/diminuiscono regolarmente di dimensione senza distanziarsi ulteriormente. Sto davvero uscendo matto e il giorno della consegna è prossimo >___>

EDIT: giusto per provare, ho messo il div del foot dentro il contenitore per il menu di sinistra ed i contenuti... e pare che si allinea correttamente. Ma perchè? Potrei anche lasciarlo così ma volevo mantenere le trasparenze di tutte le immagini per facilitare chi lo modificherà un domani

**acsocmel** · 18-09-2009, 11.43.57

Originalmente inviato da biccheddu

I paragrafi servono appunto per scrivere periodi, non una frase o una linea di testo, per questo ci sono gli span.

non sono per nulla d'accordo con questa affermazione
non è la lunghezza a definire il paeragrafo, che rimane il contenitore base del testo
e che è l'unico tag che mksoftware ha usato propriamente in quella pagina
poi ognuno usa quello che vuole come vuole
enciclopedie come piedi del letto
televisori come acquari etc.

18-09-2009, 11.50.37

Originalmente inviato da acsocmel

non sono per nulla d'accordo con questa affermazione
non è la lunghezza a definire il paeragrafo, che rimane il contenitore base del testo
e che è l'unico tag che mksoftware ha usato propriamente in quella pagina
poi ognuno usa quello che vuole come vuole
enciclopedie come piedi del letto
televisori come acquari etc.

Ahn si? Quindi uno si fa la pagina come vuole perchè decide lui? Allora perchè hanno inventato i diversi tag?

Allora basta non seguire gli standards, tanto possiamo fare quel che vogliamo. Ma che ragionamento è?

E' come usare i <br /> per separare dei paragrafi, tu lo faresti perchè ottieni quel che vuoi, ma sicuramente non è l'uso corretto.

Potrà essere contenitore base del testo, su questo sono d'accordo, ma che senso ha utilizzarlo se c'è <span>? Il paragrafo lo uso per andare a capo, lo span è un elemento inline quindi ne puoi usare 3 uno dopo l'altro e questo si vedrà nella stessa linea, finchè non interrompi con un <br />.

Comunque mksoftware, assegna margin: 0; a tutti i div, poi posizionateli e vedi cosa sbagli, a mio parere sono le altezze che sballano.

18-09-2009, 11.58.25

Dai ragaSSuoli tranquilli, dopo mi faccio un salto su qualche sitarello e mi documento su p e span ;) In ogni caso ringrazio entrambi per il contributo.
Tornando invece sul problema (

) biccheddu c'hai preso. Se levo i margin e assegno a tutti i div margin: 0px; tutto si vede come dovrebbe. Adesso, come faccio a risalire al blocco che da problemi? Assegno blocco per blocco i margin e vedo quando mi si impalla, oppure come? Grazie per i consigli ed il supporto che mi date

La pagina che ho fatto per prova è http://mksoftware.altervista.org/test/index.html e non quella in php che è rimasta con il problema

18-09-2009, 12.00.04

Posso chiederti perchè usare il margin?

Se devi spostare del contenuto del div dal bordo, usa il padding.

18-09-2009, 12.02.25

Originalmente inviato da biccheddu

Posso chiederti perchè usare il margin?

Se devi spostare del contenuto del div dal bordo, usa il padding.

Perchè per quello che ricordo il padding si crea uno spazio intorno al blocco aumentando le dimensioni del blocco stesso... Il che non mi farebbe entrare poi i blocchi nei contenitori giusti. Sbaglio?

18-09-2009, 12.05.45

Sbagli.
Il padding, aggiunge un margine al contenuto dell'elemento a cui assegni il padding. Il padding è un margin interno, il margin è un margine esterno in poche parole.
Il padding poi, aumenta le dimensioni, cioè, se tu assegni ad un'immagine il padding di 5px e questa è grande 100x100, evidenziandola col mouse è come se fosse 105x105, mentre assegnandoli il margin si sposterà di 5 px, si sposterà dal resto di 5 px.

18-09-2009, 12.19.24

Ho provato ad utilizzare il padding, ma aumenta le dimensioni dei div... Infatti i background iniziano ad essere ripetuti. Non mi conviene con un layout fisso utilizzare il margin? Forse il padding è utilizzabile al meglio con i layout fluidi?

So che sono uno stress, ma la voglia di imparare è tanta e chiedere a chi ha esperienza è sicuramente il modo più facile ;)

18-09-2009, 12.22.06

Se setti una grandezza fissa (width), il padding non ne aumenterà la larghezza, quindi non incasinerà tutto.

18-09-2009, 12.36.41

Ma perchè allora me lo allarga col tutto che ogni div è fissato a 760px? Il web developer, se setto 5px di padding-left al foot, mi dice che è di 765px... Ed infatti mi si ripete anche lo sfondo. Inizio a capirci davvero poco

18-09-2009, 12.39.41

A me questo non succede se assegno una grandezza fissa, non saprei che dirti.

**acsocmel** · 18-09-2009, 12.40.09

Originalmente inviato da mksoftware

la voglia di imparare è tanta

devi studiarti il box model e come lo interpretano i vari browsers
puoi cominciare quà
http://www.w3.org/TR/CSS2/box.html
e quà
http://www.quirksmode.org/css/box.html
ma in giro ci sono tante risorse

18-09-2009, 13.24.18

Originalmente inviato da biccheddu

Se setti una grandezza fissa (width), il padding non ne aumenterà la larghezza, quindi non incasinerà tutto.

Ma perchè allora me lo allarga col tutto che ogni div è fissato a 760px? Il web developer, se setto 5px di padding-left al foot, mi dice che è di 765px... Ed infatti mi si ripete anche lo sfondo. Inizio a capirci davvero poco

Se metti un width:500px; e poi metti anche un padding:5px; , il box avrà una larghezza di 510px.

Discussione: [CSS] Un div che si scosta un po'...

LinkBack

Strumenti discussione

Display

[CSS] Un div che si scosta un po'...

Regole di scrittura