Help with sprites and CSS

[DezUk]

How come the head tag doesn't need closed at the end?

 

[gerico]

Sorry, I didn't explain that very well. I meant you have two closing head tags, one in the header where it belongs, but a duplicate just before the body closes

 

[DezUk]

Got ya!

I did have one question. This is a 2 column design as I was thinking of having a twitter feed and some icons on the right column but how could I make the text wrap around the image?

As I might just got with text and the odd image to keep things simple. Same applies to the email/phone text on the header, this is a background-image but how is best to split the div and float the text right?

 

[gerico]

Well, if you wanted the text to wrap the image, you'd need to move the image into the left column and simply float it left, the text will then automatically wrap it. You then just add some margin to the right + bottom of the image to create some space between text and the image.

Let me roughly show you what i mean, that'd be easier. I'll post a fiddle shortly

 

[gerico]

It's a little rough, classes could be better named and the code neater, but this should put you on the right track: http://jsfiddle.net/x7Jw9/4/

 

[DezUk]

Thanks yet again mate.

I have been looking over the code today and have tried to make it a little simpler on my site http://www.rdoyle.info.

Few points:

1. I can't get the main body of the site to line up (center) with the header.
2. I have added code to the CSS for the visited link state, so that when on a link its shows as underlined but doesn't seem to be working.
3. I tried using your code for the header text but wouldn't work so I have just stuck with header image as a background.

Any pointers?

Cheers!

 

[DezUk]

And can you also explain what the .group class is doing, can't get my head around that.

Cheers

 

[gerico]

Well the group class is just a clear, to clear any floats that would otherwise break layout. When you float something, your taking it outside of the document flow, so the clear's job is to reset the effects of the float.

You can call the class anything, some people just use clearfix. I would also make sure your using the html DOCTYPE as i just realized your not. Your using a tag new to HTML5, the nav tag. You can read up about it here.

To make your main column line up with the head, you just need to remove the padding on the main div.

 

[DezUk]

Nice one mate, you have been a great help!!

One more question, any idea why the bullet points are not indented?...... should I create a new class for them?

 

[gerico]

Nice one mate, you have been a great help!!

One more question, any idea why the bullet points are not indented?...... should I create a new class for them?

No problem! You just need to add some padding to the ul, this will most likely add padding to your navigation ul as well, if you just globally target

ul{
padding-left: 20px; }

But that's cool, because you'd just target the navigation individually to remove that padding. Like:

nav ul{ padding: 0; }

 

[DezUk]

Cool got it sorted with some inline CSS:

<ul style="padding: 0px 0px 20px 50px">

Any ideas on having the top links showing the underline when on the page i.e. when on About Me it stays underlined.

I thought the visited state would sort that:

nav li a:visited {
    border-bottom: 1px solid #63C2DE;
}

 

[antijoke]

Ignore me.

 

[zyfar]

Cool got it sorted with some inline CSS:

<ul style="padding: 0px 0px 20px 50px">

Any ideas on having the top links showing the underline when on the page i.e. when on About Me it stays underlined.

I thought the visited state would sort that:

nav li a:visited {
    border-bottom: 1px solid #63C2DE;
}

The visited pseudo selected won't do that. You will need to add a class to the current active page, for example if your on the about.html page add a class to that about link. ie:

<li class="aboutme active"><a href="http://rdoyle.info/about.html">About Me</a></li>

Then add a style for the li.active selector:

nav li.active a {
border-bottom: 1px solid #63C2DE;
}

Do the same for all the other pages