inserimento foto in microlayout

**ennevi** · 15-08-2006, 15:53

Sto lavorando su una pagina a due colonne con header, footer, content e navigation.
Nel div "content" ho inserito un div.gabbia dove ho posizionato del testo e vorrei inserire un'immagine float (in modo che il testo scorra intorno ad essa).
Il problema nn sussiste se la posiziono float right o left nella parte alta del div.gabbia e con il testo dopo.
Io invece voglio che prima appaia il testo e poi in fondo a sinistra la foto, con il testo che continua scorrendo attorno ad essa. Ho provato ad impostare il margin-left e bottom di cui conosco le misure esatte in px ma nn funziona...l'immagine si sposta sotto il testo che nn gli scorre attorno.
Come si può risolvere?
Grazie

**Francis87** · 15-08-2006, 20:41

prova a spostare l'immagine sotto il testo

codice:

testo testo
<img /></p>

**ennevi** · 15-08-2006, 21:51

Nn funziona, ma ti ringrazio x la solerzia con cui rispondi ai quesiti ... anche nei giorni di festa ...
Ti mando il codice
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home page</title>
<link href="index.css" rel="stylesheet" type="text/css" /><style type="text/css">

</style>
<link href="Copia di index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">[img]images/banner.jpg[/img][img]images/header.gif[/img]</div>
<div id="content">
<div class="gabbia">
<h1>Notizie</h1>

<span class="bold">Café Townsend’s visionary chef</span> and founder leads the way in a culinary revolution. Proclaimed by many to be the best chef in the world today, Chef Ipsum blends earthy seasonal flavors and bold ingredients to create exquisite contemporary cuisine.</p>

<span class="bold">The name Café Townsend</span> comes from our first restaurant, located in a historic building on Townsend Street in San Francisco, where we opened the doors in 1992. We’ve replicated the elegant interior, exceptional service, and world class cuisine in our restaurants around the country.</p>

