 Css positioning |
  |
| ben2pop |
 Aug 17 2012, 11:08 AM
Post
#1
|
|
Group: Members Posts: 1 Joined: 17-August 12 Member No.: 17,619  |
Hey
I have an issue with my web page concerning the positioning of my divs... It is simple I have a header that I would like to be positionned fixed when people scroll down the web page . The issue is for the div that are following and that should be placed after the header. The thing is that my new div are going to the top of my page and I have to fix it using margin top trick and I know that it is not the good way .. I think that it may be related to position : absolute , fixed , relative ect.. Could you help me to figure it out ? Thank you so much My HTML : <!DOCTYPE html> <html> <head> <title>ArtZikit, L'art du changement</title> <link rel="stylesheet" href="artzikit.css" /> </head> <body> <div id="header"> <img id="logo" src="Files/logo-detoure%20copie.png" alt="logo-detoure%20copie" width="200" height="100" /> <div id="log"><button id="button1">Créer un compte</button><button id="button2">Se connecter</button></div> </div> <div id="nav"> <ul> <li><a href="#">Accueil</a> <li><a href="#">Le concept</a> <li><a href="#">Les photos Artzikit</a> <li><a href="#">La qualité ArtZikit</a> <li><a href="#">Personnalisation</a> </ul> </div> <div id="shadow"> </div> <div id="motto"><h1>Changer son interieur n'aura jamais été aussi facile !</h1> </div> </body> </html> My CSS: body{ background-image: url(Files/couch-red-architecture-living-room-%E3%82%BD%E3%83%95%E3%82%A1%E3%83%BC-%E8%B5%A4-%E5%BB%BA%E7%AF%89-%E3%83%AA%E3%83%93%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%A0blur.jpg); background-size: 100%; background-repeat: no-repeat; width:100%; margin:0; padding:0; } #header{ position: fixed; width:100%; color:black; margin: 0; height:100px; background: rgb(255, 255, 255); /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } #logo{ margin-left: 40px; } #nav { float:left; padding: 13px 10px 10px 0; margin-top: 100px; position:fixed; width: 100%; background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } #nav ul { float:left; padding:0; margin:0; letter-spacing:1px; list-style:none; text-transform:uppercase; } #nav ul li { float:left; margin:0 10px 0 15px; font:13px/18px 'ProximaNova-Bold', Arial, Helvetica, sans-serif; } #nav ul a { color:#ffe2e2; } #nav ul a:hover { color: #000; text-decoration: none; } #shadow { background: url(Files/header-shadow.png); margin-top:143px; margin-left:-1px; padding: 0; position:fixed; width: 100%; height: 20px; } #log{ float:right; } #log{ margin-top:25px; margin-right:25px; } #button1{ font-size:80%; padding:10px 20px; cursor:pointer; text-shadow:#fff 1px 1px 0; border:1px solid #aaa; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background:#ffc800; background:-webkit-gradient( linear, left top, left bottom, from(#ffc800), to(#ffd751) ); background:-moz-linear-gradient( top, #ffc800, #ffd751 ); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#92d46a', endColorstr='#dcf9ca' ); } #button2{ margin-left: 25px; font-size:80%; padding:10px 20px; cursor:pointer; text-shadow:#fff 1px 1px 0; border:1px solid #aaa; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background:#1938ff; background:-webkit-gradient( linear, left top, left bottom, from(#1938ff), to(#506aff) ); background:-moz-linear-gradient( top, #1938ff, #506aff ); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#92d46a', endColorstr='#dcf9ca' ); } #button1:hover { color:#236baf; background:#ff9e00; background:-webkit-gradient( linear, left top, left bottom, from(#ff9e00), to(#fce598) ); background:-moz-linear-gradient( top, #ff9e00, #fce598 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9e00', endColorstr='#fce598' ); -webkit-animation-name: none; -webkit-box-shadow:0 0 5px rgb(255,24,0); } #button2:hover { color:#236baf; background:#081cb4; background:-webkit-gradient( linear, left top, left bottom, from(#081cb4), to(#3452ff) ); background:-moz-linear-gradient( top, #081cb4, #3452ff ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#081cb4', endColorstr='#3452ff' );# -webkit-animation-name: none; -webkit-box-shadow:0 0 5px rgb(0,0,248); } #motto{ color:white; position: absolute; text-align: center; margin:200px; } |
  |
 
|
| pandy |
Aug 17 2012, 11:31 AM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You must use some margin or padding for the fixed header to live in. For example top padding for BODY should work in this case.
|
|
|
|
| Jaycbrf4 |
Aug 17 2012, 12:47 PM
Post
#3
|
|
Member Group: Members Posts: 33 Joined: 9-August 12 Member No.: 17,587 |
If you are using HTML5 doctype, you should throw in some HTML5 elements.
Like <header><nav><footer> |
|
|
|
| Darin McGrew |
Aug 18 2012, 01:50 AM
Post
#4
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE If you are using HTML5 doctype, you should throw in some HTML5 elements. Just keep in mind that a lot of people still use browsers that don't understand the new HTML5 elements.Like <header><nav><footer> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd April 2024 - 11:27 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC