9 replies [Last post]
DigiRev
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-03-20
Posts: 26
Points: 0

I'm not very fluent in CSS. In fact I've spent the last 2 nights learning it just so I can do this. I'm trying to do all design-related stuff in CSS and just leave the HTML part simple. This will make it easier later on when outputting HTML via PHP.

This is the page I'm trying to recreate solely in CSS

getmyim.com

I've got everything done except one thing:

I designed that with tables. Now I'm trying to do it with DIV tags. I've almost got it but I can't the text to appear on the right side of the page correctly. I'm at a dead end, hopefully someone can help. That's the only thing left I need to do.

You can download the small files here:
getmyim.com/WebTest.zip

1 CSS style sheet, and the HTML file.

default.css - The style sheet
index_css - The HTML file with the style sheet applied
index_html - The HTML file with no style sheet applied (just the

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi

Hi

A few comments to start.

You have a comment before the doctype. Remove this as it casues IE6 to go into quirks mode (you can put it after the doctype).

In the language_list ul, you have some html entities (& #183 ; ) (spaces added to make the code viewable!) between the end and start li's. You can't do this.

In two of those same li's, you have some html entities that don't end in a semi-colon.

Next, add these two lines of code to both the left_side and right_side divs' css:

float:left; display:inline;

You have a lot of align= bits. Try not to use these in inline code.

DigiRev
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-03-20
Posts: 26
Points: 0

Thanks

Thanks for the reply. I did what you suggested about the comment before the DOCTYPE and the entities between the li's.

I also updated the CSS code like you said. It now puts it in the right spot but the border around the page has moved up above the content?

The border is: div#main_border in the default.css. This just draws a rectangle around the whole page.

Note that this only happens in FireFox. In IE, the border is still around the page, but the "copyright

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

You will need to contain

You will need to contain those floats.

Add this css to your css file:

.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */

And then change the div you caled body to this:

BTW

Not a good idea to call this div body. This name is already used by the page itself. Try changing it to something else.

CT

DigiRev
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-03-20
Posts: 26
Points: 0

Awesome

Wow, you're good. I'm a PHP/Visual Basic programmer, still learning a lot about CSS. Tongue

That works perfect for IE7/FireFox/Opera.

Thanks a bunch. Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yeh, I do php too. Notice

Yeh, I do php too.

Notice how your dotted divider isn't full height?

Remove the dashed border, make a very small image with a dash and gap in.

Add this to the code of div#mainbody (I renamed it that BTW, you called it div#body):

background: url(dash.gif) 180px 0 repeat-y;

The it will go full height.

Also, try using shorthand css:

margin-left: 20px; margin-right: 20px;

becomes:

margin:0 20px;

You have lots of these individual declarations that can be combined.

DigiRev
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-03-20
Posts: 26
Points: 0

Yea I noticed the divider

Yea I noticed the divider thing, thanks. Smile

Gonna clean up my CSS code now. Smile

After that I gotta try and make the "navigation" box/table that you see on the left side of: getmyim.com Sad

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well, I am going to make a

Well, I am going to make a suggestion for you then. Make it like this:


Navigation

Home Pic
Home

etc.

The go look up how to style definition lists (suitable use of display:block, height, line-height and floats - always make floats display:inline BTW - vertical-align:middle, well you get the idea I hope).

DigiRev
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-03-20
Posts: 26
Points: 0

Good idea, reading a

Good idea, reading a tutorial on it now:

http://www.webreference.com/programming/css_style/2.html

Smile

DigiRev
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2007-03-20
Posts: 26
Points: 0

Finally got everything

Finally got everything working now just gotta upload it to my site. Was kind of a pain to get everything validated on the W3 site. Thanks for all the help.