Jump to content

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]
Link to comment
https://forums.phpfreaks.com/topic/21523-learning-css-help-please/
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.
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.
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!
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.
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]
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]
[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]
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.