SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Restrict Website Width

    Hi,

    I'm trying to restrict the width of the website. For example, on tiffany <snip/>, it spans across the whole page - but I want it so that it has a width restriction of 'x'px width wise. The height will be auto/fits on the page.

    Here's my CSS and an index.html test page:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>
        Site heading
    </title>
      
    	<link href="style.css" type="text/css" rel="stylesheet" />
    
    </head>
    
    <body>
    
    
    <div class="content">
    		<div class="top_block block_1">
    			<div class="content">
    			<a href="http://www.site.co.uk">
    			<center><img style="border:0;" src="banner.jpg"></a><br>
    			</div>
    		</div>
    		<div class="top_block block_2">
    			<div class="content">
    		<marquee behavior="scroll" direction="right" onmouseover="this.stop();" onmouseout="this.start();"><img src="images/1.gif"><img src="images/2.gif"><img src="images/3.gif"><img src="images/4.gif"></marquee>
    		</div>
    		<h1>Heading</h1>
    		Content text here
    		
    		<center>
    		<br><br>
    		<img style="border:0;" src="footer.jpg">
    		
    		
    		<div class="bottom_block block_3">
    			<div class="content">
    			
    			Footer content here
    			
    			
    			</div>
    		</div>
    	</div>	
    	
    </body>
    </html>

    HTML Code:
    html, body {
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	height: 100%; 
    	color: #FFFFFF;
    	text-align:center;
    
    }
    
    .content {
    	min-height: 100%;
    	position: relative;
    	overflow: auto;
    	z-index: 0; 
    	background-color: #000000;
    	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    
    }
    
    .background {
    	position: absolute;
    	z-index: -1;
    	top: 0;
    	bottom: 0;
    	margin: 0;
    	padding: 0;
    }
    
    .top_block {
    	width: 100%;
    	display: block; 
    }
    
    .bottom_block {
    	position: absolute;
    	width: 100%;
    	display: block;
    	bottom: 0; 
    }
    
    .left_block {
    	display: block;
    	float: left; 
    }
    
    .right_block {
    	display: block;
    	float: right; 
    }
    
    .center_block {
    	display: block;
    	width: auto; 
    }
    
    .block_1 {
    	width: 100%;
    	height: 230px;
    	background-color: #000000;
    
    }
    
    .block_2 {
    	width: 100%;
    	height: 30px;
    	background-color: #000000;
    	color: #FFFFFF;
    	text-align:center;
    
    }
    
    .block_3 {
    	width: 100%;
    	height: 80px;
    	background-color: #000000;
    	color: #FFFFFF;
    }
    And also on the Swarovski site, I like the scrolling banner, <snip/>, could someone please advise if there are any scripts like that?

    Thank you.
    Last edited by Mittineague; Feb 9, 2014 at 10:09. Reason: removing unnecessary links

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,800
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to sitepoint , Coder!

    Code:
    .content {
    	min-height: 100%;
    	position: relative;
     	z-index: 0; 
    	background-color: #000;
    	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    	width:960px;  /*restircts width*/
    	display:  inline-block; /*  to center elements ( in combination with your body{ text-align:center}) and contain floats)*/
    
    }
    should center and limit the width of your site.

    BTW putting the class:
    .top_block {
    width: 100%;
    display: block;
    }
    on block elements ( Ps, DIVs, LIs, ULs,OLs, etc) is redundant ( and sometimes harmful) all these elements display:block by default which also mean they span 100% of their parent container by default. (see redundant) If you declare width:100% and then happen to add padding then your element will end up being bigger than 100% and overflow its container.

    hope that helps

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the welcome!

    Thanks for your help, that is great. The only problem is when I'm browsing on a monitor which is 13'', the page has scrollbars (horizontal and vertical) within the site because it's too small to fit the entire width of the site...any fixes for that please? Thanks!

    Quote Originally Posted by dresden_phoenix View Post
    Welcome to sitepoint , Coder!

    Code:
    .content {
    	min-height: 100%;
    	position: relative;
     	z-index: 0; 
    	background-color: #000;
    	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    	width:960px;  /*restircts width*/
    	display:  inline-block; /*  to center elements ( in combination with your body{ text-align:center}) and contain floats)*/
    
    }
    should center and limit the width of your site.

    BTW putting the class:
    .top_block {
    width: 100%;
    display: block;
    }
    on block elements ( Ps, DIVs, LIs, ULs,OLs, etc) is redundant ( and sometimes harmful) all these elements display:block by default which also mean they span 100% of their parent container by default. (see redundant) If you declare width:100% and then happen to add padding then your element will end up being bigger than 100% and overflow its container.

    hope that helps

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by coder14 View Post
    the page has scrollbars (horizontal and vertical) within the site because it's too small to fit the entire width of the site...any fixes for that please? Thanks!
    You have a min-width set on the #wrapper of 984px, and 20px padding on each side, so whenever the viewport is narrower than 1024px, there will have to be horizontal scroll bars.

    You need the vertical scroll bars for when the web page is taller than the viewport. That's standard and unavoidable.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    That's standard and unavoidable.
    but media queries
    maybe

    And also on the Swarovski site, I like the scrolling banner, <snip/>, could someone please advise if there are any scripts like that?
    You mean, so you don't have to have nasty outdated deprecated trashy code like <marquee>? Why yes, yes there is.

    Assuming your marquee-info has markup like this:
    Code:
    <div class="SOME_CLASS">
            <ul>
                    <li>TEXT!</li>
                    <li>M0AR TEXT!</li>
                    <li>AND YET SOME MORE</li>
                    <li>AND IT JUST KEEPS COMING</li>
                    <li>WAIT FOR IT...</li>
                    <li>YES THERE'S MORE!!!!!!!</li>
            </ul>
    </div>
    Then you can have CSS like this:
    Code:
    .SOME_CLASS {
      width: some-width;
      height: if you want a height;
      overflow: hidden; //if you use floats like this and don't want anyone wrapping underneath to show.. works if using "height" above. Be careful.
    }
    .SOME_CLASS ul {
      position: relative;
      left: 100%;
    }
    
    //using this to make ul wrap floated children. Use whatever float-containment method you likes.
    .SOME_CLASS ul:after {
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    .SOME_CLASS li {
    //assuming lists already have margin: 0 padding0 and no list-styles, etc...
      float: left;
      padding-right: 1.6em;
      line-height: 1.3;//or whatever
      white-space: nowrap;
    }
    Then you could use some JS/jQueery like this (using jQuery here only because it's what I happened to have it in; use what you want).
    Code:
     var container = $('.SOME_CLASS'),
                containerwidth = container.width(),
                ticker = container.find('ul'),
                tickerwidth = 1;
                
            ticker.find('li').each(function(i){
                tickerwidth += $(this, i).outerWidth(true);
            });
    
            ticker.width(tickerwidth);     
            var totalwidth = containerwidth + tickerwidth,
                speed = totalwidth/0.09; //make up some number for 0.09
    
            function scrollz(speed, distance){
                ticker.animate({left: '-='+ distance},
                              speed, 'linear', function(){
                                      ticker.css('left', containerwidth);
                                      scrollz(totalwidth, speed);
                });
            }
            scrollz(speed,totalwidth);       
    
    //wanna make it pause on hover? That is a good idea for usability.
            ticker.mouseenter(function() {
                      $(this).stop();
                  }).mouseleave(function() {
                    var roomleft = $(this).offset.left + tickerwidth,
                        timeleft = roomleft/0.09;
                    scrollz(timeleft,roomleft);
            });
    Something like that. There are others out there you could search around some.

    Git ridda that <center> tag junk. Who the hell taught you that? They should feel much shame and commit seppuku


    Friendly tip #3:
    Code:
    <!DOCTYPE html>
    <html lang="en"> <-- because setting the language at the beginning is freaking awesome for screen readers and other software reading your pages out loud. Obviously I'm assuming your page is Engrish. 
    <head>
    <meta charset="utf-8"> <-- because now the browser doesn't have to get partway through your page, realise the page is not the charset it had guessed, and start all over again... of course this is redundant if your hosting server properly sends charset headers, but unless it's your very own server sitting in your bedroom where you can see if it behaves, this is still a good idea.
    <title>
        Site heading
    </title>
      
    	<link href="style.css" type="text/css" rel="stylesheet" />
    
    </head>


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
  •