Problemi posizionamento paragrafo...

**pr0v4** · 28-03-2007, 13:24

Salve a tutti ragazzi, avrei un problema nel montaggio di un mio sito personale, non e' niente di particolare ma vorrei capire come mai le cose nn debbano andare.
Allora con Nopaste vi faccio vedere le pagine interessate:
Questa e' la pagina html:http://rafb.net/p/z1DFCY31.html;
Mentre questo e' il css:http://rafb.net/p/RBI4Qj11.html
E questa e' l'immagine per mostrarvi il risultato:

.
Ora nell'immagine il float e' impostato a sinistra perche' stavo facendo delle prove, ma l'errore e; lo stesso; lo sfondo del div che contiene il paragrafo nn viene preso in considerazione e il paragrafo monta addirittura sopra il footer...
Come potete vedere dal css il box che contiene il paragrafo, #container appunto, ho impostato la sua altezza in auto; sarebbe meglio se imposto un'altezza fissa? anche se il css che ho impostato e' generale per tutte le pagine...
Grazie mille per le risposte!

**serialkiller** · 28-03-2007, 13:46

nel 90% dei casi:

codice:

#footer {
        clear:both;
	background-image: url(../image/footer.jpg);
	height: 50px;
	width: 806px;
}

**pr0v4** · 28-03-2007, 14:07

Errore mio! Mi ero dimenticato totalmente di dare quella regola al footer

Cmq una cosa, come mai nn prende lo sfondo del container??? ovvero l'immagine che mi da ora e' questa:

Piu' che altro per capire dove sto sbagliando, in modo da nn ripetere questo mio errore in altri casi!
Grazie mille ancosa, e sopratutto a serialkiller per la pronta, e risolutiva, risposta!

**serialkiller** · 28-03-2007, 14:17

Credo sia il medesimo problema, se il paragrafo flotta, dovrai ripulire subito dopo, se posti il link della pagina lo controllo online.

**pr0v4** · 28-03-2007, 14:25

Ti ringrazio dell'offerta, ma al momento non ho uno spazio web disponibile, controllo su altervista se posso riattivare il mio spazio.
Cmq cosa intendi che devo pulire subito dopo? Nel senso il footer e' sotto il div che contiene il paragrafo, e quindi il footer, o no?
Ho provato a dare al #contenitore la proprieta' clear:both, ma ancora niente di quello che volevo...
Cmq ti faccio sapere al piu' presto su che spazio pubblico il sito!
Grazie ancora della disponibilita'!!!

**serialkiller** · 28-03-2007, 15:06

Originariamente inviato da pr0v4
Ti ringrazio dell'offerta, ma al momento non ho uno spazio web disponibile, controllo su altervista se posso riattivare il mio spazio.
Cmq cosa intendi che devo pulire subito dopo? Nel senso il footer e' sotto il div che contiene il paragrafo, e quindi il footer, o no?
Ho provato a dare al #contenitore la proprieta' clear:both, ma ancora niente di quello che volevo...
Cmq ti faccio sapere al piu' presto su che spazio pubblico il sito!
Grazie ancora della disponibilita'!!!

Prego...

quello che intendo è che probabilmente la struttura che hai creato, richiede una pulitura del flottaggio in più, del tipo: <div style="clear:both;"></div> subito dopo gli elementi che sono dentro al contenitore, in questo caso, subito dopo il paragrafo, chiaro che il div vuoto non va per niente bene, ma è solo per farti un esempio con il quale puoi provare.

**pr0v4** · 29-03-2007, 08:09

Ho uppato la pagina che non riuesco a far andare, se tante volte hai voglia di darci un'occhiata l'indirizzo e' link.
Cmq il suggerimento che mi hai dato di rendere il div clear, ho provato con il div che contiene il paragrafo, perche' sotto l'unico e' il footer..
Spero che tu riesca a farmi capire dove sto sbagliando...

**serialkiller** · 29-03-2007, 09:43

HTML

codice:

<!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=ISO-8859-1" /><title>Cleanly Design - I nostri lavori</title>

<link href="lavori_files/index.css" rel="stylesheet" type="text/css" /><link type="text/css" rel="stylesheet" id="webdeveloper-outline-deprecated-elements" href="lavori_files/outline_deprecated_elements.css" /><link href="lavori_files/highlighter.css" type="text/css" rel="stylesheet" /></head><body>
<div id="container">
<div id="header">[img]lavori_files/logo60.jpg[/img]
<ul id="menu">
  	[*]Home
	[*]Azienda
  	[*]Servizi
  	<li id="active">Lavori
  	[*]Contatti[/list]</div>
<div id="contenuto">
<div id="titolo"><h2>Ecco la lista dei nostri lavori!</h2></div>
	



