SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member fritzoi's Avatar
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to remove padding to the right when window is resized

    Hi Guys,

    Is there any one here can help me how to fix or removed a padding in the right side when the window is re-sized or the screen is below 900px i think?
    Please see the attached file for the screenshot space.png
    here is the css code for that footer
    footer{
    background-color:#181818;
    height:32px;
    margin:0;
    padding:0;
    }

    Please help me to figure out this problem. Thank you in advance

    Kind regards,
    fritzoi

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi fritzoi . Welcome to the forums.

    It's hard to tell from just an image, but often you get this effect if you haven't set a min-width on the element (so give the footer a min-width equal to the width of the container). If that doesn't help, post a link.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    How is the space in that picture interfering with the "look" that you would like to have?

    Normally, a footer is a block that extends completely across the bottom of the page. In your code, the footer has been given a height of 32px and no padding, so one would expect the block to be 32px tall and stretch the full width of the page. Your picture shows the footer behaving the way we would expect it to.

    What do you want to see?

    We really need a link to the page.

  4. #4
    SitePoint Member fritzoi's Avatar
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

    This is not yet live in the internet, I just created this in my desktop computer.

    Anyway here are the codes.
    index.html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Limo vip bus</title>
    	<link rel="stylesheet" type="text/css" href="style.css"/>
    	
    </head>
    <body>
    	<section class="globalwidth">
    		<header >
    			<a href="#"><img title="" alt="" src="images/ts-limo-vip-bus-logo.png"></a>
    			<nav class="right">
    				<ul>
    					<li><a href="#">Home </a></li>
    					<li><a href="#">About </a></li>
    					<li><a href="#">Rates</a></li>
    					<li><a href="#">Gallery</a></li>
    					<li><a href="#">Blog</a></li>
    					<li><a href="#">Contact</a></li>
    				</ul>
    			</nav>
    		</header>
    	
    		<section class="slider">
    			<div>
    				<img src="images/slider.jpg"/>
    			</div>
    			<div class="textbg clr">
    				<div class="left left-pad">
    					<h2>Want to book the VIP Bus</br>
    					for your next party?</h2>
    				</div>
    				<div class="right right-pad">
    					<p>CALL US KNOW!</p>
    					<h3>123-456-7890</h3>
    				</div>
    			</div>
    		</section>
    		<section>
    			<div class="left artcle-left">
    				<h1 class="yellow">Limo VIP bus services in Sarasota</h1>
    				<p>
    					Providing ecxeptional service to 6 counties in West/Central Florida which include: Hillsborough, Manatee, Pasco, Pinellas, Polk, Sarasota Counties, and serving Bradenton-Clearwater-Lakeland-Port Richey-Sarasota-St.Pete-Tampa Areas. We specialize in Bachelor/Bachelorette parties but we also provide services for Weddings, Proms, Theme Parks, Corporate Birthday, Night Out, Tailgate and Casino Outings as well as other types of events.
    				</p>
    				<p>
    				Limo VIP Bus is the official bus for The Penthouse Club (Gentlemans's Club and Steakhouse) as well as The Pink Pony (Gentleman's Club) of Tampa, Florida.
    				</p>
    				<p>
    				We bring you to your choice of destination and straight to the VIP section. Be with people who you would love to party with without the hassle of jumping from one place to another. Best of all  get to enjoy a safe, convenient and unique party all-night in a luxury bus meant only for VIPs.
    				</p>
    				<p>
    				Experience a party bus unlike any other. Board the TS Limo VIP Bus. Contact us today!
    				</p>
    			</div>
    			<div class="left artcle-right">
    				<h2 class="yellow">What to expect inside?</h2>
    				<ul>
    					<li>Spacious bus that can accommodate up to 24 guests</li>
    					<li>High back seats for your best comfort</li>
    					<li>A 37-inch flat screen TV</li>
    					<li>High-pumping advanced surround sound audio system with subwoofers</li>
    					<li>iPod dock to play your very own music collection</li>
    					<li>DVD and CD players</li>
    					<li>Built-in bars with two coolers  each can carry 36 cans</li>
    					<li>Thirty built-in cup holders</li>
    					<li>Fantastic accent lighting to get you in the mood</li>
    					<li>Stripper pole (can be removed upon request)</li>
    				</ul>
    				<h2 class="yellow">Why Choose Limo VIP Bus?</h2>
    				<ul>
    					<li>Regulated by the Florida Department of Transportation</li>
    					<li>Alcohol only allowed if ALL passengers are over 21 years old</li>
    					<li>Carries limo bus commercial insurance for the utmost safety of the passengers</li>
    				</ul>
    			</div>
    		</section>
    		
    	</section>
    	<div class="clr"></div>
    	<footer>
    		<div>
    		<p> Copyright 2013 <span>Limo VIP Bus</span>. All Right Reserved</p>
    		</div>
    	</footer>
    </body>
    </html>
    css
    Code:
    body{
    background:url("images/slider-bg.gif")no-repeat scroll center top #212020;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px;
    padding:0;
    margin:0;
    vertical-align: baseline
    outline: 0;
    }
    
    .globalwidth{
    width:1024px;
    margin:0 auto;
    }
    .right{
    float:right;
    }
    .left{
    float:left;
    }
    .clr{
    clear:both;
    }
    h1 , h2{
    font-weight:normal;
    }
    
    header{
    height:119px;
    }
    
    nav {
    width:550px;
    height:40px;
    /*border:1px solid #fff;*/
    margin-top:59px;
    }
    nav ul{
    list-style:none;
    display:inline-block;
    }
    nav ul li{
    float:left;
    /*border:1px solid #fff;*/
    margin:none;
    border-right:2px dotted #fff;
    
    }
    nav ul li:last-child{
    border:none;
    }
    
    nav ul li a{
    padding:0px 18px;
    text-decoration:none;
    color:#fff;
    }
    nav a:hover{
    color:#bea605;
    }
    
    .slider{
    height:380px;
    }
    .textbg{
    background:url("images/text-bg.jpg")no-repeat;
    width:1023px;
    height:115px;
    margin-top:-5px;
    }
    .left-pad{
    padding-left:18px;
    margin-top: -12px;
    }
    .right-pad{
    padding-right:18px;
    }
    .right-pad p{
    	font-size: 26px;
        font-weight: 700;
        margin-right: 3px;
        margin-top: 18px;
        text-align: right;
    }
    .right-pad h3{
    	color: #bea605;
        font-size: 60px;
        font-weight: bold;
        margin-top: -38px;
    }
    .textbg h2{
    font-size:34px;
    }
    
    .yellow{
    color:#bea605;
    font-size:27px;
    margin: 10px 0 -9px;
    }
    .artcle-left{
    width:518px;
    }
    .artcle-right{
    width:451px;
     margin: -39px 0 0 48px;
    }
    .artcle-right  ul li{
    list-style-image:url("images/check.png");
    margin-bottom:5px;
    }
    footer{
    background-color:#181818;
    height:32px;
    margin:0;
    padding:0;
    }
    footer span{
    color:#bea605;
    }
    
    /*@media (max-width:760px){
    	footer{
    		width:autho;
    		padding:0px;
    		margin:0px;
    		float:none;
    	}
    }*/

  5. #5
    SitePoint Member fritzoi's Avatar
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ralph.m Your awesome
    adding min-width in the element is working

    Thank you so much guys for helping me, I really appreciate your help

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Would you guys mind helping me see what the problem is and the fix? I'm still not clear about what's supposed to happen. I hate to be shallow.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    Would you guys mind helping me see what the problem is and the fix?
    I'm glad the solution worked, as I was actually thinking of this basic situation. Run this code in your browser:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    .outer {background: #30353b;}
    .inner {color: white; width: 800px; margin: 0 auto;}
    </style>
    	
    </head>
    <body>
    
    <div class="outer">
    	<div class="inner">
    	<p>Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. </p>
    	</div>
    </div>
    
    </body>
    </html>
    Narrow your browser to less than 800px, so that there is a scroll bar at the bottom. Then scroll right. You see that the .outer bg color has disappeared where it was hidden. A fix for that is to add:

    Code:
    .outer {min-width: 800px;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thanks, Ralph, very much. A perfect explanation and demo.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great, no probs, Ron. I whipped it up as I was being hurried out the door by the better half.

    It's amazing how many sites suffer from this problem, though, such that the background color of elements is wiped if the browser window is narrowed too much and sideways scrolling is needed.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •