CSS Site Layout Issue...

Darragh29

Hi Folks,

I haven't been using CSS or StyleSheets with divs much lately for site layouts, I started off with tables years ago and I kind of got into a habit of using them and it wasn't broken so I didn't fix it! Since I've picked up ASP.NET, I've started trying to take up better convention by using StyleSheet.css files and so on and apparently tables are out with the dinosaurs now anyway...

I'm working on a site here and I decided to forget about tables this evening and use a StyleSheet and divs to set the layout.

I was absolutely delighted with the result I got, nice rounded corners, how I could position the divs, etc, until I went and viewed my site on my laptop, (I set up the site on my desktop), which obviously has a different screen size, and the site was all over the place!

I'm wondering do I need to use a div to tie up all other divs on my page to stop this from happening??? The result I got was great except for the fact that there was no consistency in layout when the page was viewed on a different computer like a laptop with a wide screen, divs shifted here there and everywhere.

Have a look at the site here:

www.egarage.ie

I've used a table based solution for the moment but I'd like to go back and use divs because I was happy with the result, but I don't want to go back and do it if this problem I'm having is something that is an inherent problem with using CSS for a site layout...???

None of the links work yet as I'm just setting up the Default.aspx page for the moment...

Any advice???

DonkeyStyle \o/

Yeah you've got it.
Make one main outer div, set your fixed width, center it on the page, then add more divs inside it, floating them as needed.
I'm not sure what specifically was wrong with your last attempt, since you've changed it back to tables.

Liam Byrne

Yup - a "wrapper" div aligned to centre is the most common approach for this.

Just set the width of that wrapper to your preferred screen size; this was 760px (800px screens - scrollbars/window frame) but is headling towards 980px (1024px - scrollbars/window frame).

Big debate as to whether people with larger screens / high res browse the web with the browser window maximised, or use the screens to multi-task, but it's basically down to a choice between those two.

body {
text-align:center;
}

#wrapper {
width: 760px;
text-align:left;
margin-left:auto;
margin-right:auto;
}

codecrunchers

This may not be a popular opinion, but here goes. With the cross-browser compatibility issues that still exists, tables provide a good means of overcoming these. I always find that developing a site which must work in all browsers + versions is far faster with tables.

I'm not a front end person though, perhaps it's because I only dabble in CSS etc. that I have this experience.

Alan

00sully

codecrunchers wrote: »

This may not be a popular opinion, but here goes. With the cross-browser compatibility issues that still exists, tables provide a good means of overcoming these. I always find that developing a site which must work in all browsers + versions is far faster with tables.

I'm not a front end person though, perhaps it's because I only dabble in CSS etc. that I have this experience.

Alan

:eek:

I would disregard this advice to be honest - using (archaic) html for design is not the way to go. Even for cross browser functionality. You CAN get cross browser compatibility with a little more effort using CSS.

maybe put up your CSS version of the site for us to look at? Although the first 2 replies give good information about using a "wrapper" div.

p

codecrunchers wrote: »

This may not be a popular opinion, but here goes. With the cross-browser compatibility issues that still exists, tables provide a good means of overcoming these. I always find that developing a site which must work in all browsers + versions is far faster with tables.

I'm not a front end person though, perhaps it's because I only dabble in CSS etc. that I have this experience.

With all due respect, if you say you're not experienced in an area, why offer advice in it?

That opinion would have been true about 7 years ago, but technology has moved on, and no serious professionals create pages using tables for layout any more.

Liam Byrne

Yup, tables are a no-no.

The only issue I have with CSS layout is the "best" way to put a footer at the bottom of the page / window, if the content doesn't fill the window. There are a few approaches, but the reason for that is because it's not something that CSS natively supports, e.g.

