|
CSS - 3 Column Centered Table Layout...convert To Css
right guys...this one is a bit backwards. I have a table as follows:
Code: <table height=100% wieght=100 cellspacing=0 cellpadding=0> <tr> <td width=50%></td> <td width=760px></td> <td width=50%></td> </tr> </table> For obvious validation reasons, i need to convert this to CSS but keep the 100% height. Example of it: http://www.ridobusinesscentre.org.uk All help is welcomed. Similar TutorialsHello, I created a 3 column layout with header and footer: http://www.27lamps.com/public/layout.htm The problems I have a 1. I am not able to extend my 3 columns so they have the same height. How can I do this? Do I need to use images somehow? I would prefer to use CSS only if possible. 2. I am not able to use padding in my columns without breaking the design. Could someone, please, help me fixing this problem and also improve my code? Thanks, Miguel Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx Hi, I am very new to CSS and very confused. I wrote my site about 10 years ago using tables and have been working very hard the last few weeks updating the code to CSS and XHTML. I have a navigation page that was made as a table using an image to replace the bullet and act as the link. I am having a terrible time rewriting the blasted thing without using a table. The columns will not line up (I suppose I do not understand how to use the negative margin properly) and when I try to use the clear: left; code so my bullet image lays properly it will only clear the bottom of the previous column so there is a giant gap in between the links. I have no idea what I am doing. Here is a link to what the page looks like using the old code. This page will NOT validate, the code is old and depreciated but if you have a peek you can se what I am trying to achieve. www.medeaslair.net/myths.html. Here is what I wrote but I am afraid it is very long. I apologize in advance for how bad it is. CSS Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tableless Three Column List</title>
<style type="text/css">
<!--
body {
color: black;
padding-top: 45px;
background-image: url("images/tan_marble3.jpg");
text-align:center;
font-family: papyrus;
font-weight: bold;
font-size: 15px;
}
#container {
width: 750px;
margin: 0 auto;
text-align:left;
}
li.col1a, li.col1b, li.col1c, li.col1d, li.col1e, li.col1f, li.col1g, li.col1h, li.col1i, li.col1j, li.col1k, li.col1l, li.col1m, li.col1n, li.col1o, li.col1p, li.col1q, li.col1r, li.col1s, li.col1t, li.col1u, li.col1v {
margin-left: 0;
}
li.col2a, li.col2b, li.col2c, li.col2d, li.col2e, li.col2f, li.col2g, li.col2h, li.col2i, li.col2j, li.col2k, li.col2l, li.col2m, li.col2n, li.col2o, li.col2p, li.col2q, li.col2r, li.col2s, li.col2t, li.col2u, li.col2v, li.col2w, li.col2x, li.col2y, li.col2z {
margin-left: 18em;
}
li.col3a, li.col3b, li.col3c, li.col3d, li.col3e, li.col3f, li.col3g, li.col3h, li.col3i, li.col3j, li.col3k, li.col3l, li.col3m, li.col3n, li.col3o, li.col3p, li.col3q, li.col3r, li.col3s, li.col3t {
margin-left: 34em;
}
.coltopper {
margin-top: -51em;
}
#listyles {
display: block;
padding-top: 45px;
margin: 0;
width: 100%;
list-style-type: none;
}
a:link {
color: #06f;
text-decoration: none;
}
a:hover {
color:#f00;
text-decoration: none;
}
image {
border-style: none;
}
li.col2a, li.col3a {
margin-top: -51em;
}
#listyles li {
line-height: 1.5em;
}
h1 {
text-align: center;
}
#email {
text-align: center;
text-decoration: none;
padding-top: 35px;
border: 0;
}
-->
</style>
</head>
The HTML Code: <body> <div id="container"> <img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" /> <img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" /> <h1>Tales of Greek Mythology</h1> <img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" /> <br /> <ul id="listyles"> <li class="col1a"><u>Gods and Goddesses</u></li> <li class="col1b" style="padding-top: 10px;"><a href="aphrodite.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Aphrodite</li> <li class="col1c" style="clear: left;"><a href="apollo.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Apollo</li> <li class="col1d" style="clear: left;"><a href="artemis.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none:" alt="grapes""></a>Artemis</li> <li class="col1e" style="clear: left;"><a href="athena.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Athena</li> <li class="col1f" style="clear: left;"><a href="dionysus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Dionysus</li> <li class="col1g" style="clear: left;"><a href="hades.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hades</li> <li class="col1h" style="clear: left;"><a href="hera.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hera</li> <li class="col1i" style="clear: left;"><a href="hermes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hermes</li> <li class="col1j" style="clear: left;"><a href="poseidon.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Poseidon</li> <li class="col1k" style="clear: left;"><a href="zeus.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Zeus</li> <li class="col1l" style="padding-top: 30px;"><u>Tales of Love and Woe</u></li> <li class="col1m" style="padding-top: 10px;"><a href="hermes.html#baucis"> <img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Baucis and Philemon</li> <li class="col1n" style="clear: left;"><a href="cupid.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Cupid and Psyche</li> <li class="col1o" style="clear: left;"><a href="pan.html#echo"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Echo and Narcissus</li> <li class="col1p" style="clear: left;"><a href="pan.html#endymion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Endymion</li> <li class="col1q" style="clear: left;"><a href="artemis.html#orion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orion</li> <li class="col1r" style="clear: left;"><a href="orpheus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orpheus and Eurydice</li> <li class="col1s" style="padding: 30px;"><u>Giants and Beasts</u></li> <li class="col1t"><a href="artemis.html#otus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Otus and Ephialtes</li> <li class="col1u" style="clear: left;"><a href="minotaur.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"alt="grapes"></a>The Minotaur</li> <li class="col1v" style="clear: left;"><a href="cyclopes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Cyclopes</li> <li class="col2a coltopper"><u>Men and Heroes</u></li> <li class="col2b" style="padding-top: 10px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Agamemnon</li> <li class="col2c" style="clear: left;"><a href="atreus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"></a>Atreus</li> <li class="col2d" style="clear: left;"><a href="daedalus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Daedalus and Icarus</li> <li class="col2e" style="clear: left;"><a href="athena.html#erichthonius"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erichthonius</li> <li class="col2f" style="clear: left;"><a href="heracles.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Heracles</li> <li class="col2g" style="clear: left;"><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hyacinthus</li> <li class="col2h" style="clear: left;"><a href="hera.html#ixion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Ixion</li> <li class="col2i" style="clear: left;"><a href="atreus.html#orestes"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orestes</li> <li class="col2j" style="clear: left;"><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pentheus</li> <li class="col2k" style="clear: left;"><a href="perseus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Perseus</li> <li class="col2l" style="clear: left;"><a href="phrixus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Phrixus <li class="col2m" style="clear: left;"><a href="pandora.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Prometheus</li> <li class="col2n" style="clear: left;"><a href="hades.html#sisyphus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sisyphus</li> <li class="col2o" style="clear: left;"><a href="atreus.html#tantalus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Tantalus</li> <li class="col2p" style="padding-top: 30px;"><u>Tales of the Sea</u></li> <li class="col2q" style="padding-top: 10px;"><a href="sea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sea Myths</li> <li class="col2r" style="clear: left;"><a href="circe.html#glaucus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Glaucus and Scylla</li> <li class="col2s" style="clear: left;"><a href="sea.html#nereus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nereus</li> <li class="col2t" style="clear: left;"><a href="sea.html#sirens"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Sirens</li> <li class="col2u" style="clear: left;"><a href="sea.html#triton"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Triton</li> <li class="col2v" style="padding-top: 30px;"><u>Tales of Interest</u></li> <li class="col2w" style="padding-top: 10px;"><a href="garden.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: 4px;" alt="grapes"></a>Mythic Garden</li> <li class="col2x" style="clear: left;"><a href="samhain.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Blessed Samhain</li> <li class="col2y" style="clear: left;"><a href="thor.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Thor</li> <li class="col2z" style="clear: left;"><a href="links.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Links and Credits</li> <li class="col3a coltopper"><u>Women and Witches</u></li> <li class="col3b" style="padding-top: 10px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Alcmene</li> <li class="col3c" style="clear: left;"><a href="athena.html#arachne"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Arachne</li> <li class="col3d" style="clear: left;"><a href="circe.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Circe</li> <li class="col3e" style="clear: left;"><a href="dionysus.html#erigone"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erigone</li> <li class="col3f" style="clear: left;"><a href="zeus.html#europa"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Europa</li> <li class="col3g" style="clear: left;"><a href="zeus.html#io"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Io</li> <li class="col3h" style="clear: left;"><a href="zeus.html#leda"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Leda</li> <li class="col3h" style="clear: left;"><a href="leto.html"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>Leto</li> <li class="col3h" style="clear: left;"><a href="medea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Medea</li> <li class="col3i" style="clear: left;"><a href="leto.html#niobe"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Niobe <li class="col3j" style="clear: left;"><a href="pandora.html#pandora"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pandora</li> <li class="col3k" style="clear: left;"><a href="persephone.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Persephone</li> <li class="col3l" style="clear: left;"><a href="dionysus.html#semele"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Semele</li> <li class="col3m" style="clear: left;"><a href="pan.html#syrinx"><img src="images/grape.gif" style="float: left; text-alogn: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Syrinx</li> <li class="col3n" style="padding-top: 30px;"><u>Satyrs and Centaurs</u></li> <li class="col3o" style="padding-top: 10px;"><a href="chiron.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Chiron</li> <li class="col3p" style="clear: left;"><a href="dionysus.html#midas"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>King Midas</li> <li class="col3q" style="clear: left;"><a href="apollo.html#marsyas"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Marsyas</li> <li class="col3r" style="clear: left;"><a href="chiron.html#nessus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nessus</li> <li class="col3s" style="clear: left;"><a href="pan.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pan <li class="col3t" style="clear: left;"><a href="chiron.html#peirithous"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Peirithous</li> </ul> </div> <!-- end of container div --> </body> </html> Hi all, Ooooohhh, I think I have a good one... I am trying to eliminate every single table on my site. I have ONE more page to go. http://www.bartlett-family.net/chri...cstrategy2.html is what the original layout, with tables. I need to replace it with a table-less version. I'm attempting that at http://www.bartlett-family.net/chri...icstrategy.html. I've run into a problem. Notice on the first page how S, D, H, & P are all supposed to be different colors. That works out fine when, like in the row for "8" all the items are the same (in that case, "H"). But it just won't work when there's any combination of H, S, D, & P. Have a look at my CSS and source. Can anyone think of a method to solve my dilemna here? Should I be using lists of some kind instead? Chris Hi, http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE. Any help would be greatly appreciated. Thanks. Janusz Jasinski Hello I'm sure this should be easy can has been done but I can't find an example that doesn't break in some way. I want to position and extra column outside and to the right of the main centered content div. The purpose of this is to place extra less important information which can / will be hidden for 1024 resolutions. The problem I have is that either of my methods break. One option was to position the item 100% from the left and then give it a negative left margin. But this pushes the box into the main content when the resolution comes down to 1024. The other was to put it inside the main content, float it right and give it a negative right margin to "drag" it out of the main div. The problem with this one is that I get a horizontal scroll bar when reducing to 1024. I want the column to be hidden if the res is 1024 or less. Here is the CSS: Code: <style>
* {
margin: 0px;
padding: 0px;
}
#Wrapper {
width: 1000px;
min-height: 500px;
margin: 0 auto 0 auto;
background-color: #C0C0C0;
}
#RightColumn {
width: 150px;
min-height: 400px;
margin-right: -150px;
float: right;
background-color: #000000;
}
</style>
And here is the HTML: Code: <body> <div id="Wrapper"> <div id="RightColumn"></div> </div> </body> It's the basic stuff but I want to get it right before I add anything else. Thanks for an help or suggestions Doc Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery I have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing. Can anyone help? It looks like the image at the address below. tophermorrison.com/css_layout.jpg I have 3 divs 1.banner (100px tall 100% wide) 2.content (100% tall 650px wide) 3.image (100px x100px) I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content. Is this possible? Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! I am a HTML&CSS novice - I am trying to write a page using a three column layout but the column colour doesn't reach the footer. I understand that this is a common problem and I've looked at a lot of examples on the web of how to work around this or create a better layout but I'm still not sure enough to know which would be the easiest and best to go within the page I have written. I want to avoid images but other than that any help would be great! I have validated the HTML & CSS and they are copied below (could any advice be really specific, as I said this is very new to me!). Thanks HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drivers Jonas Information Unit</title> <meta name="keywords" content="1" /> <link rel="stylesheet" type="text/css" href="djiucss.css" media="screen" /> <link rel="stylesheet" type="text/css" href="djiuprintcss.css" media="print" /> </head> <body> <div id="top"> <div id="picture"> <img src="GIF.gif" alt="DJ" width="200" height="100" /> </div> <div id="heading"> <div id="title"><h1>Drivers Jonas Information Unit</h1></div> </div> </div> <div id="left"> <br/><p><a href="about.html">About us</a></p><br/> <p><a href="company.html">Company Information</a></p><br/> <p><a href="legal.html">Legal information</a></p><br/> <p><a href="landreg.html">Land Registry</a></p><br/> <p><a href="research.html">Research</a></p><br/> </div> <div id="right"> <div id="title"><h2> News </h2></div> <ul> <li>The Information Unit has recently acquired a set of new APC guides</li> <li>If you would like any training on databases</li> <li>The Information Unit has created an economy timeline </li> </ul> </div> <div id="main"> <div id="title"><h2>Main stuff</h2></div> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin nec mi sit amet metus placerat egestas. Quisque porttitor massa eu lacus. Donec tristique, neque in sollicitudin euismod, enim tellus varius mauris, id vestibulum est massa id massa. Integer et purus. Vivamus condimentum tincidunt ipsum. Duis augue lorem, pretium vel, cursus at, vulputate sed, neque. Quisque justo. Nunc rhoncus. In ornare venenatis velit. </p> <p>Donec facilisis ante sit amet mauris. Nunc fermentum orci eu quam. Donec vestibulum. Vestibulum ultricies nisl eu eros. Curabitur urna. Duis enim erat, lobortis nonummy, mollis non, porttitor nec, nisi. Phasellus pulvinar purus eu pede. In mollis. Duis sit amet dui et arcu rhoncus auctor. Integer est dui, pharetra vel, volutpat ac, luctus in, elit. </p> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin ne</p> </div> <div id="bottom"> Drivers Jonas Information Unit </div> </body> </html> CSS: #top /*DJ logo and page title - includes h1*/ { color: black; font-family: arial, sans-serif; font-size: 20px; background: #d31145; padding-bottom: 15px; } body { color: black; font-family: arial, sans-serif; font-size:14px } img /*DJ logo*/ { padding: 20px; float:left; } #heading { text-align: center; padding:20px; } /*main page title*/ /*should change all reds to DJ red: #d31145*/ #left, #right, #main { color: white; background: black; } #left { float: left; width:140px; border-right:2px solid #d31145; text-align:left; padding-left: 1em; } #right { float:right; width:140px; border-left:2px solid #d31145; text-align:left; padding-right: 1em; } #main { margin-left: 150px; margin-right: 150px; border-left: 1px solid; border-right: 1px solid; padding: 1em; } #bottom { clear:both; margin: 0; color:black; background: #d31145; font-size: 16px; font-family: Arial, sans-serif; text-align: center; } #title { text-align:center; } a:link {color:white} a:visited {color:silver} a:hover {color:#d31145} a:active {color:#d31145} Hi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me i use external stylesheet which is shown below. i have tried using <h1> which is set to center, ive tried using <p class="center"> and it still does not center. it only centers when i use the <center> tag...what gives? its fine in netscape, opera, and ie..... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Ranid Photo Gallery</title> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff"> <div style="position: absolute; left: 10px; top: 200px; width: 740px; background-color: transperant; padding: 0px;"> <h1>Ranid Frog Photos</h1> <p class="center"><table width=70% border=1 cellspacing=0 cellpadding=0> <tr><td width=30%><h4><a href="images/raurora1.jpg"><img src="images/raurora1.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/raurora2.jpg"><img src="images/raurora2.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/.jpg"></a></h4><h4></td></tr> </table></p> <h5>:<a href="gallery.html">Back to the Gallery</a>:</h5> </body> </html> My style sheet Code:
body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
line-height: 1pt ;
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
any ideas? G'day again, Following on from my last post (as yet unanswered, see the Left and Right Image post below), I am still trying to complete the layout of my site using CSS and <div> tags. As can be seen in the pictu http://img241.imageshack.us/img241/...sitecopyfp2.jpg I have three columns underneath the headers. The width's of each column are fixed, but I want the heights to be the same, ie. that of the column with the most information, and the footer bar to be underneath. The current CSS for the column sections: Code:
#LeftCol
{
position: absolute;
top: 360px; left: 75px;
background-color: #a8b0b3;
width: 157px;
height: auto;
}
#CentreCol
{
position: absolute;
top: 360px; left: 232px;
background-color: #ffffff;
width: 536px;
height: auto;
}
#RightCol
{
position: absolute;
top: 360px; left: 768px;
background-color: #a8b0b3;
width: 157px;
height: auto;
}
and the HTML for the columns: Code:
<div id="LeftCol">
blah blah blah
</div>
<div id="CentreCol">
blah blah blah
</div>
<div id="RightCol">
blah blah blah
</div>
I'd appreciate any help. Cheers. Okay, trying to use CSS to set up a simple three column layout. Here's what I would like: - An fixed, 800px wide column always centered horitontally, relative to browser window size - A collapsable left column and collapsable right column that fill out the page (these need to be seperate columns, technically, because I want to apply a different background image to each) I've done something like this before with "broken" code by doing something like... Code: <table width=100%> <tr> <td width=99%> </td> <td width=800> </td> <td width=99%> </td> </tr> </table> I know, this is really bad code. But hopefully it explains what I'm trying to do. Maybe someone can help me out using some simple CSS? Thanks! Hello, I'm not new to the web, but a newbie in terms of CSS. Could someone check out the following page and css and let me know why the text is not being wrapped in the overall layout. In other words, why is it running over top of the page footer and not contained. http://www.brainfuelmedia.com/postscript/temp.html and the css is http://www.brainfuelmedia.com/postscript/ps_main.css Thanks for all help. This is driving me nuts. Dear all I would like to be able to create a design with a text column and an image column. The text would be continuous in the left-hand column, and images would be displayed in the right-hand column. In other words, I would like to be able to use the following HTML: Code: <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <img src="test.jpg" /> blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2.</p> I would like the text to appear continuously in the left-hand column, while the image appears at the correct point, but in the right-hand column. In other words, I would like the left-hand column (assuming I fixed its width) to contain the output: Code: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2. While the right-hand column will have the image, its top lining up with where the text changes to 'blah2'. Any ideas? I realize the most difficult thing about asking this question is describing the visual layout I want to achieve. I shall try to draw a mock-up, and post a link to it in this thread. Many thanks in advance, Tom |
|||||||