Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Fluid layout i problem ze stopką - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Fluid layout i problem ze stopką (/thread-fluid-layout-i-problem-ze-stopka)

Fluid layout i problem ze stopką - Mtk - 20-09-2012

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:
@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?

RE: Fluid layout i problem ze stopką - Kartofelek - 20-09-2012

Footerowi czyść floatowanie

RE: Fluid layout i problem ze stopką - Mtk - 20-09-2012

masz na myśli clear:both; na footerze?

RE: Fluid layout i problem ze stopką - Mtk - 21-09-2012

(20-09-2012, 19:36)kornell napisał(a): tak.
http://www.quirksmode.org/css/clearing.html
nie zamknąłeś cudzysłowie na samym początku ( w atrybutach html)

Clear: both; pomogło rzeczywiście, prosta rzecz, a taka ważna.

Nie mogę zlokalizować o którym cudzysłowiu mówisz kornell ?

pozdrawiam