Problema con dei <div>

08-02-2010, 19.44.31

Immagino che sia qui che debba scrivere...comunque, ho già segnalato il problema all'amministrazione anche se non son sicuro sia un bug! Credo di aver sbagliato io, ma ragazzi, sono alla fruttaaa!! Dovrebbe essere tutto giusto, questo è il mio problema: non riesco a centrare dei div ed a dare una dimensione massima ad un paragrafo tramite il CSS! Vi scrivo in pillole quello che sto cercando di fare:
(CODICI DI VARIO GENERE FINO A):

Codice HTML:

<div id="container">
<div id="siteroulette>
</div>
<div id="maintop" align="center">
</div>
<div id="main" align="center">
<p class="container"></p>
</div>
<div id="mainbottom" align="center">
</div>
<div id="footer" align="right">
</div>

(ECC. ECC.).
Adesso, senza far caso all'inutile caos che ho fatto per mettere il main (non ho trovato altro modo essendo autodidatta), il file è relazionato ad un foglio di stile CSS, dove:

Codice:

#siteroulette {
FLOAT:LEFT;
position: absolute ;
left: bla bla ;
top: bla bla;
}

#maintop {
CLEAR:BOTH;
- - - - ECC. ECC. - - - -

p.container {
width: 500px ;
}

ECC. ECC.

I seguenti problemi sono:
Nella regola del siteroulette e del main, non so perchè ma non riesco a lasciare a sinistra il #siteroulette e invece centrare i tre #main! Eppure il codice l'ho controllato e ricontrollato e apparentemente sembra corretto, anche nel sito della w3c questo codice funziona! Ho provato addirittura a togliere proprio il float come regola e mettere direttamente una position:absolute, ma continuo a cambiare i valori e il div resta sempre lì, fermo all'angolo superiore sinistro del <div container>! Insomma, va bene che posso aver sbagliato, ma fino a che punto? Ho controllato tutto, sembra innegabilmente esatto! Non so dirvi...E per il p.container, non so perchè ma non rileva la "width: 500px" e continua a far uscire il testo fuori dal paragrafo...Quindi, secondo voi che c'è di sbagliato?

08-02-2010, 20.03.31

Temo di non aver capito bene.
Tu vuoi che #siteroulette stia a sinistra (come se fosse una sidebar), mentre gli altri main devono trovarsi a destra, uno sotto l'altro?
Esempio:
http://i47.tinypic.com/2ednw2a.jpg

Forse sarebbe meglio che tu postassi un link o comunque un disegno di esempio...

08-02-2010, 20.51.03

Oh, si scusa! Che sbadato:
http://www.khblader.altervista.org
questo è il sito, che come puoi ben vedere è molto in costruzione...>.>...si spera ne uscirà qualcosa di buono...comunque, si, dato che la siteroulette è nientepopodimeno che una sidebar travestita (aveva complessi per cui ora va in giro a farsi chiamare siteroulette, valla a capire), voglio fare esattamente come hai illustrato nell'immagine! Però per raggiungere quello potevo mettere la sidebar in float:left e i main in float: right e fin lì funzionava, solo che me li manda agli antipodi del container e non mi va bene! <O Ho appena fatto caso ad una cosa, tra l'altro, per allineare un div...nel senso di centrarlo nella pagina, l'attributo

Codice HTML:

<div id="main" align="center">

non serve a niente, mi pare...O sbaglio? Perchè ci ho fatto caso solo ora...l'align, allinea il contenuto INTERNO del div, non il div stesso o no?

**dementialsite** · 08-02-2010, 22.40.35

Sarò forse io, ma trovo davvero strano che ci siano contemporaneamente sia la proprietà float che un posizionamento assoluto nello stesso DIV (che di fatto rende il floating inutile).

Piuttosto mi sarei aspettato di trovare una proprietà width insieme al float, che ne determini la larghezza. Giocando con questo valore dovresti essere in grado di completare l'allineamento...

Stammi bene...

09-02-2010, 01.10.26

Prova <div id="main" style="text-align: center;">

09-02-2010, 01.17.14

Son d'accordo con dementialsite.

Comunque ho fatto qualche prova, modificando un po' il codice.

