PDA

View Full Version : Header and navigation bar problem



samtaylor159
Mar 17th, 2009, 03:23 PM
Hi All,

Could someone help me solve my issue?

I have just started designing a website, which I haven't done before.

I have come across a problem that I have been unable to rectify from google searches!

Basically my problem is when I drag the screen to make it smaller, the nav bar overlaps the right background image and moves. This also happens with lower screen resolutions.

Also I want the nav bar in the center of the screen, it seems bit to the left to me.

Heres the link: www.commitech.co.uk/test

It will not work in IE at the moment, but that is because I have not updated that stylesheet. So please use firefox.

Cheers,

Sam

BoldUlysses
Mar 17th, 2009, 04:30 PM
Hi samtaylor159,

Welcome to CF! Thanks for posting a link to your page.

First things first: Make sure your page passes validation (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.commitech.co.uk%2Ftest%2F&charset=%28detect+automatically%29&doctype=Inline&group=0).

Next, to center your navigational element, I would recommend the negative margins (or "dead center (http://www.wpdfd.com/editorial/thebox/deadcentre4.html)") method of centering absolutely-positioned elements. Replace all your dropdown CSS with this:


#dropdown {
position:absolute;
top:150px;
left:50%;
width:650px;
margin-left:-325px;
border:1px solid #f00 /* diagnostic border */
z-index: 30;
}


Note the explicit width given to the element (650px--I just picked a number), the fact that it's positioned 50% from the left side of the page, then "backed off" half the element's width (325px) by using a negative left margin.

Get that sorted and we can help you with the left and right caps for the nav element.

samtaylor159
Mar 17th, 2009, 05:11 PM
Cheers msuffern,

It's looking a lot better now, understand how you've got in the center thats great!

Now for the rounded corners, I just had a quick play. But didn't succeed.

Thanks for your help so far,

Sam

BoldUlysses
Mar 17th, 2009, 05:49 PM
Hi Sam,

For the corners you have a couple of options:

1. Wrap the corners and the nav menu in a div:


<div id="navigation">
<div class="navleft"></div>
<ul id="dropdown">

...

</ul>
<div class="navright"></div>
</div>

and position that div like you did the <ul> before. Don't absolutely position the elements inside the div, but float them left (float:left;).

The downside to this method is that it's more code (http://csscreator.com/?q=divitis). I would do the second method:

2. Since you know the width of your nav <ul>, instead of making two caps, composite them into one (wide) background image and set it be on your nav <ul>. Give the <ul> a little left and right padding so that the caps are visible next to the list items.

samtaylor159
Mar 17th, 2009, 06:34 PM
Ok, used the way you suggested! Made it very easy cheers.

How would you recommend rounding the corners, of the content?

I can not really do it the same way as there maybe more text on some pages.

Cheers,

Sam

Excavator
Mar 17th, 2009, 07:09 PM
Hello samtaylor159,
I like rounding corners without images. Check out this CSS only demo - http://nopeople.com/CSS/rounded%20corners%20-%20CSS%20only/index.html

Just looked at your site and your menu corners don't seem to work well in IE7 or IE8. A reload made it look better but not IE7.
The dropdowns work fine in IE8, but not in IE7.

samtaylor159
Mar 17th, 2009, 07:38 PM
Yeh, I have a different stylesheet for IE. I haven't updated it yet.

Just trying to get it all working in FF, then deal with IE.

Thanks for the link, I am struggling to understand how it works. Could you give me a clue?

Sam

Excavator
Mar 17th, 2009, 07:52 PM
It might be easier to work with just one box till you see what bit of CSS affects what. Have a look at this, change the background colors to see which corner is which, change the margins to change the radius of the corners... play around with it and you'll figure out what you like -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
/***************the corners************************/
.rtop, .rbottom{
display:block;
background: #FC6; /*make this the color behind #box*/
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background: #999; /*make this the color of your corners*/
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

</style>
</head>
<body>
<div id="wrap">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b><b class="r4"></b></b>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
<!--end wrap--></div>
</body>
</html>

samtaylor159
Mar 17th, 2009, 08:01 PM
Just figured it out as you posted.

Did have a problem for a bit, with the padding on my div. Do you know how to get around that? I got rid of the padding in the end and put it on the <p> and <h2>.

Would you have done it differently?

Sam

samtaylor159
Mar 17th, 2009, 08:03 PM
Also is there any way to have a border with that method?

Sam

Excavator
Mar 17th, 2009, 08:11 PM
Just figured it out as you posted.

Did have a problem for a bit, with the padding on my div. Do you know how to get around that? I got rid of the padding in the end and put it on the <p> and <h2>.

Would you have done it differently?

Sam

If it's just a bit of text you can put a margin on the p tag ... If it's headings, text, lists... lots of stuff, a containing div centered in your rounded corner div might be easiest.

Excavator
Mar 17th, 2009, 08:15 PM
Hehe, maybe the containing div answers both questions? Look at this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#content {
margin: 3px 8px;
background: #fff;
padding: 10px 30px;
}
/***************the corners************************/
.rtop, .rbottom{
display:block;
background: #FC6; /*make this the color behind #box*/
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background: #999; /*make this the color of your corners*/
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>
</head>
<body>
<div id="wrap">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b><b class="r4"></b></b>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end content--></div>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
<!--end wrap--></div>
</body>
</html>