16 replies [Last post]
kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

I know HTML really well and I have always laid my pages out using tables. I am just starting to use CSS and now I am trying to layout my pages using positioning with CSS and I am sooooo confused.

I wanted to use absolute positioning, but I need my entire layout to be centered on the screen, so I decided against absolute.

So, I decided to attempt to use divs. But, I have a very precise layout and when I put sections of the page in DIV tags, it creates spaces, so all my images are not butted up against each other. I need all the images to be butted up against each other with NO SPACES.

For example, I have 6 images cut up that I need to use for navigation. Each image is a category and I need them all to be next to each other and eventually have javascript mouseovers. I put them all in a div tag and specified height and width of the div, but the images are all over the place and are a mess.

Here is the page: http://callistostudio.com/mgold/mgold_project/newsite/index2.html

I am so confused about how to do precise positioning with all these images I have! DO I use floats or clears? I can't figoure out how floats or clears would even work in this layout. Do I float each image to the right of the div?

Can someone lead me in the right direction? thanks in advance,

thanks!
krissy

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 38 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

trouble laying page out with CSS instead of tables...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

trouble laying page out with CSS instead of tables...

Post a mockup gif of what you want it to look like, we'll take it from there Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

Hi All,
Here is what I want it to look like:
http://callistostudio.com/mgold/mgold_project/newsite/

Here is what I have:
http://callistostudio.com/mgold/mgold_project/newsite/index2.html

So, how do I position the categories so they are next to each other in a row and then the one image below it that says "Online Viewing"?

thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

trouble laying page out with CSS instead of tables...

<div id="wrapper">

<h1> Michael Goldsholl Photography </h1>

<div id="flash">
<embed stuff>
</div>

<ul id="navigation">
<li> Weddings </li>
etc
</ul>

<a href="onlineviewing.html">online Viewing</a>

<div id="footer"> &copy; 2005 Michael Goldsholl </div>

</div>

body {text-align: center;}

#wrapper {margin: auto; }

should start you off.

Verschwindende wrote:
  • CSS doesn't make pies

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

Great thank you! let me try this and see where it takes me!

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

Dear pineapple guru,
I implemented your code and tried to figure it out and this is what I have:
http://www.callistostudio.com/mgold/mgold_project/newsite/index2.html

I have all the category images like "Weddings", "Portraits" in an unordered list, but it is putting each one on a separate line. How do I make the images just go straight across? (I am on a MAC and I see the images appearing vertically!)

Thanks in advance

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

trouble laying page out with CSS instead of tables...

Laughing out loud

float: left;

or

display: inline;

You might wanna fix up that doctype while you're at it Laughing out loud it's incomplete.

Verschwindende wrote:
  • CSS doesn't make pies

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

YAY Pineapple! Thanks so much. It's looking much better:

http://www.callistostudio.com/mgold/mgold_project/newsite/index2.html

Altho, I am still having the problem of the divs creating spaces between them, as you can see right after all the category images, there is a space before the Online Viewing image below. How can I get rid of that?

Also, what is wrong with my doc type? Dreamweaver put it in there for me.... is it incorrect?

Also, I used float: left; and I am wondering why that works to make all the images on one line? Does it force each image to the left of the one next to it?

thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

trouble laying page out with CSS instead of tables...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> is incomplete and missing the URL. Click the link in my sig.

You've come on well, well done so far.

Try this:

<div id="nav">
<ul>
<li><img src="images/hp_wedding_off.gif" alt="Weddings"></li>
<li><img src="images/hp_portraits_off.gif" alt="Portraits"></li>
<li><img src="images/hp_engagement_off.gif" alt="Engagements"></li>
<li><img src="images/hp_family_off.gif" alt="Family, Children and Pets"></li>
<li><img src="images/hp_biography_off.gif" alt="Biography"></li>
<li><img src="images/hp_contact_off.gif" alt="Contact"></li>
</ul>
</div>

<img src="images/hp_onlineviewing_off.gif" alt="Online Viewing" [b]style="clear: left;"[/b]><img src="images/hp_bottom_spacer2.gif" alt="spacer">

</div>

and see if it fixes the problem.

Verschwindende wrote:
  • CSS doesn't make pies

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

Well, I had it working and then I changed the footer and something happened! Now there are spaces between each div. I am not sure why it does that....

http://www.callistostudio.com/mgold/mgold_project/newsite/index2.html

Is there a way in CSS to make sure there are no spaces around your DIVS? I have made my margins: 0; so I am not sure why this happens......

thanks Pineapple!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

trouble laying page out with CSS instead of tables...

Well, you could put browsers into standards compliant mode instead of quirks mode by using a full doctype complete with url (as TPH eluded to). Check out his sig.

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

I was unaware that doc types were so important. I think I put in the correct one, but I am not sure.

Still having spacing issues in-between DIVS. Is that normal? What is the method in CSS to make sure there are no spaces? I set all margins to zero on the DIVS.

http://www.callistostudio.com/mgold/mgold_project/newsite/index2.html

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

trouble laying page out with CSS instead of tables...

Hi krissy,
there really is no space between divs per se. The space is coming after the images. You could add this to your stylesheet to compensate:

img {
    vertical-align: bottom;}

But you may want to rethink the use of those images. It would be more semantically correct to use hx tags and p tags to markup the information in the image. Then what is commonplace is to use some form of image replacement to dress up the content. In other words, the images you've used would be background images and the image text would be properly marked up and styled to your liking (perhaps even hidden off screen).

You're doctype is fine now - with one exception. Your code won't validate as is because of the flash. Your options are to leave the doctype as is and not validate but remain in standards mode (a Good Thing (kk5st)), or choose a transitional doctype (but complete) to again remain in standards mode but also validate, or finally change your markup slighty so that the flash will validate. See here for starters: http://www.alistapart.com/articles/flashsatay/

The one troubling thing I've found in your code is the <p><br></p>. What is this for? Just for spacing the footer down? That is incorrect use of markup. Simply place a top-margin on the footer.

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

Hi Wolf,
Thanks for your help. I guess I have so much more to learn about CSS! I take tutorials online and try to learn it, but it seems like there are so many quirks and methods that I don't understand and are not taught in tutorials.

If I make an image a background, then is it impossible to do a javascript rollover?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

trouble laying page out with CSS instead of tables...

No, you could have the javascript just change the background image. But why use javascript in the first place? You could do it with just CSS.

kruella
kruella's picture
Offline
newbie
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Joined: 2005-09-07
Posts: 9
Points: 0

trouble laying page out with CSS instead of tables...

I am so confused. YOu can swap out an image using CSS? I know you can do hovers, but its usually with just plain text. ANyway, thanks for your help.