SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    White border at bottom of page

    Friends, when I resize the window in my browser or accessing my site from a smaller monitor at the bottom appears a white border. Can you help me solve?

    The site in question: http://blabloo.com.br/v2/lojas

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't use height:100% like that I'm afraid. See the CSS faq on 100% height for more info (see my sig).

    When you say height:100% then that means the height is only as high as the viewport and can never expand (because below the fold would be greater than 100%). Suffice to say you can really only use height:100% on the body and html elements and then on an initial container you can use min-height:100%. However that's it and you cannot nest any more elements with 100% height.

    You could have used display:table and display:table-cell (ie8+)and then use height:100% because tables treat height as a minimum.

    Here's a rough example of your code that should do what you want.

    Code:
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" />
    <title>Peepou</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
    <style>
    
    html,body {
     height:100%;
    }
    body{/*min-height:100%; nope*/}
    
    *{
       border: 0;
       margin: 0;
       padding: 0;
    }
    
    a {
       text-decoration: none;
       color:#fff;
    }
    
    .content {
       position:relative;
      /* height: 100%;  No No No
       min-height:650px;*/
    			min-height:100%;
       min-width: 1024px;
       -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
       -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
       transition: all 0.3s ease-out;
    }
    
    li {
       list-style: none;
    }
    
    .home{
       background: url('http://blabloo.com.br/v2/imgs/sombra.png') no-repeat 350px center, url('http://blabloo.com.br/v2/imgs/home.jpg') no-repeat top center;
       -webkit-background-size: auto 100%;
       -moz-background-size: auto 100%;
       -o-background-size: auto 100%;
       background-size: auto 100%;
    }
    
    .sobre{
       background: url('http://blabloo.com.br/v2/imgs/sombra.png') no-repeat 350px center, url('http://blabloo.com.br/v2/imgs/bg.jpg') no-repeat top center;
       -webkit-background-size: auto 100%;
      -moz-background-size: auto 100%;
      -o-background-size: auto 100%;
      background-size: auto 100%;
    }
    
    .lojas{
       background: url('http://blabloo.com.br/v2/imgs/sombra.png') no-repeat 350px center, url('http://blabloo.com.br/v2/imgs/bg.jpg') no-repeat top center;
       -webkit-background-size: auto 100%;
      -moz-background-size: auto 100%;
      -o-background-size: auto 100%;
      background-size: auto 100%;
    }
    
    
    
    
    /* SOBRE */
    
    #sobre {
       margin: 0 0 0 390px;
    }
    
    #sobre h1 {
       font-family: 'Playfair Display', serif;
       font-size: 60px;
       color: #4b508d;
       margin: 20% 0 40px 0;
       font-weight: 900;
       font-style: italic;
       line-height: 1em;
       letter-spacing: -2px;
    }
    
    #sobre p{
       font-family: 'Open Sans', sans-serif;
       font-size: 15px;
       line-height: 1.9em;
       color: #2f346a;
       font-weight: 400;
       margin: 0 0 40px 0;
       float: left;
    }
    
    
    /* LOJAS */
    
    #lojas {
       margin: 0 0 0 390px;
    }
    
    #lojas h1 {
       font-family: 'Playfair Display', serif;
       font-size: 86px;
       color: #4b508d;
       margin: 27% 0 60px 0;
       font-weight: 900;
       font-style: italic;
       line-height: 1em;
       letter-spacing: -2px;
    }
    
    #lojas h2 {
       font-family: 'Playfair Display', serif;
       font-size: 28px;
       color: #4b508d;
       margin: 30px 0 10px 0;
       font-weight: 900;
       font-style: italic;
       line-height: 1em;
       letter-spacing: -1px;
       text-transform: lowercase;
    }
    
    #lojas p{
       font-family: 'Open Sans', sans-serif;
       font-size: 14px;
       line-height: 1.9em;
       color: #4b508d;
       font-weight: 400;
    }
    
    
    /* CONTATO */
    
    #contato {
       margin: 0 0 0 390px;
    }
    
    #contato h1 {
       font-family: 'Playfair Display', serif;
       font-size: 86px;
       color: #4b508d;
       margin: 25% 0 60px 0;
       font-weight: 900;
       font-style: italic;
       line-height: 1em;
       letter-spacing: -2px;
    }
    
    #contato h2 {
       font-family: 'Playfair Display', serif;
       font-size: 28px;
       color: #4b508d;
       margin: 30px 0 10px 0;
       font-weight: 900;
       font-style: italic;
       line-height: 1em;
       letter-spacing: -1px;
       text-transform: lowercase;
    }
    
    #contato p{
       font-family: 'Open Sans', sans-serif;
       font-size: 14px;
       line-height: 1.9em;
       color: #4b508d;
       font-weight: 400;
    }
    
    #contato .form{
       width: 360px;
       float: right;   
    }
    
    #contato .form input[type=text], #contato .form input[type=email]{
       width: 336px;
       height: 16px;
       padding: 12px;
       font-family: 'Open Sans', sans-serif;
       font-weight: 400;
       font-size: 16px;
       color: #465682;
       margin: 0 0 13px 0;
       background: rgba(251, 251, 251, 0.6); 
       outline: none;
    }
    
    #contato .form textarea{
       width: 336px;
       height: 95px;
       padding: 12px;
       font-family: 'Open Sans', sans-serif;
       font-weight: 400;
       font-size: 16px;
       color: #465682;
       background: rgba(251, 251, 251, 0.6);
       margin: 0 0 7px 0;
       resize: none;
       outline: none;
    }
    
    #contato .form input[type=submit]{
       font-family: 'Playfair Display', serif;
       font-size: 18px;
       color: #465682;
       font-weight: 900;
       font-style: italic;
       text-transform: lowercase;
       background: none;
       cursor: pointer;
       float: right;
    }
    
    input.error, textarea.error {
       border-left: 2px solid red;
    }
    
    #retorno{
       font-family: 'Playfair Display', serif;
       font-size: 18px;
       color: #465682;
       font-weight: 900;
       font-style: italic;
       text-transform: lowercase;
       display: none;
       float: left;
    }
    
    
    /* SIDEBAR */
    
    aside{
       width: 350px;
      /* height: 100%;  No*/
       z-index: 9999999;
       /*position: absolute;*/
       position: relative;
       float: left;
    }
    
    aside .background{
       position: fixed;/* was absolute*/
       top: 0px;
       left: 0px;
    			bottom:0;
       width: 350px;/* was 100%*/
       /*height: 100%; no */
       background: url('http://blabloo.com.br/v2/imgs/sidebar.jpg') no-repeat bottom, url('http://blabloo.com.br/v2/imgs/sidebar2.jpg') repeat-y top;
       z-index: -1;
    }
    
    aside .logo{
       width: 275px;
       height: 69px;
       margin: 25% auto 20px;
    }
    
    aside .logo a{ 
       width: 275px;
       height: 69px;
       background: url('http://blabloo.com.br/v2/imgs/logo.png') no-repeat;
       display: block;
       text-indent: -9999px;
    }
    
    aside .outono{
       font-family: 'GaramondPremierPro', sans-serif;
       text-transform: uppercase;
       font-size: 14px;
       text-align: center;
       color: #465682;
       text-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    }
    
    aside nav{
       margin: 50px 0 0 0;
    }
    
    aside ul li a{ 
       font-family: 'EB Garamond', serif;
       font-size: 20px;
       color: #465682;
       text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
       text-decoration: none;
    }
    
    aside ul li a.selecionado, aside ul li a:hover{
       color: #162755;
    }
    
    aside ul li{
       line-height: 3;
       text-align: center;
    }
    
    aside .social{
       width: 104px;
       margin: 17px auto;
    }
    
    aside .social a{
       width: 16px;
       height: 16px;
       margin: 0 17px;
       text-indent: -9999px;
       float: left;
    }
    
    aside .social a.twitter{
       background: url('http://blabloo.com.br/v2/imgs/twitterAll.png') no-repeat;
    }
    
    aside .social a.facebook{
       background: url('http://blabloo.com.br/v2/imgs/facebookAll.png') no-repeat;
    }
    
    aside .copyright a{
       color: #ffffff;
       text-decoration: none;
    }
    
    aside .copyright a:hover{
       text-decoration: underline;
    }
    
    aside .copyright a{
       color: #465682;
    }
    
    aside .assinatura{
       width: 190px;
       margin: 0 auto;
       line-height: 2.5em;
    }
    
    aside .assinatura a {
       width: 91px;
       height: 13px;
       margin: 7px 0 0 0;
       text-indent: -9999px;
       background: ur('http://blabloo.com.br/v2/imgs/terreno.png') top left no-repeat;
       display: block;
       float: right;
    }
    
    aside .footer{
       width: 93%; 
       bottom: 0;
       position: absolute;
       
       padding: 10px;
       font-size: 10px; 
       font-family: 'Open Sans', sans-serif;
       color: #465682;
       text-align: center;
    }
    
    </style>
    
    
    <link rel="stylesheet" href="http://blabloo.com.br/v2/stylev2.css">
    <link rel="stylesheet" href="http://blabloo.com.br/v2/lightbox.css">
    <link rel="stylesheet" href="http://blabloo.com.br/v2/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://blabloo.com.br/v2/supersized.shutter.css" type="text/css" media="screen" />
    <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic,900italic' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    <div class="content clearfix lojas">
    		<aside class="sidebar">
    				<h1 class="logo"><a href="#" title="Peepou">Peepou</a></h1>
    				<p class="outono">Primavera verão 2013/2014</p>
    				<nav>
    						<ul>
    								<li><a href="#" title="">Home</a></li>
    								<li><a href="#" title="">Peepou</a></li>
    								<li><a href="#" title="">Coleção</a></li>
    								<li><a href="#" title="" class="selecionado">Lojas</a></li>
    								<li><a href="#" title="">Contato</a></li>
    						</ul>
    						<div class="social" style="height: 40px;"> <a href="#" title="Facebook" class="facebook" target="_blank">Facebook</a> <a href="#" title="Twitter" class="twitter" target="_blank">Twitter</a> </div>
    				</nav>
    				<div class="footer">
    						<p class="copyright">2013 www.peepou.com.br - validado <a href="http://validator.w3.org/check?uri=referer" target="_blank">html</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></p>
    						<p class="assinatura">desenvolvido por <a href="http://www.terrenodigital.com.br/" target="_blank">Terreno Digital</a></p>
    				</div>
    				<div class="background"></div>
    		</aside>
    		<section id="lojas">
    				<div style="width: 1008px;">
    						<div style="width: 360px; float: left;">
    								<h1>lojas</h1>
    								<h2>Centro</h2>
    								<p>Alfândega 100</p>
    								<p>Rua da Alfândega, nº 100, Stand 9</p>
    								<p>Tel.: (21) 22150762</p>
    								<h2>Niterói</h2>
    								<p>Center IV</p>
    								<p>Rua Galvão Peixoto, nº 182, loja 118</p>
    								<p>Tel.: (21) 27056240</p>
    								<h2>Barra da Tijuca</h2>
    								<p>Praia Shopping</p>
    								<p>Av. Olegário Maciel, nº 484, Stand 18</p>
    								<p>Tel.: (21) 24932311</p>
    								<h2>Copacabana</h2>
    								<p>Praia Shopping</p>
    								<p>Rua Figueiredo de Magalhães, nº 28, loja 03</p>
    								<p>Tel.: (21) 22366128</p>
    						</div>
    						<div style="float: left;"> <img src="http://blabloo.com.br/v2/imgs/foto-lojas.png" alt="" style="max-height: 100%; max-width: 100%;display: block;"/> </div>
    				</div>
    		</section>
    </div>
    </body>
    </html>
    Just run it n your browser while online to see the effect as I have changed urls to absolute for the demo.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I did notice that you needed OVERFLOW hidden in your content wrapper:
    .content.lojas{ overflow:hidden;} should at least solve part of the problem, that being the blueish bg.
    you know, you could also use a pseudo element for your aside bg, instead of actually having <div class="background"></div>

    Paul's solution is also quite brillian ( tho I hate depending on display:table; not just because of IE but because it screws with AP)

    What you want to do with the picture of the girl is just NOT LOGICAL... She is cropped at both the top and bottom. Which means we are forced to strech her to fit. This can be accomplished but will result in either much/not enough white space depending on the apsect ratio of the users viewport. Laws of physics,there is really nothing you can do about that. It was just port art direction/thinking.

    Still , if you arent bothered by that you could just add position:fixed; bottom:0; left:1080px ( or howevr far from the left edge of the viewport the right edge of your content is)

    <img src="http://blabloo.com.br/v2/imgs/foto-lojas.png" alt="" style="max-height: 100%; max-width: 100%; position:fixed; bottom:0; "/>

    while am at it, you could edit .background to have {position:fixed; left:0; width:350px;}


    You could also do what Paul suggested, but still is position fixed on the picture of the girl.


    hopefully that helps

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, it worked for me. The only problem is that the div. Footer should be flush to the bottom of the page and a margin-top of about 100px if there scroll. Is it possible?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want the footer at the bottom of the sidebar you can absolutely place it there but you will need to move it outside f the sidebar div and place it in relation to the main page wrapper as that is the only one that caries any height as I mentioned before.

    Code:
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" />
    <title>Peepou</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
    <style>
    html, body { height:100%; }
    body {/*min-height:100%; nope*/ }
    * {
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    a {
    	text-decoration: none;
    	color:#fff;
    }
    .content {
    	position:relative;
    	/* height: 100%;  No No No
       min-height:650px;*/
    			min-height:100%;
    	min-width: 1024px;
    	-webkit-transition: all 0.3s ease-out;
    	-moz-transition: all 0.3s ease-out;
    	-ms-transition: all 0.3s ease-out;
    	-o-transition: all 0.3s ease-out;
    	transition: all 0.3s ease-out;
    }
    li { list-style: none; }
    .home {
    	background: url('http://blabloo.com.br/v2/imgs/sombra.png') no-repeat 350px center, url('http://blabloo.com.br/v2/imgs/home.jpg') no-repeat top center;
    	-webkit-background-size: auto 100%;
    	-moz-background-size: auto 100%;
    	-o-background-size: auto 100%;
    	background-size: auto 100%;
    }
    .sobre {
    	background: url('http://blabloo.com.br/v2/imgs/sombra.png') no-repeat 350px center, url('http://blabloo.com.br/v2/imgs/bg.jpg') no-repeat top center;
    	-webkit-background-size: auto 100%;
    	-moz-background-size: auto 100%;
    	-o-background-size: auto 100%;
    	background-size: auto 100%;
    }
    .lojas {
    	background: url('http://blabloo.com.br/v2/imgs/sombra.png') no-repeat 350px center, url('http://blabloo.com.br/v2/imgs/bg.jpg') no-repeat top center;
    	-webkit-background-size: auto 100%;
    	-moz-background-size: auto 100%;
    	-o-background-size: auto 100%;
    	background-size: auto 100%;
    }
    /* SOBRE */
    
    #sobre { margin: 0 0 0 390px; }
    #sobre h1 {
    	font-family: 'Playfair Display', serif;
    	font-size: 60px;
    	color: #4b508d;
    	margin: 20% 0 40px 0;
    	font-weight: 900;
    	font-style: italic;
    	line-height: 1em;
    	letter-spacing: -2px;
    }
    #sobre p {
    	font-family: 'Open Sans', sans-serif;
    	font-size: 15px;
    	line-height: 1.9em;
    	color: #2f346a;
    	font-weight: 400;
    	margin: 0 0 40px 0;
    	float: left;
    }
    /* LOJAS */
    
    #lojas { margin: 0 0 0 390px; }
    #lojas h1 {
    	font-family: 'Playfair Display', serif;
    	font-size: 86px;
    	color: #4b508d;
    	margin: 27% 0 60px 0;
    	font-weight: 900;
    	font-style: italic;
    	line-height: 1em;
    	letter-spacing: -2px;
    }
    #lojas h2 {
    	font-family: 'Playfair Display', serif;
    	font-size: 28px;
    	color: #4b508d;
    	margin: 30px 0 10px 0;
    	font-weight: 900;
    	font-style: italic;
    	line-height: 1em;
    	letter-spacing: -1px;
    	text-transform: lowercase;
    }
    #lojas p {
    	font-family: 'Open Sans', sans-serif;
    	font-size: 14px;
    	line-height: 1.9em;
    	color: #4b508d;
    	font-weight: 400;
    }
    /* CONTATO */
    
    #contato { margin: 0 0 0 390px; }
    #contato h1 {
    	font-family: 'Playfair Display', serif;
    	font-size: 86px;
    	color: #4b508d;
    	margin: 25% 0 60px 0;
    	font-weight: 900;
    	font-style: italic;
    	line-height: 1em;
    	letter-spacing: -2px;
    }
    #contato h2 {
    	font-family: 'Playfair Display', serif;
    	font-size: 28px;
    	color: #4b508d;
    	margin: 30px 0 10px 0;
    	font-weight: 900;
    	font-style: italic;
    	line-height: 1em;
    	letter-spacing: -1px;
    	text-transform: lowercase;
    }
    #contato p {
    	font-family: 'Open Sans', sans-serif;
    	font-size: 14px;
    	line-height: 1.9em;
    	color: #4b508d;
    	font-weight: 400;
    }
    #contato .form {
    	width: 360px;
    	float: right;
    }
    #contato .form input[type=text], #contato .form input[type=email] {
    	width: 336px;
    	height: 16px;
    	padding: 12px;
    	font-family: 'Open Sans', sans-serif;
    	font-weight: 400;
    	font-size: 16px;
    	color: #465682;
    	margin: 0 0 13px 0;
    	background: rgba(251, 251, 251, 0.6);
    	outline: none;
    }
    #contato .form textarea {
    	width: 336px;
    	height: 95px;
    	padding: 12px;
    	font-family: 'Open Sans', sans-serif;
    	font-weight: 400;
    	font-size: 16px;
    	color: #465682;
    	background: rgba(251, 251, 251, 0.6);
    	margin: 0 0 7px 0;
    	resize: none;
    	outline: none;
    }
    #contato .form input[type=submit] {
    	font-family: 'Playfair Display', serif;
    	font-size: 18px;
    	color: #465682;
    	font-weight: 900;
    	font-style: italic;
    	text-transform: lowercase;
    	background: none;
    	cursor: pointer;
    	float: right;
    }
    input.error, textarea.error { border-left: 2px solid red; }
    #retorno {
    	font-family: 'Playfair Display', serif;
    	font-size: 18px;
    	color: #465682;
    	font-weight: 900;
    	font-style: italic;
    	text-transform: lowercase;
    	display: none;
    	float: left;
    }
    /* SIDEBAR */
    
    aside {
    	width: 350px;
    	/* height: 100%;  No*/
       z-index: 9999999;
    	/*position: absolute;*/
       position: relative;
    	float: left;
    }
    aside .background {
    	position: fixed;/* was absolute*/
    	top: 0px;
    	left: 0px;
    	bottom:0;
    	width: 350px;/* was 100%*/
    	/*height: 100%; no */
       background: url('http://blabloo.com.br/v2/imgs/sidebar.jpg') no-repeat bottom, url('http://blabloo.com.br/v2/imgs/sidebar2.jpg') repeat-y top;
    	z-index: -1;
    }
    aside .logo {
    	width: 275px;
    	height: 69px;
    	margin: 25% auto 20px;
    }
    aside .logo a {
    	width: 275px;
    	height: 69px;
    	background: url('http://blabloo.com.br/v2/imgs/logo.png') no-repeat;
    	display: block;
    	text-indent: -9999px;
    }
    aside .outono {
    	font-family: 'GaramondPremierPro', sans-serif;
    	text-transform: uppercase;
    	font-size: 14px;
    	text-align: center;
    	color: #465682;
    	text-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    }
    aside nav { margin: 50px 0 0 0; }
    aside ul li a {
    	font-family: 'EB Garamond', serif;
    	font-size: 20px;
    	color: #465682;
    	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    	text-decoration: none;
    }
    aside ul li a.selecionado, aside ul li a:hover { color: #162755; }
    aside ul li {
    	line-height: 3;
    	text-align: center;
    }
    aside .social {
    	width: 104px;
    	margin: 17px auto;
    }
    aside .social a {
    	width: 16px;
    	height: 16px;
    	margin: 0 17px;
    	text-indent: -9999px;
    	float: left;
    }
    aside .social a.twitter { background: url('http://blabloo.com.br/v2/imgs/twitterAll.png') no-repeat; }
    aside .social a.facebook { background: url('http://blabloo.com.br/v2/imgs/facebookAll.png') no-repeat; }
    .assinatura {
    	width: 190px;
    	margin: 0 auto;
    	line-height: 2.5em;
    }
    .assinatura a {
    	width: 91px;
    	height: 13px;
    	margin: 7px 0 0 0;
    	text-indent: -9999px;
    	background: ur('http://blabloo.com.br/v2/imgs/terreno.png') top left no-repeat;
    	display: block;
    	float: right;
    }
    .copyright a {
    	color: #ffffff;
    	text-decoration: none;
    }
    .copyright a:hover { text-decoration: underline; }
    .copyright a { color: #465682; }
    .sidebar { padding-bottom:100px }
    .footer {
    	width: 93%;
    	bottom: 0;
    	position: absolute;
    	width:330px;
    	z-index:9999999;
    	padding: 10px;
    	font-size: 10px;
    	font-family: 'Open Sans', sans-serif;
    	color: #465682;
    	text-align: center;
    }
    </style>
    <link rel="stylesheet" href="http://blabloo.com.br/v2/stylev2.css">
    <link rel="stylesheet" href="http://blabloo.com.br/v2/lightbox.css">
    <link rel="stylesheet" href="http://blabloo.com.br/v2/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://blabloo.com.br/v2/supersized.shutter.css" type="text/css" media="screen" />
    <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic,900italic' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    <div class="content clearfix lojas">
    		<aside class="sidebar">
    				<h1 class="logo"><a href="#" title="Peepou">Peepou</a></h1>
    				<p class="outono">Primavera verão 2013/2014</p>
    				<nav>
    						<ul>
    								<li><a href="#" title="">Home</a></li>
    								<li><a href="#" title="">Peepou</a></li>
    								<li><a href="#" title="">Coleção</a></li>
    								<li><a href="#" title="" class="selecionado">Lojas</a></li>
    								<li><a href="#" title="">Contato</a></li>
    						</ul>
    						<div class="social" style="height: 40px;"> <a href="#" title="Facebook" class="facebook" target="_blank">Facebook</a> <a href="#" title="Twitter" class="twitter" target="_blank">Twitter</a> </div>
    				</nav>
    				<div class="background"></div>
    		</aside>
    		<section id="lojas">
    				<div style="width: 1008px;">
    						<div style="width: 360px; float: left;">
    								<h1>lojas</h1>
    								<h2>Centro</h2>
    								<p>Alfândega 100</p>
    								<p>Rua da Alfândega, nº 100, Stand 9</p>
    								<p>Tel.: (21) 22150762</p>
    								<h2>Niterói</h2>
    								<p>Center IV</p>
    								<p>Rua Galvão Peixoto, nº 182, loja 118</p>
    								<p>Tel.: (21) 27056240</p>
    								<h2>Barra da Tijuca</h2>
    								<p>Praia Shopping</p>
    								<p>Av. Olegário Maciel, nº 484, Stand 18</p>
    								<p>Tel.: (21) 24932311</p>
    								<h2>Copacabana</h2>
    								<p>Praia Shopping</p>
    								<p>Rua Figueiredo de Magalhães, nº 28, loja 03</p>
    								<p>Tel.: (21) 22366128</p>
    						</div>
    						<div style="float: left;"> <img src="http://blabloo.com.br/v2/imgs/foto-lojas.png" alt="" style="max-height: 100%; max-width: 100%;display: block;"/> </div>
    				</div>
    		</section>
    		<div class="footer">
    				<p class="copyright">2013 www.peepou.com.br - validado <a href="http://validator.w3.org/check?uri=referer" target="_blank">html</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></p>
    				<p class="assinatura">desenvolvido por <a href="http://www.terrenodigital.com.br/" target="_blank">Terreno Digital</a></p>
    		</div>
    </div>
    </body>
    </html>
    I would also think about adding position:fixed to the foto-lojas.png which will allow it to scale with the page and also to remain fixed (or as Dresden suggests add as a background image to just show and reveal more as required).

    If I had time I l would also remove the empty background div element and place that background on the body instead to save an element but woulds mena changing a few other things around also.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •