Jump to content

Columns?


snowgoose
 Share

Recommended Posts

Hi all,Firstly I'd like to say hello to everyone here as I'm a newbie :)OK. I am trying to get information displayed in columns without using tables.I realize that this is kind of possible with CSS but I have no idea where to start.What I am trying to achieve is something like

Info | Info | Info | Info | InfoInfo | Info | Info | Info | InfoLink | Link | Link | Link | Link
The information I am trying to display needs to be shown as above and if possible somehow have columns as a percentage of the overall area.Hopefully this makes sense to someone and is not just a load of garbage.Thanks and RegardsJake Marriott
Link to comment
Share on other sites

You could use various div elements, one for each column. Divs gan be given widths in percentages.This is a quick example of the CSS needed for three columns, with widths of 19%, 50% and 30%. I added borders so that you could see where the columns stop.

<div class="column1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div>

Be careful with border, margins etc, they eat up your vertical and horizontal space; if the above 19% would change to 20% there won't be enough space for all three columns together with 6px of borders (2px of border per column). If you use margins, make sure all the percentages add up to 100.If you want to play around with this code, go here (w3schools tryit editor) and past the following text in the left box, click the button and watch as your three columns appear:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">div.column1{width:19%;Float:left;border:1px solid gray;}div.column2{width:50%;Float:left;border:1px solid red;}div.column3{width:30%;Float:left;border:1px solid red;}</style></head><body><div class="column1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div></body></html>

There are various things you can do with the textin your columns, you can give them padding, justify, wrap etc. Look around on the w3 site and you will find countless examples.

Edited by 1089
Link to comment
Share on other sites

Thanks,I have tried that but it doesn't seem to display correctly within the area I'm trying to get it to display ( probably my horrid coding )I am trying to get the info to display inside the area which opens when the tab is clicked.My HTML and CSS are as follows;HTML:

<link rel="stylesheet" media="all" type="text/css" href="mini-tabbed-pages/mini-tabbed-pages.css" /><script src="mini-tabbed-pages/click_menu.js" type="text/javascript"></script></head><body onload="clickMenu('tabs')"><div id="tabs"><ul><li class="outer one">avicularia<div class="tab_left"><h5>Avicularia avicularia</h5><p>This area can hold anything you like, text, images, forms and even links like this one - <a href="index.html">Main Menu</a>.</p></div></li><li class="outer two">UNLOCK<div class="tab_center"><h5>Unlock the Secrets</h5><a href="http://www.w3.org/Style/CSS/" class="unlock" title="Unlock the secrets of CSS at w3.org"><img src="mini-tabbed-pages/icon/lock.gif" alt="Locked" title="Locked" /></a></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer three">MAIL<div class="tab_right"><h5>Email</h5><p>Maybe a link to your emails or a form asking to login to retrieve your emails, or even a link to a <a href="http://www.cssplay.co.uk/w3c/contact.html">Contact Page</a>.</p></div></li></ul><br class="clear" /><ul><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer five">PROFILE<div class="tab_center"><h5>Your Profile</h5><form id="two" action="..." method="post"><fieldset id="personal">	<label for="login">login : </label> 	<input name="login" id="login" type="text" tabindex="1" /></fieldset><p class="buttons">  <input id="button1" type="submit" value="Send" />   <input id="button2" type="reset" value="Reset" /> </p></form></div></li><li class="outer six">DRAW<div class="tab_right"><h5>Learn how to Draw</h5><a href="http://www.adobe.com/products/fireworks/"><img class="image" src="mini-tabbed-pages/icon/fireworks.gif" alt="Adobe Fireworks 8" title="Adobe Firerworks 8" /></a><p class="fire">Get top-quality design results. Take creative control with seamless vector and bitmap editing.</p></div></li></ul><br class="clear" /><ul><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li></ul></div></body></html>

CSS:

#tabs {width:500px; text-align:left; background:; margin:0px; position:relative; z-index:200; font:bold 11px verdana, arial, sans-serif;}#tabs ul {padding:0; margin:0; width:800px; list-style:none; position:relative;}#tabs ul li.outer {  float:left;   display:inline;   margin:4px 3px 4px;   width:125px;   height:53px;   border-bottom:1px solid #777b02;   line-height:50px;  color:#777b02;  text-align:center;  background:#fff url(icon/tab.png) no-repeat top left; }#tabs ul li div {display:none;}#tabs ul li.click {padding-bottom:132px; border-bottom:1px solid #fff; color:#000; margin-bottom:0;}#tabs ul li.click {color:#000; background-position:0 -55px; height:55px; cursor:default;}#tabs ul li.click div {display:block; padding:5px; position:absolute; left:4px; top:55px; width:638px; height:118px; border-bottom:3px solid #fff;}#tabs ul li.click div.tab_left{background:#fff url(icon/tabmid.png);}#tabs ul li.click div.tab_center{background:#fff url(icon/tabmid.png);}#tabs ul li.click div.tab_right{background:#fff url(icon/tabmid.png);}.clear {clear:both; height:0; line-height:0; overflow:hidden;}#tabs span.base {display:block; height:20px;font-size:10px; color:#c60; background: bottom;}#tabs div h5 {font-size:11px; margin:0;}#tabs div p {font-weight:normal; text-align:left; color:#000; margin-top:3px; line-height:15px;}#tabs div a img {border:0;}#tabs div img.image {float:left; border:0; margin-right:5px; margin-top:-15px;}#tabs div a.unlock {background:url(icon/unlock.gif); display:block; width:30px; height:30px; margin:0 auto;}#tabs div a.unlock:hover {border:0;}#tabs div a:hover.unlock img {visibility:hidden;}#tabs p.bold {color:#069; padding-top:5px;}#tabs form {margin-top:-10px; padding:0;}#tabs form fieldset {padding:0;}#tabs p.buttons {text-align:center;}

