Problema padding

[pindol]

Come si vede nella figura a sinistra, nell'immagine allegata sotto, ho un div orizzontale all'interno di un altro div più grande. Nel div orizzontale ci andranno dei link. Voglio che il primo link disti n pixel dal bordo sinistro del div orizzontale, quindi nel css ho dato al div orizzontale padding-left: npx; il risultato è la figura a destra nell'immagine in fondo. Il padding di n pixel c'è, però il div si è spostato di n pixel a destra. Come posso risolvere il problema?



Grazie

[Mr_Flash]

Ciao,
prova così...nella pagina metti

<div id="contenitore-grande">
<div class="margine">
Testo da inserire nel secondo contenitore
</div>
</div>

e nel file css metti (esempio)

#contenitore-grande{
margin:0 auto;
width: 500px;
height: 250px;
}

.margine{
margin-left: 10px;
}


Spero di esserti stato d'aiuto.

Ciao

[pindol]

Ciao, grazie per aver risposto. Purtroppo non funziona la tua soluzione, con il margin sposto il div in la di 10 px, perciò a sinistra resta un buco vuoto e restano comunque i 10 px a destra che escono dal div grande

[Mr_Flash]

Forse non ho capito la tua richiesta allora..devi far spostare solo il primo link dal div più grande?
Nella soluzione che ti ho postato il contenuto del div piccolo viene inserito a 10 px di distanza dal div grande, sia "top" che "bottom", "left" e "right".

Ha provato ad utilizzare una lista all'interno del div?

Ciao!

[pindol]

forse non mi sono spiegato. Io voglio che il div piccolo non esca da quello grande, ma solo che il link venga n pixel a destra del bordo del div. I bordi destro e sinistro dei due div devono coincidere, quello piccolo non deve uscire da quello grande. Con margin-eft: 10px; si sposta a sinistra di 10 px, non in alto e in basso, ma solo a sinistra

[Prill]

Immagino che il primo div abbia dimensioni precise, non impostare una larghezza precisa anche per il secondo div (che così si estenderà sullo spazio disponibile) e imposta il padding su di esso. Se il problema non si risolve posta il codice perché le immagini in sé dicono poco

[Mich_]

Probabilmente e` un problema di width: il padding si somma alla width per determinare la larghezza totale.

Ora non hai specificato quale e` il tuo CSS, quale e` il codice HTML su cui lavora il CSS, la DTD che usi ne` il browser in cui hai testato.
In queste condizioni non si puo` dare una risposta ragionevole, ma solo tirare ad indivinare.

Comunque se si vuole un comportamento corretto, si devono usare i tag in modo proprio:
inserire il testo dentro un <div> non e` la soluzione migliore: il testo va inserito in un

o in altro tag che lo puo` contenere.

Posso proporre una soluzione, ma occorre verificarla dal punto di vista semantico con il contenuto reale:

HTML:
<div id="contenitore">
  <div id="menualto">
    <ul>[*]primo link[*]secondo link
      ...[/list]
  </div> 
  ...
</div> 

CSS:
#contenitore {
  width: ...;
  ...
}
#menualto {
  width: 100%;
  height: ...;
  background: ...;
  ...
}
#menualto ul {
  list-style-type: none;
  margin: 30px;
}
#menualto li {
  float: left;
  margin: 0;
  padding: 0;
  ...
}
#menualto a {
  display: block;
  ...
}
...

Nota: il menu e` solo abbozzato: ti conviene copiarlo da un menu pronto che trovi in rete (alcuni riferimenti tra i "link utili" - a me piacciono i menu di CSSplay)

[pindol]

giusto non ci avevo pensato che il padding si va a sommare alla lunghezza del div.. Devo fare un div e non un p perchè ci devo inserire dei link, un menu, per essere più precisi questa pagina diventerà untemplate per joomla.

[Mich_]

Dal punto di vista semantico (e anche sintattico nelle DTD strict) un link deve stare dentro un

o dentro un[*] (o altro tag che puo` contenere del testo): il testo e tutti gli elementi inline non possono essere figli diretti di un <div>

I menu vanno inseriti mediante le liste: tutti gli altri tag sono semanticamente sbagliati (e sono non-accessibili secondo la legge 4/04)

[pindol]

Sisi è vero, infatti un menu fatto in joomla è composto da un elenco del tipo
<div id="menu">
<ul>[*]
<a ..>link</a>
[*]
<a ..>link</a>
[/list]
</div>