PDA

View Full Version : Few layout issues...


Rob_Che
04-12-2008, 12:02 AM
I've been working on my first full CSS site...
PLEASE ignore the design, I'm just building the guts :roll:

Here's the site in question (http://www.wireroses.co.uk/main.htm)

1: My altnav inthe footer is aligning right but to the content div rather than full width, why?
Here's the layout css (http://www.wireroses.co.uk/css/main-layout.css)

2: The list of links should actually be a horizontal black nav but the global link classes are taking over... why oh why?
Here's the nav css (http://www.wireroses.co.uk/css/nav.css)

3: The site itself isn't centered in IE but it is in FF...

Thanks in advance...
Rob

Cary
04-12-2008, 02:44 AM
1: My altnav inthe footer is aligning right but to the content div rather than full width, why?

This is because your footer is within the content div rather than after it.

2: The list of links should actually be a horizontal black nav but the global link classes are taking over... why oh why?

The browser isn't finding the style sheet because the link in the head of your page isn't pointing to the correct location. Just fix that.

Also, you missed the hyphen in "margin-top" in the code below (I added the left margin too because default left margins for ul elements vary with browsers).

ul#navlist
{
height: 20px;
margin-top: 10px;
padding: 0;
list-style-type: none;
white-space: nowrap;
margin-left: 16px;
}

3: The site itself isn't centered in IE but it is in FF...

IE is displaying the page in quirks mode because you don't have a complete doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Rob_Che
04-12-2008, 08:31 AM
Legend - I will change code and come back...
Sometimes the easiest bits I skip, looking for something complicated to solve !

I appreciate your help Cary.

Rob_Che
04-12-2008, 09:28 AM
Cheers Cary... I've made the changes you suggested and they worked a treat.
I was hoping that when the navlist found the css it would remove any white-space but it still has a void area around it ?

I want it to do 2 things;
1: Sit right up against the header with no space (I assumed it would do this if I didn't give it any spacing orders...
2: Fill any space it has. ie: so I can set left and right margins but it would fill 100% of the rest of the space.
Have I missed a padding somewhere ?


Cheers for your hep on the rest... working great now.

Rob_Che
04-12-2008, 02:08 PM
Ah HA! sorted the menu...
Gonna try and change the bg colour for images now... wish me luck ! ;)

Rob_Che
04-12-2008, 04:26 PM
So... some areas aren't working now...

My header has an image background.
This works fine until I add this code:
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
I got this code from a tut. It's recognise the body class to show what page you are currectly on. When I add this code tho I can no longer see my header bg image. It just doesn't show.

I can see that there are height and bg attributes to this code - are they conflicting ?

Cheers
Rob

Cary
04-12-2008, 07:40 PM
Hi Rob, looks like the path is incorrect. Instead of

../images/headers/about.jpg

use

../images/about.jpg

Or create a headers folder for the image.

Rob_Che
04-12-2008, 11:52 PM
Cheers Cary... Why is it that I've been using HTML for years but soon as I start on CSS my brain goes to mush? :grin:

You're a great help.

Take a look at it now... I'm pretty pleased so far.
Still some areas that I've just copy/pasted but I'll deconstruct as I go ;-)

Something that I am curious over... Why does my paper label only show as a link for the first 40 px at the top
Also when i added the position css for the label it threw the menu position out? Why does it do that? I've had to go into minus figures to get the menu back where I want it...

Thanks all
Rob :smile:

Rob_Che
04-12-2008, 11:53 PM
Just noticed my minus figs have played havoc in IE...
The link works full height/width tho... wierd...

Where's that table button ? hehe... joking !

Death Dream
04-13-2008, 12:03 AM
Something that I am curious over... Why does my paper label only show as a link for the first 40 px at the top

That is a bit odd, take out the height and width from the img tag. I don't put that in an image that does not need to get resized for some reason.

Not sure if that is gona fix your problem but worth a shot.

Edit: AAAARGH you already figured it out .... I was to busy looking at your code.

~Death Dream~

Rob_Che
04-13-2008, 12:15 AM
Hey Death... strange how we have wandered in here over the last few weeks... Do you think we can sue these guys for bullying us into CSS-WORLD!? haha...

I still have the problem above in FF... IE has positioning errors...
I'm too tired to mess with it now !

Cheers Death
Rob

Death Dream
04-13-2008, 12:28 AM
Hey Death... strange how we have wandered in here over the last few weeks... Do you think we can sue these guys for bullying us into CSS-WORLD!? haha...

