Jump to content


Photo

learning css help please


  • Please log in to reply
10 replies to this topic

#1 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 21 September 2006 - 12:22 PM

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
<?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>


css but badly coded.

css_page.css

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

td.center
{
text-align: center;
color: blue;
font-family: arial;
}

Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#2 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 12:52 PM

first off, you cannot 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:
<!-- in the head tag -->
<link type="text/css" rel="stylesheet" href="css_page.css" />

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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 21 September 2006 - 01:05 PM

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.

<
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?
>

Thank you for your help only learning css cheers.
Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#4 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 01:24 PM

link is simply an HTML tag like meta, p, or even body. as w3schools points out, it simply defines the link between two documents. 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!
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#5 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 21 September 2006 - 01:58 PM

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

td.center
{
text-align: center;
color: blue;
font-family: arial;
}
It should be like this:
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;
*/
}
Note  /* */ is a CSS comment.

#6 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 22 September 2006 - 12:05 PM

i need to get the whole table center but how and thank you wildteen good help cheers.

<?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>

Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#7 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 22 September 2006 - 01:20 PM


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;

Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#8 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 22 September 2006 - 03:42 PM

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.

<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>


Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#9 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 23 September 2006 - 06:37 AM

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.

Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#10 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 23 September 2006 - 10:03 AM

To add comments in CSS you'll have to use the following syntax: \* my comment here *\ (not \*/*) there is no other style of comment in CSS.

#11 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 24 September 2006 - 07:05 PM

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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users