[css] due div di fianco..

**jed84** · 24-04-2008, 21:43

Ciao!
Non capirò mai xkè mettere due div di fianco x me dinventa sempre una tragedia..
Dovrei fare un box babbissimo con due colonne.

[CSS]
#box {
position:relative;
height:290px;
width:290px;
}
#contenuto {
position:relative;
height:290px;
width:270px;
overflow:hidden;
}
#scroller {
float:left;
display: inline;
position:relative;
height:290px;
width:20px;
background-color:yellow;
}
[/CSS]
con un html:
<div id="box">
<div id="scroller">
</div>
<div id="contenuto">
</div>
</div>
Dove sbagliooooooo????
Di fatto ciò funge su ff ma non va bene affatto su ie..HELP!!!

**jed84** · 24-04-2008, 21:47

...noto ke se rimpicciolisco la dimensione d contenuto mi entra..
ma xkè ff legge bene anke le dimensioni perfette e ie no? C'è qualcosa ke posso migliorare?
Grazie!

**Moriero17** · 25-04-2008, 11:55

Prova a mettere a contenuto display:inline;

**gengix** · 25-04-2008, 12:04

Nei css ogni proprietà ha una sua funziona specifica.(salvo alcuni casi dove una proprietà serve anche per dare layout ad un elemento o per risolvere un bug.)

Le position vengono utilizzate per posizionare elementi, nel tuo caso non ci sono elementi posizionati. Anche se fosse, la position relative deve essere data all'elemento genitore, mentre i figli devono avere posizioni assolute.

Overflow non so perchè l'hai utilizzato, non so se dopo vuoi che il contenuto venga tagliato.
Non definire la larghezza a #contenuto, quest'ultimo si adatterà alla larghezza rimanente del contenitore #box.

dovrebbe apparire più o meno così:

codice:

#box {
width:290px;
height:290px;
}
#contenuto {
height:100%;
}
#scroller {
float:left;
width:20px;
height:100%;
background:yellow;
}
* html #scroller {
margin-right:-3px;
}

L'ultima dichiarazione serve per il bug dei 3px presente in IE precedenti al 7.

**jed84** · 25-04-2008, 18:30

Originariamente inviato da gengix
Le position vengono utilizzate per posizionare elementi, nel tuo caso non ci sono elementi posizionati. Anche se fosse, la position relative deve essere data all'elemento genitore, mentre i figli devono avere posizioni assolute.

Cosa intendi per genitori e figli?..nel senso..se ho tre div a bambole cinesi ki deve avere il relative? i due più esterni no?

Originariamente inviato da gengix
Overflow non so perchè l'hai utilizzato, non so se dopo vuoi che il contenuto venga tagliato.

Si mi serve che l'esterno venga tagliato.

Originariamente inviato da gengix
L'ultima dichiarazione serve per il bug dei 3px presente in IE precedenti al 7.

?? bug?? mi spiegheresti? forse è questo ke mi fa inmpazzire ogni volta ke devo posizionare!
E poi conosci altri bug conosciuti che hanno risoluzioni? Così non impazzisco..c'è un posto dove posso documentarmi a riguardo?

Altra richiesta..potresti spiegarmi il comando display? Tipo block inline ect..ankora non riesco a capire quando usarli.
GRAZIE MILLEEEE! Ciao

**gengix** · 26-04-2008, 21:09

Cosa intendi per genitori e figli?..nel senso..se ho tre div a bambole cinesi ki deve avere il relative? i due più esterni no?

I posizionamenti sono particolari da spiegare:
http://css.html.it/guide/lezione/40/...egli-elementi/

e poi prova a copiarti questi 2 esempi e guarda la differenza:

codice:

<!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></title>
    <style type="text/css">
	#box {
	width:500px;
	height:500px;
	border:solid 1px red;
	}
	#primo {
        position:relative;
	float:right;
	width:200px;
	height:200px;
	border:solid 1px blue;
	}
	#secondo {
	position:absolute;
	top:10px;
	left:20px;
	width:50px;
	height:50px;
	border:solid 1px green;
	}
    </style>
</head>
<body>
	<div id="box">
		<div id="primo">
			<div id="secondo"></div>
		</div>
	</div>
</body>
</html>

codice:

<!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></title>
    <style type="text/css">
	#box {
        position:relative;
	width:500px;
	height:500px;
	border:solid 1px red;
	}
	#primo {       
	float:right;
	width:200px;
	height:200px;
	border:solid 1px blue;
	}
	#secondo {
	position:absolute;
	top:10px;
	left:20px;
	width:50px;
	height:50px;
	border:solid 1px green;
	}
    </style>
</head>
<body>
	<div id="box">
		<div id="primo">
			<div id="secondo"></div>
		</div>
	</div>
</body>
</html>

?? bug?? mi spiegheresti? forse è questo ke mi fa inmpazzire ogni volta ke devo posizionare!

Leggiti questo:
http://gabrieleromanato.altervista.o...inglayout.html

Altra richiesta..potresti spiegarmi il comando display? Tipo block inline ect..ankora non riesco a capire quando usarli.

http://css.html.it/guide/lezione/39/...y-float-clear/

A disposizione per chiarimenti=)

Discussione: [css] due div di fianco..

Strumenti discussione

Ricerca discussione

Visualizza

[css] due div di fianco..

Permessi di invio