Mon, 2007-03-26 05:02
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. 
http://www.getmyim.com/Site.zip
Thanks.
Mon, 2007-03-26 06:20
#1
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
Mon, 2007-03-26 06:42
#2
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.
Mon, 2007-03-26 06:43
#3
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
Mon, 2007-03-26 06:44
#4
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.
Mon, 2007-03-26 06:53
#5
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;
}
============
ABC Co.
//edit: CT, go to bed. It's late over there, or very early.
//edit ii: Aw, I just looked; it's 2 ayem here.
cheers,
gary
Mon, 2007-03-26 07:23
#6
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. 
Take a look:
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.
Mon, 2007-03-26 08:48
#7
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;
}
============
ABC Co.
//edit: CT, go to bed. It's late over there, or very early.
//edit ii: Aw, I just looked; it's 2 ayem here.
cheers,
gary
Thanks, Gary that worked perfectly.
Mon, 2007-03-26 12:07
#8
kk5st wrote:The
kk5st wrote:
The inexperienced and gamers (for obvious reasons) are the most likely to run maximized.
Guilty as charged 
Mon, 2007-03-26 12:30
#9
thepineapplehead
thepineapplehead wrote:
Guilty as charged
I was thinking of you as I wrote it. Do you game, too?
cheers,
gary
Mon, 2007-03-26 12:36
#10
kk5st wrote:thepineapplehead
kk5st wrote:
thepineapplehead wrote:Guilty as charged
Do you game, too?
cheers,
gary
Silly question!
Mon, 2007-03-26 17:05
#11
I was admitting to being a
I was admitting to being a gamer, not an inexperienced noob, you cheeky so-and-so 
Yep I'm a heavy gamer, and my new Antec 900 case keeps my Core 2 Duo icy cold Everything for me is maximised. Everything. I like my screen estate.
Wait, I'm getting deja vu here :?