Try the following code:
<!DOCTYPE html>
<html style="min-width:600px; overflow:auto;">
<body style="background:grey; padding:0px; margin:0px;">
<div style="text-align:right;">
this is some text
</div>
<div id="footer" style="
background:yellow;
position:fixed;
height: 100px;
width:100%;
min-width: 600px;
text-align:right;
bottom:0px;
">
footer text
</div>
</body>
</html>
So when I make the width of the browser window less than 600px, a horizontal scroll bar appears at the bottom of the window as expected. When I scroll to the right, the phrase "this is some text" scrolls into view, which is great. However, the phrase "footer text" does not scroll into view, which is the problem.
How do I get both the "footer text" and "this is some text" to scroll into view as I drag the window scroll bar to the right? THe yellow footer must always appear at the bottom of the website.
I would prefer a clean CSS solution to this. I will accept a javascript solution if absolutely necessary.
Thanks
It's because for fixed elements the containing block is not en element but the viewport (cf. http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning)
You should try the method described here which use absolute positionning: http://alistapart.com/article/footers
OP says:
Thanks. I used jquery by doing $(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');}); I guess that was easy enough
Take out the min-width on your second div. That will allow the footer text to always show no matter what the size of the viewport.
Related
I am stuck and hope someone has an easy solution I've not thought about :-)
I have a 1040px centered div for page content, menu and footer.
The header image shall have the same left margin as the content div AND grow to the right side (for those with higher screen resolutions)
Is there any way to do this using CSS? I know, I could calculate the left margin of the content box with javascript and set the header-margin dynamically, but I would prefer a css solution.
Regards,
Martin
Why not just place the header outside of the sitecontainer?
And then giving it a width of 100%, and a min-width of 1040px.
(Or stretch the background image, depending on if it's 1 color, or an image.)
Is that what you meant? Maybe post the HTML and the CSS, by the way.
Alright, so what you mean is that the header does stretch across, but that the content inside the header (a menu, a logo, whatever) doesn't get centered like the sitecontainer.
If that's the case, here's what to do;
<div id="header">
<div id="headercontent">
<img src="logo.png">
<nav>
<ul>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
</ul>
</nav>
</div>
</div>
And for the style something like;
#footer{
width: 100%;
min-width: 1040px;
color: [your header color];
}
#headercontent{
[in here you simply put the same styling as the sitecontainer]
}
Is that what you meant? I hope it helped.
How can I change the menu here so that it's always there when the user scrolls down the page?
What code do I need to add/ remove/ replace and where?
Your HTML isn't good. You didn't close your <section id="header" class="clearfix"> and many more. Run your page throught HTML validator, it will tell you your errors.
As for your question, just add:
#header{
position:fixed;
}
In your CSS file (style.css).
More about positions : MDN positions.
here is an example of a div which stays in the same position at all times on the screen.
To fix an element you can use the position fixed, and then position the element on the visible browser window by using the css top, bottom, right and left.
in this example it is fixed to top left, and has a height of 25px
<body>
<div style="position:fixed; top:0; left:0; height:25px; width:100%;">
Here you will get a bar which is fixed to the top left experiment to get your desired effect
</div>
</body>
Simple solution for your case is to use
<section id="header" style="position:fixed;" class="clearfix">
and add a
</section>
before the
<!-- header ends --!>
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
I'm fairly new to html and all that jazz so I might be misusing certain code.
I want to put the G+1 button and facebook like button next to each other and also centered right under the image on my main page.
Here is my site www.entitee.org
And the appropriate block of code (I hope)
<div class="socialmedia">
<div style="float:left; padding-left:400px;">
<div id="gplus"></div><g:plusone count="false"></g:plusone>
<div style="width:47px;overflow:hidden;float:right;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=137562953001123&xfbml=1"></script>
<fb:like layout="button_count" href="http://www.facebook.com/pages/ENTiTEE/162658567144308" send="true" width="225" show_faces="false" action="like" font=""></fb:like>
</div>
</div>
</div>
I'm not sure if I'm misusing the div style or div align items but I can't seem to get it with padding or anything.
Thank you!
I use G+1 medium size, and I added this code in css.
It aligns facebook, twiter and google +1 on same line.
#___plusone_0, #___plusone_0 iframe {
display:inline !important;
height:23px !important;
}
I looked at the code on your site and here are some steps you could take and would get you in the right direction:
remove the float:left from the style attribute for the google plus button
add this to BOTH the facebook and google plus div's style tag display:inline-block;
your div that has the class set to class="socialmedia" has an inner div that has the width set to 60 px make it bigger maybe 100 px
Those steps should get them together on the same line. As always test your site in more then one browser. Good luck!
Use the "medium" size Google +1 button, and add this to your css:
div#___plusone_0 {
vertical-align: bottom !important;
}
div.social{
width:147px;
height:23px;
float:right;
vertical-align:top !important;
}
try to change the DIV tags to SPAN and probably will since span tags can be inline
more info: https://developers.google.com/+/web/+1button/
Your link and the code posted don't match up so I am going off the link provided.
You have both your +1 button and facebook button jammed into a div that is 60px. You need a width of at least 38p + 47px = 85px to fit both. Since there isn't enough room for the floated facebook div it falls beneath.
In conclusion increase the containing divs width. Which would be this div below:
<div style="float:left; width:60px; float:left; padding-left:400px;">
PS: Hi r/trees
css:
.social
{
display:inline-block;
font-size: 1px; /*very important for G+ button*/
/*vertical-align:middle*/
}
Is there any way we can fix the footer to the bottom of the window even at the time of vertical scroll. I have gone through some examples, but those never work with the vertical scroll.
Check out the sample and its google code base
You can set the bottom property to 0. Example:
.footer
{
background-color:#FFFACD;
bottom:0;
position:fixed;
z-index:250px;
}
Here is your css
html, body {height:100%;padding:0;margin:0;}
#footer {position:absolute;bottom:0;left:0;width:100%;background-color:#f00;}
#scrollingbody {overflow:auto;height:100%;}
Here is your html
<div id="scrollingbody">content goes here</div>
<div id="footer">here is footer</div>