your opinion on css code

F

Fredo Vincentis

Hi guys,

I have been spending quite some time on learning to layout with only css
rather than tables, but I am not quite sure whether my thinking is going
down the right lines.

I was wondering whether you could have a look at a layout I created with css
and give me some feedback on whether I use the styles and tags efficiently?
The stylesheet seems pretty long to me and probably a bit confusing, so
maybe I am doing something wrong.

The file is at http://www.terra-mia.com/version2/

Thanks for your opinion!
 
N

Nico Schuyt

Fredo said:
I was wondering whether you could have a look at a layout I created
with css and give me some feedback on whether I use the styles and
tags efficiently? The stylesheet seems pretty long to me and probably
a bit confusing, so maybe I am doing something wrong.
The file is at http://www.terra-mia.com/version2/
Click to expand...

- The fixed font makes it impossible to scale (view-text size-larger)
Use em or %
- The absolute positioning makes is very complex and not flexible.
See what happens if you resize in Mozilla or Opera
Use floating div's
- Use CSS hover instead of javascript for the main menu.
- No need to repeat the font-family so many times.
Most elements inherit from body
- Validate the pages in http://validator.w3.org

Good luck!
Nico
 
F

Fredo Vincentis

Nico Schuyt said:
- The fixed font makes it impossible to scale (view-text size-larger)
Use em or %
- The absolute positioning makes is very complex and not flexible.
See what happens if you resize in Mozilla or Opera
Use floating div's
Click to expand...

I had difficulties with floating div's in IE for Mac. Is that just me or did
others have those problems as well?
- Use CSS hover instead of javascript for the main menu.
Click to expand...

Does the hove work for all current browsers? I remember when I first started
on css it didn't work in NN.
- No need to repeat the font-family so many times.
Most elements inherit from body
- Validate the pages in http://validator.w3.org

Good luck!
Click to expand...

Thanks heaps for the comments!
 
N

Nico Schuyt

Fredo said:
"Nico Schuyt" wrote
Click to expand...
I had difficulties with floating div's in IE for Mac. Is that just me
or did others have those problems as well?
Click to expand...

No. I had problems too some time ago. Solved it by adding clear: both; to
the definition of a specific div box.
Does the hove work for all current browsers? I remember when I first
started on css it didn't work in NN.
Click to expand...

Well, very old browsers will perhaps not work correctly. Best way to deal
with that is to suppress CSS completely. The site will look different but be
good accessible.
A js solution will not work in about 10-15% (js not installed or enabled)
Thanks heaps for the comments!
Click to expand...

My pleasure :)
Nico
 
W

Warren Oates

:I have been spending quite some time on learning to layout with only css
:rather than tables, but I am not quite sure whether my thinking is going
:down the right lines.

Why? CSS rules apply to tables. I spent some time setting up forms and
so on using CSS only, someting like:

<style type="text/css">
body {margin: 14px;}
div {font-weight: bold; font-family: verdana, helvetica, sans-serif;
letter-spacing: 0.1em; font-size: 12px;}
div.d1 {position: absolute; top: 18; left: 100; }
div.d2 {padding-top: 4px; height: 14px}
div.d3 {position: absolute; top: 10; left: 210}
</style>
</head>
<body>

<form ACTION="ins.php" METHOD=POST>

<div class="d1">
<div class="d2"> name:</div>
<div class="d2"> telephone:</div>
<div class="d2"> email:</div>
<div class="d2"> city: </div>

<div class="d2"> booked: </div>
<div class="d2"> arriving:</div>
<div class="d2"> leaving:</div>
<div class="d2"> how many: </div>
<div class="d2"> which room: </div>

<div class="d3">
<div class="d2"><input type="text" name="name"></div>
<div class="d2"><input type="text" name="phone"></div>
<div class="d2"><input type="text" name="email"></div>
<div class="d2"><input type="text" name="city"></div>
<div class="d2"><input type="text" name="booked"></div>
<div class="d2"><input type="text" name="came"> &nbsp; (yyyy-mm-dd)</div>
<div class="d2"><input type="text" name="went"> &nbsp; (yyyy-mm-dd)</div>

<div class="d2"><input type="text" name="how_many"></div>
<div class="d2"><input type="text" name="room"></div>
<div class="d2"><input type="password" name="pass"></div>
</div>

<div>
<input type=submit name="insert_bb" value="submit" />
</div>
<div style="margin-top: 26em;">

comments:<br />
<textarea cols=50" rows="10" name="comments">
</textarea>

menu:<br />
<textarea cols=50" rows="10" name="menu">
</textarea></div>

</form>
<form>

which looks okay and all, but in the end, I've gone back to formatting
tabular data in tables. I use fixed and absolute positioning for warning
boxes and menu bars and some design stuff, but tables do what you want
too.

(I have never had the courage to submit that code to The Validator)
 
E

e n | c k m a

which looks okay and all, but in the end, I've gone back to formatting
tabular data in tables.
Click to expand...

Which raises the question: Is a form tabular data?

What are people's thoughts on that? Personally, I wouldn't consider them
tabular data... because it's a form... But, there are more experienced
people than me in this newsgroup I'd rather hear from so I'll pass it on to
you guys/gals.

Nicko.
 
A

Adrienne

Which raises the question: Is a form tabular data?