HEADER (let's say 200px)
CONTENT
FOOTER (let's say 50px)

Previously, this would have been a table with 100% height and the top and bottom rows' heights set to 200 & 50 respectively, leaving the CONTENT with an unspecified height to "fill" the rest of the area.

Nowadays, achieving that requires a fair bit of analysis / work; even more so if you have a navigation or other column.

But it is achieveable, and all of the other benefits of using CSS & DIVs completely blow any excuse for using tables for layout out the window; tables are for tabular data. Period. Even the old use of tables for labelling input fields is much easier to achieve using the <label> tag & CSS.

Now if only someone would standardise the "width+padding" issue, we could finally get around to having completely unbloated code.

Deserved

My solution would be:

[PHP]
<div class='website'>
<div class='header'>
<div>
<div class='buttons'>
//this div may be nested within header
</div>
<div class='body'>
<div class='content'>
</div>
<div class='right'>
</div>
</div>
<div class='footer'>
</div>
</div>
[/PHP]

Width has to be specified for all <div> elements. Follow specifications of w3 and validate:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.egarage.ie%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.egarage.ie%2F&profile=css21&usermedium=all&warning=1&lang=en

MOH

Deserved wrote: »

My solution would be:

[PHP]
<div class='website'>
<div class='header'>
</div> <

---

<div class='buttons'>
//this div may be nested within header
</div>
<div class='body'>
<div class='content'>
</div>
<div class='right'>
</div>
</div>
<div class='footer'>
</div>
</div>
[/PHP]

Think there's a / missing at the end of your header div

Darragh29

Thanks to everyone who posted for the advice. I was wondering recently why I don't like divs and to be honest I didn't even know, but now I have managed to understand why I don't like them that much!

When I use tables as I have been doing for ages, I always set the table border="1", I call this scaffolding, as I can see what the table looks like and it's more tangible and easier to work with. When I have everything where I want it, I just set the border="0" and nobody sees it, happy days.

Is there a similar approach that can be used with divs???

Darragh29

Deserved wrote: »

My solution would be:

[PHP]
<div class='website'>
<div class='header'>
<div>
<div class='buttons'>
//this div may be nested within header
</div>
<div class='body'>
<div class='content'>
</div>
<div class='right'>
</div>
</div>
<div class='footer'>
</div>
</div>
[/PHP]

Width has to be specified for all <div> elements. Follow specifications of w3 and validate:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.egarage.ie%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.egarage.ie%2F&profile=css21&usermedium=all&warning=1&lang=en

This is where the logical end of divs starts to wobble on me! How does the browser know where to position these divs above with regard to the other divs??? Using tables, obviously its <tr>, <tc> and <td>, to make relations between rows & columns, but I'm not clear on how divs do this???

JanneG

Darragh29 wrote: »

This is where the logical end of divs starts to wobble on me! How does the browser know where to position these divs above with regard to the other divs??? Using tables, obviously its <tr>, <tc> and <td>, to make relations between rows & columns, but I'm not clear on how divs do this???

If you within the set size "website" div use float divs that have width set to 100% say, you will automatically get the divs stacked on top of eachother.

[HTML]
<div class='webpage'> <- Start of "webpage" div which is set size
<div class='header'> <- Floating div
<div>
<div class='menu'> <- Floating div
</div>
<div class='content'> <- Floating div
</div>
<div class='footer'> <- Floating div
</div>
</div> <- End of "webpage" div
[/HTML]

The most important thing to think of with the floating divs is the width really as, if for example we take one container div of set width 400px, you then add a floating div of width 200px and then on of 100px and then one of 300px it would end up something like this:

<

---

Container

---

>
<

---

div 1----><-div 2->
<

---

div 3

---

>
<

---

end of container --->

but if all divs within the container had a width of 100% it would look like this:

<

---

Container

---

>
<

---

div 1

---

>
<

---

div 2

---

>
<

---

div 3

---

>
<

---

end container

---

>

I hope this makes sense?

BTW... the floating divs above would be [HTML]float:left;[/HTML]

Axwell

Darragh29 wrote: »

This is where the logical end of divs starts to wobble on me! How does the browser know where to position these divs above with regard to the other divs??? Using tables, obviously its <tr>, <tc> and <td>, to make relations between rows & columns, but I'm not clear on how divs do this???

In your CSS (Style Sheet) you set values for the divs properties.

Deserved

Darragh29 wrote: »

This is where the logical end of divs starts to wobble on me! How does the browser know where to position these divs above with regard to the other divs??? Using tables, obviously its <tr>, <tc> and <td>, to make relations between rows & columns, but I'm not clear on how divs do this???

If you want to manage <div> elements and undestan how they are working, their advantages and disadvantages firtstly you have to read w3 specifications for CSS and HTML and ofcourse you have to know concept of a layouts.

By writing "layouts" I've meant architecture of your page that you are going to create for instance

A.) Header, 2 columns, Footer will be displayed in this way:


[PHP]
_______
|Header|
| | |
|__|___|
|Footer|[/PHP]

B.) Header, Button Menu, 3 columns, Footer will be displayed in this way:

