I am trying to make my logo and manu bar to follow my page as i scroll down the page,
Currently this is what i have.
CSS is;
html,body {
background-image:url(../img/background.png);
background-size:cover;
background:fixed;
}
#bar {
margin-top:55px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}
and for HTML:
</head>
<body>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>
So please what would i need to change to make both 'bar' and 'logo' follow my scroll.
thankyou for you help
Here is a jsfiddle with how I would do it...
http://jsfiddle.net/2Zqhw/
I've wrapped both elements in a div, gave it position:fixed and width:100%
You need a div to wrap your logo and bar and use CSS to set the position to fixed.
The CSS:
#nav-fixed {
position:fixed;
}
The HTML:
<div id="nav-fixed">
<div id="logo">
</div>
<div id="bar">
</div>
</div>
You could try nesting logo and bar within another div and then setting position:fixed on the enclosing div so your HTML would look something like:
<div id="fixed_bar" style="position:fixed;">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Or you could add the enclosing div as above but define the style for it in the CSS:
#fixed_bar
{
position:fixed;
}
With the HTML:
<div id="fixed_bar">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Related
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I am trying to make a phpBB theme, but am having trouble setting up the DIV's the way I envisioned the page to be.
This is what I am looking to do.
http://imgur.com/n6eZbsT (image to help with understanding)
This is what I had so far.
index.html
<body>
<div id='container'>
<div id='header'>
</div>
<div id='sidemenu'>
</div>
<div id='content'>
</div>
</div>
</body>
css.css
*{
padding: 0px;
margin: 0px
}
#header {
width:100%;
height:50px;
background-color:#6FF;
}
#sidemenu {
display: block;
position:absolute;
width:100px;
height:100%;
background-color:#6F6;
}
The problem with this is that the sidemenu DIV overflows to the bottom of the page and creates a scrollbar.
I have tried looking for a solution, and only managed to get the overflow to go away by using bottom:0px; inside the sidemenu css
But this pushes the header to the right, and sidemenu to the top left corner like this..
http://imgur.com/LKk9VtF
I am stuck here, css gives me a huge headache ahaha. Can anyone please help me with a solution?
Thank you so much!
You should use height:calc(100% - 50px); top:50px; for your sidemenu. Run the snippet bellow.
*{
padding: 0px;
margin: 0px
}
#header {
width:100%;
height:50px;
background-color:#6FF;
}
html,body,#container{height:100%;}
#sidemenu {
display: block;
position:absolute;
width:100px;
height:calc(100% - 50px);
top:50px;
background-color:#6F6;
}
<div id='container'>
<div id='header'>
</div>
<div id='sidemenu'>
</div>
<div id='content'>
</div>
</div>
I can't get the footer to stick at the bottom of the page. If there is less content, i need it to be displayed without any scroll of course and if there is more content then in the end. I have the following code:
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="height:auto;width:100%;">
<div style="font-size:25px;width:90%;float:left;height:auto;">ABCD
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="foot">
Contact Us
</div>
CSS:
html, body {
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#wrapper {
height:100%;
width:100%;
min-width:1300px;
min-height:100%;
}
#top_bar {
width:100%;
height:45px;
min-width:1200px;
}
#top_add {
margin-left:15px;
height:14%;
width:100%;
min-width:1200px;
min-height:130px;
}
#left_logo {
width:215px;
height:100%;
float:left;
min-width:200px;
padding-left:20px;
}
#right_add {
width:980px;
height:100%;
float:left;
background-color:#E8E8E8;
min-width:750px;
}
#foot {
background-color:#333333;
width:100%;
height:250px;
}
What am i doing wrong? When the content size is small, the property defined as max-height:100% takes the whole page and shows is empty and displays the footer in the end which is found after scrolling.
you want to sticky footer right, so you must be used a css position to set it fixed anywhere in the page
for bottom div add this css
#foot{background-color:#333333;position:fixed;bottom:0px;width:100%;}
please visit live demo here http://jsfiddle.net/Zsg8G/
thank you...
EDITED: hello, i found the your problems please now try this code
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="">
<div>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="push"> </div>
<div id="foot">
Contact Us
</div>
html,body{height:100%;}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}
here you must be remove the float: left...
live demo with: more content: http://jsfiddle.net/SCr7b/1/ and with less content: http://jsfiddle.net/HYf7q/
thank you..
Check out Chris Braco's solution to this: http://cbracco.me/css-sticky-footer-effect/
Essentially you need to ensure there is padding below your body content to prevent an overflow under the footer, and use position: absolute; on the footer.
Here's your code with a working footer: http://codepen.io/anon/pen/IbmiC
Let me know if you have any issues with this.
I have a layout with a header bar that is 100% width and footer that is 100% width, but the content is centered and only say 800px wide.
I am attempting to make text float justified to the content area upon window stretch, but can't figure the best way to to this.
EXAMPLE
I've tried absolute positioning and relative positioning within the header div but when the window stretches, I either get the text 1 staying in the same spot, or it completely left justifies within the text 1 bar.
Thanks in advance
You can try this
You can remove width: 100% as its block element it will take full width.
And add one more div inside header and footer with width: 800px and margin: 0 auto
to center the inner content.
HTML
<div class="container">
<header> <div class="cnt">Header Text</div> </header>
<div class="content">
Div content......
</div>
<footer><div class="cnt">Footer Text</div> </footer>
</div>
CSS
.container{
height:100%;
}
header,footer{
height:50px;
border:1px solid red;
}
.cnt,
.content{
width:800px;
height:100%;
border:1px solid blue;
margin: 0 auto;
}
Is this what you are expecting:
HTML:
<div class="container">
<header> <div class="content">Header Text</div> </header>
<div class="content">
Container Text
</div>
<footer> Footer Text </footer>
</div>
CSS:
.container{
width:100%;
height:100%;
}
header,footer{
width:100%;
height:50px;
border:1px solid red;
margin:0;padding:0;
}
.content{
width:100%;
height:100%;
border:1px solid blue;
text-align:justify;
}
Fiddle Demo
HTML:
<div class="container">
<header> <div class="content">Header Text</div> </header>
<div class="content">
Container Text
</div>
<footer> <div class="content"> Footer Text</div> </footer>
</div>
CSS:
.container{
width:100%;
height:100%;
}
header,footer{
width:100%;
height:50px;
border:1px solid red;
margin:0;padding:0;
}
.content{
width:800px;
height:100%;
border:1px solid blue;
text-align:justify;
}
Hi I am really struggling with this, can't figure out what I am doing wrong. I am building my friends website: bethcalter.co.uk/index.php and when checking it on other browsers, the divs were off the page and when I resized the window the divs were moving and I don't want them to do that.
I am new to HTML/CSS I don't do a lot of it, I'm more a designer, please help, I have looked for answers on here already, but something is up with my coding I think, I have tried giving the divs their own wrapper etc and it doesnt work.
My css:
#content {
margin:0;
width:900px;
height:400px;
margin-left:360px;
margin-top:-930px;
background-color: #ffffff;
position:absolute;
}
#bar {
margin:0 auto;
width:900px;
height:90px;
margin-left:360px;
margin-top:-1010px;
background-color: #ffffff;
opacity: 0.4;
position:absolute;
}
Html:
<body>
<div id="banner">
</div>
<div id="background">
<div id="wrapper">
<img src="images/Statue4.jpg">
</div>
</div>
<div id="wrap">
<div id="bar">
</div>
<div id="content">
<img src='images/deb.jpg' style="margin: 40px 40px 40px 40px"/>
</div>
</div>
</body>
</html>
Please help, much appreciated
Your big image div is moving if you resize your window because your are aligning it to the center of the page.
Remove this line in your css in your #wrapper selector if you just want to have it aligned left:
margin: 0 auto;