PDA

View Full Version : Need someone to convert my Html into CSS



hicricket
12-24-2007, 05:14 PM
hey i am looking for to convert my Html into CSS.

this is very small html file include 1 image, 1 javascrip form, and some text Paragraph.

any help will be appriciated::(

Master_script_maker
12-24-2007, 05:17 PM
please supply the code or a link

hicricket
12-24-2007, 05:26 PM
please chekout the attachment

TimFA
12-24-2007, 05:30 PM
Do you want external or in the HEAD area CSS?

hicricket
12-24-2007, 05:32 PM
i need external css file for my whole html code.

TimFA
12-24-2007, 05:36 PM
That is perfectly fine, I will try doing it. It may take a while, as I'm not used to code that is not mine.

Tim

TimFA
12-24-2007, 06:20 PM
Sorry, my conversion was unsuccessful. It made a few things horrible, CSS does not work the same way HTML attributes do, convert your layout to DIVs and remove all of the TD's and TR's and I can possibly help you, sorry.

Tim

edit: heres a partial of the CSS it might help you.



BODY
{
margin-top: 1px;
margin-left: 1px;
}

#header
{
width: 100%;
border: 0px;
height: 39px;
}

#td1
{
width:233px;
height:39px;
}

#td2
{
width: 929px;
height: 70px;
}

#AutoNumber1
{
border: 0px #111111 solid;
border-spacing: 1px;
border-collapse: collapse;
width: 100%;

#td3
{
width: 1%;
height: 3px;
}

#td4
{
width: 21%;
height: 3px;
}

#td5
{
width: 12%;
height: 3px;
}

#td6
{
width: 27%;
height: 3px;
}

#td7
{
width: 20%;
height: 3px;
}

#td8
{
width: 15%;
height: 3px;
}

#td9
{
width: 3%;
height: 3px;
}

#td10
{
width: 100%;
height: 8px;
background: url(images/hotdot.png);
}

div#div1
{
text-align: center;
}

#AutoNumber2
{
border: 0px #111111 solid;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;

#td11, #td12
{
width: 100%;
}

div#div2
{
align: left;
}

#AutoNumber3
{
border: 0px #111111 solid;
border-spacing: 0px;
border-collapse: collapse;
width: 50%;
height: 1px;
}

#td13
{
width: 100%;
text-align: left;
height: 1px;
}

div#div3
{
text-align: left;
}

#AutoNumber4
{
border: 0px #111111 solid;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
height: 584px;
}

#td14
{
width: 31%;
height: 584;
}

div#div4
{
text-align: left;
}

#AutoNumber11
{
border: 0px #111111 solid;
border-spacing: 0px;
border-collapse: collapse;
width: 72%;
}

#td15
{
width: 100%;
}

div#div5
{
text-align: center;
}

#AutoNumber12
{
border: 0px #111111 solid;
border-spacing: 0px;
border-collapse: collapse;
width: 88%;
}

#td16
{
width: 100%;
}

div#div6
{
text-align: center;
}

#AutoNumber9
{
border: 0px;
border-spacing: 0px;
width: 79%;
}

#td17
{
width: 100%;
height: 1px;
}

#thelinks
{
overflow: auto;
width: 24em;
height: 25em;
font: 95% arial,sans-serif;
}

.text2
{
font-family: Arial;
font-size: 2;
}

.spacer
{
width: 1%;
height: 3px;
background: url(images/vdot.png);
}

.text1
{
font-family: Arial;
font-size: 4;
}

.p1
{
text-align: center;
}

.image
{
border: 0px;
}

a:link {color: #990000;}
a:visited {color: #990000;}
a:active {color: #990000;}
a:hover {background-color: #C0C0C0;}
a {text-decoration: none}


its not completed because I saw what things it screwed up. I was typing fast so some things need corrected, I corrected before I tried it out, so its not that.

hicricket
12-25-2007, 06:45 AM
thanks for your work i'll try to manage it and if anyone else can help me please?

hicricket
12-25-2007, 07:53 AM
any work will be appriciated so please help me please

tech_support
12-25-2007, 09:01 AM
Please don't bump the thread after an hour, it's considered very rude. Please wait at least a day for a reply, and even 2 -- because it's Christmas.

You can't just expect someone to convert your code to something else. It's time consuming, and most people don't have time to do it. You've even been pretty lucky and had TimFA attempt at it.

Why don't you try converting it yourself? And post your results here, and we'll be glad to help! :)

hicricket
12-25-2007, 10:43 AM
sorry freind ....but i am now learning cSS adn i dont know the ABC of css not a single thing about Css:(

TimFA
12-26-2007, 12:53 AM
I can give you some :)

Here:

A ID is done using #, for a DIV you use div#, a class is ..
You open up CSS style inside using { you start up the individual styles using stylename(i.e. border, or w.e.):attribute;, just put one on each line, of course you don't have to put one on each line, I just find it easier to read.

General styles:
border: [width] [color] [style];
background: [color/url]; urls are done: url(urlhere)
width: [pixels wide];
height: [pixels high];
text-align: [center/left/right];
margin: [auto/pixels]; use margins for centering like "align" in HTML. note that margin-left, right, etc. can be used, as with borders, padding, and the like.
margin: auto; will center. For IE (6 only?) a tag in the BODY element of your CSS is needed, text-align: center;.
font-family: [the font, i.e. Airal, Times News Roman];
font-size: [the size, usually done with pixels or "pt". i.e. 10pt is around normal];
font-weight: [bold/bolder/lighter]; usually used for bolding of text, using a span.
opacity: [.5, .24, etc.] note that this won't work in IE (6 only?) you must use
filter: alpha(opacity=50);
color: [color]; changes the text color inside the area.

I only listed a few, but it should be enough to get you started. Ask if you have questions.

Rjak
12-26-2007, 04:56 AM
Umm... just something that might describe how someone asking for help in a coding forum is feeling. I've been there less than 4 days ago :)

You are trying to code/modify your page, and realise that your knowledge about what you want to do is insuficient. You ask for help in a forum, and leave the page open. You get back to your atempts, and in less than 5 minutes you switch to forum and refresh the page. Darn, they did not even read it...

Then you get back - again - to messing with your code even more. Another 5 minutes, and you are back on forum page refrshing it again. Ah, is someone reading the post, cool, the help is on the way. Maybe now the guy is writting the answer. Another 5 minutes... Naaah, no posts on your subject.

Maybe your question was answered in the past? Let's make use of search thingie a bit. Oh, yes, there is something similar but you don't understand what the ... are they talking about. *shrug* More than that, is not identical, is just something like your problem. Let's get back to original post, maybe they answered.
Nope, no answers, but a lot of views.

C'mon, I can do it, I just need some focus. Let's try that again...

Maybe is the time zone? Sure, that must be it, the guys that usually answer the posts must sleep now. Ok, I'm going to do other things while they woke up.

etc etc etc etc

... and for the OP (I'm not even near a begginer coder, but is what I've learned using trial and error method and looking at source in different web pages):

You can have your CSS file (that's a file with css extension eg my_site.css) linked to your html document by adding (this is just an example)
<link rel="stylesheet" type="text/css" href="css/my_site.css">
between <head> and <title> tags. (that also means you need a folder "css" where you drop your "my_site.css" file)
Some basic rules:
- every element must be enclosed in {} just like you close tags in html.
- every line must end with ;
- i found this place to be priceless for the amount of information that provides: http://www.w3.org (http://www.w3.org/TR/REC-CSS2/indexlist.html)


You can set the style of how the links are shown in your page (the example below is removing the underlines from links and makes them red)

a, a:link {
text-decoration: none;
font-size: 12px;
font-family: Arial;
color: red;
}

If you want the color to change when you move your mouse over a link:

a:hover {
color: green;
}

To start a page with css first you need to define a so-called "workspace" where you will place your elements.

In my_site.css

#main_box {
width: 800px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

In index.htm file

...
<body>
<div id="main_box">
Here goes your site content
</div>
</body>
...

That made an invisble box in center of your page and at 20 pixels distance from top. Then you can add your content between the tags of "main_box" div, using the indications you received from TimFA. I strongly suggest that you visit the link I provided above, it might clear a lot of things for you.




Edit: forgot about that: Happy New Year and Merry Christmas everyone :)