Eccoci qua, di seguito troverete una lista dei nostri lavori, ordinati per data e potrete apprezzare nei commeti le tecnologie che sono state utilizzate per costruire il sito. Per qualsiasi domanda vorrete porci vi ricordiamo che nella sezione contatti poterte appunto contattarci!
</p>
  
<div id="footer"></div>
  
</div>

</div>
<div style="position: absolute; left: 255px; top: 194px; width: 16px; height: 16px; visibility: hidden;" id="linkalert-box">[img]lavori_files/none-icon.png[/img]</div>
</body>
</html>

CSS

codice:

body {margin:0;padding:0;background: url(image/sfondo.jpg) repeat-x;}

#container {
	/*height: 1000px;*/
	width: 806px;
	margin: 41px auto auto auto;

}
#logo {
	float: left;
	height: 147px;
	width: 287px;
	margin-top: 11px;
	margin-left: 35px;
}
#menu #active {
	background: url(image/bott.gif) repeat-x bottom;
}
ul#menu {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	float: right;
	margin-top: 136px;
	margin-right: 30px;
}
#menu li {
	float: left;
	margin-right: 10px;
	list-style-type: none;
}
#menu li a {
	text-decoration: none;
	color: #CFD0CF;
	height: 25px;
	width: 60px;
	float: left;
	text-align: center;
}
#menu li a:hover {
	background: url(image/bott.gif) repeat-x bottom;
}
#titolo {
	background-image: url(image/altcontenuto.jpg);
	height: 34px;
	width: 806px;
}
#contenuto {
	background: url(image/medcontenuto.jpg) repeat-y;
	width: 806px;
	padding-bottom:0;
}
#footer {
	background-image: url(image/footer.jpg);
	height: 50px;
	width: 806px;
	clear: both;
}
#header {
	background: url(image/header.jpg) no-repeat;
	height: 202px;
	width: 806px;
}
#contenuto h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #003366;
	margin-left: 400px;
	height: 20px;
	width: auto;
	margin-top: 0;
	padding-top:15px;
}
#contenuto p {
	font-family: Georgia, "Times New Roman", Times, serif;
	width: 200px;
	height: auto;
	float: right;
	margin-right: 20px;
}

Cerca di sistemare un po' le cose, per esempio il div con id "titolo" non serve a nulla, dai lo stile direttamente al tag <h2>, in oltre se metti u titolo <h2> si presume che prima ci sia un <h1> che invece non c'è, ecc, ecc

**pr0v4** · 29-03-2007, 14:19

Allora dovrei mettere come sfondo del titolo la parte alta del contenitore? Perche' non so se hai visto, ma per fare in modo che lo sfondo si adatti alla lunghezza dei vari elementi...
Cmq una cosa... a che servirebbe questo codice?

codice:

<div style="position: absolute; left: 255px; top: 194px; width: 16px; height: 16px; visibility: hidden;" id="linkalert-box">[img]lavori_files/none-icon.png[/img]</div>

Nel senso hai impostato anche degli id, per poi non utilizzarli all'interno del css?? Poi se e' un errore di svista nn ti preoccupare che e' capibilissimo, ma come penso tu abbia gia' capito, le domande le faccio piu' che altro per imparare che per accusare :P
Cmq adesso mi metto un pochetto a spippolare e poi si guarda un pochetto il risultato

Grazie ancora intanto!

**serialkiller** · 29-03-2007, 14:40

Originariamente inviato da pr0v4
Allora dovrei mettere come sfondo del titolo la parte alta del contenitore? Perche' non so se hai visto, ma per fare in modo che lo sfondo si adatti alla lunghezza dei vari elementi...
Cmq una cosa... a che servirebbe questo codice?

codice:

<div style="position: absolute; left: 255px; top: 194px; width: 16px; height: 16px; visibility: hidden;" id="linkalert-box">[img]lavori_files/none-icon.png[/img]</div>

Nel senso hai impostato anche degli id, per poi non utilizzarli all'interno del css?? Poi se e' un errore di svista nn ti preoccupare che e' capibilissimo, ma come penso tu abbia gia' capito, le domande le faccio piu' che altro per imparare che per accusare :P
Cmq adesso mi metto un pochetto a spippolare e poi si guarda un pochetto il risultato

Grazie ancora intanto!

Sorry, quel codice a fondo pagina lo mette link-alert di firefox, non considerarlo, errore mio

Quello che voglio dire è, non ha senso mettere un titolo <h2> dentro a un div e basta, visto che poi il paragrafo c'è ma è all'esterno del div in questione, tieni presente che io non ho idea di come tu continuerai il lavoro, e quindi questo lo devi sapere tu, in realtà puoi dare l'immagine di bg direttamente al titolo <h2> senza dover mettere il div, non so se mi sono spiegato.

Discussione: Problemi posizionamento paragrafo...

Strumenti discussione

Ricerca discussione

Visualizza

Problemi posizionamento paragrafo...

Permessi di invio