Re: [css-d] Styling a menu

[Philippe Wittenbergh]

Le 16 oct. 2014 à 05:28, David Laakso  a écrit :

> 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

Have you tried resizing your window a little bit ? Depending on how wide it is, 
the `nav` peaks out on the left- or right-hand side. At the very least, make 
the wrapper element `position: relative` so that it acts as the containing 
block for the `nav`.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
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/

Re: [css-d] Styling a menu

[John Andrews]

Thanks, too.  I think I can use this.

Sitting on the sidelines, learning.

---  John Andrews

On Wed, Oct 15, 2014 at 4:45 PM, Peredur  wrote:

> El 15/10/14 a las #4, David Laakso escribió:
>
>> 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
>>
>
> Thanks David.  I'll take a look and play around with that solution
> tomorrow.  I confess to being just a wee bit tired at the moment and I
> think I need to have my wits about me for this.
>
> I'll let you know how I get on.
>
>
> Peter
> --
> *Peter Bradley*
> peredur.net 
> __
> 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/
>
__
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/

Re: [css-d] Styling a menu

[Peredur]

El 15/10/14 a las #4, David Laakso escribió:

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 


Thanks David.  I'll take a look and play around with that solution 
tomorrow.  I confess to being just a wee bit tired at the moment and I 
think I need to have my wits about me for this.


I'll let you know how I get on.


Peter
--
*Peter Bradley*
peredur.net 
__
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/

Re: [css-d] Styling a menu

[David Laakso]

On Wed, Oct 15, 2014 at 1:04 PM, Peredur  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/

[css-d] Styling a menu

[Peredur]

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 Bradley*
peredur.net 
__
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/