I am trying to implement a menu into an area.
http://www.gardensandhomesdirect.co.uk/newhomepage
You will see the end of the menu div slightly off the page to the right, however this needs to be inside the HOMEMENU section (the long black bar with no content)
It seems to be overflowing into other areas, despite using a clear:both div.
Can anyone shed any light on this? Is it a z-index issue or something more simple?
You have a width: 930px; somewhere.
Remove it.
#topmenu {
list-style: none;
**width: 930px;**
height: 20px;
background: #014464;
border: 1px solid #002232;
}
When I inspect the element (menu-bar) is see there are some space (like) characters outputted.
Related
I have a layout using DIV tags and I have having a hard time controlling the fill of the div tags as well as unnecessary scroll bars. When the content in the "rightside" div tag doesn't fill the screen there is still a scroll bar on the page. How do I cut the tags so they don't fill past the first screen if not needed.
A second issue that I have is when there is enough content in the "rightside" div tag to create the need for a scroll bar, the background of the "sidebar" div tag does not extent to match the bottom of the "rightside"
I have played around with so many of the tag, I have no clue where to go from here. Any help is greatly appreciated!
Here is my CSS Code:
.content_container {
border:2px solid red;
overflow: auto;
height:100%;
}
#sidebar {
background:#a4c2c2;
width:231px;
font:12px georgia;
color: #336666;
line-height:18px;
float:left;
position: absolute;
overflow:hidden;
z-index:-1;
height:100%;
min-height:auto;
}
#sidebar div {
height:2000px;
}
#rightside {
float: left;
width: 500px;
height:100%;
margin-left:231px;
padding: 10px 0px 0px 25px;
}
http://jsfiddle.net/03hcm6ta/
EDIT-
I solved my issue, well almost, with a table. However there is a weird border issue happening and I can't seem to solve it. The side bar and rightside div tags dont seem to completely cover the content_container div. Any suggestions?
http://jsfiddle.net/eh92awh0/
Hopefully I've understood your issue... You had a couple of stray /div tags plus you'd opened paragraphs with P and closed with /p and some duplicated classes in your CSS :)
EDIT - Updated fiddle; http://jsfiddle.net/richardblyth/L9afr65f/
The key is setting all relevant elements to
height: 100%;
position: relative;
And on your container
overflow: hidden;
See my fiddle :)
I am trying to create a sticky footer from a simple looking tutorial I found online. This seems to work ok until I try putting a width on my content div and I have no idea why.
If I add a width to the content div it seems the footer no longer has any distance between itself and the content div and so it obscures the content if there is a lot of content.
I have created this jsfiddle but it doesnt look as obvious there as it does if viewed in say firefix or IE.
Does anybody know why this is happening and what can I do to have a content div with a fixed width and auto margins to centre it but still have a footer that sticks to the bottom all the time if there is hardly any content or a large amount of content.
Below is my css for the content div:
#content {
margin-top: 15px;
padding-bottom:100px; /* Height of the footer element */
border-left: 1px solid #C9C9C9;
border-right: 1px solid #C9C9C9;
border-bottom: 2px solid #C9C9C9;
box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;
width: 1024px; /* Here adding a width causes the footer to overlap */
margin-left:auto;
margin-right:auto;
background-color: white;
text-align: center;
border: 1px solid red;
}
http://jsfiddle.net/32M9Q/1/
At least in Chrome, the JSFiddle shows no problems for me. It looks the same with or without putting a width on content. I even added a bunch more words and the footer still didn't cut anything off. So the padding does effectively work, at least in my case.
However, based on what you said on the other answer, perhaps you could just change position:absolute on the footer to position:relative (assuming the footer won't have anything placed under it...and I'm guessing not since it's a footer). It makes sure the footer is placed after the content instead of being placed on it. Be wary, though, and make sure to check it in many different cases (browsers and devices).
I would also include a margin-bottom on the content, just in case.
Try adding the following CSS rules to the #footer element:
position: fixed;
clear: both;
This will give you a sticky footer (if I got what you want to do correctly) that does not overlap with the main content. You can probably loose the clear: both part, but it may help with some browsers...
Setting the background color of my web page to match the footer and the body isnt an option, I appreciate all the answers I have been given so far but unfortunately none of them were suitable for me.
I have had to do what I consider to be a hack which is add a div below the content which is higher than the footer, this means the footer sits on top of this div and not my content giving the illusion of space between the content and the footer:
<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>
I'm currently working on a CSS Dropdown menu and I've run into the following issues:
Each successive sub menu overlaps its parent menu by an increasing amount.
Attempting to fix item 1 by setting the left attribute (each submenu already has position:absolute) does not work and throws off the position of the menu wildly.
Whenever a submenu is shown, the right padding is automatically increased causing a gap between the menu and the bottom border of the menu items.
In the CSS I use display: table-* (the star being any of the table-related display values) in order to make vertical centering of text easier and to more easily keep the selected menu item at the top of the list (see display: table-header).
I would really like to know both solutions and causes for the above issues.
For reference, I've created a fully functional JsFiddle.
I made a fiddle here http://jsfiddle.net/xUWdj/
Changes made:
Got rid of all the table displays, the only reason you were using it was for vertical alignment, you can utilize line-height on the <a>'s instead.
All submenu <ul>'s now are positioned based off it's parent by left: 100%; & top: 0;
You should now be able to style/position the rest of the menu to how you want it.
Edit:
Here's a version that allows you to continue using the table-group-header http://jsfiddle.net/HSh5n/2/
Changed li a { display: block; line-height: 30px; }
Added margins to move the ul's to -42px 0 0 130px
I guess the biggest thing with tables is that since they're inline elements, you can't assign position: relative to table-cells, so that's why you couldn't use the left or top properties. I haven't browser tested this, but I'd always double check if you go this route.
If you add right border to your li a{...} you can get an idea about what's causing the overlaps.
li a {
display: table-cell;
border-bottom: solid 1px #cccccc;
border-right: solid 1px #cccccc;
text-decoration: none;
color: rgba(89,87,87,0.9);
height: 30px;
padding: 5px;
vertical-align: middle;
cursor: pointer;
}
I am building a navigation where, despite my fiddling with padding, I cannot create equal distances between my sub menu's. It's a little hard to describe so I have created a jsfiddle here: http://jsfiddle.net/kCXrX/
If someone has a sec could you let me know why, when you hover over a element the distance between the line items are not the same - there is a greater distance on the left than on the right
Any guidance appreciated!
I've forked your fiddle here: http://jsfiddle.net/tLzST/1/
Your HTML was invalid, ULs can't be direct children of ULs, so I've put your .submenu lists within LIs. One or two style tweaks, too.
in ul.subnav change your padding to this:padding: 0 5px 10px 1px;
if you did a ctrl-a on your table, you will see your border-right line actually has what seems to be a 3 pixel padding automatically added to itself. If you take that padding into account your code actually works fine.
in any case heres the new jsfiddle: http://jsfiddle.net/kCXrX/5/
I've added ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;} and now it looks beter to me.
The extra padding appear just because you are using inline-block. try to remove this property (display:inline-block) and replace it with float:left.
now, it's time to tweak the .navigation so it force to containt the subnav (floating issue) by adding overflow:hidden;.
i have edit your fiddle, take a look at it. http://jsfiddle.net/kCXrX/
if orange hover left & right white spacing difference is the issue, check following code.
ul.subnav {
border-right: solid 1px;
display: inline-block;
height: 80px;
padding: 0 5px 10px 1px;
vertical-align: top;
width: 116px;
}
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to