<style type='text/css'>
body {
width:100%;
background:#097054;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#con {
margin-right:auto;
margin-left:auto;
width:80%;
}
#navbar {
background-color:#00F;
}
</style>
</head>
<body>
<div id='navbar'>
<div id='con'>
Hey
</div>
</div>
</body>
Whatever I try, the div navbar doesn't stick to the top of the page. When I try fixed or absolute positioning it fails to cover a little portion on the left. Either that, or it doesn't stick to top of the window at all.
#navbar {
background-color:#00F;
position:fixed;
top:0;
left:0;
width:100%;
}
When using position fixed also give it a width. I gave it width 100% so its the full width of the screen.
Okay so if you change the position to absolute it also works.
If you want to change the position to relative you also need to add this css
*{
margin:0;
padding:0;
}
this clears preset styles on elements. usually the browser does this.
Related
It is easy to absolutely position text relative to a div when the div is aligned with the left side of a browser window. The width of the browser window can change size and the text stays in the correct position. But I have a fixed width web page that is always centered in the browser window. I have a div that is centered on the web page regardless of the width of the browser window. This div contains an image. I need to absolutely position text on top of the image. My code is:
<div id="wrapper">
<div> <img style="max-width:100%; max-height:100%; display:block;" src="../../assets/logos/skitours_title_756w_100h.gif" alt="Website logo">
<div class="tour_title"> <h3>This is the title</h3> </div>
</div>
</div>
#wrapper {
width:756px;
height:auto;
margin: auto auto;
margin-bottom:5px;
}
.tour_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#696969;
display:block;
position:absolute;
width:500px;
top:40px;
left:20px;
}
That results in the image being centered on the web page regardless of the width of the browser window.
But the absolute positioning of the text (tour_title) is relative to the left side of the browser window, not the image. How do I correct the code so that the text is relative to the webpage regardless of the width of the browser window?
If I understand correctly, you want to make the text relative to the image.
If that's the case, you should:
Make the wrapper position: relative so the "absolute" text references it instead of the browser/webpage.
Make the text div text-align:center; and width:100%; for it to align at the center of the wrapper.
Make the top: whatever you wish.
Something like this:
#wrapper {
width:756px;
height:auto;
margin: auto auto;
margin-bottom:5px;
border-style:solid;
position:relative;
}
.tour_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#ff00ff;
position: absolute;
text-align:center;
width:100%;
top: 50%;
}
I want my logo div down further, not exactly center, but about there. When I add a margin to the top it pushed my menu-bar div down too. I tried adding a padding instead by that didn't move the div. I'm guessing because there isn't actually anything in it right? Is there a way to move that div down and over a little without affecting the menu-bar div?
<div id="Container">
<div id="logo"></div>
<div id="menu-bar">
<ul>
<li><a>start</a></li>
<li><a>end</a></li>
<li><a>info</a></li>
<li><a>score</a></li>
<li><a>reload</a></li>
</ul>
</div>
</div>
</div>
-
#charset "utf-8";
/* CSS Document */
*{
padding:0;
margin:0;
}
html{
background:url(../images/water-316625_1280.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#menu-bar{
height:30px;
float:right;
text-align:right;
background-color:rgba(173,172,172,.9);
border-radius:10px;
border:solid rgba(109,186,235,1.00)
margin-top:0;
}
#menu-bar li{
float:right;
padding: 0 10px;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size:110%;
cursor:pointer
}
#logo{
height:100px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
All CSS properties have a default of "position: static;". This means that all elements are rendered in order that they appear in your html file.
So when you add a "margin-top" to a div (i.e. logo) it will add height to that div while all other divs that follow will have to re-position to accommodate that change.
So margins adds to the height or width of your element. Your logo is "height:100px;" when you add a "margin-top: 15px;" your element has a total height 115px. That is why #menu-bar has moved.
A solution to this would be to set the #logo div to "position: relative;" Then you can use the properties top, left, right, down. To move that element based on it's current position but will not affect other divs in the document. So for example:
#logo {
position: relative;
top: 20px;}
Will move #logo down 20px from its current location.
Hope that helps.
why you are included the menu items inside the logo container?. It would be a good practice that to allow the logo element to independent. Please see the updated code.
Give the float property left for the #logo id
put ; after the border property for #menu-bar id (missing in your code)- border:solid rgba(109,186,235,1.00); and cursor:pointer in #menu-bar li
Please give a margin-top:0 for the <ul> elements as well.
Here are the JSfilddle
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
I have a div:
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;
And a html, body:
html, body {
height:100%;
width:100%;
}
/* Body styles */
body {
background:url(../images/background.png) top center no-repeat #101010;
color:#ffffff;
}
My code is basically 20 loren ipsum paragraphs followed by the div.
Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it
I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.
I tried fixed but that just fixed it.. no use to me
How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not
Ok, fixed and working :D Hope it does what you want it to.
Preview here: http://jsfiddle.net/URbCZ/2/
<html>
<body style="padding:0;">
<div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
test content :D
</div>
<!--Content Here-->
</div>
</body>
</html>
Shorter solution:
.footer {
bottom: 0%;
position: fixed;
}