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;
}
Related
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 have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
I'm trying to create this box, but it's a little over my head. I can't get the spacing after the white header text to display correctly.
The live version is here, and the current CSS is below. A standard < p > inside the div ignores the bottom padding on hblock and I can't help but think I'm going about this the wrong way. Is there a simpler way to create this element or something I'm missing in the code?
Many thanks.
#lheaderblock{display:block;
padding:0px 10px 0px 10px;
background-image:url('http://atlas.czg.net/atlas/wp-content/uploads/2012/12/caption_header_blue.gif');
height:160px;
width:90%;
border:1px solid #000000;
background-repeat:no-repeat;
overflow: hidden;}
hblock{position:absolute;
color:#FFFFFF;
font-size:14pt;
padding:10px 0px 20px 15px;}
I don't know what <hblock> is. When browsers don't know either, they will render them as inline element. You need to give it display: block and remove position: absolute. Tweak the padding and you'll be fine.
I am trying to make a HTML page using two column layout.
I have a version in jsfiddle
http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/
I am unable to set a top margin for the the inner container.Though I have given a top-margin for the innerContainer its not been reflected in the page.
The reason I am using an inner container for containing the left-sidebar and innerContainer is that in the actual page I have two more divs side by side in the inner-container.I do not prefer to use three column layout for that reason.
Your issue is with margin collapsing. You can prevent the margins from collapsing by using a border or padding. There's a good explanation here: http://reference.sitepoint.com/css/collapsingmargins
http://jsfiddle.net/eFMpJ/46/
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
border-top: 1px solid black;
// or padding-top: 1px;
}
First of all the closing div is missing for the opening .
Then I added padding-top of 10px in outerContainer.
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
padding-top: 10px;
}
I think this will solve your problem.
Please let me know what is the result.
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.