redarrow Posted September 21, 2006 Share Posted September 21, 2006 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] Quote Link to comment Share on other sites More sharing options...
obsidian Posted September 21, 2006 Share Posted September 21, 2006 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. Quote Link to comment Share on other sites More sharing options...
redarrow Posted September 21, 2006 Author Share Posted September 21, 2006 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 linkrel="stylesheet" << dont get at allhref="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. Quote Link to comment Share on other sites More sharing options...
obsidian Posted September 21, 2006 Share Posted September 21, 2006 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! Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted September 21, 2006 Share Posted September 21, 2006 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. Quote Link to comment Share on other sites More sharing options...
redarrow Posted September 22, 2006 Author Share Posted September 22, 2006 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] Quote Link to comment Share on other sites More sharing options...
redarrow Posted September 22, 2006 Author Share Posted September 22, 2006 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; Quote Link to comment Share on other sites More sharing options...
redarrow Posted September 22, 2006 Author Share Posted September 22, 2006 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] Quote Link to comment Share on other sites More sharing options...
redarrow Posted September 23, 2006 Author Share Posted September 23, 2006 [code]is there a way to turn a element off and on and other settings cheers.examplesay 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 //offI 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] Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted September 23, 2006 Share Posted September 23, 2006 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. Quote Link to comment Share on other sites More sharing options...
obsidian Posted September 24, 2006 Share Posted September 24, 2006 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.