Restrict Website Width

HTML & CSS
1

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:

<!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, 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.

2

Welcome to sitepoint , Coder!

.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

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!

4

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

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:


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


.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).


 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:

<!DOCTYPE html>
<html [b]lang="en"[/b]> <-- 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>
[b]<meta charset="utf-8">[/b] <-- 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>