11 replies [Last post]
DigiRev
Offline
Regular
Last seen: 12 years 14 weeks ago
Joined: 2007-03-20
Posts: 26
Points: 0

I finally got my site's CSS/HTML finished and validated. But now I have ONE last problem.

The page looks fine in all resolutions EXCEPT 800x600. I know not many people use this resolution and I could just put a "best viewed with a resolution of at least 1024x768" but I don't want to do that if I don't have to.

The site has 2 columns, some stuff (menu) on the left, and then the main content on the right side. The problem is, on 800x600 resolution, the stuff on the right moves over into the left column and overlaps.

I attached my code. It's pretty short/simple, using mostly DIV tags and one CSS file.

images folder
template/styled.htm - the page
template/not_styled.html - the page (with the
styles/ - where the CSS file is.

Please help me get rid of this last problem. I'd really appreciate it. Smile

http://www.getmyim.com/Site.zip

Thanks.

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

Try changing your css to

Try changing your css to this:

div#right_side { margin-right: 20px; margin-left: 20px; margin-bottom: 20px; width: 75%; padding-top: 8px; margin-left:22%; }

CT

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

Wow I feel

Wow I feel stupid.

Thanks.

Btw, do you think I used too many DIVs?

Or do you think I was wrong using a table for the logo images and the very top part of the page (the form where it says Theme: )?

I just couldn't get the logo images to align right without the table. I couldn't get the right logo image to appear on the right side of the page (on the same level as the left one) without appearing below the left image, which made that part of the page way too big.

Edit: I tried all sorts of combinations of float, display: inline, inline-block, etc. Even tried putting them both into a DIV container and couldn't get it to work.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

DigiRev wrote:The page looks

DigiRev wrote:
The page looks fine in all resolutions EXCEPT 800x600. I know not many people use this resolution and I could just put a "best viewed with a resolution of at least 1024x768" but I don't want to do that if I don't have to.

Not many people still use 12" monitors, but a larger screen does not imply visitors are using larger window sizes. I, for one, keep my browsers at 800

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

No, you shouldn't have used

No, you shouldn't have used the table. Remember if divs are positioned relatively you can use negative top margin to lift one following another to sit over it.

Take a look at the code in these links and examine the code for the haader area. The use of h1, h2 and the margining thing:

http://www.siteunderconstruction.net/carfaro/newindex.html

and the css:

http://www.siteunderconstruction.net/carfaro/media/newstyle.css

You have used the break tag to make spac. You should not do this. Use top and bottom margin on the paragraphs and begin and end each paragraph wiht a start and end paragraph tag.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Quote:I just couldn't get

Quote:
I just couldn't get the logo images to align right without the table. I couldn't get the right logo image to appear on the right side of the page (on the same level as the left one) without appearing below the left image, which made that part of the page way too big.

Try something like this:
#banner {
overflow: hidden;
}

#imageA {
float: right;
}

#imageB {
float: left;
}
============

//edit: CT, go to bed. It's late over there, or very early. Smile

//edit ii: Aw, I just looked; it's 2 ayem here.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Thanks, Gary gonna try that

Thanks, Gary gonna try that once I get this content area fixed.

I did the margin-left: 22% but now the content is starting a lot lower than it was. Stare

Take a look:

http://www.getmyim.com

Edit:

I also tried: margin-top: -80px; and it seemed to work on my computer but soon as I uploaded it, it didn't work. And now it's not working on my computer...

It's really early here so maybe I'm doing something stupid. I'd also rather not rely on using the margin-top: -## if I don't have to.

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

Ended up just removing the

Ended up just removing the margin and doing a float: right instead. Don't know why I didn't think of that before. This CSS stuff is starting to drive me insane a little...but I have an OCD with clean/perfect code that validates (why I don't know). So I have to make it perfect and there is still more to do.

kk5st wrote:
Quote:
I just couldn't get the logo images to align right without the table. I couldn't get the right logo image to appear on the right side of the page (on the same level as the left one) without appearing below the left image, which made that part of the page way too big.

Try something like this:
#banner {
overflow: hidden;
}

#imageA {
float: right;
}

#imageB {
float: left;
}
============

//edit: CT, go to bed. It's late over there, or very early. Smile

//edit ii: Aw, I just looked; it's 2 ayem here.

cheers,

gary

Thanks, Gary that worked perfectly. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

kk5st wrote:The

kk5st wrote:
The inexperienced and gamers (for obvious reasons) are the most likely to run maximized.

Guilty as charged Wink

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

thepineapplehead

thepineapplehead wrote:
Guilty as charged Wink

I was thinking of you as I wrote it. Do you game, too? Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

kk5st wrote:thepineapplehead

kk5st wrote:
thepineapplehead wrote:
Guilty as charged Wink

Do you game, too? Laughing out loud

cheers,

gary

Laughing out loud Silly question!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I was admitting to being a

I was admitting to being a gamer, not an inexperienced noob, you cheeky so-and-so Tongue

Yep I'm a heavy gamer, and my new Antec 900 case keeps my Core 2 Duo icy cold Laughing out loud Everything for me is maximised. Everything. I like my screen estate.

Wait, I'm getting deja vu here :?

Verschwindende wrote:
  • CSS doesn't make pies