I'm creating a header that holds an image (logo) and a navigation.
The UL for the navigation is floated right within the header div. This places it at the top of the div but I'd like to align it to the bottom.
What is the best way to do this?
Have tried vertical align, which seems to do nothing and have tried position property too (bottom:0) but does not work.
I'm sure this is a common problem.. any ideas?
With CSS:
.header {position:relative}
.header ul {position:absolute;right:0;bottom:0}
Related
I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
I'm trying to work on a layout and I have an issue with the navigation. If you look on the Codepen posted below and hover over the 'Home' link in the navigation, the drop-down menu will appear and it will push the other main links to the left. What is causing this and how can I fix it? I've been messing with it for a couple hours and I'm lost. Thanks for any help.
http://codepen.io/anon/pen/Cmcyr
There's no width being set on the a, ul or lis, so when the ul is displayed, the parent is expanding to the width of its widest child.
Remove the horizontal padding from the lis and set text-align: center; and give them or their parent (ul) a max-width the same size or narrower than its parent (a).
How do I vertical align floating elements?
I currently have 3 elements (an image floated left, another image floated right and a div with a margin:0 centered) in a wrapping div. These are currently aligned at the top but I want them to aling at the bottom of the div.
How can this be achieved without using position absolute on them as this is a responsive layout? I have tried making them display:inline-block and vertical-align: bottom but that does not help anything.
In order to use vertical-align on some element, that element must have display:table-cell; css style. http://jsfiddle.net/StPYR/
Your jsfiddle updated: http://jsfiddle.net/chCjT/16/
Instead of floating the elements you need to give them display:inline-block; css property
Ok got this strange issue where i have a absolute positioned div with inside a header. Then there's a nav tag with a margin and for some the absolute positioned div instead of sitting top left of header it positioned where the nav starts. So if the nav has 100px top margin the div starts 100px down.
But the strange thing is if I apply a border to the header the absolute positioned div acts as how i would expect.
I'm using html5 boilerplate styles, this i suppose could be the issue.
It's easier to explain if you view an example. The below links are stripped down version and have identical mark up apart from one where the header has a border and the other it doesn't.
Example with the problem:
http://bennyb.co.uk/test/no-border.html
Example with the issue fixed when the border is applied
http://bennyb.co.uk/test/border.html
Thanks
B
EDIT:
Ok thought this was actually just related to nav but seems it's the same if a div
Apply
overflow: hidden;
to the header.
I setup a jsFiddle to show what I'm doing:
http://jsfiddle.net/UfzCS/
Basically the border I set (needs to go all the way across) on the UL is showing up over (instead of under) the LI's because the LI's are floated left. Is there any workaround for this? I know I can set a height, but I may make the text a variable size so the height may dynamically change.
Your LI are floated, so the UL does not know where to wrap them.
An easy way to fix this is to make the UL float: left or add a overflow: hidden to it.