Layout with CSS (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> Layout with CSS (12/28/2004 16:04:47)

Hi,

I'm using Style Master 3.5 demo version and am trying from scratch to lay out one of my existing templates to look exactly the same as the one created in Frontpage.

The extisting Frontpage template - Consultancy Site
The Style Master CSS site - Consultancy Site (This may change as i work with this page)

The existing template was created entirely using tables to control layout and i have a few nested tables in there too. The existing template looks good on my computer across most browsers, but i believe there's severe accessibility issues in using tables for layout.

As you can probably tell i'm a complete novice with CSS, this being the first decent attempt at working with it, but i'd like to know whether tables can be used in conjunction with layout using CSS, if not then can someone please help with advice on how to go about making the CSS version of this template look the same as the existing template?

Thanks

Nicole



dpf -> RE: Layout with CSS (12/28/2004 16:08:55)

there is nothing incompatable about tables and css. in fact, css rules can be used to define table cells



dpf -> RE: Layout with CSS (12/28/2004 16:16:30)

my knowledge of css is greater than my practice of it - does that make sense? ive read and understand it well, just havnet used it enough for it to be second nature. here is what I would recommend to you nicole - you create excellent designs - dont throw the baby out with the bath water - stick with tables which you employ nicely and begin by using css for font control and gradually add more functionality wit it as you get confident with it.



dpf -> RE: Layout with CSS (12/28/2004 16:23:31)

i guess i need to say one more thing - it seems to me that, by starting css with positioning to replace tables, you are starting with the harder stuff. its always best to start something new with the easiest first! look at this section of your code form the "good page". 
<ul type="square">
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Surveillance</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Investigation</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Action Plans</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Media Exposure</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Business Plans</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Financial Solutions</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Personal Service</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Mediation</font></li>
            <li>
            <p align="left" style="margin-top: 0; margin-bottom: 0">
            <font face="Arial" size="2" color="#525252">Rural Advice</font></li>
          </ul>
          </td>
          <td width="52%" align="left" valign="top">
          <font face="Arial" style="font-size: 9pt; letter-spacing: 0; font-weight: 700" color="#525252">
          Welcome to This Website</font><p>
          <font face="Arial" style="font-size: 9pt" color="#525252">
          <img border="1" src="wheat4.jpg" align="right" width="100" height="100">General text about the 
          business , it's operator and clients successes. General text about the 
          business , it's operator and clients successes. General text about the 
          business , it's operator and clients successes. General text about the 
          business , it's operator and clients successes.  </font></p>
          <p>
          <font face="Arial" style="font-size: 9pt" color="#525252">
          <img border="1" src="scales.jpg" align="left" width="100" height="100">General text about the 
          business , it's operator and clients successes. General text about the 
          business , it's operator and clients successes. General text about the 
          business , it's operator and clients successes. General text about the 
          business , it's operator and clients successes. General text about the 
          business , <img border="1" src="cow.jpg" align="right" width="100" height="100">it's operator 
          and clients successes. General text about the business , it's operator 
          and clients successes.</font></p>
          <p>
          <font face="Arial" style="font-size: 9pt" color="#525252">
          General text about the business , it's operator and clients successes. 
          General text about the business , it's operator and clients successes. </font></p>
          <p>
          <font face="Arial" style="font-size: 9pt" color="#525252">
          General text about the business.</font></td>
          <td width="25%" align="left" valign="top">
          <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber9">

imagine how much leaner this would be if you did an external style sheet for just two things: the font and the <p>



bobby -> RE: Layout with CSS (12/28/2004 16:23:48)

I agree...

Get used to using CSS for styles and defining everything except for the layout... then once you get that down you can drop tables about 80% of the time.

You can still define everything about your table in a CSS... making tables nearly as flexible as a pure CSS layout.



Nicole -> RE: Layout with CSS (12/28/2004 17:21:21)

Thanks guys,

I'm a bit like that, get something new and just want it to work 100% perfectly right away.

The thing is, two clients i'm really after are both community services and now that i've mentioned to both that i can make their site compliant with both W3C and Accessibility, that's what they'll want, and i HAVE read somewhere where tables, especially nested tables conflict with accessibility.

Nicole



dpf -> RE: Layout with CSS (12/28/2004 19:21:18)

quote:

especially nested tables
I never nest tables..i use rowspan and colspan attributes for the same effect



jaybee -> RE: Layout with CSS (12/29/2004 5:49:49)

Nicole, the most confusing part of css is layout. Style is reasonably easy and I would advise you to stick with that initially. As long as your HTML and CSS validate, you'll be fine.

Use tables, don't nest them, style them with css. Save layout for when you're used to styling and have plenty of time to play with box models.



c1sissy -> RE: Layout with CSS (12/29/2004 9:42:40)

Jaybee is correct on this one. Learning how to use css for placement can be confusing at times. There are so many browser issues that people get frustrated with it.

Understanding the box model, how borders margins and padding work is the essential understanding of css, as well as which browsers do and do not uderstand the box model (hint, IE [;)])

