PDA

View Full Version : Table help and CSS



CoolKay
Mar 10th, 2011, 01:34 AM
I am trying to understand why it is better to use CSS for table design rather then using the table tags. I cannot find a website that explains well how to do a table in css for html5. Doesn't seem to be a good understanding around about it.
http://www.countyfairgrounds.net/alaska/AlaskaTest.html

PLEASE help me.
I am not sure how to do this. I had a table where - the state flag and state flower was and right below it and now I am stuck

Excavator
Mar 10th, 2011, 02:39 AM
Hello again CoolKay,
There is a difference between "Doesn't seem to be a good understanding around about it" and your not understanding it.

You have some errors in your code that are causing you problems. For example, your <img class="image" ... is not styled in your CSS. It should look like this, see the bit highlighted in red -

image {
.float:left;
margin-right:7px;
border:none;

}

Have a look at this example -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
#container {
width: 800px;
margin: 30px auto;
background: #999;
}
#stateinfo {
width: 400px;
margin-left:10px;
background: #0f0; /*for demo only*/
}
section.leftSide {
margin: 10px 0;
padding: 5px 0;
overflow: auto;
border-top: 1px solid #333;
border-right: none;
border-bottom: 1px solid #333;
border-left: none;
}
#flag, #flowers {
float: left;
margin: 0 5px 0 0;
}
</style>
</head>
<body>
<div id="container">
<div id="stateinfo">
<section class="leftSide">
<img src="http://www.countyfairgrounds.net/alaska/alaskaflag.gif" alt="State flag" width="68" height="50" id="flag">
<p>Welcome, to Countyfairgrounds, USA - Alaska</p>
</section>
<section class="leftSide">
<img src="http://www.countyfairgrounds.net/alaska/flower.jpg" alt="flowers" width="150" height="150" id="flowers">
<strong>Wild Native:</strong>Forget-me-not<br /><strong>Motto: </strong>North to the Future
</section>
<section class="leftSide">
an empty one
</section>
<!--end stateinfo--></div>
<!--end container--></div>
</body>
</html>

That follows this demo that shows an easy way to put captions with images. (http://nopeople.com/CSS%20tips/image%20captions/index.html)

CoolKay
Mar 13th, 2011, 10:23 PM
Hi, still at it I saw the above post
and
image {
.float:left;
margin-right:7px;
border:none

}

I am noting you do not have # next to image. image as it is used
on http://www.countyfairgrounds.net/alaska/AlaskaTest.html is a class - are you not suppose to have a . before the word image? why is it you have one before flotat?

Excavator
Mar 13th, 2011, 11:00 PM
Hi, still at it I saw the above post
and
image {
.float:left;
margin-right:7px;
border:none

}

I am noting you do not have # next to image. image as it is used
on http://www.countyfairgrounds.net/alaska/AlaskaTest.html is a class - are you not suppose to have a . before the word image? why is it you have one before flotat?

See how I put the red dot in front of float: left; ?
Just goes to show how incredibly dyslexic I am as well as how valuable the validator can be.

CoolKay
Mar 14th, 2011, 01:14 AM
okay I made a lot of changes - I am understanding more of how this table thing works, its just a different way of making a table. Personally, it took me forever to learn how to really use the html table tags, but okay, I now see how this works better.
Now, I do not understand why my images are not putting the text - like on the right side of the flower - next to the image top - and if I am not suppose to use <br /> tags. how do it - use <p> tags? I would like to put next to the flower image on the right like this

<strong>Wild Native:<strong>
Forget-me-not

<strong>Motto: </strong>
North to the Future

Excavator
Mar 14th, 2011, 01:28 AM
and if I am not suppose to use <br /> tags. how do it - use <p> tags?

Use break tags for what they are intended for, a line break in a line of text. Do not use break tags to make space between elements, that's usually a job for margin.

Excavator
Mar 14th, 2011, 01:31 AM
Now, I do not understand why my images are not putting the text - like on the right side of the flower - next to the image top

I thought I'd already showed you an example of how to do image captions. Look at image captions made easy (http://nopeople.com/CSS%20tips/image%20captions/index.html).
Both your image and your caption really need to be in the same container to work reliably. Float the one and you should be set - easy-peasy.

CoolKay
Mar 14th, 2011, 01:48 AM
but the text next to the flower images is still not at the top next to the right side of the flower, seems to me I need something in this tag in the css but don't know what
}
#flag, #flowers {
float: left;
margin: 0 5px 0 0; /*top,right,bottom,left*/

