PDA

View Full Version : Tableless CSS formatting help



json2001
Aug 23rd, 2007, 11:48 PM
Hello,

I am just getting started using CSS and I have made some decent progess I think. But I'm still unsure lots of the time if I am doing things as simply and easily as is possible in CSS.

So I am trying to create some text fields that each have a header and each have a <p> of text describing them. I want to get a view that is neatly "tabled"

Looking through sites I saw some examples of the html used to get this look: each item is surrounded with the same div, header, and same paragraph tags. (www.billshare.org)

I just really can't quite figure out what CSS get everything to look so neat as at the site above.


here is the HTML snippet I'm trying format


<div id = "joinmenu">
<h4>Create it here</h4>
<p>This is just filler. See it in action over at our site this is to see how the word wrap works.</p>

</div>
<div id = "joinmenu">
<h4>Find It!</h4>
<p>This is just filler. See it in action over at our site this is to see how the word wrap works.</p>
</div>
<div id = "joinmenu">
<h4>"One man's junk..."</h4>
<p>This is just filler. See it in action over at our site this is to see how the word wrap works with a longer paragraph after the header</p>
</div>
<div id = "joinmenu">
<h4>See it in action</h4>
<p>This is just filler. See it in action over at our site this is to see how the word wrap works.</p>
</div>


any tips would be greatly appreciated! thanks!

VIPStephan
Aug 24th, 2007, 12:08 AM
At first validate your HTML and CSS. You canít have the same ID multiple times on one page. Classes are made for that.
Then it would help to see what CSS you already have.

Also to find out how ithers did something you just need to look at and learn from their source code. Thatís how I learned a lot of stuff.

And a solution to get a look like on the site you mentioned: float the divs.

json2001
Aug 24th, 2007, 05:11 AM
DOH! I am pretty new to css but that makes a lot of since that the ids are unique. Thanks for pointing that out Stephan! Here is the all the css I am using to format the html:



@charset "utf-8";
/* CSS Document */

#welcomeimages
{
width: 753px;
height: 300px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

h4
{
float: left;
margin-right: 1em;
font-size: 15px;
text-align: center;
margin-top: 5px;


}
div.joinmenu
{
float: left;
width: 280px;
padding: 10px;
clear:none;

}

/*my main file which has info for lots of other pages the code above just pertains to the page with the tableless table*/
/*
General formatting: default text family/size
Formatting for each of the div sections: header, navigation, left column, right column
footer


*/
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;

}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
height: 150px;
background-color: #CCCCCC;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;

}
#header h1{
text-decoration: none;
font-size: 64px;
margin-top: 16px;
text-indent: 15px;
}
h2 {
font-size: 15px;
}

#header img{
float:left;
}
#navigation{
color: #333;
width: 900px;
float:left;
height:20px;
background-color: #CCCCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#navigation form{
float:right;
margin-right: 55px;

}
#errorframe{
font-size: 14px;
color: #333333;
width: 500px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 121.5px;

}
ul.errorframe{
list-style-type: disc;
color: #CC0000;
font-style: italic;

}
#leftcolumn {
color: #333;
border: 1px solid #666666;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 600px;
width: 753px;
float: left;
background-color: #FFFFFF;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 600px;
width: 120px;
display: inline;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #666666;
margin: 0px 0px 10px 0px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}

/*
Controls for the upper left login form as well as the navigation menu
*/
#menu li {
display:inline;
}
#menu li a
{
padding:0.2em 0.5em;
color:#000;
text-decoration:none;
float:left;
background-color: #CCCCCC;
font-weight: bold;
}



#menu li a:hover
{
background-color: #EEEEEE;
}
#menu li#active a{
background-color:#B7B7B7;
}
#login {
float:right;
display:inline;
}



and I changed all the div ids from the first post to class. Thanks! As you can see even with floats i'm not sure quite how to get it right. It would be great to get 3 in a top row and 3 in a bottom row...i just cant quite get it! Thanks for any help!