Do as Jaybee is suggesting for you right now, and when you have time, learn css the correct way. Not just on the fly to accomplish a job. It takes time to learn this. But its so worth it.[;)]



Nicole -> RE: Layout with CSS (12/30/2004 2:21:37)

Thanks everyone so far, i really appreciate your comments y'now.

I managed to create my first ever valid XHTML 1.0 "strict" page yesterday, so for the purposes of this thread, please ignore the second link i put in my opening post. The page is located here. Today i was going to concentrate on using Style Master to style it using CSS but i've had some hiccups, firstly with the demo version of Style Master (fixed after contacting them), and secondly with a jackhammer going all day in an apartment in our complex (apparently he has just as much right to redesign his bathroom everyday of the week between certain hours as i do to run a business from home). But i have managed to also become frustrated at CSS and the jackhammer.

I'm having a bit of trouble understanding the parent/child/sibling thing and also the div tag.

As you might be able to see from the page i've linked to here, i've separated the page into 9 divisions. I did this because i wanted to style text or background, or table border, or all of them differently. Was this a good idea?

Can someone also please tell me how to differentiate between these div's in CSS so that <p> elements and <h1> elements etc are styled according to the corresponding <div id> they belong to?

Thanks

Nicole (who wonders whether this drink will help my headache?)



caz -> RE: Layout with CSS (12/30/2004 6:15:09)

quote:

ORIGINAL: Nicoleoz


Can someone also please tell me how to differentiate between these div's in CSS so that <p> elements and <h1> elements etc are styled according to the corresponding <div id> they belong to?



Using Stylemaster choose
Statement>
New>
ID Selector>
From there add the element in the left pane and the name of the div concerned in the right pane. You will then have a new id selector to style which will, for example, be:

<li id="leftmenu">
So that this new rule will apply only to elements marked up as lists when they occur in the leftmenu div.

I don't think that alchohol helps headaches[;)]



c1sissy -> RE: Layout with CSS (12/30/2004 6:52:47)

Nicoleoz
There is a site called Code Punk. Go there and do their css tutorials. they are great for learning when you are starting out. If you can,purchase the bundled course lessons from West civ. Then check out the links section here in the css forum.

Divs =boxes. They are so easy once you learn them.

Work on learning the box model. I believe that there are links to this in the links section. Also, find things on google that will help you with the parent child etc...

I would search for you, but am in the middle of planing daughters wedding and getting my house in order for this. I honestly dont't have time to do this for you or I would. I always provide links when people don't understand something.

Also go and read the specs, boring, but print them out and study them. I'm going to give you some links, I'm on early enough to get a search for a few things for you. Also, I can get a list of books to you if you wish. ORder them from Amazon.com. Best prices and shpping on them. Also, not sure if this is where you are, but go with xhtml. Most compatible (though argueable with some) with css. Use the xhtml transition dtd, I think I posted it in here somewhere with the correct dtd's. If not, I'll get them up and make a sticky post out of them for all that need to see them.

CSS Specs
http://www.w3.org/TR/CSS21/

Box Model, MOST needed to understand how this works, can't stress it enough

http://www.w3.org/TR/2004/CR-CSS21-20040225/box.html

xhtml discussion
http://www.extremetech.com/article2/0,3973,11772,00.asp

how to read the specs
http://www.thenoodleincident.com/tutorials/css/

google search on child sibling parent
http://www.google.com/search?q=css+child+sibling+parent+tutorials&hl=en&lr=

google search on selectors/decendants goes by both names
http://www.google.com/search?hl=en&q=css+selectors&spell=1

css div tutorials
http://www.google.com/search?hl=en&lr=&q=css+divs+tutorials+

This should keep you busy for a while.

Also go to lvs online learning, they have css classes for 25 for your first class and then 20 after that, they are good ones. ( if you do, pm me for my address and let them know when you sign up that I sent you there as I would get creidt towards my next class with them) They have classes open right now. google and go there and register for a class. Vikki, is the teacher you want to stay with, she is pretty good.

Another suggestion, I have a homework thread in here, go there and study the pages and the css and the explainations that are in the thread. Play with the css.

google search on positioning in css
http://www.google.com/search?hl=en&lr=&q=css+positioning

So I hope that these help you out, and PLEASE, don't ever think that any question that you will post in here won't be an important one. You could ask one that someone else might be afraid to answer.[;)]



caz -> RE: Layout with CSS (12/30/2004 18:14:15)

As a short cut, you could also work through the tutorials that came with StyleMaster. They will give you a good foundation on which to build, as well as learning to use the editor.

Cheers
Carol



Nicole -> RE: Layout with CSS (1/2/2005 2:03:16)

I don't know if my brain is full or something, but i've just about had it with CSS!

Can anyone please explain to me (in simple terms), why this page has no style despite it being clearly written in the XHTML that it's there.

Here is the code i've written, i'd also appreciate feedback on it (in simple terms) if it might be the reason that page has no style. 

