Jump to content

Archived

This topic is now archived and is closed to further replies.

redarrow

learning css help please

Recommended Posts

Hi there i am trying to learn the css with tables but i dont get it can you css gurus please show me an example of a table and the css code to go with it cheers.

I no php, I no html, i no javasript,I no java, I no asp,  but i dont no css please help going mad.

As you can see the html i understand easly but how do you set the width ect in css cheers.

I got no idear if i am close or dreaming to be close to what i wont lol.

table.php
[code]
<?php include("css_page.php");?>

<table class="center">

<td class="center">

hello there i am redarrow

</td>

<br>

<td class="center">

hi there just saying hello

</td>

</table>

[/code]

css but badly coded.

css_page.css
[code]

table.center
{
width: 200;
height: 200;
text-align: center;
color: blue;
font-family: arial;
}

td.center
{
text-align: center;
color: blue;
font-family: arial;
}
[/code]

Share this post


Link to post
Share on other sites
first off, you [b]cannot[/b] include a CSS page from PHP unless you're actually including it into the header (within <style>) tags. you need to use a link tag in the header:
[code]
<!-- in the head tag -->
<link type="text/css" rel="stylesheet" href="css_page.css" />
[/code]

otherwise, your CSS looks ok. not great, but ok ;) ... now, what are you trying to do with it? you've got to tell us what you're after for us to help with modifying the code.

Share this post


Link to post
Share on other sites
the code above i wrote i done without not looking at the book or the net if it does work i am quite happy.

This is for study no project only to learn can you kindly exsplain the link in detail please cheers.

[code]
<
link << meaning link to a css page i think not sure?
type="text/css" << the css link
rel="stylesheet"  << dont get at all
href="css_page.css" << the page to the css
/<< why this there i think thats for xhtml and not html not sure?
>
[/code]

Thank you for your help only learning css cheers.

Share this post


Link to post
Share on other sites
link is simply an HTML tag like meta, p, or even body. as [url=http://www.w3schools.com/tags/tag_link.asp]w3schools points out[/url], it simply [i]defines the link between two documents.[/i] so, in the case of a CSS sheet, you have to pass in attributes to define what the link is. first, type: obviously, it's a css page, so we use "text/css". next, we have rel: this actually defines how the HTML is to interpret the linked page. in our case, we want it to be a stylesheet. we then want to tell the document where our linked page is, so we use an href, like in an anchor tag. you're correct about the slash: i'm using it to close out the link tag to make it XHTML compliant.

hope that helps!

Share this post


Link to post
Share on other sites
Also when you define width/heights/sizes etc you have define the unit, eg pixels (px), points (pt) etc, percentage (%).
So rather than this:
[code]
table.center
{
width: 200;
height: 200;
text-align: center;
color: blue;
font-family: arial;
}

td.center
{
text-align: center;
color: blue;
font-family: arial;
}[/code]
It should be like this:
[code]
table.center
{
width: 200px; /* <-- 200pixels wide */
height: 200px ; /* <-- 200pixels high */
margin: 1px auto; /* <-- to center the table */
color: blue;
font-family: arial; /* <-- Ideally you should have more than 1 font here. Not all OS's will have the Arial font */
/* The above should be like this:
font-family: Arial, Helvetica, sans-serif;
*/
}[/code]
Note  /* */ is a CSS comment.

Share this post


Link to post
Share on other sites
i need to get the whole table center but how and thank you wildteen good help cheers.

[code]
<?php
?>

<html>
<head>
<style type="text/css">

body
{
background-color: yellow;
}

h1.center
{
border-style: dotted;
width: 320px;
text-align: center;
background-color: green;
}

table.center
{
border-color: black;
border-style: dotted;
background-color: red;
width: 200px;
height: 200px ;
margin: 1px auto;
color: blue;
font-family: Arial, Helvetica, sans-serif;
}

td.center
{
text-align: center;
margin: 1px auto;
color: blue;
font-family: Arial, Helvetica, sans-serif;
}

</style>
</head>

<body>

<h1 class="center">hi there i am redarrow</h1>

<table class="center">
<td class="center">
redarrow
</td>
<td class="center">
i love php
</td>
</table>

</body>
</html>[/code]

Share this post


Link to post
Share on other sites

To center a table ect.. do you use margin the below example does not center the table to the middle of the page is there an easer way cheers.

margin: 1px 32% auto;

Share this post


Link to post
Share on other sites
this is what i have learned so far.

please comment or add as you want to inprove the code as i am only learning cheers.

[code]
<head>
<style type="text/css">

body
{
background-color: pink;
}

A:link
{
color: black;
text-decoration: none
}
A:visited
{
color: black;
text-decoration: none
}
A:active
{
color: black;
text-decoration: none
}
A:hover
{
text-decoration: underline; color: yellow;
}

table.center
{
margin: 1px 240px auto;
border-style: dotted;
background-color: red;
border-color: black;
text-align: center;
width: 500px;
}


h1.center
{

width: 500;
text-align: center;
color: blue;
font-family: Arial, Helvetica, sans-serif;
}

h4.center
{
margin: 1px auto;
width: 150;
text-align: center;
color: yellow;
font-family: Arial, Helvetica, sans-serif;
}

p.center
{

border-style: dotted;
background-color: red;
margin: 1px 250px auto;
width: 500;
text-align: center;
color: double black;
font-family: Arial, Helvetica, sans-serif;
}

h5.center
{
text-align: left;
color: green;
font-family: Arial, Helvetica, sans-serif;
}


</style>
</head>

[/code]

Share this post


Link to post
Share on other sites
[code]is there a way to turn a element off and on and other settings cheers.

example

say you have this
[code]
P
{
color: red;
//border-color: blue; << off like php code
}
[/code]
You want to keep it but be able to turn it off and on like you do in php code //off

I was thinking that way i can design a defult .css template and turn on and off as i go.

I no you can use the comment tag \*/* but wonder is there any other way.[/code]

Share this post


Link to post
Share on other sites
To add comments in CSS you'll have to use the following syntax: [b]\* my comment here *\[/b] (not \*/*) there is no other style of comment in CSS.

Share this post


Link to post
Share on other sites
to center a table, you simply have to have a fixed width and keep the right and left margins as auto... this also works for any other block level elements.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.