tidusuper91
29-10-2009, 18:23
Salve, il mio progetto originale era questo:
http://thumbnails13.imagebam.com/5408/9eb1b454070449.gif (http://www.imagebam.com/image/9eb1b454070449)
Ma mi sono accorto che i due box centrali devo metterli alla stessa altezza.
Ecco il codice xhtml
<!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=utf-8" />
<title>La Taverna WebPage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul class="ul_nav">
<li><a href="index.html">Home |</a></li>
<li><a href="index.html">I Nostri Piatti |</a></li>
<li><a href="index.html">La Nostra Filosofia |</a></li>
<li><a href="index.html">Affittare Appartamenti a Roccaraso</a></li>
</ul>
</div>
<div id="second_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum mattis odio, quis malesuada nisi auctor condimentum. Aliquam vehicula risus vitae risus ornare tempus. Morbi diam ipsum, tempor accumsan egestas at, blandit vitae mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eleifend tortor in erat auctor tempus. Maecenas mattis felis eu lorem faucibus eu porttitor lectus scelerisque. Vestibulum ornare diam sit amet massa consequat eget molestie lacus tincidunt. Etiam dignissim orci non erat auctor eu vulputate enim malesuada. Duis consectetur semper odio eget ullamcorper. Quisque vitae orci vel risus blandit pellentesque at sit amet justo. Nam lacinia dolor nec eros bibendum et posuere est blandit. Praesent vitae ipsum non elit ornare congue sed in odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis convallis mi aliquet metus scelerisque tristique. Sed sed enim mauris. Vestibulum id lacinia est.
Nam sed magna lectus, molestie laoreet elit. Nulla dignissim enim ac justo auctor pellentesque. Praesent ullamcorper luctus massa, fermentum porttitor odio pharetra vitae. Praesent nec nisl risus. Sed sagittis libero quis erat euismod interdum. Ut bibendum ultrices ligula consequat scelerisque. Ut id lorem in diam laoreet aliquet. Etiam non eros mauris, posuere fringilla nibh. Nullam tellus lectus, dignissim viverra ornare at, commodo eu urna. Mauris nec sagittis lectus. Integer tempor tristique sem ut fermentum. Donec arcu lorem, tempus tincidunt sollicitudin a, fermentum a dolor. Fusce diam sapien, scelerisque nec pulvinar id, sodales sit amet leo. Curabitur id orci purus. Ut massa metus, tincidunt a euismod sit amet, semper eu tortor. Ut vel nisl vitae lacus tempor interdum id eu est. Proin quis facilisis diam. Sed sed sem nec mauris venenatis sollicitudin.
Sed lobortis metus id nibh viverra fringilla. Proin commodo elementum risus ut pretium. Nunc sed sapien ac sapien hendrerit dictum. Donec malesuada metus vel libero consectetur bibendum. Duis dignissim malesuada tortor, nec aliquet nulla ultrices vel. Integer egestas gravida lacus, id suscipit augue bibendum ut. Mauris varius consequat velit vel porta. Ut enim dui, rhoncus ac dignissim ac, varius quis turpis. Aenean pharetra felis at nunc gravida eget pretium ante egestas. Duis at neque id nisi condimentum ultricies. Nunc pretium arcu ut odio congue auctor. Maecenas cursus luctus ornare. Etiam aliquet, mi vel placerat porta, enim orci molestie urna, quis condimentum sapien ipsum et ipsum. Donec enim dui, venenatis sit amet iaculis a, lobortis eu diam. Ut neque massa, lacinia aliquam vulputate at, semper eu mi. Etiam euismod bibendum cursus. Proin at velit dolor.
Integer sit amet nisl felis. Proin malesuada aliquet ipsum vel sollicitudin. Suspendisse tincidunt interdum faucibus. Nullam ipsum nunc, vestibulum eget luctus id, congue sed dui. Ut vitae ante augue. Nulla accumsan, nibh vitae dictum porta, diam metus interdum purus, ac placerat risus turpis a leo. Sed hendrerit semper posuere. Sed in arcu facilisis orci tristique porttitor nec in ligula. Proin commodo malesuada suscipit. Nullam malesuada hendrerit blandit. Praesent et erat ultricies magna tincidunt tempor at et urna.
Vivamus et tellus leo. Vestibulum sit amet vehicula ipsum. Quisque interdum ullamcorper sapien. In tincidunt ligula et elit cursus consectetur vel non augue. Suspendisse ac mauris viverra neque ullamcorper condimentum nec sagittis nunc. Nunc consequat euismod magna aliquam viverra. Sed viverra nisl eget orci fermentum quis tempor nulla porta. Nam eget tortor in dolor convallis pulvinar eget at metus. Proin non purus libero, eget feugiat elit. Cras eu lectus diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ultrices justo. Suspendisse lorem massa, congue ut dictum eget, ornare quis purus. Donec suscipit, dui a faucibus vehicula, nunc mi lacinia ipsum, vel pulvinar sapien mauris non risus. Duis at massa eu massa tempor eleifend. Ut commodo turpis laoreet massa faucibus luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec semper tortor. </p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Qui il CSS
@charset "utf-8";
/* CSS Document */
*{padding:0; margin:0; text-decoration:none; font-family:'Calibri',Verdana,serif}
#container {
background:#6B3004;
height:100%;
width:821px;
margin:0 auto;
padding:12px;
}
#header {
background:url(logo.jpg);
width:821px;
height:234px;
}
#nav {
background:url(nav.jpg) repeat-x;
height:39px;
font-size:14pt;
}
#nav a {
color:#F5DCB4;
}
#nav a:hover,a:visited {
color:#230F01;
font-size:16pt;
font-weight:bold;
}
.ul_nav{
padding-top:7px;
padding-left:10px;
}
.ul_nav li{
display:inline;
}
#second_container {
background:#F5DCB4;
height:100%;
text-align:justify;
color:#6B3004;
padding:10px;
}
Ora... se creo due div con float:rigt e float:left all'interno di second_conteiner essi, facendoli ad altezza liquida, essi si allargano ma second_conteiner non lo fa. Mi date una mano su come piazzarli? Magari con un posizionamento assoluto?
http://thumbnails13.imagebam.com/5408/9eb1b454070449.gif (http://www.imagebam.com/image/9eb1b454070449)
Ma mi sono accorto che i due box centrali devo metterli alla stessa altezza.
Ecco il codice xhtml
<!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=utf-8" />
<title>La Taverna WebPage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul class="ul_nav">
<li><a href="index.html">Home |</a></li>
<li><a href="index.html">I Nostri Piatti |</a></li>
<li><a href="index.html">La Nostra Filosofia |</a></li>
<li><a href="index.html">Affittare Appartamenti a Roccaraso</a></li>
</ul>
</div>
<div id="second_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum mattis odio, quis malesuada nisi auctor condimentum. Aliquam vehicula risus vitae risus ornare tempus. Morbi diam ipsum, tempor accumsan egestas at, blandit vitae mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eleifend tortor in erat auctor tempus. Maecenas mattis felis eu lorem faucibus eu porttitor lectus scelerisque. Vestibulum ornare diam sit amet massa consequat eget molestie lacus tincidunt. Etiam dignissim orci non erat auctor eu vulputate enim malesuada. Duis consectetur semper odio eget ullamcorper. Quisque vitae orci vel risus blandit pellentesque at sit amet justo. Nam lacinia dolor nec eros bibendum et posuere est blandit. Praesent vitae ipsum non elit ornare congue sed in odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis convallis mi aliquet metus scelerisque tristique. Sed sed enim mauris. Vestibulum id lacinia est.
Nam sed magna lectus, molestie laoreet elit. Nulla dignissim enim ac justo auctor pellentesque. Praesent ullamcorper luctus massa, fermentum porttitor odio pharetra vitae. Praesent nec nisl risus. Sed sagittis libero quis erat euismod interdum. Ut bibendum ultrices ligula consequat scelerisque. Ut id lorem in diam laoreet aliquet. Etiam non eros mauris, posuere fringilla nibh. Nullam tellus lectus, dignissim viverra ornare at, commodo eu urna. Mauris nec sagittis lectus. Integer tempor tristique sem ut fermentum. Donec arcu lorem, tempus tincidunt sollicitudin a, fermentum a dolor. Fusce diam sapien, scelerisque nec pulvinar id, sodales sit amet leo. Curabitur id orci purus. Ut massa metus, tincidunt a euismod sit amet, semper eu tortor. Ut vel nisl vitae lacus tempor interdum id eu est. Proin quis facilisis diam. Sed sed sem nec mauris venenatis sollicitudin.
Sed lobortis metus id nibh viverra fringilla. Proin commodo elementum risus ut pretium. Nunc sed sapien ac sapien hendrerit dictum. Donec malesuada metus vel libero consectetur bibendum. Duis dignissim malesuada tortor, nec aliquet nulla ultrices vel. Integer egestas gravida lacus, id suscipit augue bibendum ut. Mauris varius consequat velit vel porta. Ut enim dui, rhoncus ac dignissim ac, varius quis turpis. Aenean pharetra felis at nunc gravida eget pretium ante egestas. Duis at neque id nisi condimentum ultricies. Nunc pretium arcu ut odio congue auctor. Maecenas cursus luctus ornare. Etiam aliquet, mi vel placerat porta, enim orci molestie urna, quis condimentum sapien ipsum et ipsum. Donec enim dui, venenatis sit amet iaculis a, lobortis eu diam. Ut neque massa, lacinia aliquam vulputate at, semper eu mi. Etiam euismod bibendum cursus. Proin at velit dolor.
Integer sit amet nisl felis. Proin malesuada aliquet ipsum vel sollicitudin. Suspendisse tincidunt interdum faucibus. Nullam ipsum nunc, vestibulum eget luctus id, congue sed dui. Ut vitae ante augue. Nulla accumsan, nibh vitae dictum porta, diam metus interdum purus, ac placerat risus turpis a leo. Sed hendrerit semper posuere. Sed in arcu facilisis orci tristique porttitor nec in ligula. Proin commodo malesuada suscipit. Nullam malesuada hendrerit blandit. Praesent et erat ultricies magna tincidunt tempor at et urna.
Vivamus et tellus leo. Vestibulum sit amet vehicula ipsum. Quisque interdum ullamcorper sapien. In tincidunt ligula et elit cursus consectetur vel non augue. Suspendisse ac mauris viverra neque ullamcorper condimentum nec sagittis nunc. Nunc consequat euismod magna aliquam viverra. Sed viverra nisl eget orci fermentum quis tempor nulla porta. Nam eget tortor in dolor convallis pulvinar eget at metus. Proin non purus libero, eget feugiat elit. Cras eu lectus diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ultrices justo. Suspendisse lorem massa, congue ut dictum eget, ornare quis purus. Donec suscipit, dui a faucibus vehicula, nunc mi lacinia ipsum, vel pulvinar sapien mauris non risus. Duis at massa eu massa tempor eleifend. Ut commodo turpis laoreet massa faucibus luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec semper tortor. </p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Qui il CSS
@charset "utf-8";
/* CSS Document */
*{padding:0; margin:0; text-decoration:none; font-family:'Calibri',Verdana,serif}
#container {
background:#6B3004;
height:100%;
width:821px;
margin:0 auto;
padding:12px;
}
#header {
background:url(logo.jpg);
width:821px;
height:234px;
}
#nav {
background:url(nav.jpg) repeat-x;
height:39px;
font-size:14pt;
}
#nav a {
color:#F5DCB4;
}
#nav a:hover,a:visited {
color:#230F01;
font-size:16pt;
font-weight:bold;
}
.ul_nav{
padding-top:7px;
padding-left:10px;
}
.ul_nav li{
display:inline;
}
#second_container {
background:#F5DCB4;
height:100%;
text-align:justify;
color:#6B3004;
padding:10px;
}
Ora... se creo due div con float:rigt e float:left all'interno di second_conteiner essi, facendoli ad altezza liquida, essi si allargano ma second_conteiner non lo fa. Mi date una mano su come piazzarli? Magari con un posizionamento assoluto?