non mi funziona display:inline

loverdrive · 17 Ott 2011

Ciao. Io ho un div, al cui interno ci sono altri 2 div che devono stare affiancati. Però li visualizzo uno sotto e l'altro sopra:

Il codice css è:

Codice:

div.gallery_page {
	border: thin solid #fe0192;
	width: auto;
	height: auto;
	position: absolute;
	top: 200px;
	left: 250px;
	width: 600px;
	height: 600PX;
	padding-right: 80px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 16pt;
	color: #A8A8A8;
	
}

div.album_gallery {
	border: thin solid #ffffff;
	width: 185px;
	height: 250px;
}

img.gallery_menu {
	display: inline;
	border: none;
	margin: 20px;
}

mentre l'html:

Codice:

<div class="gallery_page">

<div class="album_gallery">
<a href="gallery_ilaria-loris.html"><img class="gallery_menu" src="path/image.jpg"></a><br>
<center>Matrimonio <br>
Ilaria&Loris
</center>
</div>

<div class="album_gallery">
<a href="gallery_serena-francesco.html"><img class="gallery_menu" src="path/image2.jpg"></a><br>
<center>Matrimonio <br>
Serena&Francesco
</center>
</div>

</div>

In questo modo, risulta così

e non è come lo vorrei, cioè allineati. Allora provo a modificare il css, per la precisione modifico div.album_gallery:

Codice:

div.album_gallery {
	border: thin solid #ffffff;
	width: 185px;
	height: 250px;
	display: inline;
}

però mi esce una cosa strana, cioè:

E' da un'ora che sto litigando con 'sto coso, magari il problema è un errore banale che non riesco a trovare. Qualcuno saprebbe dirmi dove sbaglio?

grazie!

borgo italia · 21 Ott 2011

ciao
anche se in ritardo, prova in questo modo

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
div.gallery_page {
	background-color:#CCCCCC;/*messo per vedere le divisioni*/
	border: thin solid #fe0192;
	position: absolute;
	top: 50px;
	left: 250px;
	width: 600px;
	height: auto;
	padding-right: 80px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 16pt;
	color: #A8A8A8;
}
div.album_gallery {
	background-color:#FF0000;/*messo per vedere le divisioni*/
	display:block;
	position:relative;
	border: thin solid #ffffff;
	width: 185px;
	height: 250px;
	float:left;
	clear: left;
}

img.gallery_menu {
	display: block;
	width: 335px;
	height:auto;
	float: left;
	position:relative;
	border: none;
	margin: 20px;
}

</style>
</head>
<body>
<div class="gallery_page">
	<div class="album_gallery">aaaaaa</div>
    <img src="gatto.jpg" class="gallery_menu">
	<div class="album_gallery">bbbb</div>
    <img src="gatto.jpg" class="gallery_menu">
	<div class="album_gallery">cccc</div>
    <img src="gatto.jpg" class="gallery_menu">
</div>
</body>
</html>

non so se funzia su tutti i bw, ho provato solo su IE, ill'immagine si affianca al testo e ogni nuovo testo+immagine un nuova riga

Cerca

Cerca

non mi funziona display:inline

loverdrive

Nuovo Utente

borgo italia

Super Moderatore

Discussioni simili