14 replies [Last post]
lifetalk
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-11-08
Posts: 13
Points: 0

Hi guys...

I was up coding a layout I created in photoshop. However, I cannot seem to figure one part... which is also the last one...

Here's the code from the CSS file

/* * For Rapid Premium * By * Hamza... * */

body {
background: #FFFFFF no-repeat;
margin: 0px;
margin: 0px;
font-family: Tahoma;
color: #666666;
font-size: 13px;
}

#layout {
width: 1023px;
text-align: center;
margin: 0px auto;
}

#headerbg {
background: #FFFFFF url(images/bg.gif) repeat-x;
width: 1023px;
height: 133px;
}

#logo {
float: left;
background: url(images/logo.gif) no-repeat;
width: 583px;
height: 134px;
}

#slogan {
float: right;
background: url(images/slogan.gif) no-repeat;
width: 296px;
height: 134px;
}

#img {
border: none;
}

#navlayout {
width: 1023px;
text-align: center;
margin: 0px auto;
}

#navbg {
background: url(images/navbg.gif) repeat-x;
width: 1023px;
height: 30px;
margin: 0 auto;
}

#navcontainer ul {
float: left;
text-align: left;
padding: 0;
margin: 0;
list-style-type: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
margin: none
}

Here's the HTML code:

Rapid Premium

Here is what it looks like:
http://www.clipgamers.com/rp

I am sure looking at the site, you can figure out what problem I have, but for some reason, the buttons when placed, start from the middle and not from the left. Moreover, if I add two of them, the second one gets pushed down..

Earlier, I managed to get them in line from the left, but they were vertically misaligned Sad

I would really appreciate all possible help please Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

First, before anything else

First, before anything else you need to validate that html. CSS standards don't exist for invalid html.

Second, switch to a STRICT doctype.

Resources that will show you how to do this are available on this site and on the web.

But until you have valid html you don't have a basis for solving the problem. We ask you to do this right up front in the sticky messages in each forum and we expect you do it before you post.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lifetalk
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-11-08
Posts: 13
Points: 0

Hi there, Really very sorry

Hi there,

Really very sorry for not validating it.

Just finished making the adjustments. Everything is valid and up to the mark now.

However, now I have two problems.
One which I mentioned earlier about the mis-aligned links that I cannot seem to understand how to fix.

The other is the border around the image links, which I cannot seem to lose. Since it is STRICT, embedding the 'border' tag in the attribute returns an error while validating and I do not know how to embed the 'border=0' tag in CSS (I mean, what attribute/tag to use?).

I've also updated the code in the first post.

Would really appreciate if someone could point me in the right direction if solutions for this problem already exist, since I do not know what terms to use while searching for this specific problem.

Thanks for the information Seedhouse

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 43 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

lifetalk wrote:Hi

lifetalk wrote:
Hi there,

Really very sorry for not validating it.

Just finished making the adjustments. Everything is valid and up to the mark now.

However, now I have two problems.
One which I mentioned earlier about the mis-aligned links that I cannot seem to understand how to fix.

The other is the border around the image links, which I cannot seem to lose. Since it is STRICT, embedding the 'border' tag in the attribute returns an error while validating and I do not know how to embed the 'border=0' tag in CSS (I mean, what attribute/tag to use?).

I've also updated the code in the first post.

Would really appreciate if someone could point me in the right direction if solutions for this problem already exist, since I do not know what terms to use while searching for this specific problem.

Thanks for the information Seedhouse

The second problem is rather easy. Add a

img
{
border: none;
}

to your CSS.

For the original question you have 2 options. Well, actually only one that is right to do. First of all, a menu is a list of links, so you must use a ul tag for the list and li for the single links. There is a great tutorial here.

That's the basic. Unfortunately your image is not accessible. I would recommend you take of the writing and add it as a background to your CSS and add the link name to your html.

lifetalk
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-11-08
Posts: 13
Points: 0

Thanks again for the help

Thanks again for the help and response.
I'll take a look at that tutorial now and post my response here.

However, I did not quite get what you meant by image not being accessible.
And would also appreciate if you could somehow list an example of how I would add it as a background to CSS and integrate in HTML Smile

Thanks again and sorry for all the trouble I am making you guys go through.
I am learning CSS, and it does get a bit sticky at times for me Sad

EDIT: The no-border code for CSS you gave me does not work Sad
Also took a look at that link. Here is what I've managed to do so far. Now, the border is that, and the image is also vertically mis-aligned ...

Help please Smile

EDIT2: I've also updated the first post with the changed code.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Lifetalk, I want to

