Qui devo essere chiarissimo altrimenti ci perdiamo lol....
Allora ci sono questi due casi per ottenere lo stesso fine(ossia posizionare il footer):
1)--->Primo esempio<---
Codice HTML/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" xml:lang="en" lang="en">
<head>
<title>Personal Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../CSS/sito.css" />
</head>
<body>
<div id="Container">
<div class="Header">
[img]..\IMAGES\JPG\Header_without_borders.gif[/img]
</div>
<div class="Navigation_Menu">
[img]../IMAGES/JPG/Navigation_Menu.jpg[/img]
</div>
<div class="Content">
<div class="Content_News">
</div>
</div>
<div class="Footer">
<p id="Copyright">©2006 Anime Vision all rights reserved | by Another-Life</p>
</div>
</div>
</body>
</html>
Codice CSS:
body{
font: 11px Verdana, Arial, Helvetica, sans-serif;
margin: 0;
background-position: top center;
background-image: url(../IMAGES/JPG/background_page.gif);
background-repeat:repeat-y repeat-x;
background-color: #ffffff;
}
/***** CONTAINER *****/
div#Container{
width: 770px;
margin: 0 auto;
height: auto;
}
/***** FINE CONTAINER *****/
/***** HEADER *****/
.Header{
background-image: url(../../IMAGES/JPG/Header_without_borders.gif);
height: 159px;
width: 764px;
margin: 0;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
}
/***** FINE HEADER *****/
/***** NAVIGATION_MENU *****/
.Navigation_Menu{
height: 41px;
width: 764px;
margin: 0;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
}
/***** FINE NAVIGATION_MENU *****/
/***** CONTENT *****/
.Content{
margin: 0;
background-color: #ffffff;
height: 1536px;
width: 764px;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
}
/****** FINE CONTENT *****/
/***** FOOTER *****/
.Footer{
height: 34px;
width: 764px;
background-image: url(../IMAGES/JPG/Footer.jpg);
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
text-align: center;
}
p#Copyright{
margin: 0;
padding-top: 10px;
color: #ffffff;
font-size: 12px;
font-weight: bold;
}
/*****FINE FOOTER ****/
Risultato:
2) --->Secondo esempio<---
Codice HTML/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" xml:lang="en" lang="en">
<head>
<title>Personal Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../CSS/sito.css" />
</head>
<body>
<div id="Container">
<div class="Header">
[img]..\IMAGES\JPG\Header_without_borders.gif[/img]
</div>
<div class="Navigation_Menu">
[img]../IMAGES/JPG/Navigation_Menu.jpg[/img]
</div>
<div class="Content">
<div class="Content_News">
</div>
</div>
<div class="Footer">
[img]../IMAGES/JPG/Footer.jpg[/img]
<p id="Copyright">©2006 Anime Vision all rights reserved | by Another-Life</p>
</div>
</div>
</body>
</html>
Codice CSS:
body{
font: 11px Verdana, Arial, Helvetica, sans-serif;
margin: 0;
background-position: top center;
background-image: url(../IMAGES/JPG/background_page.gif);
background-repeat:repeat-y repeat-x;
background-color: #ffffff;
}
/***** CONTAINER *****/
div#Container{
width: 770px;
margin: 0 auto;
height: auto;
}
/***** FINE CONTAINER *****/
/***** HEADER *****/
.Header{
background-image: url(../../IMAGES/JPG/Header_without_borders.gif);
height: 159px;
width: 764px;
margin: 0;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
}
/***** FINE HEADER *****/
/***** NAVIGATION_MENU *****/
.Navigation_Menu{
height: 41px;
width: 764px;
margin: 0;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
}
/***** FINE NAVIGATION_MENU *****/
/***** CONTENT *****/
.Content{
margin: 0;
background-color: #ffffff;
height: 1536px;
width: 764px;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
}
/****** FINE CONTENT *****/
/***** FOOTER *****/
.Footer{
height: 34px;
width: 764px;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: #747474;
text-align: center;
}
p#Copyright{
margin: 0;
padding-top: 10px;
color: #ffffff;
font-size: 12px;
font-weight: bold;
}
/*****FINE FOOTER ****/
Risultato:
Come mai avvengono dei cambiamenti se carico l'immagine tramite XHTML invece che con i css visto che le proprietà sono cmq assegnate
Rispondi quotando