I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
Related
I'm writing down a website using HTML and CSS3 and I have encountered some problems putting div's into each other and using the absolute position. When I add the position:absolute, I can set the div's background color and manipulate the objects within it, but it's been removed from the DOM, which creates some other difficulties for me (like not knowing how to set a footer). My question is how to make so, that all the elements inside my #content div are aligned properly, the height is set automatically and the background-color is the same for all of them?
UPDATE:
fiddle
add a div with clear class upper than footer and style clear: both;
...
<div class="clear"></div>
<div id="footer">
</div>
...
jsFiddle Demo
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.
I have below div with
<div style="height:900px;width:800px;overflow-x:scroll;overflow-y:hidden">
//content here
</div>
My problem is when i scroll right or left ,div border is not appearing.So it's look like
cutting the data.I tried so many ways but no luck .Any help appreciated.
Thanks,
Chaitu
Set padding to your div. Like this:
<div style="height:900px;width:800px;overflow-x:scroll;overflow-y:hidden;padding:5px;">
//content here
</div>
This will ensure the inside contents remain distant from the div.
In the code you provided, you aren't giving the div a border.
Try changing your code to this (adding border CSS property):
<div style="height:900px;width:800px;overflow-x:scroll;overflow-y:hidden;border:2px solid black">
<!-- Content goes here -->
</div>
Also, like Naveed said, try adding padding (padding:5px; for example) to guarantee that your content remains within the div and doesn't flow over or get clipped.
I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.
It's displaying in firebug, but not appearing on the screen.
I'm currently learning CSS so any tips/advice on what I'm missing are welcome.
Any advice available will be gratefully received.
Thanks in advance,
Tom Perkins
You can view my code here:
http://jsfiddle.net/tomperkins/v3yqf/
Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:
.sidebar {
background: orange;
}
See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)
Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)
Edit:
So, use
<div class="sidebar"></div>
<div class="content"></div>
instead of
<div class="content"></div>
<div class="sidebar"></div>
HI
i want to give my div's some border but when i do a box is created with all the borders but the contents of teh div are not surrounded!! Any suggestions?
try
overflow: auto
You must have some floating content inside.
<div id="divWithBorderIssue">
blah
<div style="clear:both;"></div>
</div>
You could also use a clearfix
edit: of course if you provided the code it would be easier to help you