I planning a new website that will 3

[nevets2001uk]

I planning a new website that will be laid out using full CSS. It will be front-ending a complex asp.net application I'm developing.

This is the first time I've moved away from a 'tabled' design and I wanted to get opinions on the best methods of implementing a full CSS site. I'm planning on having a range of available colour schemes (Using different Style Sheets and loading them using ASP)

I've been playing with some demo layouts to get to grips with CSS a little and have created style sheets which contain the full information on each 'box' within the layout, including dimension and locations.

What I really wondering was whether it was standard to do it this way and set up each indivdual section (Mine will have a lot) or whether most people just set up the colours and font settings for a general box and then in the HTML code, include the DIV class and set the sizes and locations there so that one CSS Class can be used more than once for a range of boxes.

Not sure is I'm making as much sense as I could be but I hope you'll get the gist of what I'm asking!!

All personal advice on this would be great + any links to good tutorials would help!

Thanks in advance,

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[philote]

I would say that for any styles the boxes have in common put them in a class and assign the box to the class. The boxes would also have an id assigned to them so you can define their specific style information, such as positioning and size. For example, say you have a bunch of divs in your page and you want them all to have the same colors, borders, padding, and margins. But you also want to specify the size and position for each one. Then your html would be something like this:

<div class=&quot;mybox&quot; id=&quot;menu&quot;>..</div>
<div class=&quot;mybox&quot; id=&quot;something&quot;>..</div>
<div class=&quot;mybox&quot; id=&quot;somethingelse&quot;>..</div>
etc.
[code]

For css help, go to [URL unfurl="true"]http://www.w3shools.com[/URL]
For css layout info go to [URL unfurl="true"]http://www.glish.com/css[/URL]
and [URL unfurl="true"]http://www.alistapart.com/topics/css/[/URL]


Kevin
A+, Network+, MCP

 

[nevets2001uk]

That's great! How would I set them up in the css?

Presumably I could set up the colours etc like...

div.mybox {
blah;
blah;
}

Would I just add something like...

div.mybox.menu {blah;}
div.mybox.something {{blah;}

to set the individual elements such as size?

Thanks

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[philote]

Check out the w3shools link I posted above (which, I just notices has a typo, try

http://www.w3schools.com

instead).

For id selectors (id="blah" in the html), you'd have this in your css:

#someid{
 whatever
}

Kevin
A+, Network+, MCP

 

[Vragabond]

When setting up styles for id's, you use the # sign in CSS. Please note that while you can reuse the class on the page many times, you can only use id for one element. That is why most people who do CSS positioning use ids (#) to describe the layout boxes (#leftColumn, #mainColumn, #rightColumn) and use classes to define specific elements within them. CSS behaves in the same manner, whether you use a class or an id. Here is how it is used:

<style>
#leftColumn { declarations; } /* to define the left column */
#mainColumn { declarations; } /* to define the main column */
#rightColumn { declarations; } /* to define the right column */
#rightColumn.firstpage {declarations; } /* to define different right column for the first page */
</style>

<div id=&quot;leftColumn&quot;></div>
<div id=&quot;mainColumn&quot;></div>
<div id=&quot;rightColumn&quot; class=&quot;firstpage&quot;></div>

Another well known technique is to define all the elements within a specific element. Here is how it is done:

p { declarations; } /* how paragraph elements should look */
#leftColumn p { declarations; } /* all paragraph elements within the leftcolumn div will use the described style */
#leftColumn div { declarations; } /* all div elements within this div }
#mainColumn p { declarations; } /* all paragraph elements within the maincolumn div will use the described style */
#mainColumn p.important { declarations; } /* special paras within the main col */

This is a very powerful way to control elements in specific parts of the page. For instance, in global p declaration you will define the font family, size and line height of the element. Within left column you will give it a specific background. Within maincolumn you will perhaps change the font size attribute. You can choose to either add attributes (assign an attribute which was not previously assigned to the element - like the background example) or overwrite the previous style (like the size example).

