On Wed, Oct 15, 2014 at 1:04 PM, Peredur <pere...@peredur.net> wrote: > I imagine that this will turn out to be a very simple question, but never > one to avoid displaying my own ignorance, here goes... > > I'm trying to create a layout for a website that is in dire need of > attention and this (URL below) is a mockup of something approaching what I'm > aiming for: > > http://peredur.net/unidirectory/ > > The only thing that I really don't like about it is that the navigation menu > is over to the left and so looks a bit odd. In the tutorial from which I > got most of the code (http://demo.ourtuts.com/menu/), the menu is centered, > but I'd rather not do that if I don't have to - especially as it would mean, > I think, giving the menu a fixed width, which I'm not keen on doing as it > might mess up the display on mobile devices. > > What I think I'd prefer to do is to put a full-width background the same > width as the #wrapper div and the same height as the menu, and the same > colour as the footer background, behind the menu. As yet, though, I've > failed to find a way to do that. > > I imagine that the problem is because the menu is floated and so any block > element I put around it has no height, but I've no idea what to do to get > around this. Giving a surrounding div a height does not seem an option > since it would have to correspond to something like 20px plus the height of > the box containing the menu item text and I'm not sure how to do that - or > if it would even work. > > Thanks in advance >
> Peter Peter, One way to do that is to put the nav after the footer in the markup. And then absolute position the nav into a block [article] of padding. Once you get to the media queries, the amount of padding needed can be tweaked-- less needed at desktop, and more needed at mobile. A fast and dirty example without media queries: http://ccstudi.com/school.html Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