What are people's thoughts on that? Personally, I wouldn't consider
them tabular data... because it's a form... But, there are more
experienced people than me in this newsgroup I'd rather hear from so
I'll pass it on to you guys/gals.

Nicko.
Click to expand...

I used to use tables for forms, and then I discovered that CSS was actually
easier.

For example, something like this if the querystring was ?required=name#name

<%
dim required
required = request.querystring("required")
%>

#<%=required%> {background-color: #ffe4e1; color: #000;}
#<%=required%>1 {color:red; background-color:yellow; font-weight:bold}

<label for="name" id="name1">Name: </label> <input type="text" name="name"
id="name" value="<%=name%>" />

When the server parses out the HTML it turns out like this:

#name {background-color: #ffe4e1; color: #000;}
#name1 {color: red; background-color:yellow; font-weight:bold}

<label for="name" id="name1">Name: </label> <input type="text" name="name"
id="name" value="" />

Sure, I could probably do that with tables, but ids, CSS and labels sure
are sweet. What's even nicer is the browser automatically goes to the id
called name, where the label is nicely highlighted, and the input box is
also nicely highlighted.

I usually also like using the fieldset element to separate various parts of
the form, and the legend element. You can duplicate that with tables, but
then you have to use a lot of extra markup. Forms=KISS, no tables.
 
W

Warren Oates

:Sure, I could probably do that with tables, but ids, CSS and labels sure
:are sweet. What's even nicer is the browser automatically goes to the id
:called name, where the label is nicely highlighted, and the input box is
:also nicely highlighted.

What about positioning?
 
E

e n | c k m a

What about positioning?

'float: left' makes positioning fairly easy for forms, I've found.
 
W

Warren Oates

:'float: left' makes positioning fairly easy for forms, I've found.

But it doesn't line stuff up neatly. I believe that forms are in fact a
type of table, and I use tables to format them. I would _never_ use a
table for page layout (headers, sidebars, like that), but they're
perfect for forms and fetched data. I spent hours formattting forms and
stuff I pulled out of a database with CSS, and finally just went back to
a table. It took less html and less CSS and less brain-strain and it
looks a whole lot better
 
L

Leif K-Brooks

Warren said:
:'float: left' makes positioning fairly easy for forms, I've found.

But it doesn't line stuff up neatly.
Click to expand...

It does if you set the width of the label.
 
I

Isofarro

e said:
Which raises the question: Is a form tabular data?

What are people's thoughts on that? Personally, I wouldn't consider them
tabular data... because it's a form...
Click to expand...

The fundamental question boils down to: is there a two dimensional
relationship in a form. Two dimensional (or 2.5 dimensional) data is what
tables are best at describing.

Looking at forms, I see two lists side by side. One list containing labels
and one list containing input elements. That is one dimension.

Now for each input element (or collection of input elements) there is a
label which really acts as a header/title of the input element/collection.
So there is a second dimension to the data.

So IMO, typical forms contain two dimensional data. So tables are a good
method of describing that structure.
 
I

Isofarro

Leif said:
It does if you set the width of the label.
Click to expand...

Labels are inline elements. AIUI widths are not applicable to inline
elements. So you'd really have to display: block on a label first.
 
K

Kris

It does if you set the width of the label.
Click to expand...

Labels are inline elements. AIUI widths are not applicable to inline
elements. So you'd really have to display: block on a label first.[/QUOTE]

Which unfortunately triggers an old Mozilla bug that still manifests
itself in Netscape 6 and Camino0.7 and down. The latter is likely to be
updated with a newer version of the engine, though.

The result is a dissapearing label, but I had a case in which an entire
part of the page disappeared.
 
E

e n | c k m a

The result is a dissapearing label, but I had a case in which an entire
part of the page disappeared.
Click to expand...

I had a bug like that and people in this newsgroup told me to use
class="lbl" to overcome it. At least in NS6.x
 
E

e n | c k m a

Others, such as Google's front page, probably aren't.

what about an "E-Mail Us" page/form?

Nicko.
 
W

Warren Oates

:Toby A Inkster BSc (Hons) ARCS
:Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Good lord, do you people NEVER check your work on Macs? Try this page on
OS-9, IE 5.17. (Mozilla works fine, NN 4.8, well, it'll never work
there, but your forms render so it's useable).

<ot />
And please, no "market share" nonsense. There are a lot of Macs and OS-9
will be around for a long time to come. Macs are more expensive than
PCs, the people who buy them count for more in their "market share"
demographic than the people who buy the $399.00 Celery packages. People
who buy Macs buy the expensive software (Quark, Photoshop, AfterEffects,
Final Cut, ProTools, hell, Avid ...) to work on their expensive
machines. You can "prove" anything with statistics, just look at Michael
Moore.
 
M

Matthias Gutfeldt

Toby said:
Warren Oates wrote:




Send me a free Mac and I will. :)

I put my site up. It's valid. It's semantically sound. If some browsers
have problems with it, so be it.
Click to expand...

That's a perfectly valid approach for personal sites like yours. A bit
more testing is necessary on commercial sites, unfortunately.


Matthias
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
CSS File does not really work? 1
Advice on learning to code? 3
Help with code 0
Want your opinion on @ARGV file globbing 7
Can't understand code 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
css print styles 4

Members online

No members online now.
Total: 34 (members: 0, guests: 34)
Robots: 446

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top