so i need to create some space above the nav of my site to move my navigation downwards but using margin-top just makes a white lap above the header background, i need the space to be in the background to move the nav downwards.
Here is my current code:
HTML: http://pastebin.com/8Z1xuzUC
CSS: http://pastebin.com/h3FFnQ3Y
Sorry if this sounds kind of convoluted but i can't really explain it any better.
Separate your #header and #div in your css and add padding-top to #nav.
Related
http://i.stack.imgur.com/mDS5o.png
I basically would like to add empty space either side of that nav bar so it follows all the way to the end of the screen. If it was possible being able to do so it would fit any screen size would be great! I've been coding for two days now learning from codeacademy so i dont have the full knowledge of how to do little things like this.
Your help is much appreciated.
(the empty space either side of the nav bar should match the nav bars props, i.e opacity, size)
Also I would much rather if someone could explain to me how its done as I have noticed alot of the questions asked here are answered with the exact code required and a copy + paste is all that's needed.
this is what im working with
http://cssmenumaker.com/builder/459273
To clarify what pconline's code is doing, if you create a div at 100%, then separate divs for the nav, you can expand the outer div to 100% for full width, then style and align the nav separately.
i hope this example can help you
<div class="container">
<div class="nav">
<label>foo1</label><label>foo2</label><label>foo3</label>
</div>
<div>
CSS
.container{width:300px;height:50px; background-color:blue}
.nav{width:120px; height:50px; background-color:green; margin:0 auto;}
.nav label{line-height:50px;}
http://jsfiddle.net/r3D4b/
Im trying to make a layout that uses the whole screen so I have not set fixed widths on the layout. I'm using percentages.
im working on this http://www.abdhulzaman.co.uk/work/rima
as you can see at the top i have a logo and a header on the top left of the header and also a navigation thats position absolute to the right. now when i minimize the screen.. the nav and the logo header will overlap which is really annoying.
anything to do with position absolute/relative? This may seem very simple.. would appreciate then help! thnx :)
its something similer to http://jsfiddle.net/YFCWm/
Is the size of your navigation dynamic? If not, you could just set a min-width for your header (although it'd be better to set it in a container that wraps your entire site).
If you're just beginning with css and layouts, it can be a good idea to use a grid based framework like twitter bootstrap or blueprint css.
http://twitter.github.com/bootstrap/
http://blueprintcss.org/
Using one of those will make your layout problem trivial.
A quick fix to your problem would be to give the nav element a margin on the left side
margin: 0 0 0 230px;
That will prevent the nav from 'going' further left than 230px from the left edge of the header element.
I'm currently working on this website and have just noticed a problem with the div#top its covering the menu so you can only hover a link when just under the text. Does anyone have any idea how to fix this?
http://gridironstuds.com/
specify the height to the div#top{height:100px;} and reduce the size of logo image.
I used chrome inspector and simply changed this
div#top {position:absolute;}
to
div#top {position:static;}
and it fixed right up. Question though, why is your title in the body? It should be in the head of your html.
You've nailed the problem: the div#top is covering the menus. To fix this, shorten the element: change its height attribute to something smaller (looks like 88px is about perfect).
Try your page with <div id="top" class="centerContainer" style="height:88px;">.
If that looks good, add that to your div#top rule in your master.css.
You could try using a z-index to bring the menu above the header image. Then maybe the menu's background could be transparent so that it is still visible afterwards.
I want to modify the stylesheet on my website so that the navigation remains in the middle, but instead of just 'hanging' from the centre, I want the dark grey to expand all the way to the right and left of it.
I was wondering how i could go about this? So far, the only way I am able to get close to this is by shifting the navigation to the left, and the dark grey background colour goes all the way to the right.
My website is www.peach-designs.com
If you wish me to post my stylesheet's here then let me know. Hopefully you can use Web Developer tool for now or Firebug or something.
Hope you can help anyway,
Kind Regards,
Snakespan
you can use
width:100%
for the wrapper div to make it fill the page width
and
overflow:hidden;
for the landscape div
and
margin-right:auto;
margin-left:auto;
for the nav div to put it in the center of the wrapper div
The banner div is wrapped in div.wrapper and this has a fixed size. You could either tomake the wrapper div have width:100% or rearrange things so it does not constrain the navigation.
I havee been looking at the source and stylesheet for the following address to work out how you can make a ... be "surrounded" by a broken horizontal rule. At the page http://www.joindiaspora.com/ there is a navigation menu having an example of it. In the html source there is used no tag so I am thinking it must be done using the styling, but I can not work out how to do it. Ideas ?
Yes, it's with CSS, not an HR. There's a border-bottom on the #header DIV, and the #floating_nav is simply positioned over it. That nav contains a SPAN with a solid white background which covers the middle part of the border.