<span class="bold">Café Townsend’s visionary chef</span> and founder leads the way in a culinary revolution. Proclaimed by many to be the best chef in the world today, Chef Ipsum blends earthy seasonal flavors and bold ingredients to create exquisite contemporary cuisine.</p>
[img]images/miniatura.gif[/img]
</div>
</div>
<div id="navigation">
<ul>[*]Home[*]About Us Photogallery[*]Contact Us[/list]
</div>
<div id="footer">[img]images/footer.gif[/img]</div>
</div>
</body>
</html>
CSS
#container {position: relative; width: 760px; margin: 0 auto; text-align: left; background-color: #F7EEDF; background: url(images/rightcol.jpg) repeat-y top right;}
#content {
margin: 0 200px 0 0;
background-color: #F7EEDF;
padding: 40px;
}
#navigation {position: absolute; top: 125px; right: 0; width: 180px;}
#navigation ul, #navigation li { width: 180px; margin: 0; padding: 0px; list-style-type: none;}
#navigation a{color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-decoration: none; display: block; padding: 8px; background-color: #993300;}
#navigation a:hover{color: #FFFFFF; background-color: #D03D03;}
#navigation a#activelink{color: #FFFFFF;}
div.gabbia {background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 480px; height: 480px;
background-image: url(images/cornicesf.jpg)
}
div.gabbia img { float: left; margin-left: 30px; margin-bottom: 60px;}
div.gabbia h1 { text-align: center; color: #990000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-weight: bold; padding: 50px 50px 0px 50px;}
div.gabbia p{font-family: Verdana, sans-serif; font-size: 11px; color: #000000; padding: 0 50px; text-align: justify;}
.bold { font-weight: bold; color: #990000;}

**ennevi** · 15-08-2006, 21:58

Nel frattempo ho riscontrato un altro problema. Sempre nella stessa pagina, ma in un'altra versione (sto facendo delle prove :-) avevo messo un'immagine float in alto sulla dx con il testo che scorreva intorno ed andava tutto bene. Quando ho riaperto il programma (dreamweaver) x lavorarci l'immagine "maledetta" era a sin e nn ne vuole sapere di tornare dov'era prima eppure a me sembra che il codice sia a posto. Se c'è scritto float:right perchè mai dovrebbe andare a sin...nn è possibile!!
Ti allego il codice e vedi se x caso c'è qualche errore, io nn so più che fare.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home page</title>
<link href="index.css" rel="stylesheet" type="text/css" /><style type="text/css">

</style>
<link href="Copia di index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">[img]images/banner.jpg[/img][img]images/header.gif[/img]</div>
<div id="content">
<div class="gabbia">
<h1>Notizie</h1>

<span class="bold">Café Townsend’s visionary chef</span> and founder leads the way in a culinary revolution. Proclaimed by many to be the best chef in the world today, Chef Ipsum blends earthy seasonal flavors and bold ingredients to create exquisite contemporary cuisine.</p>

<span class="bold">The name Café Townsend</span> comes from our first restaurant, located in a historic building on Townsend Street in San Francisco, where we opened the doors in 1992. We’ve replicated the elegant interior, exceptional service, and world class cuisine in our restaurants around the country.</p>

<span class="bold">Café Townsend’s visionary chef</span> and founder leads the way in a culinary revolution. Proclaimed by many to be the best chef in the world today, Chef Ipsum blends earthy seasonal flavors and bold ingredients to create exquisite contemporary cuisine.</p>
[img]images/miniatura.gif[/img]
</div>
</div>
<div id="navigation">
<ul>[*]Home[*]About Us Photogallery[*]Contact Us[/list]
</div>
<div id="footer">[img]images/footer.gif[/img]</div>
</div>
</body>
</html>
CSS
#container {position: relative; width: 760px; margin: 0 auto; text-align: left; background-color: #F7EEDF; background: url(images/rightcol.jpg) repeat-y top right;}
#content {
margin: 0 200px 0 0;
background-color: #F7EEDF;
padding: 40px;
}
#navigation {position: absolute; top: 125px; right: 0; width: 180px;}
#navigation ul, #navigation li { width: 180px; margin: 0; padding: 0px; list-style-type: none;}
#navigation a{color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-decoration: none; display: block; padding: 8px; background-color: #993300;}
#navigation a:hover{color: #FFFFFF; background-color: #D03D03;}
#navigation a#activelink{color: #FFFFFF;}
div.gabbia {background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 480px; height: 480px;
background-image: url(images/cornicesf.jpg)
}
div.gabbia img { float: left; margin-left: 30px; margin-bottom: 60px;}
div.gabbia h1 { text-align: center; color: #990000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-weight: bold; padding: 50px 50px 0px 50px;}
div.gabbia p{font-family: Verdana, sans-serif; font-size: 11px; color: #000000; padding: 0 50px; text-align: justify;}
.bold { font-weight: bold; color: #990000;}

**ennevi** · 15-08-2006, 22:07

Al secondo quesito, quello della foto che si è spostata a sin invece di stare a dx ti ho allegato il codice sbagliato. Rimedio ora.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home page</title>
<link href="index.css" rel="stylesheet" type="text/css" /><style type="text/css">

</style>
<link href="Copia di index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">[img]images/banner.jpg[/img][img]images/header.gif[/img]</div>
<div id="content">
<div class="gabbia">
[img]images/miniaturaright.gif[/img]
<h1>Notizie</h1>

<span class="bold">Café Townsend’s visionary chef</span> and founder leads the way in a culinary revolution. Proclaimed by many to be the best chef in the world today, Chef Ipsum blends earthy seasonal flavors and bold ingredients to create exquisite contemporary cuisine.</p>

<span class="bold">The name Café Townsend</span> comes from our first restaurant, located in a historic building on Townsend Street in San Francisco, where we opened the doors in 1992. We’ve replicated the elegant interior, exceptional service, and world class cuisine in our restaurants around the country.</p>

<span class="bold">Café Townsend’s visionary chef</span> and founder leads the way in a culinary revolution. Proclaimed by many to be the best chef in the world today, Chef Ipsum blends earthy seasonal flavors and bold ingredients to create exquisite contemporary cuisine.</p>
</div>
</div>
<div id="navigation">
<ul>[*]Home[*]About Us Photogallery[*]Contact Us[/list]
<div class="fotovert">
[img]images/fotovertpix.jpg[/img]
</div>
</div>
<div id="footer">[img]images/footer.gif[/img]</div>
</div>
</body>
</html>
CSS
#container {position: relative; width: 760px; margin: 0 auto; text-align: left; background-color: #F7EEDF; background: url(images/rightcol.jpg) repeat-y top right;}
#content {
margin: 0 200px 0 0;
background-color: #F7EEDF;
padding: 40px;
}
#navigation {position: absolute; top: 125px; right: 0; width: 180px;}
#navigation ul, #navigation li { width: 180px; margin: 0; padding: 0px; list-style-type: none;}
#navigation a{color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-decoration: none; display: block; padding: 8px; background-color: #993300;}
#navigation a:hover{color: #FFFFFF; background-color: #D03D03;}
#navigation a#activelink{color: #FFFFFF;}
div.gabbia {background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 480px; height: 480px;
background-image: url(images/cornicesf.jpg)
}
div.gabbia img { float: right; width: 120px; height: 120px; margin: 30px;}
div.gabbia h1 { text-align: center; color: #990000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-weight: bold; padding: 50px 50px 0px 50px;}
div.gabbia p{font-family: Verdana, sans-serif; font-size: 11px; color: #000000; padding: 0 50px; text-align: justify;}
.bold { font-weight: bold; color: #990000;}
div.fotovert { margin: 0px; padding: 40px; width: 100px; height: 300px;}
div.fotovert img { float: right; width: 100px; height: 300px;}

Discussione: inserimento foto in microlayout

Strumenti discussione

Ricerca discussione

Visualizza

inserimento foto in microlayout

Permessi di invio