[PHP]
___________
|Header |
|=|=|=|=|=|
| | | |
|__|___|__|
|Footer |[/PHP]

After when your mockup will be ready you need to think about methods, approach that you will use during creation (I'm speaking about structure of each block a.k.a DIV). For instance I'm going to take a header that has Image, some text and login form with help of a DOM I can draw a simple diagramm of each element:

[PHP]
<div class="header">
|
___________|________|
| | | |

---

<input>
| | | |
<img> | <form>

---

<input>
|
<p class="sometext>

[/php]
Why do we need such a brainf***k?
1.) It allows to us to escape a duplicate use of style/tag.
2.) It makes structure of a website more clear and understandable.
3.) We can manage, maintain each element by giving to it it own role in a life of a web page.
and etc.

Ok enough of a offtopic.

For me <table> element usage is associated with a creation of a tables,lists,schedule and etc. Each element has it own role in markup language, and ofcourse it can do and other things but if you can drive-in nail with a help of a stone it doesn't mean that it has been intended for that.

Axwell

Deserved wrote: »

For me using of a tables associated with diagrams. Each element has it own role in markup language, and ofcourse it can do and other things but if you can drive in nail with a help of a stone it doesn't mean that it has been intended for that.

Not really sure what you are trying to say here, your grammar and typing are a bit confusing. Using tables isnt associated with diagrams its for tabulated data. You should be able to do any layout or design using divs and css without the need for tables.

Deserved

Axwell wrote: »

Not really sure what you are trying to say here, your grammar and typing are a bit confusing. Using tables isnt associated with with diagrams its for tabulated data. You should be able to do any layout or design using divs and css without the need for tables.

Ups sorry I've confused meanings of a words, I've wanted to write tables (schedule). Name of this element speaks for itself

Axwell

Deserved wrote: »

Ups sorry I've confused meanings of a words, I've wanted to write tables (schedule). Name of this element speaks for itself

No problem, just some confusion

p

Darragh - I do what you refer to as scaffolding myself. There's 2 ways I would advise. The most basic, just doing this in CSS:
div { border: 1px solid red; }
or download the Web Developer Toolbar for Firefox or IE, which allows you to look at the structure of HTML in a lot of depth.

Also, check out this tutorial, which shows an approach to laying out a website. I think it'll make a lot of sense to your workflow.
http://www.maxdesign.com.au/presentation/process/

I'd also recommend the Float Tutorial, which is by far one of the best explanations of CSS float methods online:
http://css.maxdesign.com.au/floatutorial/

The people who wrote both, also have a book too on their site.

Deserved

From the tutorial:
http://css.maxdesign.com.au/floatutorial/tutorial0915.htm

Code is very static and not flexible for instance:

[PHP]
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
[/PHP]

In the example above we will lose borders because left <div> element has bigger height than either div right or div content elements. That is because div element is independed by itself. To solve this problem need to use a CSS hack.

DonkeyStyle \o/

p wrote: »

The most basic, just doing this in CSS:
div { border: 1px solid red; }

+1

MOH

p wrote: »

Darragh - I do what you refer to as scaffolding myself. There's 2 ways I would advise. The most basic, just doing this in CSS:
div { border: 1px solid red; }

I'm still a complete noob myself, but something I find helpful is sticking a different background colour on each div while you're sorting out the positioning - helps if you mess up and they start overlapping each other, rather than trying to work out which border is which.

Just add
background-color: <colour-name>;
in the CSS, e.g. background-color: red;

Placebo

jesus why are tables no no ?

p

Placebo wrote: »

jesus why are tables no no ?

That's an excercise for the reader.

Liam Byrne

Placebo wrote: »

jesus why are tables no no ?

Because they increase the percentage of code vs content by bloating code, making it harder for Google robots and browsers to decipher, and also make repositioning, alignment and editing a real pain in the arse, particularly if there are nested tables.

They also impose a combination of content & presentation, whereas DIVs and semantic markup are closer to XML, with the possibility of creating individual style sheets to control the presentation on different media (currently separated into mainly just high-res screens & printers) but with possibilities of extending to other formats (mobile devices, XML feeds, etc)