(quello all'interno del tag body):

Codice HTML:

<body>
<div id="container">

<div id="header">
<img src="http://www.khblader.altervista.org/Logo__Header_Image_.png" alt="Logo" usemap="#Rimando" /> 
<map name="Rimando">
<area shape="rect" coords="1,1,703,381" href="index.htm" alt="Homepage" target="_self" /> 
</map>
</div><!-- fine header -->

<div id="siteroulette">
<table width="163" border="0" cellspacing="2" align="center" class="sidebar">
<tr>
<td align="left"><a href="pagina1.html">Homepage</a></td>
</tr>
<tr>
<td align="left"><a href="pagina2.html">Come destreggiarsi nel sito</a></td>
</tr>
<tr>
<td align="left"><a href="pagina3.html">Primordi e origini</a></td>
</tr>
<tr>

<td align="left"><img src="http://www.khblader.altervista.org/About_Tom__Sidebar_.png" /></td>
</tr>
<tr>
<td align="left"><a href="pagina4.html">Autominimicro-<br />
introduzione</a></td>
</tr>
<tr>
<td align="left"><a href="pagina5.html">Come contattarmi<br />
(ma soprattutto, perchè!)</a></td>
</tr>
<tr>
<td align="left"><img src="http://www.khblader.altervista.org/I_disegni__Sidebar_.png" /></td>
</tr>

<tr>
<td align="left"><a href="pagina6.html">Galleria</a></td>
</tr>
<tr>
<td align="left"><a href="pagina7.html">Filosofismi e autocritciche</a></td>
</tr>
</table>
</div><!-- fine siteroulette -->

<div id="contenitore-main">

<div id="maintop">
</div><!-- fine maintop -->

<div id="main"><p>
ciao ciao ciaociao ciao ciaociao ciao ciaociao ciao ciaociao ciao ciaociao ciao ciaociao ciao ciao</p>
</div><!-- fine main -->

<div id="mainbottom">
</div><!-- fine main bottom -->

</div><!-- fine contenitore main -->



</div><!-- fine container -->
</body>

Questo è il CSS:

Codice:

body {
background-image : url(Background-image__Body__V2.png);
background-repeat : repeat;
height : 100%;
text-align : center;
margin : 0 auto;
}
#container {
width : 860px;
margin : 0 auto;
padding : 0;
text-align : left;
}
#header {
width : 782px;
padding : 0 0 0 78px;
}
#siteroulette {
float : left;
margin : 10px 10px 0 0;
padding : 115px 5px 5px 5px;
background-image : url(Sidebar__Scheletro_.png);
background-repeat : no-repeat;
width : 260px;
height : 550px;
text-align : left;
font-size : 12px;
}
#contenitore-main {
float : left;
margin : 10px;
}
#maintop {
margin : 0;
padding : 0;
background-image : url(Body__Superiore_.png);
background-repeat : no-repeat;
width : 550px;
height : 136px;
}
#main {
margin : 0;
padding : 0;
background-image : url(Body__Centrale_-estensibile-_.png);
background-repeat : repeat-y;
width : 550px;
min-height : 400px;
height : auto !important ;
height : 400px;
}
#mainbottom {
margin : 0;
padding : 0;
background-image : url(Body__Inferiore_.png);
background-repeat : no-repeat;
width : 550px;
height : 112px;
}
#main p {
padding : 5px 10px 5px 28px;
margin : 0;
font-family : Times;
text-align : left;
color : white;
}
img {
border : 0;
}
a {
font-family : Arial;
}
a:link {
color : #ffffff;
text-decoration : none;
}
a:visited {
color : #979797;
}
a:hover {
color : #540000;
}
a:active {
color : #b60000;
}
h1 {
margin : 0;
padding : 0;
}

Questo:

Codice HTML:

<div id="main" align="center">

a mio avviso non ha senso, perchè tutto quello che vuoi dare al #main lo metti nel CSS.

Comunque ho fatto qualche modifica di qua e di là, vedi se ti può andare bene...
Il problema del testo che andava fuori al box, non c'è più (ad ogni modo, se scrivi una frase lunghissima senza nemmeno uno spazio, troverai comunque problemi).
I 3 div main li ho inseriti all'interno di un unico contenitore. Non ho toccato la struttura del contenuto della tabella dentro la sidebar.

Ora dovresti mettergli solo il footer.

09-02-2010, 16.56.53

Sarò forse io, ma trovo davvero strano che ci siano contemporaneamente sia la proprietà float che un posizionamento assoluto nello stesso DIV (che di fatto rende il floating inutile).

Piuttosto mi sarei aspettato di trovare una proprietà width insieme al float, che ne determini la larghezza. Giocando con questo valore dovresti essere in grado di completare l'allineamento...

Stammi bene...

Yewol, mein freund! MA, devi sapere che me lo son tirato fuori per caso il float!XD Che ne so io che rende inutile la position:absolute? =D

Prova <div id="main" style="text-align: center;">

Non è quello il problema, comunque grazie.

a mio avviso non ha senso, perchè tutto quello che vuoi dare al #main lo metti nel CSS.

Comunque ho fatto qualche modifica di qua e di là, vedi se ti può andare bene...

Sisi, quella storia dell'align l'ho capita grazie ad un illuminazione mentre leggevo un libro per caso! Dove ho pensato al fatto che quando uno assegna l'align ad un tag (vuoi p, o div o h1-2-... ecc.) assegna l'allineamento del CONTENUTO del tag stesso! Non il tag! Ecco perchè funzionava dentro il sito della w3c! Perchè allineava il testo! Sbadato io, non ci ho fatto caso! Comunque per i codici che mi hai modificato adesso provo un po' a raccapezzarmici e vedo un po'...si, effettivamente è più malvagia la tua idea...sai che ci stavo pensando da un po'? Ma ovviamente ho ben pensato di togliere del tutto il container per vedere un po' anzichè fare quello che hai fatto tu!XD Ora provo, comunque grazie mille ragazzi! ;)

P.S.: Creare il #main p o il p.container, è la stessa cosa? Perchè io pensavo di si!

<hr>

P.P.S.: Ho provato tutto e FUNZIONAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!!!! SIIIIIIIIIIIIIII!!! CERTOOO!! Son codici molto più furbi e intuitivi! Diamine, è totalmente ordinato come speravo adesso, mi pasta sbizzarrirmi coi padding! E io che come un decerebrato restavo ancorato all'intuile padding: npx che pensavo fosse un valore così messo a caso tanto per! ABBASSO LE POSIZIONI ASSOLUTEEE!!XD Fantastico, funziona tutto, ho apportato un paio di modifiche comunque perchè mi stavano meglio così, ma davvero, grazie! Ti ringrazierò ufficialmente anche nella mia pagina "Primordi e Origini" del sito, dove spiegherò l'Odissea del creare questo sito! =D Per ora sono più che a cavallo, spero di non incontrare nuovi problemi, YEEE!! Salve e grazie!!

Discussione: Problema con dei <div>

LinkBack

Strumenti discussione

Display

Problema con dei <div>

Regole di scrittura