Redesigning site with css and xhtml(Need Help)

@BlackDragon1012Jun 22.2004

I am redesigning my old html tables design to a strict xhtml and css tableless design. I am having some problems. First, the top menu links aren’t verticly aligned right and i cant fix it. I want the links in the middle. Second, The side menu wont go down all the way to the bottom. I have tried height: 100%; and height: auto; and a couple other things but it doesnt affect it. I will post more problems as i encounter them. I am trying to make it look almost exaclty like the old one, but better.

New underconstruction design: ~~[URL]~~http://www.mystupidcrap.com/scott/index2.php[/URL]

Old table design: ~~[URL]~~http://www.mystupidcrap.com/scott/index.php[/URL]

to post a comment

CSS

18 Comments(s) _↴

@David_HarrisonJun 22.2004 — #This creates a centred menu without the dashes, if you want those then they would have to be worked in as some sort of background image, it doesn't make any sense to have them in the source.

I have used an unordered list to markup the navigation links because that's what the links are, unordered and in a list, <div> tags don't mean anything, always use the correct tag for the job.

<i>
 </i>&lt;style type="text/css"&gt;&lt;!--
 
 #menu{
 text-align:center;
 list-style-type:none;
 margin:0;
 padding:0;
 background-color:#232323;
 border-bottom:1px solid #4c4c4c;
 }
 
 #menu li{
 display:inline;
 margin:0;
 padding:0 10px;
 line-height:2em;
 }
 
 --&gt;&lt;/style&gt;
 
 &lt;p style="position:absolute;top:-99999px;left:-99999px;"&gt;&lt;a href="#primarycontent"&gt;Skip navigational links.&lt;/a&gt;&lt;/p&gt;
 
 &lt;ul id="menu"&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Province&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Kingdom&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Guild&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Help&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Players Guide&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

I have also slipped in a skip nav link for benefit of users with screen readers, they don't want to sit through a list of links every time they load a page.

I have also uploaded a simple layout that allows you to place your side-bar after the main content in the source and still have a footer at the bottom of the page.

[upl-file uuid=b6e61f1e-bf9c-4f31-8cbc-0e5d3deff17b size=2kB]layout 3 (left only).txt[/upl-file]

@BlackDragon1012authorJun 22.2004 — #

1. My div tag does do stuff it makes the backgrounds and the layout

2. O ya i forgot to put it in a list

3. I dont know why you are giveing my this layout its nothing like the one im trying to make and it doesnt even fix any of my problems.

4. After i put the links in an unordered list they are still not verticly aligned right.

5. Do you have any ideas on the height of my side bar thing

@David_HarrisonJun 22.2004 — #[i]Originally posted by BlackDragon1012 [/i]

[B]1. My div tag does do stuff it makes the backgrounds and the layout[/b][/quote]Other tags can do the same job. <div> tags aren't magic you know. ?

[i]Originally posted by BlackDragon1012 [/i]

[B]3. I dont know why you are giveing my this layout its nothing like the one im trying to make and it doesnt even fix any of my problems.[/b][/quote]The layout I uploaded is pretty much exactly what yours is like, stuff at the top and then two columns, sound familiar? In the layout I uploaded though, the side-bar comes after the main content in the source (and since the main content is more important, this makes sense).

[i]Originally posted by BlackDragon1012 [/i]

[B]4. After i put the links in an unordered list they are still not verticly aligned right.[/b][/quote]You should forget about giving the <ul> a height, and instead let the height be set via the text, if you allow the text to expand by using relative font sizes (and you should) then the bar should change height as well. I gave the text in the <li>'s a line height of twice the font-size (2em) which pretty much vertically aligned them, you could tweak that with padding on the <ul> to make it perfect.

[i]Originally posted by BlackDragon1012 [/i]

[B]5. Do you have any ideas on the height of my side bar thing [/B][/QUOTE]Height 100% will only make the element as tall as it's parent element, therefore it will not work. Doed [url=http://www.alistapart.com/articles/fauxcolumns/]this[/url] aritcle help any?

@BlackDragon1012authorJun 23.2004 — #Hmmmm. It should work getting rid of the hight dunno why i didn't think of it before, but it doesn't. Look what it does. It makes this odd space and doesnt fill it with a background color. None of my CSS elements have padding or anything like that. I can't figure out what it wrong. Please Help.

