SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  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


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
  •