Every time I try and get it to display correctly, I end up with a large gap between my tabs and actual text ( which I can't, for the life of me work out ) or it just ruined the whole layout of my coding.ThanksJake

Link to comment
Share on other sites

The problem is that you are referencing an external style sheet, the Tryit editor is looking for a stylesheet that it cannot find and thus your styles are not loaded. With this editor, you have to embed your styles. Another problem is the fact that you are calling a javascript file, which the editor cannot find. So either you should embed it as well, or you should test everything locally where all your files will be where you say the are. Without the javascript to execute, the tabs will not work.Place the CSS inside the style tags:<style type="tex/css">YOUR CSS HERE</style>And your Javascript here:<script src="mini-tabbed-pages/click_menu.js" type="text/javascript">JAVASCRIPT HERE</script>It should look like this (I do not have the javascript you want, so you'll have to add that yourself.):

<head><script src="mini-tabbed-pages/click_menu.js" type="text/javascript"></script><style type="text/css">#tabs {width:500px; text-align:left; background:; margin:0px; position:relative; z-index:200; font:bold 11px verdana, arial, sans-serif;}#tabs ul {padding:0; margin:0; width:800px; list-style:none; position:relative;}#tabs ul li.outer {  float:left;   display:inline;   margin:4px 3px 4px;   width:125px;   height:53px;   border-bottom:1px solid #777b02;   line-height:50px;  color:#777b02;  text-align:center;  background:#fff url(icon/tab.png) no-repeat top left;}#tabs ul li div {display:none;}#tabs ul li.click {padding-bottom:132px; border-bottom:1px solid #fff; color:#000; margin-bottom:0;}#tabs ul li.click {color:#000; background-position:0 -55px; height:55px; cursor:default;}#tabs ul li.click div {display:block; padding:5px; position:absolute; left:4px; top:55px; width:638px; height:118px; border-bottom:3px solid #fff;}#tabs ul li.click div.tab_left{background:#fff url(icon/tabmid.png);}#tabs ul li.click div.tab_center{background:#fff url(icon/tabmid.png);}#tabs ul li.click div.tab_right{background:#fff url(icon/tabmid.png);}.clear {clear:both; height:0; line-height:0; overflow:hidden;}#tabs span.base {display:block; height:20px;font-size:10px; color:#c60; background: bottom;}#tabs div h5 {font-size:11px; margin:0;}#tabs div p {font-weight:normal; text-align:left; color:#000; margin-top:3px; line-height:15px;}#tabs div a img {border:0;}#tabs div img.image {float:left; border:0; margin-right:5px; margin-top:-15px;}#tabs div a.unlock {background:url(icon/unlock.gif); display:block; width:30px; height:30px; margin:0 auto;}#tabs div a.unlock:hover {border:0;}#tabs div a:hover.unlock img {visibility:hidden;}#tabs p.bold {color:#069; padding-top:5px;}#tabs form {margin-top:-10px; padding:0;}#tabs form fieldset {padding:0;}#tabs p.buttons {text-align:center;}</style></head><body onload="clickMenu('tabs')"><div id="tabs"><ul><li class="outer one">avicularia<div class="tab_left"><h5>Avicularia avicularia</h5><p>This area can hold anything you like, text, images, forms and even links like this one - <a href="index.html">Main Menu</a>.</p></div></li><li class="outer two">UNLOCK<div class="tab_center"><h5>Unlock the Secrets</h5><a href="http://www.w3.org/Style/CSS/" class="unlock" title="Unlock the secrets of CSS at w3.org"><img src="mini-tabbed-pages/icon/lock.gif" alt="Locked" title="Locked" /></a></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer three">MAIL<div class="tab_right"><h5>Email</h5><p>Maybe a link to your emails or a form asking to login to retrieve your emails, or even a link to a <a href="http://www.cssplay.co.uk/w3c/contact.html">Contact Page</a>.</p></div></li></ul><br class="clear" /><ul><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer five">PROFILE<div class="tab_center"><h5>Your Profile</h5><form id="two" action="..." method="post"><fieldset id="personal">    <label for="login">login : </label>     <input name="login" id="login" type="text" tabindex="1" /></fieldset><p class="buttons">  <input id="button1" type="submit" value="Send" />   <input id="button2" type="reset" value="Reset" /></p></form></div></li><li class="outer six">DRAW<div class="tab_right"><h5>Learn how to Draw</h5><a href="http://www.adobe.com/products/fireworks/"><img class="image" src="mini-tabbed-pages/icon/fireworks.gif" alt="Adobe Fireworks 8" title="Adobe Firerworks 8" /></a><p class="fire">Get top-quality design results. Take creative control with seamless vector and bitmap editing.</p></div></li></ul><br class="clear" /><ul><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li></ul></div></body></html>

The look seems right, but since the javascript is not loading, it won't work correctly.Hope this helps.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...