About the article it sounded promising at first, but it didnt help it was useing a background image which im not and i still tried it, but it didn't work. Do you have any other ideas. If u go into my source you can see where my css is, but im sure you already knew that.

Also, for my layout it would have been easier to just tell me to move the div above the other div instead of telling me to use your code. I will assum that it will just make it load first because i dont see any other good that will come of moveing it.

For my divs what should i use instead. I only have 5 and im going to try and get rid of that one that just aligns that thing left. I just did that because i couldn't figure out why it wouldn't align right i tried classes and putting it in #topbar img {}, but nothing would work. So if you could help me with that too. The other 4 are purely for layout and i dont see any other way except for tables and i think this is better right?

@David_HarrisonJun 23.2004 — #You need to remove the default margins (and padding) provided to the <ul> and the <li> by the browser. It is the margins that are causing a problem but the padding could also foul things up in future if you don't get rid of it.

@BlackDragon1012authorJun 23.2004 — #I do get rid of it here:

body {

background-color: #000;

margin: 0;

padding: 0;

border: 0;

}

By the way i fixed the left align div. So now i only have 4 and they are pure layout.

@BlackDragon1012authorJun 23.2004 — #I take that back you were right. My code should work though. Shouldn't it go down the ul if i set it for the body. Whatever at least its fixed. Now to the other problems. Please help. Look up if u havent seen them.

@David_HarrisonJun 23.2004 — #Just because you have removed that padding and margin on the <body>, doesn't mean you have removed the padding and margin on the <ul> and <li>'s.

That's good, fewer <div> tags (fewer of any tags) is a good thing. When you put your content in and you start getting more tags, try using the right tag for the job. Eg: For a list of links use and unordered list, for a paragraph of text use a paragraph tag etc.

Most people when they get onto CSS just use <div> tags for everything instead of using the proper tag for the job.

Another little tip, try removing your stylesheet (only temporarily) and looking at your page, if everything can be read and understood, and the message gets accross, then you web-site coding is pretty good. At the moment, your site is pretty good on the coding front.

Although having said that, why are you using <h4> tags when you don't have any <h1-3> tags? They should be used to denote the importance of headings, you can't just skip out a few numbers.

Edit: Woah, I just noticed something funny going on here. Your list looks like this:

<ul>

<li>

<li></li>

<li></li>

<li></li>

</ul>

Fraid that's a bit wrong, it should be like this:

<ul>

<li></li>

<li></li>

<li></li>

</ul>

That's a good reason to lay out your code neatly, if you had each new <li> on a new line it would be easier to spot problems.

