Contact Us Forum Rules Search Archive
WebProWorld Part of WebProNews.com
Page One Link To Us Edit Profile Private Messages Archives FAQ RSS Feeds  
 

Go Back   WebProWorld > Site Design > Graphics & Design Discussion Forum
Subscribe to the Newsletter FREE!


Register FAQ Members List Calendar Arcade Chatbox Mark Forums Read

Graphics & Design Discussion Forum Post your graphics design questions/comments/ideas in here. Ask questions, post tutorials, discuss trends and best practices. Sub-forum for website accessibility and usability.

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 05-18-2006, 03:10 PM
WebProWorld Pro
 

Join Date: Jul 2004
Location: Irvine, CA
Posts: 124
spenland RepRank 0
Default CSS and DIVs- Design question

Hi guys, I've taken the advice of many web professionals and I'm trying to build a new website using only css and DIV tags with no tables! It seems to be going pretty well, except for a few formatting issues.

Here is my problem. If I have three sections that I want to display side by side horizontally. I first tried to encapsulate these three sections into one div, but that didn't seem to work.

Then I seperated these three sections into seperate divs. The first section displays no problem, but the second and third seem to drop down a few pixels. I coded these sections, (lets call them sec2 and sec3 for reference) with a margin-top = -500px so that they would display next to sec1, but in Internet Exploder sec2 and sec3 seem to drop down a few pixels.

I tried creating sec2 and sec3 without coding a margin-top, and they always just drop right below sec1, which is not what I want.

So I guess my question is, am I doing this correctly? I have a feeling that hard coding the location by pixels may be a problem, but since this is my first experiment with this type of design I could use some pointers.

How would you do it?

Thanks!
Reply With Quote
  #2 (permalink)  
Old 05-18-2006, 05:32 PM
Easywebdev's Avatar
WebProWorld Veteran
 

Join Date: Apr 2004
Posts: 328
Easywebdev RepRank 1
Default

Float the sections.

#section1, #section2, #section 3 {
float: left;
}


<div>
<div id="section1"> content </div>
<div id="section2"> content </div>
<div id="section3"> content </div>
<br style="clear: left;" />
</div>
Reply With Quote
  #3 (permalink)  
Old 05-18-2006, 06:29 PM
WebProWorld New Member
 

Join Date: Oct 2005
Posts: 11
chebyrashka RepRank 0
Default

I use a table to do that often... I've done floats many times before as well and works and then breaks down later, depending on what you want to do.

There's not a silver bullet to this and although using pure div's for layout is a worthy goal, a better goal is to design a website that does what you need. Don't get too caught up in all the hype.
Reply With Quote
  #4 (permalink)  
Old 05-18-2006, 06:29 PM
WebProWorld New Member
 

Join Date: Mar 2006
Posts: 24
William Satterwhite RepRank 0
Default

I would think absolute positioning for each div would work too.
__________________
Studio EFX
Reply With Quote
  #5 (permalink)  
Old 05-18-2006, 06:33 PM
WebProWorld New Member
 

Join Date: Apr 2006
Posts: 12
rickbkis RepRank 0
Default

I think you also have to set the margin-left of subsequent DIVS to clear the previously defined DIVS. Maybe only if you set the width.

For my part, I tried designing a page with CSS and DIVS only, but got blown out of the water by IE's not positioning background images precisely in the DIVS (it worked great in FF).

Had to go back to tables, and even then, I still had to do stupid things like declare a 1px border at the top of some of the TD's to get the background image to move up.

Call me "not a happy camper" on that score.

rickb
Reply With Quote
  #6 (permalink)  
Old 05-18-2006, 06:34 PM
minorgod's Avatar
WebProWorld Member
 

Join Date: Jan 2005
Posts: 78
minorgod RepRank 0
Default

You will never get a 3 column layout to work properly using the standards. You will either have to create conditional stylesheets for IE or use quirks mode by specifying a transitional doctype in your HTML, which defeats the purpose of using the CSS standards and still won't solve all your problems. Every year I revisit this issue and every year I nearly burst into flames out of sheer frustration. I say you do what I did and give up on CSS layout for now unless you can use one of the few layouts that are known to actually work across most browsers without using CSS hacks. I have recently decided to continue using tables for all my real work because they work in ALL browsers and you will save your sanity for something that's actually important such as SEO. And in case you're using CSS because you think it will help your rankings, it won't. Ask any SEO expert and they will tell you that the (important) search engines do not care one bit whether your pages conform to standards or not. Please feel free to read my blog post regarding this issue. I would have posted it here, but it's just a bit too unprofessional and profane for this forum:

http://electrongun.blogspot.com/2006...er-makers.html
Reply With Quote
  #7 (permalink)  
Old 05-18-2006, 06:37 PM
BlackCat2's Avatar
WebProWorld New Member
 

Join Date: Jan 2004
Location: Texas
Posts: 13
BlackCat2 RepRank 0
Default

If I understood you correctly this site should have an answer for you:

http://blog.html.it/layoutgala/

Good luck, hope that helps.