Lifetalk, I want to compliment you on taking my words the way they were meant and in good spirit. Some react quite differently.

With your attitude I predict that, as you are willing to and interested in learning, you will soon be a real guru.

I second the advice the others gave, and repeat that you should move to a strict doctype. I recommend working through the tutorials at html dog, and after that I suggest you read through the Truth and Consequences of Web Design, and also the Web Matters site as well, to learn to understand the nature of the Web and how that should affect web design.

Also, remember that the web is not paper, and learn to use semantic coding practices as html dog shows you.

Taking a bit of time to learn this stuff now will save you hundreds of hours later on.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lifetalk
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-11-08
Posts: 13
Points: 0

Ah no.. My pleasure

Ah no.. My pleasure actually.
I would much rather follow the advice of someone who's been on a board longer than me, and has a lot more experience Smile
More so, it was entirely my mistake for not reading the stickies (even though I've been here for quite sometime now and got 2 issues resolved earlier, thanks to all of you), so yeah, it'd make no sense for me to flare up over something logical.

Thanks again for the resources. Really appreciate it Smile
I'll go through them tomorrow morning (it's pretty late here right now) and post my comments here once I am done Smile

Triumph (not verified)
Anonymous's picture
Guru

lifetalk wrote:Ah no.. My

lifetalk wrote:
Ah no.. My pleasure actually.
I would much rather follow the advice of someone who's been on a board longer than me, and has a lot more experience Smile
More so, it was entirely my mistake for not reading the stickies (even though I've been here for quite sometime now and got 2 issues resolved earlier, thanks to all of you), so yeah, it'd make no sense for me to flare up over something logical.

Thanks again for the resources. Really appreciate it Smile
I'll go through them tomorrow morning (it's pretty late here right now) and post my comments here once I am done Smile


Wow. Have things changed since I quit posting?

If more people had lifetalk's attitude I may stick around for a while. :thumbsup:

Yes, I did quit coming for quite some time because I simply got fed up with new folk showing up and berating the long timers for asking that the rules be followed. I have a feeling that still not many react logically as this. I may read a bit more and stick around if thing have become somewhat civil.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Triumph wrote: Wow. Have

Triumph wrote:

Wow. Have things changed since I quit posting?

If more people had lifetalk's attitude I may stick around for a while. :thumbsup:

Yes, I did quit coming for quite some time because I simply got fed up with new folk showing up and berating the long timers for asking that the rules be followed. I have a feeling that still not many react logically as this. I may read a bit more and stick around if thing have become somewhat civil.

I am afraid lifetalk is a shining exception to the rule and othererwise things are pretty much the same.

Still, it is certainly encouraging and a morale booster when someone like this turns up.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 43 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

lifetalk wrote: EDIT: The

lifetalk wrote:

EDIT: The no-border code for CSS you gave me does not work Sad
Also took a look at that link. Here is what I've managed to do so far. Now, the border is that, and the image is also vertically mis-aligned ...

EDIT2: I've also updated the first post with the changed code.

EDIT: I didn't figure you would still work with an inline image. So, make it img a if you use it in a link.

EDIT 2: I am only speaking for myself, but it would help, if you would rather post the updated code separately than changing the post. It will help people with the same issue in the future. And of course a link to the uploaded page is most appreciated.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Lifetalk, looking at your

Lifetalk, looking at your code now it is valid and has a strict doctype, but it's missing a lot. Mainly it's missing content!

Now I don't know about you, but I don't go to a site for it's pretty layout. I go to it for information and I want that information to be as easy to get as possible. There are studies that indicate that most real people do that.

This being so, I think you are designing your site backwards. You shouldn't be trying to shoehorn your content into a preconcieved layout. You should be developing a layout to make the content most available and useable to the visitor.

So I think you should forget about the layout for awhile and put your content in. Get rid of all the empty DIVs and graphics and put in your content and mark it up semantically. Don't even think about layout while you do that.

Then, when that is done and done properly, is the time to start designing a layout that best compliments this content. You might have to add the odd DIV and SPAN here and there, but mostly good semantic markup gives you all the CSS hooks you need to do the layout.

This approach, I have found, results in easier and cleaner code and, with a little creativity, the results can not only look good, but be easy to use.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Triumph (not verified)
Anonymous's picture
Guru

Ed Seedhouse wrote:I am

Ed Seedhouse wrote:
I am afraid lifetalk is a shining exception to the rule and othererwise things are pretty much the same. ...

Oh, well. Nice seeing you again, Ed. I'll check back in a few months. Smile

Apologies to the OP for the off topic banter.

lifetalk
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-11-08
Posts: 13
Points: 0

