12 replies [Last post]
Dj Flush
Offline
newbie
Last seen: 15 years 14 weeks ago
Timezone: GMT+5
Joined: 2006-07-01
Posts: 10
Points: 0

Hi i m a new Css learner Smile

and just learned my basic CSS from http://www.tizag.com

now the thing is

that i love making sites and im quite pro at it

but i used to use FrontPage

now i use Dreamweaver and i m designing sites on XHTML 1.0

XHTML 1.0 often requires CSS

now the problem is

i don knw how to start off my site completely using CSS?

can anyone give me some hints or tips ?

i will post the site link too here it is

djflush.p2host.net/testsite

the site is mainly in TABLES

what do i have to do to make the site completey run by an external CSS file?

so tht i can update it whenever i want?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 21 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Conversion to CSS ?

First you should validate your html and have a full doctype.
If you want to keep the tables, remove all the attributes to the <style> section, validate your css and move the syles in an external stylesheet that you will link in your pages.
If you don't want to keep the tables and have a css layout you will have to modify most of the code.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Re: Conversion to CSS ?

Let me explain about each of your points:

Dj Flush wrote:
Hi i m a new Css learner Smile

Good, that's what we like Laughing out loud

Quote:
that i love making sites and im quite pro at it

but i used to use FrontPage

now i use Dreamweaver and i m designing sites on XHTML 1.0

Dreamweaver isn't the best editor to use for CSS based layouts' it's too firgiving and tries to do all the work for you. This is a Bad Thing.

Quote:
XHTML 1.0 often requires CSS

Xhtml doesn't require CSS at all Laughing out loud Hell, you could make a table layout and have it validated as xhtml.

Quote:
i don knw how to start off my site completely using CSS?

what do i have to do to make the site completey run by an external CSS file?

so tht i can update it whenever i want?

Worry about styles later. The first thing you need to do is learn how to markup content properly with the proper tags - for example <h1> for a heading, <p> for paragraphs of text.

Then you use <divs> to group bits together - left columns, footers for example.

Let us know how you get on.

Verschwindende wrote:
  • CSS doesn't make pies

Dj Flush
Offline
newbie
Last seen: 15 years 14 weeks ago
Timezone: GMT+5
Joined: 2006-07-01
Posts: 10
Points: 0

Conversion to CSS ?

Well

most of the time when i take my HTML code to w3 validator

it rejects my most codes saying "my Doctype doesnt allow them"

and my DocType is XHTML

so therefore i need to use CSS for properties like Background and Border ( XHTML in direct doesnt have any code for these according to w3)

i m very much familiar with <p> and <h1> etc tags in CSS but not much aware of how to use <div> and <span> tags

3rdly

the main purpose i want to make most or all of my site layout in CSS because its the onli language thru which i can update my whole site onli by modifying one external stylesheet Laughing out loud

thats the best thing abt CSS

now the problem still remains how do i start off Sad ?

and one more question

CSS code:
a.image { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 100px; /* width of reactive image */
     height: 100px; /* height of reactive image */
     background-image: url(image1.gif); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.image:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(image2.gif); /* source for target image */
     }

And that's it for the CSS code!

You'll only need to place your <a> tag where you want to see the reactive image.  

Quote:
<a>Home</a>

i m using the above Code to make a Rollover using CSS

but the problem is "Home" doesnt align itself in "middle"

i tried to use the "vertical-align:middle" tags but that doesnt seem to work too?

whats possible mistaken by me Smile?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Conversion to CSS ?

We'll need to see a link to the full page.

Show us all code, or a link to the page, and I'll advise you what code should go where Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 32 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Conversion to CSS ?

Dj Flush wrote:
Well

most of the time when i take my HTML code to w3 validator

it rejects my most codes saying "my Doctype doesnt allow them"

and my DocType is XHTML

so therefore ...

So therefore you first need to understand how to write compliant, valid, and semantic xhtml. This actually isn't very hard if you stick to the strict doctypes because they force you to forget about all the tags that are meant to effect layout and presentation and you only have to learn the ones that describe the meaning of your content. So you only have to learn maybe a dozen tags and 90% of the time you can get along with four or five.

CSS is meant to work on a foundation of valid html. Unfortunately Dreamweaver tries to insulate you from this and you end up with badly coded and overly bloated sites.

Maybe someday some genius will come up with a WYSIWYG editor that will generate meaningful, compact xhtml along with logical and valid CSS. That day has not yet come, and it doesn't look like it will be coming soon.

So if you really want to do professional web sites, you need to learn to code xhtml or html directly.

There are just tons of good messages about doing this in the "How To" forum on this site, none of them written by me. Do yourself a real big favour and read through that forum. There's also a super page of excellent links to great design websites that will teach you everything you need to know.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Dj Flush
Offline
newbie
Last seen: 15 years 14 weeks ago
Timezone: GMT+5
Joined: 2006-07-01
Posts: 10
Points: 0

Conversion to CSS ?

Here is the SITE link

djflush.p2host.net/site

u can get the source by ur respective browser

just tell me how can it all be converted to CSS?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Conversion to CSS ?

So far what you've got is a header, a left column and a right column.
Wrap the whole thing in a container, give it a width and margin: 0 auto.
In your header, you'd have an image for your logo and an unordered list containing your navigation links. Set the list items to display: inline and float the ul right.
You could either use images in the HTML or image replacement for the links.
Then the rest of your layout would be split into two columns.
Float the left column left and give it a width. Give your right column a margin-left >= to the width of your left column. No need to float the right column or give it a width.
In your left column you'd use another unordered list for your navigation. Again, you could use images or image replacement for the links and would use CSS to create the rollovers.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Dj Flush
Offline
newbie
Last seen: 15 years 14 weeks ago
Timezone: GMT+5
Joined: 2006-07-01
Posts: 10
Points: 0

Conversion to CSS ?

i have already read that CSS ROLLOVER guide and have implemented it

but the problem still remains

i cant align the text in middle of my rollover

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Conversion to CSS ?

Are you being serious here :mad:

You've implemented what css rollover guide? I just see that ghastly mm preloader javascript

Or have you posted the wrong link?

You want to align the text to the middle?, really, what despite the fact that there is no text whatsoever on the page, how do you suppose that you can align something that doesn't exist

Have you just posted the wrong link? if you have been studying the basics of css how come you have presented a table layout with outdated rollover techniques and all image based links?

Show us what you have actually tried , if anything.

Oh and when posting links please bother to do so in a way that makes them usable rather than us having to paste them to tabs, forgetting that unlike normal there isn't a new window and inadvertently closing browser and loosing the forum session.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Conversion to CSS ?

Hugo, if you use Firefox you could invest in the rather excellent Text Link extension. All you do is double click on malformed linsk and it opens them in a new tab Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Conversion to CSS ?

What's firefox

Anyway It's not about what I need to do or to further bloat my browser with extensions I don't want. (clever extension though, might install it)

Just thought: is this url a result of the code striping problem

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Conversion to CSS ?

Not to the best of my knowledge although it cold be. Usually the forum converts any links into clickable ones, but ONLY if they start with http or www.

Here's some testing:

google.com
www.google.com
http://www.google.com
images.google.com

Verschwindende wrote:
  • CSS doesn't make pies