Small css problem :/

Discussion in 'CSS' started by Mackos, Aug 27, 2010.

0
  1. #1
    Hi guys!
    I have some troubles with slicing my template from psd into html.
    Everything is ok, when browser's window is in normal size, but when I resize it into smaller window, white background show's up:
    [​IMG]

    What causing this? And how to resolve this?

    This is my html code:
    <body>
<div id='top'>
	<div id='logo'><p style='logo'>Tani Serwis</p>
	</div><!-- koniec logo -->
	
	<div id='navi'>
	<ul style='navbar'>
	<li>Strona główna</li>
	<li>Zamów kuriera</li>
	</ul>
	</div><!-- koniec navi -->
</div> <!-- koniec 'top'-->
	<div class='divider'></div>
<div id='header'>
	<h1>Witaj na stronie</h1>
	<p class='headerek'>
	<em>Tutaj jakiÅ› tekst dodatkowy</em>
	</p>
		<img src='truck.png' style='margin-left: 90px;  float: left; clear: right; '>
	<div id='oferten'>
	<b style="font-face: Verdana; font-size: 18px;">Sprawdź naszą ofertę</b><br>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem tellus, dapibus eu bibendum a, tincidunt vel metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris lacinia dapibus leo, vitae pellentesque orci porttitor sit amet. 
<br><br>Vivamus non justo sed ipsum varius imperdiet eu vitae augue. Fusce sed nisi libero. Nullam rutrum nibh malesuada nisl convallis non pharetra neque sagittis.
	<div id='buttony'>
	<a href='#'><img src='zarej.png'></a>
	<a href='#'><img src='ceny.png'></a>
	</div><!--koniec buttony -->
	</div><!-- koniec oferten -->
</div><!-- koniec header -->
<div id='podheder'></div>
<div id='bodys'>
	<div id='lewo'>
	<div id='lewo-first'>
	<h3><img src='wyslijbtn.png' style='padding-left: 90px; '> Wyślij paczkę już teraz</h3>
	</div><!-- koniec lewofirs -->
			<div id='szybki_kontak'>
			</div><!-- koniec szybki kontakt -->
	</div><!-- koniec lewo -->
	<div id='prawo'>
	<h3>Zamów kuriera</h3>
	<a href='#'><img src='#'></a>
	<p>Lorem ipsum</p>
	</div><!-- koniec prawo -->
<div><!-- koniec bodys -->
<div id='footer'>
text
</div><!-- koniec footer -->
</body>
    HTML:
    And CSS:
    * {
	margin:0; padding:0; font-size:100%;
	}
body	{	background: white;
	}
img	{ border: none;
	}
h1	{ font-family: Verdana; color: white; font-size: 24px; padding-top: 30px; padding-left: 100px;
	}
h3	{ font-family: Verdana; font-size: 18px; padding-top: 30px; padding-left: 100px;
	}
#top	{	background: #83B772 repeat;
			height: 80px;
		}
.divider	{ background: url(divider.png) repeat-x;
				height: 2px;
				width: 100%;
			}
#header	{	background: url(heder.jpg) repeat-x;
			height: 371px;
			border-bottom: 1px solid black;
		}
#podheder	{	background: url(podheder.jpg) repeat-x;
				height: 149px;
			}
.headerek	{ color: white;
				padding-left:100px;
				font-family: Verdana;
			}
#buttony	{				top: 415px;
			}
#oferten  	{ 	position: absolute;
				left: 600px;
				padding-top: 50px;
				color: white;
				width: 500px;
			}
#lewo-first	{	clear: left;
			}
    Code (markup):
     
    Mackos, Aug 27, 2010 IP
  2. osmasters

    osmasters Well-Known Member

    Messages:
    453
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    100
    #2
    You can give whatever color you want to show in body tag.

    body { background: green;
    }
     
    osmasters, Aug 27, 2010 IP
  3. Mackos

    Mackos Well-Known Member

    Messages:
    364
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #3
    No, that's not the point.
    Those green bars should be repeated until end of width site, there should be no white space.
     
    Mackos, Aug 27, 2010 IP
  4. Piotr Aszoff

    Piotr Aszoff Active Member

    Messages:
    38
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    53
    #4
    You can add some extra div elements, for example:
    #topright{
    background:#83b773 repeat;
    height:80px;
    position:absolute;
    left:600px;
    width:500px;

    }
    #headerright{
    background: url(heder.jpg) repeat-x;
    position:absolute;
    left:600px;
    height:371px;
    width:500px;
    }
    And in the html file just a few lines:

    <div id='top'>
    <div id="topright"></div>
    <div id='logo'><p style='logo'>Tani Serwis</p>

    </div><!-- koniec logo -->

    <div id='navi'>
    <ul style='navbar'>
    <li>Strona główna</li>
    <li>Zamów kuriera</li>
    </ul>
    </div><!-- koniec navi -->
    </div> <!-- koniec 'top'-->
    <div class='divider'></div>
    <div id='header'>
    <div id="headerright"></div>
    <h1>Witaj na stronie</h1>
    <p class='headerek'>
    <em>Tutaj jakiÅ› tekst dodatkowy</em>
    </p>
    <img src='truck.png' style='margin-left: 90px; float: left; clear: right; '>
    <div id='oferten'>
    <b style="font-face: Verdana; font-size: 18px;">Sprawdź naszą ofertę</b><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem tellus, dapibus eu bibendum a, tincidunt vel metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris lacinia dapibus leo, vitae pellentesque orci porttitor sit amet.
    <br><br>Vivamus non justo sed ipsum varius imperdiet eu vitae augue. Fusce sed nisi libero. Nullam rutrum nibh malesuada nisl convallis non pharetra neque sagittis.
    <div id='buttony'>
    <a href='#'><img src='zarej.png'></a>
    <a href='#'><img src='ceny.png'></a>
    </div><!--koniec buttony -->
    </div><!-- koniec oferten -->
    </div><!-- koniec header -->

    Hope it helps, Peter.
     
    Piotr Aszoff, Aug 31, 2010 IP