Redesigning a website using pure css (ARRRGH!)

@The_CheatApr 08.2004

Hello ?,
I’m redesigning a website that i originally built using tables. I’m trying to get it to look as close to the old design as possible, however- using css, not tables ?

Please keep in mind this is my first ever attempt at making a website using semantic html markup and css.

~~[URL=http://www.odna.net/adams/old/old.html]~~This is the old table-built version of the site[/URL]

~~[URL=http://www.odna.net/adams/new/new.html]~~This is the new pure-css version of the site[/URL]

Now, heres what i need help with:

I can not figure out why all the left blocks in internet explorer display wrong, however, in mozilla/ff/ns they display fine! So if you could help me with this issue i’d really appreciate. If you dont understand what im talking about, view the new version in ff/ns/moz then view it in IE and you’ll know what im talking about.

Another problem i have is that i can not get rid of some spacing gaps. The copyright at the bottom is all spaced out and i want it to be together like in the old version. There is also some other unwanted gaps, like at the top, and other area’s you’ll notice.

So if you can help me out with these problems, and if you have pointers/suggestions/comments, please share em with me. i appreciate it soooooo much!! ?

THANKS A BUNCH!

-tc

to post a comment

CSS

33 Comments(s) _↴

@IncaWarriorApr 08.2004 — #maybe make them float left?

why do you even have it all boxed up like that, why not let it fill the page?

you could give it a top margin of -300 for IE or something

@The_CheatauthorApr 08.2004 — #i tried giving the left boxes a float left it just makes it worse

the reason its boxed up is because im trying to match the forums [URL=http://www.aeforces.com/forums/]here[/URL]

@Ben_RogersApr 08.2004 — #Leave it "boxed up" in my opionion

Do you know how to do container divs? By adding container divs, and using background: url(border_img) repeat-y or the like you can have those borders in the CSS version..

Do you have a container div for the body of the page? If you do, place the footer text outside the container division, and when you style it's paragraphs, use margin: 0; and then line-height: 105% or something

How come in the old version you use CSS that you've abaandoned in the new version?

@The_CheatauthorApr 08.2004 — #[i]Originally posted by omega [/i]

Leave it "boxed up" in my opionion

Do you know how to do container divs? By adding container divs, and using background: url(border_img) repeat-y or the like you can have those borders in the CSS version..[/quote]
i think so? If you are talking about the borders like in the old version, im not there yet. I'm just trying to work out the current bugs i have at the moment.....

Do you have a container div for the body of the page? If you do, place the footer text outside the container division, and when you style it's paragraphs, use margin: 0; and then line-height: 105% or something[/quote]
i think i have a container div for the body? im confused by what you mean.

How come in the old version you use CSS that you've abaandoned in the new version?[/QUOTE]
huh?

?

@The_CheatauthorApr 08.2004 — #does anyone know why the left blocks are screwed up so bad in IE??? ?

man this is so frusterating.

sorry for being such a noob at css. ?

@Ben_RogersApr 08.2004 — #First of all viewing in FF, I think the site good, you're progressing quite nicely. And don't be disheartened: if it messes up in IE but looks fine in everything else, it's not your fault, IE screwed up.

What I mean by container div is something like

<i>
 </i>&lt;div id="container"&gt;
 &lt;div id="nav"&gt;&lt;/div&gt;
 &lt;div id="content"&gt;&lt;/div&gt;
 &lt;div id="footer"&gt;&lt;/div&gt;
 &lt;/div&gt;

Yes, I was talking about borders in the old version. OK, we'll get to that later.

This has happened to me as well. Are you floating the <div>s? You may want to convert the widths to percentages, like nav being 20% and content being 75% or something.

@Ben_RogersApr 08.2004 — #What I mean by CSS you've abandoned in the transition is the coloring of the form, it looked good, why no transtiion?

A few tips on your code...

<i>
 </i>&lt;div id="logo"&gt;
 &lt;img src="images/logo/logo1.jpg" width="700" height="200" alt=""&gt;
 &lt;/div&gt;
 
 to
 
 &lt;img src="images/logo/logo1.jpg" width="700" height="200" alt="American elite forces- we own the house!" id="logo" /&gt;
 ----------
 &lt;div class="newstitle"&gt;
 &lt;h3&gt;News article&lt;/h3&gt;
 &lt;/div&gt;
 
 to
 
 &lt;h3 class="newstitle"&gt;News article&lt;/h3&gt;
 ------------
 &lt;p class="text"&gt;
 
 to
 
 &lt;p&gt; &lt;!-- no need for extra, unneccesarry classes. --&gt;

also #copyright p should have line-height: 105%;

@The_CheatauthorApr 08.2004 — #well this is what i did

i set the width of the left blocks to 20% and i set the width to the right news blocks to 80%

i set the left blocks to float left the right blocks to float right, and here is what happens:

:p

[upl-file uuid=e32015df-83d1-43ba-aa9f-3f2a57d7aa1b size=62kB]thissucks.jpg[/upl-file]

@The_CheatauthorApr 08.2004 — #[i]Originally posted by omega [/i]

[B]What I mean by CSS you've abandoned in the transition is the coloring of the form, it looked good, why no transtiion?

A few tips on your code...

<i>
 </i>&lt;div id="logo"&gt;
 &lt;img src="images/logo/logo1.jpg" width="700" height="200" alt=""&gt;
 &lt;/div&gt;
 
 to
 
 &lt;img src="images/logo/logo1.jpg" width="700" height="200" alt="American elite forces- we own the house!" id="logo" /&gt;
 ----------
 &lt;div class="newstitle"&gt;
 &lt;h3&gt;News article&lt;/h3&gt;
 &lt;/div&gt;
 
 to
 
 &lt;h3 class="newstitle"&gt;News article&lt;/h3&gt;
 ------------
 &lt;p class="text"&gt;
 
 to
 
 &lt;p&gt; &lt;!-- no need for extra, unneccesarry classes. --&gt;

also #copyright p should have line-height: 105%; [/B][/QUOTE]
ok thanks for the suggestions! I'll get to cleaning up the code very soon ?

I just wish i could figure out why the heck my menu is so screwed in IE. Do you have any idea???? ?

Oh and why do i need line-height: 105%...??? It worked fine with out it, i added it and nothing seems to have improved......... ?

anyways. Thanks for all your help. Wish i could figure out what IE doesn't like about my menu tho. ie pisses me off............... :rolleyes:

@Ben_RogersApr 08.2004 — #Holy Frick!!!!! What's up with that? OK, Junk my idea, no variable widths... that pagewas apparently meant for fixed widths...

@Ben_RogersApr 08.2004 — #[i]Originally posted by The Cheat [/i]

[b]The copyright at the bottom is all spaced out and i want it to be together like in the old version. [/B][/QUOTE] That's why i mentioned line-height.

@The_CheatauthorApr 08.2004 — #line-height: 105%; didn't work, but i set it to line-height: 1px; and it works perfect in FF, however in IE it didn't do anything.

@The_CheatauthorApr 08.2004 — #ok i updated the [URL=http://www.odna.net/adams/new/new.html]new version of the site[/URL] with my latest progress. Not much has changed...

My main problems are that all of the left blocks are funky in IE.

And the copyright info is still gapped in IE.

And there is a gap at the top of the page that i dont need.... (edit: i fixed this, it now displays properly in moz, however not in IE... ?)

thanks ?

i hope to get this sorted out soon, i will appreciate all the help i can get. I'm pretty stumped at the left menu problem.. ?

@igetmessagesApr 08.2004 — #You should try giving the left box an absolute positon on the page

@The_CheatauthorApr 08.2004 — #i applied position: absolute; to both boxes (its really 2) and it did bad things to my page...

@The_CheatauthorApr 08.2004 — #anyone got any ideas? ?

@Ben_RogersApr 08.2004 — #One idea: position: absolute==no no for cross platforming. It's ok to use once in a while, but it is not good in the end, but that's only in my experience. Floating, and relative positioning are more layout friendly.

@LeGuinFanApr 11.2004 — #Hi, The Cheat,

I have had exactly the same problem. What worked for me was placing all of the html coding for the left column before the right column. What I mean is cutting all the html stuff for the main menu and everything under it and pasting it before your main articles stuff.

I have no idea why this worked for me, but it did. I think it's related to floating the leftblock elements: they would appear higher or lower based on where you insert them among the "main articles" content.

Good luck!

@Ben_RogersApr 11.2004 — #Then it should be argued that it's not a good idea to have a list of links before the article.. picture it with styles off

@LeGuinFanApr 11.2004 — #You are right that it won't look too great without the style sheet, but the list will not be very user friendly if it appears at the very end in a CSS-off mode either.

How can one fix that problem though?

@Ben_RogersApr 11.2004 — #I forget when/where but I was told at one time that you should have navigation after content.. if that's untrue, my new design will work even better (u/c)

@LeGuinFanApr 11.2004 — #I didn't know such a rule existed. Does it?

Actually, I wouldn't want to scroll down a huge page ( assuming CSS is off) only to get to the navigation menu at the bottom.

With CSS we try to make the menu appear towards the top or to the side, but always within sight without scrolling. Why would we want the opposite for people without CSS support?

I don't get it, but will play by that rule if I understand why.

@Ben_RogersApr 11.2004 — #Ever hear the phrase "Content is King."? People want the content, not the links, at least that's what I was thinking when I accepted the idea.

@The_CheatauthorApr 11.2004 — #Thanks guys.

I pretty much got the look i wanted using the layout-o-matic. That thing rocks!

I never did get around to messing with the image bar around the entire thing. But thats alright, because i have put this project on hold at the moment.

However, i have learned alot through this. So thanks. ?

@Paul_JrApr 11.2004 — #The idea behind having the links come after the content in the code is so that screen readers/tabbers don't have to go through your entire list of links before getting to the content. Although it might be better to have the links after the content, it's not a major since if they aren't -- unless you have like... 50 links.

@TimeBanditApr 11.2004 — #I wasn't really very careful so you'll need to clean the code up yourself. I put anything I added down at the bottom of the CSS file. I don't have a PC at home so you'll need to check that yourself, but this works in MacSaf, MacFF, MacN, MacIE5:

[URL=http://www.johnbarrick.com/test/cheat_odna-net/round02/new.html]new verison of site[/URL]

Oh yeah, you'll need to add the clock back in. There may be other small things I overlooked... ?

@Ben_RogersApr 11.2004 — #Bandit- I checked that the links FireFox and IE, it passed with flying colors, even if the font sizes are a 'tad' large in IE.

@TimeBanditApr 11.2004 — #[i]Originally posted by omega [/i]

[B]Bandit- I checked that the links FireFox and IE, it passed with flying colors, even if the font sizes are a 'tad' large in IE. [/B][/QUOTE]

tnx, i need to get a PC at home just I can test. I have many platform combos to test with at work, but of course, when I'm at work I'm expected to be working... ?

@Ben_RogersApr 11.2004 — #OK, you're supposed to be working- so? ? What do you do for work anyways that lets you get a PC "Just cuz".?

@TimeBanditApr 12.2004 — #[i]Originally posted by omega [/i]

[B]OK, you're supposed to be working- so? ? What do you do for work anyways that lets you get a PC "Just cuz".? [/B][/QUOTE]

It wouldn't be entirely "just cuz"... ? I mean, 93% (or some such other made-up percentage) of web users are WintelIE users. It's important to test those browsers, whether they're a drag to work with or not. So it's probably good for my career to know as much about the stuff as I can stomach. And really, as far as my needs go, I could probably find a dirt cheap PC... cuz I couldn't hold my breath long enough to use it for anything other than ocassional testing.

I'm a "Design Manager" for a web development firm near Baltimore, MD. My job description sort of ebbs and flows... It's a small firm so we all wear many hats. I used to do more art, now it's mainly coding HTML/CSS, and sorta managing some smaller projects. I'm the utility infielder there, not really excellent at any one thing but able to lend at hand at many different things.

How about you?

@JonaApr 12.2004 — #[i]Originally posted by Paul Jr [/i]

[B]The idea behind having the links come after the content in the code is so that screen readers/tabbers don't have to go through your entire list of links before getting to the content. Although it might be better to have the links after the content, it's not a major since if they aren't -- unless you have like... 50 links. [/B][/QUOTE]

[font=arial]Or you can have a skip navigation link. ? (It doesn't even have to be [url=http://www.ryanbrill.com/]visible[/url].)[/font]

@Paul_JrApr 12.2004 — #True! I completely forgot about that. ?

@Ben_RogersApr 12.2004 — #Hm.. that's a good idea... gonna have to implement it into the (soon to come) redesign of my site.. nice and accesible, yet better for floating content and navigation :-D

Also in #CSS _↴

Flow from bottom right to top left Refresh all all frames in a frameset Please help. Height of my leftside...

Success!

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

Tweet This

Redesigning a website using pure css (ARRRGH!)

33 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Redesigning a website using pure css (ARRRGH!)

33 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

33 Comments(s) _↴

Also in #CSS _↴