body {
background-color: #f4f0e6;}

table#page {
background-color: #ffffff;
padding: 10px;
border: 1px #666666 solid;}

table#header {
border: 1px #666666 solid;}

table#navigation {
border: 1px #666666 solid;}

a:link#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:visited#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:hover#navigation {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:active#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

p#navigation {
text-align: right;}

table#content {
background-color: #ffffff;
border: none;
padding: 10px;}

p#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;}

ul#content {
list-style-type: square;
white-space: normal;}

img#content {
padding: 5px;}

h4#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: bold;
font-style: normal;
text-align: left;}

table#lefttop {
background-color: #f4f0e6;
border: 1px #000000 solid;
padding: 10px;}

h1#lefttop {
font-size: 1em;
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
text-align: center;}

p#lefttop {
text-align: left;
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
text-decoration: none;
font-style: normal;}

table#leftmiddle {
background-color: #568406;
border: 1px #000000 solid;
padding: 10px;}

h2#leftmiddle {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-decoration: none;
font-style: normal;
text-align: center;}

table#right {
background-color: #006897;
border: 1px #000000 solid;
padding: 10px;}

p#right {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;}

table#righttop {
background-color: #003366;
border: 1px #000000 solid;
padding: 10px;}

h3#righttop {
text-align: center;
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
font-style: normal;
text-decoration: none;}

table#footer {
background-color: #ffffff;
border: none;
padding: 10px;}

hr#footer {
width: 1px;
color: #666666;}

a:link#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:visited#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:hover#footer {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

a:active#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}

p#footer {
text-align: right;}


Many thanks from a very frustrated individual.

Nicole



d a v e -> RE: Layout with CSS (1/2/2005 5:05:05)

you need to replace the <head> with this 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>New Page 1</title>
<link href="consultancy1.css" rel="stylesheet" type="text/css" />
</head>


:)



jaybee -> RE: Layout with CSS (1/2/2005 6:00:29)

Yes, Dave is right,

The code line <style type="text/css" > </style>

is only used for local styling for that page only.

The line

<link href="consultancy1.css" rel="stylesheet" type="text/css" />

pulls in an external style sheet.

<link is an HTML statement. Anything that goes in the middle of <style statements must be css.



d a v e -> RE: Layout with CSS (1/2/2005 6:02:25)

jaybee your avatar is looking a bit autistic in 2005 ;)



c1sissy -> RE: Layout with CSS (1/2/2005 7:24:44)

Nicole,
Try not to get frustrated with this. I know that it can be. When you feel the frustration on coming, go play an online game or two. Take a break from it then come back and things might go a bit smoother for you. Jaybee and Dave know a good deal, so listen to them.

Hey Jaybee, love that avatar. REally neat!



d a v e -> RE: Layout with CSS (1/2/2005 7:28:14)

don't forget to validate (xhtml and css) as well - it's a useful way to pick up errors even if it isn't necessarily helpful as far as fixing it goes!



jaybee -> RE: Layout with CSS (1/2/2005 15:46:59)

I thought I'd save myself some time with a site revamp I'm doing and grabbed a css layout from one of the usual set of suspects who make them available.

I wish I hadn't bothered. It's taken me longer to fix their errors than it would have to do code from scratch.

Pixel Perfect indeed. Pah! [&o]



c1sissy -> RE: Layout with CSS (1/3/2005 8:26:07)

quote:

Pixel Perfect indeed. Pah! [&o]


Depending on the type of layout, you can make them pixel perfect. Honest. I have a group of templates that I have been working on, totally fluid layout, and they are pixel perfect. I'm very pleased with their workings.

Its a matter of understanding. Of which I still have a long way to go. I have some errors in them, jumping vertical menues, but I know that I can figure it out. I have to strip it down and figure out what is causing this to happen.[:@]



jaybee -> RE: Layout with CSS (1/3/2005 10:03:42)

No Deb, you got me wrong. I've fixed their supposed pixel perfect so that it actually is pixel perfect and fluid as well.

I just wish these guys would test their layouts properly. A lot of them render fine whilst they're empty but as soon as you put things in they go all over the place.

As I assume they're doing the layouts mainly for css newbies, they really do need to break test them.

[edit]
I've also got it working with server side includes for the top, left and right divs. Oh Yay!!!! Cool or what!



c1sissy -> RE: Layout with CSS (1/3/2005 10:19:46)

quote:

No Deb, you got me wrong. I've fixed their supposed pixel perfect so that it actually is pixel perfect and fluid as well.


OOOPS![sm=whistling.gif]

I do agree that they need to test their layouts more. Just because it works like they have it layed out, doesn't mean that when someone else adds stuff that its going to work. Thats why, even for the ones that we do ourselves, we should try to break them. This way, if someone decides to "borrow" our designs, they don't break on them (although, I prefer to let them break on someone "borrowing my design [;)][8D])

Yes, css does work good with ssi's. I have one page where the whole content of the page is set up as an ssi. From begining of body to end, with total styles, and it works great. Styles and all are called in as the page opens up. And it validates to! yipppee!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375