Excavator
Mar 14th, 2011, 03:21 AM
Look at that example I linked you to again.
You are not floating the right thing.

Try adding this to your CSS -
.rightSidetop img {float: left;}

CoolKay
Mar 14th, 2011, 04:41 AM
I cannot get the image to float in the upper left corner - if it did, I
suspect the text would move up.? to the top right cornier of this

section.rightSidetop {
margin: -130px 0 0 180px;
width:275px;
padding: 5px 0;
overflow: auto;
text-align: right;
border-top: 1px solid #cc0000;
border-right: none;
border-bottom: 1px solid #cc0000;
border-left: none;
img:(float:left;}

SO what is wrong???

Excavator
Mar 14th, 2011, 10:18 AM
I cannot get the image to float in the upper left corner - if it did, I
suspect the text would move up.? to the top right cornier of this

section.rightSidetop {
margin: -130px 0 0 180px;
width:275px;
padding: 5px 0;
overflow: auto;
text-align: right;
border-top: 1px solid #cc0000;
border-right: none;
border-bottom: 1px solid #cc0000;
border-left: none;
img:(float:left;}

SO what is wrong???

Your CSS is invalid.

CoolKay
Mar 14th, 2011, 05:56 PM
I rechecked the html5 validation - all okay except code I have not got any control over. They are java errors from other sites. I do not know java for one thing. Much less to mess with another sites code.

Now as for the css validation - I ran it and do not understand most of what is on it.
the first problem
line 13 body Value Error : margin , is an incorrect operator : 0 auto 10px,20px 0 auto 10px,20px I DO not understand - please explain

Excavator
Mar 14th, 2011, 06:06 PM
line 13 body Value Error : margin , is an incorrect operator : 0 auto 10px,20px 0 auto 10px,20px I DO not understand - please explain

Lose the comma in that line. To be valid it would look like this
margin: 0 auto 10px 20px;

CoolKay
Mar 14th, 2011, 06:25 PM
http://nopeople.com/CSS%20tips/fluid_width/index.html#css

His container has a minimum width and a maximum width. I am thinking that if I use O for margin in body and use his container numbers - might I then not achieve ability to be seen on different mobile devices as it being resized?
My featured table on top with the Alaska State Fair grahpic and the state flower and flag is 900 pixels wide - so I am presuming my minimum container value might should be maybe 950 - unless I make the featured box smaller.

he idea here is to fix it so that I don't have re write about 450 webpages to be seen on mobile devices.

And please explain exactly what a body margin of 0 means.... ah, no space on top or bottom - I understand - but do not understand left and right with the 0

teedoff
Mar 14th, 2011, 07:43 PM
he idea here is to fix it so that I don't have re write about 450 webpages to be seen on mobile devices.

You do know you can have more than one stylesheet for different device types, right?

CoolKay
Mar 14th, 2011, 09:28 PM
I "think" I have heard that. But am not familiar. Is that the way you would advise? First of course, the one page has to be done. But, if you think that is the best way to do this then I will not change the code the way he has it for resizing on http://nopeople.com/CSS%20tips/index.html

I really appreciate your help and am learning a lot. Slowly but progess is being made.
Okay WHY does the validator say I am using css 2.1 instead of 3 - cause that is what I want to use right. Whats with that?

CoolKay
Mar 14th, 2011, 09:49 PM
the validator threw this out

246 #featured Property border-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px 10px 10px 10px 10px 10px 10px

332 #bottom Property border-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px


I took out my rounded borders on the featured division and bottom division. I would like them to stay. Please help

CoolKay
Mar 15th, 2011, 01:49 AM
I re tried the validator with css3
and this has something to do with the rounded corners in #featured and #bottom. However - doesn't look to serious. There are some color problems. Color is something to deal with later Still does not explain why the text does not wrap in the pix with the flowers or why the pix is no in the upprer left corner. HELP