VideoHelp Forum
+ Reply to Thread
Results 1 to 10 of 10
Thread
  1. 8th Aug 2007 21:10 #1
    lordsmurf
    lordsmurf is offline
    Video Restorer lordsmurf's Avatar
    Join Date
    Jun 2003
    Location
    dFAQ.us/lordsmurf
    Search Comp PM
    Trying to learn CSS.

    How can I make a plain table in a CSS file, and then how do I implement that code in an HTML file.

    I need an example. I keep reading about "how" to do it, but I need to "see" how to do it.
    Want my help? Ask here! (not via PM!)
    FAQs: Best Blank Discs • Best TBCs • Best VCRs for capture • Restore VHS
    Quote Quote  
  2. 8th Aug 2007 21:20 #2
    guns1inger
    guns1inger is offline
    Always Watching guns1inger's Avatar
    Join Date
    Apr 2004
    Location
    Miskatonic U
    Search Comp PM
    Don't know if this helps

    http://www.somacon.com/p141.php
    http://veerle.duoh.com/blog/comments/a_css_styled_table/
    Read my blog here.
    Quote Quote  
  3. 8th Aug 2007 22:22 #3
    lordsmurf
    lordsmurf is offline
    Video Restorer lordsmurf's Avatar
    Join Date
    Jun 2003
    Location
    dFAQ.us/lordsmurf
    Search Comp PM
    I'm trying to make this happen:


    Want my help? Ask here! (not via PM!)
    FAQs: Best Blank Discs • Best TBCs • Best VCRs for capture • Restore VHS
    Quote Quote  
  4. 9th Aug 2007 03:10 #4
    nzo
    nzo is offline
    Member nzo's Avatar
    Join Date
    Dec 2004
    Location
    New Zealand
    Search Comp PM
    Hi lordsmurf,
    That layout is fairly standard these days. Header, navigation bar, left column, main content middle column, right column, footer. Probably the easiest way to achieve this is a combination of tables styled with CSS.

    To give you a starting point I could create the basic layout as you've outlined it and send you the html code and CSS code via email. Using this 'framework' page you can create as many pages as you need from it.

    For starters let me know what kind of html editor you're using. There are a number of good freebies around. I use a prog called Dreamweaver but maybe this is more than you need.

    Meantime, take a look at: http://www.projectseven.com/ - they offer a bunch of design packs and although you need Dreamweaver to use them, they'll give you an idea of the "look" you want.

    Cheers ~ John

    PS...I'm a retired web designer
    Quote Quote  
  5. 9th Aug 2007 04:29 #5
    thecoalman
    thecoalman is offline
    Member thecoalman's Avatar
    Join Date
    Feb 2004
    Location
    Pennsylvania
    Search PM
    Here, now where's my links? If you want to know what does what ask. The very first line sets the default margins and padding of everything to 0. Generally recommened because different browsers have different deafults. Note that i have not used XHTML, I noticed you mentioned it in your image. Apparently the entire world is using the XHTML doctype incorrectly: http://www.webmasterworld.com/html/3396306.htm

    Note that I haven't fully tested it with actual content in it so I'm sure you'll run into some bugs.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body  {
         background: #000000;
}

.header  {
		 width: 100%;
		 background-image: url(/path/to/your/image.gif); 
		 margin:0;
}

.greywrapper  {
         margin: auto;
		 width: 960px;
		 background: #C0C0C0;
}

.innerwrapper  {
		 width: 960px;
		 margin: auto;
		 padding-top: 3px;
		 padding-bottom: 3px
}

.leftbox  {
		 width: 400px;
		 float: left;
		 border: solid 1px;
		 margin: 3px;
		 
}

.rightbox  {
		 width: 542px;
		 float: left;
		 border: solid 1px;
		 margin: 3px;
}

.bottombox  {
		 width: 950px;
		 margin: auto;
		 clear: both;
		 border: solid 1px;
		 margin: 3px;
}

.leftnav  {
		 width: 300px;
		 float: left;	
		 border: solid 1px;
		 margin: 3px;
		 height: 100%;
}

.rightcontent  {
		 width: 200px;
		 float: right;	
		 border: solid 1px;
}

.content  {
         background: #FFFFFF;
         margin: 6px 6px 3px 310px
}
</style>
  <title></title>
</head>
<body>
<div class="greywrapper">

Top Box</p></div>
<div class="header">
 <div class="innerwrapper">
   <div class="leftbox">

Left Box</p></div>
   <div class="rightbox">

Right Box</p></div>
   <div class="bottombox">

Bottom Box</p></div>
 </div>
</div>
<div class="greywrapper">
 <div class="innerwrapper">
    <div class="leftnav">

leftnav</p></div>
      <div class="content">
         <div class="rightcontent">

righcontent</p></div>
      