Ed Seedhouse wrote:Triumph

Ed Seedhouse wrote:
Triumph wrote:

Wow. Have things changed since I quit posting?

If more people had lifetalk's attitude I may stick around for a while. :thumbsup:

Yes, I did quit coming for quite some time because I simply got fed up with new folk showing up and berating the long timers for asking that the rules be followed. I have a feeling that still not many react logically as this. I may read a bit more and stick around if thing have become somewhat civil.

I am afraid lifetalk is a shining exception to the rule and othererwise things are pretty much the same.

Still, it is certainly encouraging and a morale booster when someone like this turns up.

Glad to know that my attitude here is generally approved Smile

Triumph wrote:
Ed Seedhouse wrote:
I am afraid lifetalk is a shining exception to the rule and othererwise things are pretty much the same. ...

Oh, well. Nice seeing you again, Ed. I'll check back in a few months. Smile

Apologies to the OP for the off topic banter.

Nah.. not a problem Wink

Ed Seedhouse wrote:
Lifetalk, looking at your code now it is valid and has a strict doctype, but it's missing a lot. Mainly it's missing content!

Now I don't know about you, but I don't go to a site for it's pretty layout. I go to it for information and I want that information to be as easy to get as possible. There are studies that indicate that most real people do that.

This being so, I think you are designing your site backwards. You shouldn't be trying to shoehorn your content into a preconcieved layout. You should be developing a layout to make the content most available and useable to the visitor.

So I think you should forget about the layout for awhile and put your content in. Get rid of all the empty DIVs and graphics and put in your content and mark it up semantically. Don't even think about layout while you do that.

Then, when that is done and done properly, is the time to start designing a layout that best compliments this content. You might have to add the odd DIV and SPAN here and there, but mostly good semantic markup gives you all the CSS hooks you need to do the layout.

This approach, I have found, results in easier and cleaner code and, with a little creativity, the results can not only look good, but be easy to use.

Thanks for the tips again Ed. Appreciate you trying to help me out in every aspect Laughing out loud

Actually, the site that I am designing this theme for, is less content-oriented. It'll generally be a static page with a user-based, authenticated script. And, it is not even completed yet.
Though I agree about the content first idea, because it's practical. Thanks for the link too.

And yeah, I got the problem solved out.
Thanks to Caposoft for the resources he pointed out yesterday, which helped me solve the inline CSS problem. And thanks to the resources you outlined, I managed to solve the vertical misalignment. I just had to add the 'position: fixed;' to the ul attribute in the CSS stylesheet.

My aim, actually, is to get to the level of the guy behind www.freecsstemplates.org
I am a fan of his designs, and he's my inspiration behind learning CSS and XHTML (valid and now.. strict) Smile

Caposoft wrote:
lifetalk wrote:

EDIT: The no-border code for CSS you gave me does not work Sad
Also took a look at that link. Here is what I've managed to do so far. Now, the border is that, and the image is also vertically mis-aligned ...

EDIT2: I've also updated the first post with the changed code.

EDIT: I didn't figure you would still work with an inline image. So, make it img a if you use it in a link.

EDIT 2: I am only speaking for myself, but it would help, if you would rather post the updated code separately than changing the post. It will help people with the same issue in the future. And of course a link to the uploaded page is most appreciated.

For the first problem, yeah, I figured that making it 'img a' would fix the problem.

Sure will. Once I get round to finishing the design by tonight, I'll post all my codes here (except the invalid one).
With links to source code and stuff so anyone facing the same problem can look it up.

And yeah, the link to the uploaded page is in the first post. Right below the code for the main index file.
I believe you missed it? Smile

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 43 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Yep, missed it today

Well, I saw your link when I read your initial post several days ago. That's why I mentioned not to use images in a navigation. Today I just scrolled up and down and overlooked the link. My error. Wink

You're on the right path willing to learn, not only to do it, but to do it right. Your attitude secures you a goodwill of the people sharing their experience.

I am a newbie myself, started at 0 almost 5 months ago. Maybe you consider my little advise. I have made Google and the browsers' unlimited bookmark feature my best friends. I save interesting blogs and tutorials, even when they didn't handle the issue at that time, but whatever I want to achieve today, it is in there.

lifetalk
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-11-08
Posts: 13
Points: 0

Not a problem, though I

Not a problem, though I guess I should make it such that it is visible and stands out (the link to the site Wink )

I too use the handy (Ctrl + D) feature in Mozilla Firefox. It really does come in handy... and yeah, same for Google. That's how I found this forum Laughing out loud

Donno about you being a newbie, but your resource and advise sure helped. Thanks Smile