Sun, 2013-03-31 20:23
Hello great folks, my wish is to make my website design look like this: Klopp.no
Everything I have coded so far has been from scratch, and I haven't looked into the source code of Klopp.no yet, just because I want to learn.
So if you see the top of the content on the website is kinda overlapping the header in a neat and awesome way, then ending halfway down. My wish is to make a copy of this website without any function, just the design. Just for personal learning. But I can't seem to find out how to do this.. Help please..
Here is my HTML so far:
HTML:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Skolen Prosjekt 3</title> <meta name="description" content="This website I created from scratch." /> </head> <body> <div class="header_wrap"> <div class="header"> </div> </div> <div class="seperation_bar_head"></div> <div class="content_wrap"> <div class="content"> </div> </div> <div class="classfulbar"></div> <!-- Creates a 1 pixel height, 100% width bar that creates a nice effect in the seperation. --> <div class="seperation_bar_foot"></div> <div class="footer_wrap"> <div class="footer"> <div class="partners"> <h2>Partnere</h2> <img src="./images/nets_logo_trans_small.png" width="150" height="53" /> </div> <p> Alle rettigheter forbeholdes ® 1994 - 2012 Klopp AS » Web & Software Engineering. <a href="javascript:return false;">Betingelser for bruk</a> <br /> Farmannsveien 48, 3125 Tønsberg - Telefon: 33 31 28 00 - <a href="javascript:return false;">post@klopp.no</a> </p> </div> </div> </body> </html>
And here's my CSS
CSS:
body { background-color:#000; padding:0; margin:0; font-family:Helvetica,Arial,sans-serif; } .header_wrap { margin-top:8px; background-color:#21152a; width:100%; height:399px; border-top:1px solid #4d4455; background-image:url(./images/header-overlay.jpg); background-repeat: no-repeat; background-position:center top; display:block; } /* The bar that seperates the header from the content */ .seperation_bar_head { background-color:#e57133; width:100%; height:9px; border-top:1px solid #efaa85; border-bottom:1px solid #21152a; display:block; } /* The bar that seperates the footer from the content */ /*Needed this for the same effect as on header seperation bar.*/ .classfulbar { background-color:#21152a; width:100%; height:1px; } /*Creates a wrap around the content and a sweet background. */ .content_wrap { background-color:#e5e5e5; height:800px; width:100%; } .content { width:940px; height:100%; position:relative; margin:0 auto 0 auto; background-color:#000; } /*********************/ /********************/ /*******EPIC********/ /*****AWESOME******/ /*DIDRIK ELIASSEN*/ /****************/ /***************/ /* EVERYTHING BELOW THIS LINE IS ABOUT THE FOOTER */ /* The bar that seperates the footer from the content */ .seperation_bar_foot { background-color:#e57133; width:100%; height:9px; border-top:1px solid #efaa85; border-bottom:1px solid:#21152a; display:block; } /* Creates a wrap around the footer and a sweet background. */ .footer_wrap { background-color:#21152a; width:100%; height:262px; background-image:url(./images/header-overlay.jpg); background-repeat: no-repeat; background-position:center top; display:block; } /* Controls what happens in the footer, placement etc. */ .footer { padding:0; padding-top:8px; display:block; width:940px; margin:auto; text-align:center; } /* Box wrap around partners*/ .partners { padding:2px 14px 4px 14px; margin:0; background-color:#170b21; width:912px; height:130px; display:block; border-radius:6px; color:#cccccc; text-align:left; } .partners h2 { margin: 15px 0px; font-weight:normal; font-size:140%; letter-spacing:1px; } .footer p { color: rgb(221, 221, 221); font-size:14.5px; margin-top:32px; line-height:2em; } .footer p a { text-decoration:none; color: rgb(227, 97, 29); } .footer p a:hover { color:#FFF; }
Sun, 2013-03-31 20:29
#1
How far i've come
http://imgur.com/NlXN9DM
The black area is currently my content
Tue, 2013-04-02 08:39
#2
FIXED
.content { border-radius:10px 10px 0px 0px; width:940px; height:110%; position:absolute; margin:0 auto 0 auto; background-color:#e5e5e5; left:320px; top:-50px; z-index:20; box-shadow: 0 10px 0 #e5e5e5, 0 -5px 10px rgba(0, 0, 0, 0.7); }
This fixed it.