File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Using CSS float for positioning page elements Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Using CSS float for positioning page elements" Watch "Using CSS float for positioning page elements" New topic
Author

Using CSS float for positioning page elements

Robin Clark
Ranch Hand

Joined: Dec 17, 2003
Posts: 81
I've come a long way since I first began converting my website skeleton from Dreamweaver code to hand-coded HTML and CSS. But I've got quite a ways to go. Comments on what I've done so far would be greatly appreciated.
The beginnings of the website I am developing
I am trying to understand how to use CSS and float to position the page elements in the best way. Generally each page has 4 sections:
header
left side content (picture or text)
right side content (picture or text)
footer
If anyone knows of a tutorial or book that addresses this specific topic I would like to know. Currently I have the 2000 version of Deitel and Deitel How to Program Internet. The newest version is $85.00. I'd like a less expensive book and there may be a better one out there because I already understand basic HTML. I am looking for information on:
ECMA scripting
CSS
SHTML
Thank you for your help and comments!
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
This site should help you out alot with learning CSS:
http://www.echoecho.com/css.htm
Now with the site:
All I can say is WAY TO MUCH WHITE and try to design your site for 800X600 viewing. Everything seems to be oversized in my point of view.
The image of the boy is rather large, if you cut that down then the rest of the text should come up to the bottom.
Make it so the text beside the pic does not extend outside the buttons.
I would encourage you to browser http://www.templatemonster.com/ to get ideas on different layouts. If you need help trying to make a layout work, I am willing to help.
Robin Clark
Ranch Hand

Joined: Dec 17, 2003
Posts: 81
Eric, thanks so much for your offer to help. I looked at the templates at the monster site and I see what you mean. What I am struggling with in my mind is that I don't have very much content. I am getting some additional content on a day by day basis, but I don't think that there will ever be enough content to make the site look like the ones in these templates! This weekend I am going to play around with some different ideas to make it look less "white". I need to find a website with not much content that has a good design. Although I have good technical skills, I have NO design/artistic skills and this scares me. I would be more than willing to purchase a design template but I need one that would work with minimal content. Also, I do not want to use Dreamweaver. I am determined to go the non-WYSIWYG route in my coding. It is much more fun that way.
Another design issue that I have is the logo that I have to use has a stark white background. If I use a different color background in other parts of the site I felt like it made the logo "stick out". I don't know how to deal with this.
Thanks for your help. The advice I've gotten here has been very valuable to me.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I really think a layout like this would help you out....

Eric
[ February 13, 2004: Message edited by: Eric Pascarello ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Here is a great tool to help you out with color choices..
http://www.colormatch.dk
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 413
That is a nice page ! Thanks for the info.
From my point of view, it misses one thing - ability to specify exact color to start.
Here is the trick to do so - type in address bar:
javascript:rg.r=255;rg.g=0;rg.b=0;rg2hs(rg);ud("0",rg);dom();
rg.r=255;rg.g=0;rg.b=0; - your color RGB.
Also you could use in in hex:
rg.r=0xFF;rg.g=0xFF;rg.b=0xAA;
Robin Clark
Ranch Hand

Joined: Dec 17, 2003
Posts: 81
Over lunch I quickly threw together a page to make sure that I understood what you are suggesting (generally). Here it is:
Rough test page
There are all kinds of problems with this:
1) buttons aren't there (but if there were they would be to the right of the little boy and below the Mindpeace logo). Wasn't sure how to position them there.
2) Junior League of Cincinnati logo needs to be to the left of the text, "For children's mental health....". I couldn't figure out how to do this in the short amount of time I had.
3) Bottom copy right info needs to extend all the way across the page. I know how to do this.
4) Copyright info text needs to be lighter and background needs to be darker. Not enough contrast. I know how to do this.
5) Get rid of vertical margins in between sections, I think. I know how to do this.
I was not sure what you meant by "BOLD LINK" underneath the BODY TEXT.
Thank you for your help. It is greatly appreciated.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Here I whipped up something for you to play around with..
http://www10.brinkster.com/a1ien51/JavaRanch/page.htm
Eric
Robin Clark
Ranch Hand

Joined: Dec 17, 2003
Posts: 81
You must tell me how I can thank you. I've spent all day today using the code you gave me, modifying it, reading tutorials, modifying it some more. I am doing the site for a friend. I just talked to her and she thinks that it looks so much better with your changes. She gave me some more text to put on the page and told me about some more text to come.
Here is the page now:
Mindpeace website after Eric's makeover
There are two things that are still bothering me:
1) I would like for the font to be bigger on the navigation bar - perhaps move the text "Tools" underneath "Teacher" and move the text "Groups" underneath "Support". I have not yet figured out how to do this.
2) In the text next to the little boy's chins, the text "Heighten awareness...", "Work to eliminate", and "Facilitate development" need to be list items. I've got the code in there, but they don't show up as list items.
I never could have done this without you giving me the basic framework. I also found this tutorial which has made the positioning/layout situation clearer to me:
tutorial on layout and positioning elements
I am going to go through the echo echo tutorial tonight and try to figure out the two issues above.
If there is anyway that I can help you, please let me know. Your "jumpstart" gave me a perfect framework to modify.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
To change the size of the font for the menu...Change the value in the in the style "inline-list"
About the list....need to figure that out with the CSS...
Sonny Pondrom
Ranch Hand

Joined: Jun 05, 2001
Posts: 128
For some reason the pictures don't show up in Mozilla.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Using CSS float for positioning page elements