Content</p>
   </div>
   <div class="bottombox">

Bottom Box</p></div>
 </div> 
</div>
</body>
</html>
    Quote Quote  
  6. 9th Aug 2007 04:43 #6
    thecoalman
    thecoalman is offline
    Member thecoalman's Avatar
    Join Date
    Feb 2004
    Location
    Pennsylvania
    Search PM
    Almost forgot, the best thing about CSS is you can remove it from the document. cut the CSS out and paste it into its own file, name it format.css or whatever... place this between the headtags. As you can see all the formatting has been removed from the document when you do that. Makes for very easy page management down the road.

    Code:
    <link rel="stylesheet" type="text/css" href="format.css">
    Delete the CSS tags , do not add them to format.css

    Code:
    <style type="text/css">  <style>

    -Some other notes:-

    "Content" has a left margin so any text won't flow tto the left, it will wrap around "rightcontent".

    Rounded corners gets a little complicated, chew on that for a while. :P
    Quote Quote  
  7. 9th Aug 2007 13:51 #7
    lordsmurf
    lordsmurf is offline
    Video Restorer lordsmurf's Avatar
    Join Date
    Jun 2003
    Location
    dFAQ.us/lordsmurf
    Search Comp PM
    As of last week, I now have Adobe Dreamweaver CS3 (full CS3 Master Collection!)

    Yeah, I've been using CSS for text and link control for years now, but never layout. I generally keep all code in a called-upon .css file in the root.

    Rounded corners is something I want (on a few corners, not all), but I had to learn how to crawl before I start jogging.

    Appreciate the help!
    Want my help? Ask here! (not via PM!)
    FAQs: Best Blank Discs • Best TBCs • Best VCRs for capture • Restore VHS
    Quote Quote  
  8. 9th Aug 2007 15:12 #8
    thecoalman
    thecoalman is offline
    Member thecoalman's Avatar
    Join Date
    Feb 2004
    Location
    Pennsylvania
    Search PM
    For layouts its not completly diferent that using tables. They are much more flexible, some of the big issues you will come across is browser compatibility. The rounded corners can be created using some ot the same code I poste above. With static widths everthing becomes so much easier. For example create a container <div> Then float three boxes to fit in the container. Create 3 images, one for each corner and one for the center. Set the width and height of the corners to match that of the corner images. Use all three images as backgrounds.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>

<head>
<style type="text/css">
#nepaheadercont
{
  margin: auto;
  width: 758px;
  text-align: center;
  color: #000000;
}

#nepaheaderlc
{
  width: 27px;
  height: 27px;
  float: left;
  background-image: url(http://www.nepadigital.com/images/backgrounds/lcorner.gif);
}

#nepaheaderrc
{
  width: 27px;
  height: 27px;
  float: left;
  background-image: url(http://www.nepadigital.com/images/backgrounds/rcorner.gif);
}

#nepaheader
{
  width: 704px;
  height: 27px;
  float: left;
  background-image: url(http://www.nepadigital.com/images/backgrounds/tableheaderbckgrnd.gif);
} 

p
{
  vertical-align: middle;  
}
</style>
  <title></title>
</head>
<body>
<div id="nepaheadercont">
<div id="nepaheaderlc"></div>
<div id="nepaheader">Hello LS</div>
<div id="nepaheaderrc"></div>
</div>
</body>
</html>
    # is used to ID an element, you can only use one ID name per page, use it to name your main <div>'s

    Make sure you are using the same doctype I am, using transitional will break the code above in IE. XHTML can be used with this code too but if you followed the link above you'll see you should not be using XHTML doctype for HTML content.
    Quote Quote  
  9. 17th Aug 2007 08:08 #9
    Baldrick
    Baldrick is offline
    I'm a MEGA Super Moderator Baldrick's Avatar
    Join Date
    Aug 2000
    Location
    Sweden
    Search Comp PM
    I have a problem with my new videohelp design, I want it to look like this

    It should be centered but I also want the div layer A to be able to be bigger.

    I have now 4 divs, the first to keep it centered, the rest are float inside the centered div. But if the div layer A becomes to wide it get pushed down below the menu in Internet Explorer. It works fine in FIREFOX.
    Quote Quote  
  10. 12th Oct 2007 15:15 #10
    thecoalman
    thecoalman is offline
    Member thecoalman's Avatar
    Join Date
    Feb 2004
    Location
    Pennsylvania
    Search PM
    Was a way for a bit Baldrick or I would have replied.....

    Static left colums and fluid right is bitch with CSS but it looks like you have it figured out. Not sure what you did but I use absolute postioning for the main left and right columns.
    Quote Quote  



Similar Threads

« Previous Thread | Next Thread »
Visit our sponsor! Try DVDFab and backup Blu-rays!