HAHA! I wish lol.

I'll look more into it after I get back. Going out to eat in a few mins.

~Death Dream~

Cary
04-13-2008, 03:37 AM
Something that I am curious over... Why does my paper label only show as a link for the first 40 px at the top

I don't know and now I never will because the changes suggested below fix that as well as the menu positioning in IE.

Also when i added the position css for the label it threw the menu position out? Why does it do that? I've had to go into minus figures to get the menu back where I want it...

This may be do to the 90px top margin you have for "#main-nav dt".

Just noticed my minus figs have played havoc in IE...

This is why I recommend avoiding the use of negative margins if at all possible. IE does weird things.

Do you think we can sue these guys for bullying us into CSS-WORLD!? haha...

Not a jury in the world would convict us!!

But I digress...

So, I simplified this code. Where'd you find the menu tag??

<div id="header">
<h1> <a href="#"><img src="images/label.gif" width="308" height="173" alt="Wire Roses" border="0" /></a> </h1>
<dl id="main-nav">
<dt id="portfolio"><a href="#">portfolio</a></dt>
<dt id="services"><a href="#">services</a></dt>
<dt id="contact"><a href="#">contact</a></dt>
<dt id="about"><a href="#">about</a></dt>
</dl>
</div>

And then changed this CSS:

#main-nav {
margin: 0;
padding: 0 36px 0 0;
height: 30px;
position: absolute; /* Its postion will be relative to #header */
right: 0; /* positioned at right edge of #header */
bottom: 0; /* positioned at bottom edge of #header */
}

#main-nav dt {
float: right; /* or you can use float:left and also reverse the order of the links in the html */
}

body.about #header {
height: 190px;
background: #db6d16 url(../images/about.jpg);
position: relative; /* so #main-nav can be positioned at its bottom right corner */
}

The "#main-nav dl" and "menu" selectors are no longer necessary. I removed the #main-nav selector with IE-for-Mac-hacks so I wouldn't get confused. You'll probably need to modify it if you're going to keep it.

Death Dream
04-13-2008, 04:20 AM
Now I don't want to steal your thread but since we are both trying to learn CSS I figured it wouldn't hurt if I tossed in my question that deals with your site.

What is the dl and dt tags? Is that some what the same as my way of doing the list thing on my navigation?

~Death Dream~

Cary
04-13-2008, 05:50 AM
dl and dt are for definition list and definition term. I prefer ul and li since we're not really talking about definitions here.

Rob_Che
04-13-2008, 09:04 AM
dl and dt are for definition list and definition term. I prefer ul and li since we're not really talking about definitions here.

Does it matter?

I've always used ul but the tut I followed had dl/dt...
Wasnt sure of the difference TBH...

I'm shooting in a barrel at the moment...

Rob_Che
04-13-2008, 09:14 AM
Where'd you find the menu tag??This was my attempt to set up a div class for positioning the main nav.

menu {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
float: right;
margin-top: -106px;
padding-right: 36px;
}

Rob_Che
04-13-2008, 02:22 PM
Ok... cheers for all your help guys...

I've made the changes suggested and I'm even starting to see things in more familiar terms...

The changes made now work great in IE but in Firefox the menu is dropping below the header by 12px. (i measured)
The only thing I can find that is set at 12px is the global text.
If I remove this value:
/* global font tags */
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}
It moves the nav to the right place in IE + FF!?

Are there some text properties in theheaderthat I can remove?


Cheers :D

Cary
04-13-2008, 07:36 PM
Your style sheets are fine. Its the html that needs to be changed. You have this code:

<div id="main-nav">
<dl>
<dt id="portfolio"><a href="#">portfolio</a></dt>
<dt id="services"><a href="#">services</a></dt>
<dt id="contact"><a href="#">contact</a></dt>
<dt id="about"><a href="#">about</a></dt>
</dl>
</div>


You need to remove the div and move the id to the dl tag like this:

<dl id="main-nav">
<dt id="portfolio"><a href="#">portfolio</a></dt>
<dt id="services"><a href="#">services</a></dt>
<dt id="contact"><a href="#">contact</a></dt>
<dt id="about"><a href="#">about</a></dt>
</dl>

Rob_Che
04-13-2008, 07:58 PM
Sorted !

I'm a happy guy... I can crack on with the design now.

Massivehelp Cary - sorry you had to repeat yourself - I'm trying not to cut/paste so missed when you removed the "div"...
I'll post abck when the design is moving along...

Cheers
Rob