Last but not least, any element can use numerous classes (but still one id). That means you can have a class called red which changes color to red and a class called center which centers the text. You can then use:

p { font: bold 10pt/13pt Verdana, Tahoma, sans-serif; }
.center { text-align: center; }
.red { color: red; }

<p class=&quot;center red&quot;>This text will be bold, 10pt big (13pt line height) of the Verdana family (if user has that font installed, unless it will grab the others) center-aligned and red</p>

Hope it helps.

 

[nevets2001uk]

Cool. Thanks. Think I'm with you now. I'll spend some time later playing around with a test page.

One of the reasons I'm starting on this project is to improve / put into practise my CSS and ASP.NET skills so I want to make sure I'm teaching myself the best methods. This should help me no end. Cheers.

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[MichiganRon]

Check out

http://www.csszengarden.com

for ideas. They have one html file which users cannot edit. Users can then submit different CSS files to change the layout of the page. Look at the different pages. You'll see that the content is the same, but it looks totally different.

It's amazing what you can do with CSS.

Good luck,
-Ron

-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.

 

[nevets2001uk]

Wow! Never realised so much could be achieved with CSS! Certainly not to that extent anyway, where the such different looks can be achieved using the same HTML code.

Certainly confirms in my mind that it's something worth teaching myself!

Thanks for the link.

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[nevets2001uk]

Right! I've been playing around with CSS for a number of hours now and I'm getting somewhere. I created the beginnings of what will be my site layout (i'm trying to also adhere to XHTML 1.0 standards i.e. lower case tags etc.) and wanted to post a link to it for a couple of reasons...

http://www.celebrity-hunt.co.uk/csstest/

1) I'd like to check that what I've done so far looks like a good way to go about the layout. So many times in the past I've started something and later realised that because of a stupid error at the start I have to re-do it or create some bodge repairs to get around it. This time I'd like to try and start off on the right track.

2) I seem to be having some layout issues with some of the boxes. The second 'window' for example should only be 5px under the first one but seems to move a whole line down the screen instead. Also I put a left margin of 5px on the 'windows' originally but had to change it 2px so that it looked the same as the top margin of 5px. IS there a reason for this? Finally the second 'window' content area which should be longer than the first is far too short and for the some reason the test has centered itself in the middle. Could these be bugs with CSS or just bad implementation by myself.

I've looked over a number of tutorials on laying out sites using CSS but none seem to cover more advanced layouts like my one. They deal with 3 columns and not a lot else. Does anyone know any good tutorials which may help me with something more complex?

Any ideas / help is appriciated. I'm getting towards my first goals. Just need a little more prodding in the right direction!! Cheers!

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[Vragabond]

Correct me if I am wrong, but isn't your layout a three-column one as well? Three columns with a top header. First thing (if you decide to stick to the xhtml specs) is to add a doctype header on the top. IE has many quirks, some of them you can rectify by specifying a doctype at the top and bring it a tad closer to the standards. Believe me, I had to employ many tricks to get the layout to look ok on IE6 after designing it for Opera and Mozilla browsers and later I had to remove all those tricks after I added the doctype.

As for positioning problems I don't think they should arise but it is hard to tell without sinking deeper into the code itself.

A good thing I found while developing a site is to add border: 1px solid black; to every box. It will show you if your box was rendered the way you envisioned it. It makes for an easier debugging.