Also, if you keep [url=http://validator.w3.org/]validating[/url] as you code you'll catch errors like this.

@BlackDragon1012authorJun 23.2004 — #About the h4 thats because i will be having 3 other heading of more improtance i just havent gotten to that yet. Any idea how to make the sidebar go down all the way. Thanks for your help so far.

Another small thing. I can't seem to get rid of the space after the <hr /> with css how do i do that i have right now:

hr {

height: 1px;

width: 100%;

color: #4c4c4c;

margin: 0px;

padding: 0px;

border: 0px;

}

@David_HarrisonJun 23.2004 — #Wow, you replied so fast! I wonder, did you see my edit?

Anyway, don't use an <hr>. You have a list that ends literally just above it, just put a bottom border on that list.

What exactly is the effect you're after with the side-bar? I don't quite understand you.

@BlackDragon1012authorJun 23.2004 — #I didn't see your edit, but right before i came back to see if you replyed again i validated it and fixed it. As for the effect of my side bar look at my orginal site that has tables. The url is in my first post it shows what im trying to do.

@David_HarrisonJun 23.2004 — #I still don't see what you're getting at with the effect you want for the side-bar. As far as I can see the content in the side-bar just flows down the page.

The div tag surrounding your ul can just go you know, give the id to the ul tag itself and apply the styles to that like I did in my example.

@BlackDragon1012authorJun 23.2004 — #The effect im going for is a line strait down my screen. I can just asign an id to a ul because im going to have a bunch of seperate uls. Im going to make a bunch mini window/menu things in there for stats and sub menus and mail and all that crap. [B]The div only goes down as far as the content inside, but i want it to go all the way down to the bottom no matter what.[/B]

@David_HarrisonJun 23.2004 — #I meant, change this:

&lt;div id="menu"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="index.php"&gt;Province&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="index.php"&gt;Kingdom&lt;/a&gt;
 &lt;/li&gt;&lt;li&gt;&lt;a href="index.php"&gt;Guild&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="index.php"&gt;Help&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="index.php"&gt;Players Guide&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
 &lt;/div&gt;

To this:

&lt;ul id="menu"&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Province&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Kingdom&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Guild&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Help&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Players Guide&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

Then apply your styles to the <ul id="menu"> rather than the <div id="menu">.

I see what you mean with the line now. You could set a repeating background on the body tag, just one pixel, repeat-y and use the background-position to move the line to the left a bit and get it in the right place.

the easier alternative would probebly be to just set a left border on the #primarycontent and the #sidebar, then make them overlap by 1px so that whichever is longer, the line will still go all the way down.

@BlackDragon1012authorJun 23.2004 — #i cant do that because everything on the side bar isnt going to be a list. I don't see whats wrong with the div except for the problem i am having now but this wouldnt fix it because if neither of the main content goes to the bottom or the sidebar then it wont go to the bottom.

Do you know how i can get the border i put on the <p> in the main content section to only go as long as the <p> and not the whole screen

On an unrealated topic is the size change of the links on the right side annoying.

@David_HarrisonJun 23.2004 — #[i]Originally posted by BlackDragon1012 [/i]

[B]i cant do that because everything on the side bar isnt going to be a list.[/b][/quote]I wasn't talking about the side-bar menu, I was taking about the top nevigation bar menu. You have a ul in a div tag, and you don't need the div tag.

[i]Originally posted by BlackDragon1012 [/i]

[B]if neither of the main content goes to the bottom or the sidebar then it wont go to the bottom.[/b][/quote]So then I suggest a 1px by 1px square set as a background to the body, you can set it to repeat-y and use background-position to get it into the right place.

[i]Originally posted by BlackDragon1012 [/i]

[B]Do you know how i can get the border i put on the <p> in the main content section to only go as long as the <p> and not the whole screen[/b][/quote]Set the <p> tag to display:inline;

[i]Originally posted by BlackDragon1012 [/i]

[B]On an unrealated topic is the size change of the links on the right side annoying.[/B][/QUOTE]A little bit, mainly because all of the content underneath moves up a pixel.

Don't use px for font sizes, if you do that then in IE the text can't be resized (that's bad). Instead use % or em, so for your side bar you might try font-size:80%; and if you still want to keep the text resize onhover then I suggest giving the link text a line height that stays constant, try setting line-height:120%; in the a:link styles.

By the way, I notice that all of your side-bar comes before the main content now. ?

@BlackDragon1012authorJun 23.2004 — #So then I suggest a 1px by 1px square set as a background to the body, you can set it to repeat-y and use background-position to get it into the right place.[/QUOTE]

I tried it and it didnt work. I am either doing it wrong or it just doesnt work.

Set the <p> tag to display:inline;[/QUOTE]
The works, but it makes the border show on everyline, so if the text goes more than 1 line im screwed.

By the way, I notice that all of your side-bar comes before the main content now. ?[/QUOTE]
Ya i had it the other way but the layout got messed up so i moved it back

Also what do the percentages acually mean because i had the same percent for some things but they were differnet sizes. I think i had another questions but i forget so ill post if i remember

@David_HarrisonJun 23.2004 — #The background styles should look a little like this:

background:#000 url(square.gif) repeat-y;
 background-position:180px 0;

But make sure that there's nothing covering the line up, background colours of elements will hide what is underneath them, if the line is hidden, try removing background colours from things and allow the background colour of the body to fill in the gaps.

Try setting the <p> tag to float:left; that will shrink it's width, but then you will have to use clear:both; on the element that comes after it.

The percentage (when used for font sizes) will set the font size at that percentage of what it's parent font size is.

Say for example you had a div tag and you set a font size 20px on it. Then inside that div tag you have another with font size 50%, the actual font size there would be 10px.

If you had another div tag inside that one with font size 50% then it's actual font size would be 5px etc.

It's a good idea never to use a font size less than 100% of the users default size, this respects the users default font size preference by not giving them text so small that they need to up their font size preference just for your page.

Also in #CSS _↴

Achieving the effect of a viewport-fixed background being only visible inside a div?JavaScript accessing element style information display:none for any element except one

Success!

Help @BlackDragon1012 spread the word by sharing this article on Twitter...

Tweet This

Redesigning site with css and xhtml(Need Help)

18 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Redesigning site with css and xhtml(Need Help)

18 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #CSS _↴