Posizionamento con padding

**[_Kilckk_]** · 04-03-2008, 17:09

ragà mi togliete un dubbio, io stò utilizzando il comando padding per centrare testo ed immagini nel posto dove voglio io, ma secondo voi faccio bene o sbaglio???

Ho visto che funziona anche con il comando margin per il posizionamento

Mamma mia quando sono complicati i css.

**Myaku** · 04-03-2008, 19:56

Originariamente inviato da [_Kilckk_]
ragà mi togliete un dubbio, io stò utilizzando il comando padding per centrare testo ed immagini nel posto dove voglio io, ma secondo voi faccio bene o sbaglio???

Ho visto che funziona anche con il comando margin per il posizionamento

dipende da cosa devi ottenere di preciso e qual'è il markup. Di solito per "centrare" si usa o il text-align o l'auto sui margini sx e dx, a seconda degli elementi a quali va applicato.

Magari se ci posti un po' di codice (usa il tag #) vediamo

**[_Kilckk_]** · 04-03-2008, 21:05

Ecco il sito di prova, ho appena iniziato lo studio dei css ma proprio non li riesco a capire.

Sono preoccupato specialmente per il posizionamento del logo e banner.

Grazie per il tuo aiuto

index.html

codice:

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="it" xml:lang="it">
<head>

	<title>La mia prima pagine XHTML</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<style type="text/css">

		@import url("style.css");

	</style>

</head>
<body>
    <div id="container">

        <div id="header">

		<div id="logo">[img]images/logo.jpg[/img]</div>
		<div id="banner">[img]images/banner.png[/img]</div>

	</div>

        <div id="content">

	<div id="navigation">

		<div id="links">

			» HOME |
			» DOVE SIAMO |  
			» CONTATTACI

		</div>

	</div>

		<div id="textcontent">
			[img]images/icona_scritte.gif[/img]<h2>Prova Prova</h2>
        

Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova </p>		
		</div>

	</div>

        <div id="footer"></div>

    </div>
</body>
</html>

Style.css

codice:

html,body{

		margin: 0;
		padding:0;

}

body{

		font-family: arial,sans-serif;
		font-size: 76%;
		text-align: center

}

div#container{
	
		width: 800px;
		margin: 0 auto;
		text-align: left;
		border-left: 0px;
		border-right: 0px;


}

div#header{

		margin: 0px 0px; 
		background: url(images/header.png) no-repeat; 
		width: 800px; 
		height: 123px;

}

div#logo{

		padding: 12px 30px; 
		float: left;

}


div#banner{

		padding: 30px 50px; 
		float: right;

}

div#navigation{
		
		background: url(images/navigazione.png) no-repeat top right; 
		height: 36px; 
		margin: 0 0;

}

div#links{

		text-align:right; 
		margin: 0 0; 
		padding: 11px 22px 0 0;		
		font-size: 10px;

}

div#links a {

		font-weight: bold;
		text-decoration: none;
		color: #808080;

}

div#links a:hover {
	
		color: #286ea0;

}

div#links a:active {
	
		color: red;

}

div#content{

		margin: 0px 0px;
		padding: 0px 20px; 
		background: url(images/contenuti.png); 


}

div#textcontent{

		margin: 0px 0px;
		padding: 10px 5px; 

}

div#footer{

		margin: 0px 0px; 
		background: url(images/footer.png); 
		width: auto; 
		height: 87px;

}

**Myaku** · 05-03-2008, 08:52

Come prima cosa, dovresti validare il codice, ci sono un paio di sviste su css e html.
Poi, se puoi evita di mettere stili inline, visto che hai già un css esterno usa quello, altrimenti rischi di fare confusione. Attenzione anche al prologo xml, manda IE6 in quirks mode, e nel tuo caso non ti serve (ti conviene quindi toglierlo).

Sono preoccupato specialmente per il posizionamento del logo e banner.

ovvero?

altra cosa importante: quando usi i float, metti il clear all'elemento seguente, altrimenti il layout può comportarsi in modo "strano".

Per il resto, mi sembra a posto ...

**[_Kilckk_]** · 05-03-2008, 14:17

Grazie per il tuo aiuto, il mio problema è che non riesco a capire bene i css e pensavo che stavo sbagliando tutto.

Grazie mille per il tuo aiuto.

Discussione: Posizionamento con padding

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento con padding

Re: Posizionamento con padding

Permessi di invio