Heidi
Reply With Quote
  #8 (permalink)  
Old 05-18-2006, 06:38 PM
WebProWorld New Member
 

Join Date: Mar 2006
Posts: 24
William Satterwhite RepRank 0
Default

If you float section 1 left and section 3 right while leaving section 2 alone, that should work. I would think absolute positioning for each div would work as well.
__________________
Studio EFX
Reply With Quote
  #9 (permalink)  
Old 05-18-2006, 06:46 PM
WebProWorld Member
 

Join Date: Mar 2006
Posts: 39
rms7design RepRank 0
Default CSS...

well... I do all my website using css.... easy as 1-2-3... you float every div. insert the width (make sure the total is not more than the width of the wrapper and that's it... I don't see all the fuss about it.... tables are worse... and when it comes time to make changes across the website.. you will be happy you used css...

see ya
Reply With Quote
  #10 (permalink)  
Old 05-18-2006, 07:01 PM
WebProWorld New Member
 

Join Date: Apr 2004
Location: Kennett, MO - USA
Posts: 5
spellham RepRank 0
Default Ditto: float

I'm on board with the float method as well. I've designed several sites using pure CSS, <div>, and strict XHTML doctypes that seem to render fine across both IE and FF. Most are 2 column layouts, but all floated and 99% liquid layouts.

There IS certain degree of hype around div/css versus tables - do what works for your site, thinking of maintenance, future changes, etc...

Yes, I have had headaches with CSS and tableless design, but I've worked through it and am sticking with it. Easier to maintain with separate stylesheets in my opinion and the pages are not bloated with table code.

SEO benefit is questionable, but I do know that the pages I've built or redesigned in a tableless format are considerably smaller than tabled designs with the same content. Less markup to wade through and parse for SE's in a tableless page. Read into that what you will: faster loading pages, bandwidth saver, less parsing hassles for the search engines???
__________________
Kennett Country Club
Reply With Quote
  #11 (permalink)  
Old 05-18-2006, 07:02 PM
WebProWorld Veteran
 

Join Date: Aug 2003
Location: Seattle, WA USA
Posts: 962
voodooboy RepRank 0
Default

Quote:
Originally Posted by chebyrashka
I use a table to do that often... I've done floats many times before as well and works and then breaks down later, depending on what you want to do.

There's not a silver bullet to this and although using pure div's for layout is a worthy goal, a better goal is to design a website that does what you need. Don't get too caught up in all the hype.
I love it when people use the word "hype". It just means they don't know how to do something. Doing a site in CSS is a great venture. You get clean code, an optimized site for SEO, and the readiness to move into the next generation of design. Those that believe it is only hype, will end up playing catch-up when table structure tags become degraded.

To answer the question, I suggest the trusted "search the Internet" process. I have done several sites using all CSS and have had great results. Some of the sites I used to get a handle on doing 3 column layout included:
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://webhost.bridgew.edu/etribou/l...col_footer_02/
http://www.webproducer.at/flexible-layout/
and the list goes on, and on, and on...

Begin by finding the site that matches your needs. Copy the code and adjust, play, and fiddle with it until it works the way you want. It is much easier to start with a base than to start from scratch when you are just learning.

Have fun. Post the url when you have it down so we can see.
__________________
Scott Brinkerhoff - Art of Zen Studios
Web Design I Design Monk
© 2000-forever - All rights reserved by me - SO THERE!!
Reply With Quote
  #12 (permalink)  
Old 05-18-2006, 07:14 PM
WebProWorld New Member
 

Join Date: Nov 2004
Location: Sarasota, FL
Posts: 1
vfilipski RepRank 0
Default

Thanks for this info - the layouts are VERY helpful when I am trying to troubleshoot a design


Quote:
Originally Posted by BlackCat2
If I understood you correctly this site should have an answer for you:

http://blog.html.it/layoutgala/

Good luck, hope that helps.

Heidi
Reply With Quote
  #13 (permalink)  
Old 05-18-2006, 08:33 PM
WebProWorld New Member
 

Join Date: Mar 2006
Location: North America
Posts: 3
DesignComm RepRank 0
Default

I would look at doctypes and also look for extra code that text editors sometimes generate. If you're hand coding, obviously you can skip this step, but if you're using Dreamweaver or GoLive, it's a real possibility that this is your problem. Also, make sure that the "px" appears with every measurement.

Good Luck!
Reply With Quote
  #14 (permalink)  
Old 05-18-2006, 10:16 PM
WebProWorld Pro
 

Join Date: Nov 2004
Location: Westmoreland County, PA
Posts: 205
noel_x99 RepRank 0
Default

I learned a lot from the tutorials here:

tutorials.alsacreations.com/deroulant/
__________________
Jane Noel
http://www.InWestmoreland.com
Westmoreland County PA's Business Directory
Reply With Quote
  #15 (permalink)  
Old 05-18-2006, 10:23 PM
MattE's Avatar
WebProWorld Pro
 

Join Date: Jan 2005
Posts: 146
MattE RepRank 1
Default

This is what i did

Code:
#sample{height:205px;}
#sample p {
float:left;
text-align:center;
display:inline;
border:1px solid #ccc;
margin:5px 1px 5px 1px;
background:#ffffff;
width:151px;
height:192px;
}
and in the body

