Problema con position:relative;

[ultimateshadow]

Ciao a tutti! sono alle primissime armi con CSS e sto facendo una pagina in cui vorrei inserire una colonna laterale con i dati dell'utente solo che devo aver sbagliato qualcosa...
Vi posto il codice!

Il file CSS:

/*************** board settings ****************/

.b_header{
	margin: 0 2% 0 2%;
	border: 2px solid #FF0000;
	font-weight:bold;
	background-color:#FFFFFF;
}

.b_footer{
	margin: 0 2% 0 2%;
	border: 2px solid #FF0000;
}

.b_frame{
	border-left: solid 4px #FF0000;
	border-right: solid 4px #FF0000;
	margin: 0 2% 0 2%;
	padding: 0;
	background-color: #FFFFFF;
	background-image: url(./square.png);
}

.b_user{ /* qui ho il problema */
	position:relative;
	top:0;
	right:0;
	width: 210px;
	min-height: 300px;
	border-left: solid 2px #FF0000;
	padding: 2px;
}

l'HTML:

<div class="b_header" align="center">NOME UTENTE</div>
<div class="b_frame">
	
	<div class="b_user">
    	<center>[img]utente.jpg[/img]</center>

        [img]./grafica/icone/mail32.png[/img] <label>MAIL</label>

        [img]./grafica/icone/msn.png[/img] <label>MSN</label>

        [img]./grafica/icone/yahoo.png[/img] <label>YAHOO</label>

        [img]./grafica/icone/icq.png[/img] <label>ICQ</label>

        [img]./grafica/icone/www.png[/img] <label>WWW</label>
        <div class="p_sign">
        	Firma...
        </div>
    </div>
    
    
    <h1>Bacheca pubblica.</h1>
    
</div>
<div class="b_footer" align="center">Non so ancora che metterci.... :S</div>

e qui il link della pagina per vedere come viene visualizzato il codice...

qualcuno mi sa dire PERCHé la colonna mi va a sinistra e il testo del div "genitore" va sotto alla colonna e non a sinistra?

PS: volevo evitare di usare float:right; perchè così facendo il div "figlio" può uscire dal div "genitore" in verticale.

[ispuk]

.

[ispuk]

vediamo se ho codificato il tuo problema che sembra scritto in un linguaggi di programmazione inventato da te scherzo eh

prova cosi:

/*************** board settings ****************/

.b_header{
	margin: 0 2% 0 2%;
	border: 2px solid #FF0000;
	font-weight:bold;
	background-color:#FFFFFF;
}

.b_footer{
	margin: 0 2% 0 2%;
	border: 2px solid #FF0000;
}

.b_frame{
	border-left: solid 4px #FF0000;
	border-right: solid 4px #FF0000;
	margin: 0 2% 0 2%;
	padding: 0;
	background-color: #FFFFFF;
	background-image: url(./square.png);
}

.b_user{ /* qui ho il problema */
	margin:0 auto;
        text-align:center;
        position:relative;
	top:0;
	right:0;
	width: 210px;
	min-height: 300px;
	border-left: solid 2px #FF0000;
	padding: 2px;
}

copia e incolla nel tuo css questo ,che ho modificato inserendo solo margin:0 auto; e text-align:center; sul div b.user

[ultimateshadow]

no io voglio che .b_user finisca a destra e che alla sua sinistra abbia lo spazio per la bacheca in cui si possono lasciare messaggi.
col margin in effetti funziona, se vai di nuovo sul link vedi com'è con questo codice

.b_user{
width: 210px;
border-left: solid 2px #FF0000;
padding: 2px;
/* position:relative;
top:0;
right:0; */
margin: 0 0 0 auto;
}

peccato che, come vedrai, la scritta "Bacheca pubblica" finisce sotto al div quindi a lato di b_user non posso mettere nulla... l'idea del position secondo me ci stava... quello che non capisco è perchè se gli dico

position:relative;
top:0;
right:0;

questo fa altro :S

[ultimateshadow]

Originariamente inviato da ispuk
vediamo se ho codificato il tuo problema che sembra scritto in un linguaggi di programmazione inventato da te
[...]
copia e incolla nel tuo css questo ,che ho modificato inserendo solo margin:0 auto; e text-align:center; sul div b.user

si, le mie doti oratorie non sono delle migliori xD

cmq il tag center se hai visto l'ho messo solo per l'immagine quindi text-align:center; non mi dovrebbe servire...

riguardo al margin ti ripeto che se guardi nel link che ho postato sopra così facendo tutto quello che c'è a sinistra del div diventa "territorio sterile" mentre li ioo volevo piazzarci un po di roba....

magari si può trovare una soluzione mettendo un'altro div tipo io avevo in mente questo layout:

(.b_corpse non l'ho ancora messa, speravo di poterne fare a meno ma se risolve ce lo metto e amen)

[ispuk]

ah ok forse ho capito
credo sia molto semplice ciò che vuoi fare,ti crei un altro div all'interno del div contenitoe e lo affianchi al div b.user basta che una volta creato il div nuovo e fissate width ed height rispetto al contenitore(occhio con le misure) dai la regoletta float:left sia al div nuovo sia al div b.user

dovrebbe andare

prova e fammi sapere

[ultimateshadow]

guarda io provo ma csì bastava mettere float:right; al .b_user come avevo fatto inizialmente solo che poi viene fuori una cosa così:
perchè (non lo so ma te lo dico xk ho provato prima) quando usi float il div non occupa spazio o meglio non influisce sul contenitore e se diventa più grande ne esce come nell'immagine che ti ho messo ora

[ispuk]

non vedo i tuoi link.....

[ultimateshadow]

nemmeno io ma l'url è giusto, speravo fosse un problema mio xD
c'era qst'immagine
http://opcds.altervista.org/lay2.png

[ispuk]

siccome non ci sto capendo più niente, salva questa pagina in .html

e fammi sapere se vorresti che fosse una cosa del genere li dove hai specificato lasciando perdere tutti gli altri div header etc etc,parlo della parte centrale

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
#contenitore{margin:0 auto;width:500px; height:350px;}
#b_user{margin: 0 auto;float:left;background-color:#00CC66;width:200px; height:350px;}
#b_user2{margin: 0 auto;float:left;background-color:#CCCCCC;width:300px;height:350px;}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="contenitore">
<div id="b_user2">qui la bacheca?</div>
<div id="b_user"> qui il profilo utente?</div>
</div>
</body>
</html>