SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Location
    Croatia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question stretched header and footer bg in 960grid

    First of all, hello to everyone.

    After I read a few books considering html, css, javascript, php and also million of web tutorials and used great sites like codeacademy and treehouse I decided to start practicing much more.

    So, just like I expected I ran into a problem right on the beginning of crafting html/css layout.
    I must say that I found same questions on stack overflow but it really didnt helped me at all.

    I use 960 grid, 12 columns to center my content in the middle, basicly I want to achieve something similiar to "https://tutsplus.com/", also I can see that this kind of website design is quite popular now. (content, logo, nav -> all centered) and colors streched through screen.

    So this is my basic html
    Code:
    <body>
    	<div id="container">
    		<div id="header">
    			<p id="logo"> LOGO </p>
    			<ul id="nav">
    				<li><a href="index.html">Home</a></li>
    				<li><a href="portfolio.html">Portfolio</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div>
    		
    		<div id="content">
    
    			<h1>Lorem ipsum dolor sit amet.</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus.</p>
    
    			<h2>Lorem ipsum dolor sit amet.</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, cum!</p>
    
    			<h2>Lorem ipsum dolor sit amet.</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, aperiam?</p>
    			
    		</div>
    
    		<div id="footer">
    			<p id="copyright">&copy; Lorem Ipsum </p>
    		</div>
    
    	</div>
    </body>
    So, what do you think that is the best way using css to stretch header and footer background images while still keeping all content fixed with width of 960px . Any help is much or advice is appriciated. Please, don't just give me pure code, because I really want to learn the theory behind this. I know there are a lot ways of doing this, but which one is "professional" ?
    Thanks in advance.

  2. #2
    SitePoint Member
    Join Date
    Nov 2012
    Location
    Croatia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone ? It could be that I didnt format my question in a best way, but im still newbie so please, I can't move on until I resolve this issue.. and I really see that this kind of design is very common today.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Location
    Croatia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    solved, used <header> and <footer> outside container and it works perfectly.
    Weird that nobody didn't answer, maybe the question was too much easy and obvious to solve, so apologize if its not useful at all.


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
  •