20-09-2012, 05:06
Witam.
Staram się zrobić fluid layout na stronę www i mam problem z umiejscowieniem stopki.
Ogólnie układ jest następujący:
Baner
menu
content | Box
stopka
Content i box znajdują się w tej samej linii, jest między nimi odstęp i właśnie w ten odstęp wchodzi stopka.
Kod css:
Kod strony (strona JSP, dlatego nie ma head w kodzie)
wyglada to tak:
http://postimage.org/image/4jx3ftujt/
stopka to oczywiście tam gdzie jest "all rights reserved" ;>
patrzyłem też czy coś dziwnego by się działo ze stopką jeśli by usunąć divy content i leftbox - ale wtedy stopka wyświetla się normalnie, z odstępem pod menu.
Jakieś pomysły co jest nie tak?
Staram się zrobić fluid layout na stronę www i mam problem z umiejscowieniem stopki.
Ogólnie układ jest następujący:
Baner
menu
content | Box
stopka
Content i box znajdują się w tej samej linii, jest między nimi odstęp i właśnie w ten odstęp wchodzi stopka.
Kod css:
Kod:
@CHARSET "UTF-8";
body{
font: normal 100% Helvetica, Arial, sans-serif;
background-color:#eee;
color: #000;
font-size: 12px;
}
.page{
margin: 20px auto;
padding 0 1em;
max-width: 82.5em;
}
h1{
font-family: Georgia,serif;
font-size: 1.75em;
}
.banner{
width:100%;
margin-bottom: 1.5em;
}
.menu{
width:100%;
margin-bottom:1.5em;
font-size:1.25em;
background-color:#ddd;
}
.content{
float:left;
width:85.5%;
background-color:#ccc;
margin-bottom:1.5em;
}
.leftBox{
float:right;
width:12.5%;
background-color: #bbb;
margin-bottom:1.5em;
}
.footer{
margin:0 auto;
width:100%;
background-color:#999;
}
img{
width:100%;
}Kod strony (strona JSP, dlatego nie ma head w kodzie)
Kod:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<jsp:include page="template/Header.jsp">
<jsp:param value="Strona Główna" name="pageName"/>
</jsp:include>
<body>
<div class="page"> <!-- rozpoczęcie page -->
<div class="banner"> <!-- rozpoczęcie banner -->
<img src="img/banner.png" alt="marek krokosiński portfolio . . ." />
</div> <!-- zakończenie banner -->
<div class="menu"> <!-- rozpoczęcie menu -->
<span>OMG !</span>
<span> OMG !</span>
</div> <!-- zakończenie menu -->
<div class="content"> <!-- rozpoczęcie content -->
<p> Paragraf testowy</p>
<p> Paragraf testowy</p>
<p> Paragraf testowy</p>
</div> <!-- zakończenie content -->
<div class ="leftBox"> <!-- rozpoczęcie leftBox -->
<p> Paragraf testowy</p>
</div> <!-- zakończenie leftBox -->
<div class="footer"> <!-- rozpoczęcie footer -->
<span>All right reserved</span>
</div> <!-- zakończenie footer -->
</div> <!-- zakończenie page -->
</body>
</html>wyglada to tak:
http://postimage.org/image/4jx3ftujt/
stopka to oczywiście tam gdzie jest "all rights reserved" ;>
patrzyłem też czy coś dziwnego by się działo ze stopką jeśli by usunąć divy content i leftbox - ale wtedy stopka wyświetla się normalnie, z odstępem pod menu.
Jakieś pomysły co jest nie tak?
