I am trying to get the child(LI) to fill the parent(UL) in my main menu here website-test-lab.com/sites/mirandaparsons/
I am using parts of flexbox to make the menu vertically and horizontally centered but you will notice that I need the white borders to be full height of the menu.
I've seen a lot of 'hacks' to get this to work but surely there is an easier way? Perhaps with flexbox or even a JS snippet?
Any help would be most appreciated.
For example:
Give the ul: height: 60px;
Remover margins from li
Give li a: padding: 20px 0.5em;
Result:
http://i.stack.imgur.com/eYdPc.png
Related
I wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.
There seems to be a left margin to the menu that I want to get rid of.
On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
I would like to reduce the margins between list items
Normally this wouldn't be a problem for me, but I've not really worked much in percentages.
.flexnav {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
FIDDLE
Add padding: 0; to .flexnav style definition.
To remove padding just use css:
padding:0;
You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:
*{
padding:0px;
margin:0px;
}
This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.
I use this approach on all websites I make.
I want to make my navigation fill the space of the header vertically. I've tried 100% height with no luck.
If you see here on the development site: http://inspiredworx-labs.com/sites/mannings/ the homepage menu item has a red background that does not stretch/fill the full height of the header.
How can I achieve it, so that all menu items fill the height, even if the height changes?
Thanks
The only way I know to achieve this is a bit tricky but very solid.
Here is a nice and clear explanation :
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
You need to increase padding as below. So, it will look as you need the updates.
#masthead .nav ul li a{
padding: 19px 15px;
}
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.
I'm stumped on a css problem. I've put up a test page here: http://georgecrawford.com/test/ for you to check.
I have a left-floated sidebar div, and a main content div which follows it (and which should wrap around it). If the content is just paragraphs, there's no problem, as the text wraps nicely around the float. However, I have some blockquotes in the content, and I'd like these to have a background-color and/or a border. The text in these is no problem, it wraps nicely around the sidebar of course. However, the blockquote itself spans the entire width of the content div, which means a border around it would run over the top of the sidebar.
How can I ensure that blockquotes in the content div are shortened horizontally to be the same width as the text lines (the 'line boxes') within them? Paragraphs have the same behaviour, but I don't need a border around my paragraphs!
Thanks for any help!
I've stumbled upon a potential fix for this problem.
If I set all blockquotes with the CSS property overflow: auto, it makes them reduce to the desired width when they'd otherwise overlap the floated sidebar. I've updated the demo at http://georgecrawford.com/test/ so you can see the difference. It's perfect in Safari/OS X, but I haven't yet tested in other browsers.
Any comments? Does this solution have any drawbacks? Many thanks again for your help.
In IE 9 the "overflow: auto" corrects blockquote underlay or overlay of a div floating to one side, however the overflow correction does not allow standard blockquote indentations on both blockquote borders.
background-color: #ccdfff;
border: 5px #dfefff solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #003366;
line-height: 2em;
letter-spacing: 0.2em;
overflow: auto;
padding: 20px;
This leaves blockquote pushed right to the left edge of a "float: right" div. Blockquote border-right margins are ignored by IE9. Chrome has no problem displaying correct blockquote indentations.
I have tested parent-child adjustments, also display, float, and position selectors but these are not helpful. Anyone know how to correct IE blockquote margin collapse when blockquote is positioned beside a floating div?
The problem is not the blockquote - that just does what it's told, it stretches to 100% of it's parent's width. It's the parent div with the id content that does not have a float property, and thus spans across the floated div.
Can you try putting the sidebar as a child into content, and not as a sibling next to it? I think the blockquote should then adhere to the width rules.
Alternatively, you can always set the blockquote to display: inline, but that may not be what you want, as it then won't stretch to the full width anymore.