[SOLVED] CSS Layout Problems

[mazman13]

I'm just now starting to use CSS for all areas of design (yeah, welcome to 2004)....

 

But I have so many problems with layouts. I'm trying to use CSS instead of tables.

 

Here is my site:

http://michaelzavala.com/show/new/

 

Here is my CSS:

http://michaelzavala.com/show/new/include/style.css

 

It looks ok now, but I know that something isn't right.

I wanna figure it out now before I build the whole site around it.

 

I have a computer at work that has a widescreen monitor, and the site looks way off.

 

And when I try and edit this site in Dreamweaver 8.0 it looks like crap.

 

No idea why all this is screwing up. If anyone can help me out that would be awesome.

Thanks

[Maq]

I have a computer at work that has a widescreen monitor, and the site looks way off.

 

What do you mean way off?  We need some kind of description because it looks fine to me.

 

Also, the beauty of CSS is consistency and the ease of making universal changes.  All I see on your site is a bg, and image, and a tiny flash.  Is that all I'm supposed to see?

[mazman13]

Well it looks very off centered on my work computer. It cuts off alot of the page.

 

 

If I try to center the image with "margin-left:auto" and "margin-right:auto" the top of the white

background for the "body" of the page will be slightly off centered. So I need to make the text boxes below it line up so it all looks the same...if that makes any sense.

 

Let me know if you guys have any ideas on what to do about this.

[mazman13]

I also have to note that my work monitor is 1024 x 768 resolution...I'm sure thats a problem.

 

But there is no scroll bar or anything. And it just looks way off. My site is 760px...

 

Any ideas? I should prob just move it all to the left huh?

[wildteen88]

The issue is to do with your css. I have cleaned it up (untested)

body {
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
  background: #365b77; 
  font-size: 14px;
  margin: 0 auto; /* center the site design */
  width: 1000px;
}

#header {
  margin: 0;
  width: 885px;
  height: 226px;
}

#main {  
  background: #FFFFFF;	
  width: 760px;
  margin-left: 51px;
}

#leftside, #rightside {
   padding: 5px;
   margin: 0;
}

#leftside {
  width:490px;
  float: left;
}

#rightside {
  width:240px;
  float: right;
}

/* the following clears the floats for the left and right columns
http://www.positioniseverything.net/easyclearing.html
Click the link above to understand this technique
   DO NOT MODIFY */
#main:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

[mazman13]

Yeah that helps alot.

 

Thanks!

[mazman13]

I do have one question...

 

Where does this get called?:

 

I went to the link to read about floats (thanks for that)

but I don't know where this gets called in the HTML. Does it

get called with the normal id="main"? I guess what I'm

asking is, what is the purpose of the ":after"

 

#main:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

[wildteen88]

:after is a type of pseudo-element.

 

With an :after pseudo-element your browser will apply the defined CSS after an element (#main) has been displayed on the page. There is also a :before pseudo-class too, which is the opposite.

 

Pseudo-element tutorial