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 --!>
Related
I have a page something like this
<div id="top">
</div>
<div id="bottom">
</div>
I want an output which displays bottom first then top..
How can i achieve this using CSS ??
If your question means, the following.. "You would want to place div#bottom on top of the other drawn DOM elements below". DOM ordering.
If you want #top and #bottom to be independent DOM elements.
div#top {
width:200px;
height:100px;
background-color:red;
}
div#bottom {
position:absolute;
width:100px;
height:50px;
background-color:blue;
top:10%;
left:4%;
}
The top and left values are values of your choice, the above example places the bottom inside the top.
positioning - Can be used to manipulate the same. You could use fixed element inside a huge encompassing div. But use fixed only if you are sure that the DOM contents is to be shown even on a overflow. 'relative' positioning might as well work when you are working reference is the body or the Root Node class or element.
If you want to control how DOM displays these elements. Then you might have to use javascript with CSS to achieve this. Like say
document.getElementById('bottom').style.display = 'block';
document.getElementById('top').style.display = 'none';
After a timeout
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 200);
Since independent div's are not the best way to do this, would rather suggest you to try Something like this
<div id="top_div">
<div id="bottom_div">
</div>
</div>
with the help of "positions" u can achieve this..
The HTML page is rendered from Top to Bottom. Reverse your div tags as in :
<div id="bottom">
</div>
<div id="top">
</div>
unless you have a specific reason not to do so.
Using Position in css it should work o.w try below
<div id="bottom">
</div>
<div style="clear:both;"></div>
<div id="top">
</div>
I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.
I have a div element inside a main div, which i wanted to put an image tag into it. The problem is, when i positioned the image to absolute, the image didn't show up and the container div didn't take any space on the main div. But when i remove the position:absolute the image is showing just fine. Any help how to show it without removing the position:absolute?
The code is something like this:
<div id="main">
<div id="image_wrapper">
<img style="width:100%; position:absolute; top:0px; left:0px;" src="image.png" />
</div>
</div>
html
<div id="main">
<div id="image_wrapper">
<img src="image.png" />
</div>
</div>
css
#image_wrapper {
position:relative;
}
#image_wrapper img {
width:100%;
position:absolute;
top:0px; left:0px;
}
try this maybe it help....
When you set an element to be absolute-positioned, it is removed from the flow of the document. In this case, it means the container <div> now has "nothing" inside it and therefore collapses to zero height.
Also note that you should almost always give the containing element position:relative to provide an origin for the absolute element.
The main problem, though, is the lack of height on the container. Fix that and your image should show up.
If it doesn't, then try also specifying the image's height.
I want to place buttons On the Top of the image in three places
Bottom Left Corner of the image
Bottom Right corner of the image
Center of the image. (optional)....
How to place these button on the top of the image.
<img src="images/default_image.png" style="width:90%" id="mImage" />
This has nothing to do with jQuery or jQuery mobile really. Can be done with simple HTML and CSS. See this fiddle for am example on how I would do it: http://jsfiddle.net/rHaPH/22/
Try this:
<div id="div-1">
<img src="../img/logo.png" style="width:90%" id="mImage">
<div id="div-1a" data-role="fieldcontain">
Delete
</div>
<div id="div-1b" data-role="fieldcontain">
Delete
</div>
</div>
with this:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
bottom:0;
left:0;
}
#div-1b {
position:absolute;
bottom:0;
right:0;
}
You can copy that into JS fiddle and it will work using JQMobile. Make sure you include the css url for JQM and make sure you tick JQMobile when adding JQuery to your JS fiddle.
Update:
You should also beware that JQMobile will inject span tags into the DOM which will be your buttons at runtime. This means the css I have provided is conceptually ok, but the selectors will need to point to those span tags (as opposed to using the ids of div tags).
As today, with jQuery mobile v1.3.2 I have implemented that in the following way:
<div data-role="page">
<div data-role="content">
<div id="wrapper">
<div id="button">
Button
</div>
<img src="i.jpg">
</div>
</div>
</div>
And with the follow css:
#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }
Some styles probably are not needed for what you want, but I just took the code sample from my own code.
wrapper div is relative positioned so its contents can be absolutely positioned.
z-index in the button div is to make sure it is placed on top of image.
You can add as many buttons as desired and change its css properties for top, left, right and button to move them around the image
Working example at jsFiddle
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