Topic: i can't make a html page with fluid svmanager
hallo,
i have tried during days but don't understand how to have a fluid svmanager galery between a header and a footer with footer at bottom of any display (ie:1680x1050 or 1024x600 eeepc) and galery extending from header to footer.
I have done a simple code with flashy colors to see header, content, footer and body.
can you please help me to replace the 550x367 image with :
http://www.labrophotography.com/svmanager/g5/
in fluid mode. I'd like mobile is working too. so, if any option must be enabled or a resolution set somewhere please advise
thanks you
best regards
CODE :
<!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>Essai</title>
<style type="text/css">
<!--
* {padding:0; margin:0}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
background-color: #0F0;
}
#header {
color: #FF3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
padding: 0.00;
text-align: center;
border-top-width: 0px;
border-right-width: 0px;
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-left-width: 0px; /*height: 100px;*/
height: 70px;
background-color: #CCC;
}
#header_content {
width: 98%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 10px;
}
#gallery {
text-align: center !important;
padding: 0.00 !important;
width: 100% !important;
background-color: #1D1D1D;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#flashcontent {
/*background-color: #d5d3c3;*/
border: 0px solid #68675f;
padding: 0;
width: 550px;
/*color: inherit;*/
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#footer {
clear:both;
margin-top:0px;
font-size:12px;
color: #000;
/*text-transform:uppercase;
letter-spacing:1px;*/
width: 100%;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #0FF;
height: 50px;
}
#footer a {
text-decoration:none;
color:#989898;
}
#footer a:hover {
text-decoration:underline;
color:#cccccc;
}
#footer_content {
width: 98%;
text-transform: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 10px;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="header_content">
<p>Hallo World</p>
</div> <!-- header_content -->
<div style=" clear:both;"></div>
</div> <!-- ends header -->
<div id="gallery">
<div id="flashcontent">
<img src="D30_8235_1.jpg" width="550" height="367" alt="image" />
</div> <!-- flashcontent -->
</div> <!-- gallery -->
<div id="footer">
<div id="footer_content">
<p>My Footer</p>
</div> <!-- footer content -->
</div> <!-- FOOTER -->
</body>
</html>