Code:
<div id="sample">


your content<</p>



your content</p>



your content</p>



your content</p>
</div>

This worked nicely - see www.caricatureking.com/indexMay06.php to see the result
Reply With Quote
  #16 (permalink)  
Old 05-19-2006, 12:46 AM
WebProWorld New Member
 

Join Date: May 2006
Posts: 3
cbstomper RepRank 0
Default

If it was me I would go to the Microsoft web site and down load the trial for Microsoft Expression Web Designer and use it to check your style sheet then you can edit it and see the changes that are made to better understand it.

Want the best web hosting go to (Mod edit: Affiliate link removed) the best 24/7 tech support any where and much much more.
Reply With Quote
  #17 (permalink)  
Old 05-19-2006, 02:55 AM
WebProWorld Veteran
 

Join Date: Aug 2003
Location: California,USA
Posts: 373
drummin RepRank 0
Default

You might want to check out some of these...
http://www.cssplay.co.uk/layouts/index.html

A great site full of CSS design tips.
Drummin
Reply With Quote
  #18 (permalink)  
Old 05-19-2006, 05:13 AM
MuNKyonline's Avatar
WebProWorld Veteran
 

Join Date: Jun 2004
Location: Suffolk, England
Posts: 790
MuNKyonline RepRank 2
Default Re: CSS...

Quote:
Originally Posted by rms7design
well... I do all my website using css.... easy as 1-2-3... you float every div. insert the width (make sure the total is not more than the width of the wrapper and that's it... I don't see all the fuss about it.... tables are worse... and when it comes time to make changes across the website.. you will be happy you used css...

see ya
I disagree entirely. There is far more to making a CSS website that displays the same in Firefox and Internet Explorer as you can see if you look at the links in your own signature. I use a hybrid of the two, tables I find are best for creating the main layout and then css is great for controlling the content and menu's. There's absolutely nothing wrong with using tables.
Reply With Quote
  #19 (permalink)  
Old 05-19-2006, 06:32 AM
adbart's Avatar
WebProWorld Veteran
 

Join Date: Apr 2005
Location: Reading, UK
Posts: 480
adbart RepRank 0
Default

why is everyone so against tables these days? :P
__________________
Car Modifications - Car Accessories - Performance Engine Tuning - Car Styling:
Car Styling | Car Pictures
Reply With Quote
  #20 (permalink)  
Old 05-19-2006, 10:27 AM
Peter (IMC)'s Avatar
WebProWorld 1,000+ Club
WebProWorld MVP
 

Join Date: Dec 2003
Posts: 1,458
Peter (IMC) RepRank 4Peter (IMC) RepRank 4Peter (IMC) RepRank 4
Default

www.i-brane.com/cssonly/

I don't know if this is all exactly by the standards, but this generally works pretty well for me.
Reply With Quote
  #21 (permalink)  
Old 05-19-2006, 11:14 AM
WebProWorld Member
 

Join Date: May 2006
Location: Across the other border
Posts: 26
JimmiJames RepRank 0
Default

It all comes down to time. Creating a CSS layout compatible in all browsers is time consuming while a table layout is not.

I love what CSS can do but when you have a certain time frame to build a website, a CSS layout is just not an option for me.
Reply With Quote
  #22 (permalink)  
Old 05-19-2006, 11:33 AM
WebProWorld Veteran
 

Join Date: Mar 2006
Location: Maryland, USA
Posts: 972
weslinda RepRank 2
Default Tables aren't our enemy.

I'm not sure why all the "fuss" about tables being our enemy. They aren't. While nested tables using 732 cells can be our enemies, using a small single table can work wonders for layout, and save quite a bit of time in the design phase.

If you look at worldfire.com you'll see a site that is xhmtl 1.1 valid, css valid, and very clean, while using "tables". I do all padding, sizing, and layout control with css into the table.

It's such a huge topic that we need tableless design, and yet there isn't a good reason why, other than we're "trying to go where no man has gone before".

A quality site is the objective, not an award on the wall that says, "Hooray, you made a tableless site!" I've built my site to the latest standards, it works across all browsers, and shocker, I used a freaking table.

Now, for those of you so "anti-table" then feel good about your "not so browser" friendly design that isn't handled the same because the browsers don't see all CSS the same, and leave the rest of us real world designers alone.
__________________
We offer a total eCommerce solution with eCommerce Web Design using Pinnacle Cart
Reply With Quote
  #23 (permalink)  
Old 05-19-2006, 12:11 PM
WebProWorld New Member
 

Join Date: Apr 2004
Location: Kennett, MO - USA
Posts: 5
spellham RepRank 0
Default Re: Tables aren't our enemy.

Quote:
Originally Posted by weslinda
I'm not sure why all the "fuss" about tables being our enemy. They aren't. While nested tables using 732 cells can be our enemies, using a small single table ca