A quick glean through your CSS showed me an error (vertical-align : text-middle; should be vertical-align: middle, a lot of floating objects (note that floating and absolutely positioned objects do not resize their parent element - they just float above it; check the height of your container div - I would not be surprised if it is 0px high) and a couple of peculiar elements (windowspacer5 div is used to make a space between the two boxes on the left side; similar effect could be achieved by applying margin-bottom or margin-top to the corresponding boxes). Also, you went full ahead with using ids and already made a first mistake. Two elements on the same page cannot have the same id. If you realize you will need to use a box multiple time on one page, change it to class.

Hope this helps. If you have more specific questions, don't hesitate to ask.

 

[philote]

A great tool that I've been using to debug sites is Mozilla's DOM Inspector. Since you'll most likely download Mozilla to test your web page on, give this tool a try. It'll let you see, among other things, where your elements are on the page and the style attributes they've received (so you can tell, as Vragabond said above, if your container div is 0px high -- it is). You can do a search for tutorials on how to use it, but here's one I found to get you started:

http://grayrest.com/moz/evangelism/tutorials/dominspectortutorial.shtml

Kevin
A+, Network+, MCP

 

[BabyJeffy]

Steve,

Microsoft have said they will not be releasing any more versions of IE "seperated from the OS". The next version of IE (for windows of course) will ship with the next OS... currently called Longhorn. News reports indicate we won't see Longhorn until late 2005 at the least.

Rather than expecting Microsoft to innovate through new IE releases etc... it has been suggested that we achieve this through CSS.

It's great that you can see the advantages in adopting CSS... I'm also a fairly recent convert. I investigated CSS as the result of realising that I wouldn't be seeing any "new stuff" out of the IE browser Dom etc for years. I'm not going back now

All the best on your learning quest.

Jeff

 

[nevets2001uk]

I seem to have got most things fixed thanks to Vragabond's comments. Only thing I understand fully was the use of classes. I think i understand the premise of a class and an id but obviously I've implemented them wrongly!

<div id=&quot;windowheader&quot; class=&quot;test&quot;>
<p>Window Header</p>
</div>

<div id=&quot;windowinternal&quot; class=&quot;test&quot;>
<p>Window Text
<br /><a href=&quot;test.css&quot;>CSS File</a>
<br /><a href=&quot;layout.gif&quot;>Example Layout</a></p>
</div>

<div id=&quot;windowheader&quot; class=&quot;test&quot;>
<p>Window Header 2</p>
</div>

<div id=&quot;windowinternal&quot; class=&quot;test2&quot;>
<p>Window 2 Text</p>
</div>

I assumed that you could create an id for a standard element as I have with windowinternal (sets colours and borders etc) and have classes for using different dimensions (i.e. test and test2)

#windowinternal {
margin-top : 0px;
margin-bottom : 5px;
background-color : #EAEAEA;
border-left : 1px solid #C9C9C9;
border-right : 1px solid #C9C9C9;
border-bottom : 1px solid #C9C9C9;
padding : 2px;
}

#windowinternal.test {
height : 130px;
width : 100%;
}

#windowinternal.test2 {
height : 200px;
width : 100%;
}

This I now understand to be wrong but I'm a little unclear how I should go about this instead. Can someone point me in the right direction.

JEFF -
Thanks. I've always been a bit of a self teacher and like to adopt new technologies such as ASP.NET etc. CSS seems to offer a lot more than I imagined and certainly looks like a worthwhile development tool.

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[Vragabond]

Solution to your problem would be to just switch class and id. For the CSS, it does not matter which is which, so basically this two identifiers are identical (both describe an element with a class windowinternal and an id topbox):

.windowinternal#topbox { declarations; }
#topbox.windowinternal { declarations; }

It is your personal decision which one you put first.

Another option would be to specify a class for the window outlook:

.windowinternal { declarations; }

and another two classes for the heights:

.topbox { declarations; }
.bottombox { declarations; }

You would then use it like this:

<div class=&quot;windowinternal topbox&quot;></div>
<div class=&quot;windowinternal bottombox&quot;></div>

As I said before, it is an unwritten rule that main layout is declared with ids and inside elements with classes. But you could use classes to define all the elements on your page if you wanted. It just comes down to preference which you wish to use where. And the fact that only one element on the page can have one id name.