29/11/10 19:28
MCL889
Sto facendo un piccolo sito per esercitarmi:
bubashrine.altervista.org/
Sembra che come prova non sia male...però il footer non viene visualizzato bene
Ecco a voi il codice che ho utilizzato per fare la pagina HTML e il suo CSS:
CSS (utilizzato per resettare i valori dei tag)
CSS (utilizzato per impostare la pagina):
Secondo voi, perchè il footer non occupa tutta la parte orizzontale della pagina?
bubashrine.altervista.org/
Sembra che come prova non sia male...però il footer non viene visualizzato bene
Ecco a voi il codice che ho utilizzato per fare la pagina HTML e il suo CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buba's Shrine - Il sito figherimmo :D</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body style="background-image:url(img/layer.png)">
<div id="container">
<div id="header">
<h1>The Shrine of Buba</h1>
</div>
<div id="colonna1">
<ul>
<li>Home</li>
<li>Chi sono?</li>
<li>Video</li>
<li>Progetti</li>
</ul>
</div>
<div id="colonna2">
<div id ="wrapper_news">
<div id="n_1" class="news_main">
<h2>Prima News!!!</h2>
<hr>
<p class="centra"><img alt="It's me. Mario!" src ="img/Super_Mario_Bros_3_boxfront.jpg"></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr class="fine_notizia">
</div>
<div id="n_2" class="news_main">
<h2>Prima News!!!</h2>
<hr>
<p class="centra"><img alt="It's me. Mario!" src ="img/Super_Mario_Bros_3_boxfront.jpg"></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr class="fine_notizia">
</div>
</div>
</div>
<div id="footer">
<p>Ciao</p>
</div>
</div>
</body>
</html>
CSS (utilizzato per resettare i valori dei tag)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
h2
{
font-size:24px;
}
CSS (utilizzato per impostare la pagina):
body
{
text-align: center; /*centra in IE 5.x */
background-attachment:fixed;
background-repeat:repeat-x;
}
#container
{
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
}
#header
{
background-color:red;
font-size:35px;
height:100px;
}
#colonna1
{
float:left;
width:25%;
}
#colonna2
{
float:left;
width:75%
}
#news_flash
{
float:left:
width:inherit;
background-color:#AADD00;
}
#wrapper_news
{
padding:2% 4% 0% 4%;
margin:0px;
width:800px;
}
.news_main
{
position:relative;
left:6%;
}
#wrapper_news p
{
margin-top:5px;
}
#wrapper_news img
{
width:300px;
height:300px;
position:relative;
}
#wrapper_news hr
{
border-color:black;
}
.fine_notizia
{
margin-bottom:5%;
}
.centra
{
text-align:center;
}
#footer
{
text-align:center;
height:100px;
background-color:green;
float:left;
}
Secondo voi, perchè il footer non occupa tutta la parte orizzontale della pagina?
aaa
