PDA

View Full Version : Trying to revive old website with CSS



philcoa
Feb 6th, 2010, 08:25 AM
Hiya,

Alright, I have this very old HTML layout here, made with tables basically, that I wish to clean up and upgrade with external as well as embedded and inliner CSS.

I've already tried a simple novice start, without external CSS, and I'm sure there are several errors there.

I wish to have the structural layout with CSS encoding, and take the tables out, if possible. Back then I worked pretty hard to get the cross divider. Don't know how I can arrange that now with CSS, since it's all new to me.

Thankful for any helps given!

Enclosed is current code plus link:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en">
<meta name="Author" content="website">
<meta name="description" content="lots...">
<meta name="keywords" content="more lots...">

<title>Page title</title>

<style type=text/css>

<!--

a:link {
color: #4E78A0; text-decoration: none
}
a:visited {
color: #39B7CD; text-decoration: none
}
a:active {
color: #7AC5CD; text-decoration: none
}
a:hover { color:#236B8E; text-decoration: none; }


body { font-size: 100%;
font-family: Georgia, sans-serif; font: Futura T Light;
}

body {
color: #090909;
background-color: FFFFFE ;
}



img
{
border-color: #000000; darkbrown;
}

hr {

border: none 0;
border-bottom: 1px dashed #000080; line-height:0.05em; noshade;
height: 1px;
margin: 2px auto 4 2;
margin-left: auto;
margin-right: auto;
text-align: center;

}

td.lt {

padding:2px 10px 2px 10px;

}


-->


</style>

</head>


<table WIDTH=96% BORDER=0 CELLSPACING=0 CELLPADDING=1>


<tr>

<td VALIGN=CENTER>&nbsp;</td>

<td VALIGN=CENTER>&nbsp;</td>

<td VALIGN=CENTER>&nbsp;</td>

<td VALIGN=CENTER COLSPAN="0" BGCOLOR="#CDCDCD" WIDTH=7 HEIGHT=7></td>

<td VALIGN=CENTER>&nbsp;</td>

</tr>

<tr>
<td VALIGN=CENTER COLSPAN="7" BGCOLOR="#CDCDCD" height=9 width=9></td>
</tr>

<tr>
<td class="lt" WIDTH=25% ALIGN=CENTER VALIGN=TOP COLSPAN="3">

<div align="center"><img src="../../img/.gif" alt="ad or image" BORDER="0" height=150 width=150></div>

<div align="center"><font face="palatino linotype" color="#663300" size=2></font></div>

<p align="center"><b><font size=+1><a href="../../intro.html">INTRODUCTION</a></font></b>
</p>

<p align="center"><b><font size=+1><a href="../../art.html">ARTICLES</a></font></b>
</p>

<p align="center" style="margin-top: 2; margin-bottom: 2">
<font size="4"><a href="../../art.html#1"><b>Subcontent 1</b></a></font></p>

<p align="center" style="margin-top: 2; margin-bottom: 2">
<font size="4"><a href="../../art.html#2"><b>Subcontent 2</b></a></font></p>

<p align="center" style="margin-top: 2; margin-bottom: 2">
<font size="4"><a href="../../art.html#3"><b>Subcontent 3</b></a></font></p>

<p align="center" style="margin-top: 2; margin-bottom: 2"><font size="4"><a href="../../art.html#4"><b>Subcontent 4</b></font></a></font></p>

<p align="center" style="margin-top: 2; margin-bottom: 2"><font size="4"><a href="../../art.html#5"><b>Subcontent 5</b></a></font></p>


<p align="center"><b><font size=+1><a href="../../doc.html">DOCUMENTS</a></font></b>
</p>

<p align="center" style="margin-top: 2; margin-bottom: 2">
<font size="4"><a href="../../doc.html#1"><b>Documents 1</b></a></font></p>

<p align="center" style="margin-top: 2; margin-bottom: 2">
<font size="4"><a href="../../doc.html#2"><b>Documents 2</b></a></font></p>

<p align="center" style="margin-top: 2; margin-bottom: 2">
<font size="4"><a href="../../doc.html#3"><b>Documents 3</b></a></font></p>

<p align="center"><b><font size=+1><a href="../../uuu/index.html">MORE INFOS</a></font></b>
</p>


<p align="center"><b><font size=+1><a href="../../vvv/index.html">AND MORE INFOS</a></font></b>
</p>

<p align="center"><b><font size=+1><a href="../../contact.html">CONTACT</a></font></b>
</p>


<p align="center"><b><font size=+1><a href="http://nl.webpage.us">NEWSLETTER</a></font></b>
</p>

<div align="center"><a target="_blank" href="http://nl.webpage.us/lastissue.html"><img src="../../img/.jpg" alt="none" width="175" height="248" hspace="10" vspace="5" border="1" align="center"><br><a target="_blank" href=".html"><font face="palatino linotype" size=+1><b>Latest issue</b></a></font></p></div>


<p align="center"><b><i><font color="#003300" size=-2>Some informative text</font></i></b>
</p>


<p align="center"><b><font size=+1><a href="external.html">SPONSORS</a></font></b>
</p>


<div align="center"><a target="_blank" href="http://"><img src="../../.gif" border="1"></a><br><br>
<a target="_blank" href="http://"><img src="../../img/.gif" border="1"></a><br><br>
<a target="_blank" href="http://"><img src="../../img/.gif" border="1"></a>
</div>
</font></font>


</td>


<td VALIGN=CENTER BGCOLOR="#CDCDCD"></td>

<td ALIGN=LEFT VALIGN=TOP COLSPAN="3">

<div align="left"><a href="../../index.html"><img src="../../img/logo.gif" alt="banner" border="0"></a></div>
<div style="margin-bottom:-20px; align="center"></div>

<p align="center"><img src="../../img/sub.jpg" alt="sub banner" border="0"></p>

<div style="margin-bottom:-15px; align="center"></div>

<div align="center">
<table border="0" cellpadding="8" cellspacing="8" style="border-collapse: collapse" width="95%" height="100%">

<tr>
<td align="center" valign="top" colspan="2">



<H2 ALIGN="LEFT">Article header</H2>


<P ALIGN="LEFT"><font face="Times New Roman" size="+1"><b>
<a href="#1"> First chapter</a><BR>
<a href="#2"> Second chapter</a><BR>
<a href="#3"> Third chapter</a>
</b>
</FONT></P>


<H3 ALIGN="LEFT"><a name="1"></a>First chapter</H3>

<P ALIGN="JUSTIFY">Lorem ipsum dolor sit amet consequuntur magni doloremque perspiciatis rem rem, ut enim enim inventore odit eos totam ratione inventore quae odit doloremque eaque ipsa nemo nemo architecto eaque eaque, aspernatur illo error totam accusantium sit ratione voluptatem rem inventore eaque laudantium dolores sed accusantium odit sit sit, eaque doloremque nemo ipsa sed accusantium voluptatem ab quasi vitae enim quia enim explicabo fugit dicta accusantium aut ipsam ipsa ipsa, vitae accusantium sed voluptatem perspiciatis sit voluptas iste sunt</P>

<BLOCKQUOTE><P ALIGN="JUSTIFY"><font color="#534429">Lorem ipsum dolar sit amet totam unde illo totam laudantium rem ratione dicta dicta, omnis accusantium ut laudantium eaque fugit voluptatem magni sit voluptatem eaque error doloremque doloremque, accusantium explicabo architecto explicabo sit ratione sed natus sed aperiam illo. Illoillo, voluptatem veritatis natus consequuntur quia sit nemo eos sed omnis. Omnisaccusantium aut illo illo, aspernatur error veritatis doloremque consequuntur magni explicabo odit qui</FONT>
</P></BLOCKQUOTE>

<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet ratione eaque vitae ut odit omnis doloremque accusantium odit sed sed sed, qui eaque enim unde sed eos et sed rem architecto totam vitae beatae ut aut omnis voluptatem ab aut aut, aut consequuntur sed aut ipsam odit error vitae perspiciatis accusantium error ipsa rem eaque sunt dicta sit accusantium fugit aperiam aperiam, omnis ut </p>

<H3 ALIGN="LEFT"><a name="2"></a>Second chapter</H3>

<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet aperiam laudantium voluptas quia nemo sit accusantium ratione dicta fugit accusantium ipsam ipsam, dolores doloremque enim unde aut vitae accusantium aut dicta natus sit perspiciatis quia odit vitae odit eos magni magni, qui aperiam dolores architecto aperiam aperiam. Aperiamaut inventore totam aspernatur error fugit aut. Autvoluptatem voluptatem, ipsam aut ipsam et sunt quia et sit quae sed perspiciatis inventore unde enim quia quasi quasi, totam </p>

<h4 ALIGN="LEFT">Lorem ipsum heading</h4>

<ul>
<li>vitae natus et aperiam dolores eaque accusantium qui </li>
<li>fugit quasi consequuntur magni voluptatem consequuntur</li>
<li>magni quia rem natus accusantium doloremque </li>
<li>enim vitae ipsa voluptatem perspiciatis totam natus </li>
<li>vitae laudantium aspernatur accusantium magni enim </li>
</ul>

<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet vitae iste omnis aperiam magni magni, fugit explicabo ratione aspernatur nemo beatae rem qui magni sit vitae dicta voluptatem quasi voluptatem voluptatem sunt veritatis doloremque doloremque, sed illo vitae dicta quasi sunt</P>
<h4 ALIGN="LEFT">Lorem ipsum heading</h4>
<P ALIGN="JUSTIFY">Lorem ipsum dolor sit amet aut qui nemo voluptatem sed aperiam ut aut eaque laudantium laudantium, inventore ipsam quia quia ipsa ut ipsam beatae ipsa perspiciatis consequuntur totam eaque iste sed totam aspernatur ut ut, consequuntur voluptatem ut laudantium natus architecto architecto enim ratione ipsa vitae sit natus aspernatur accusantium accusantium, iste unde laudantium dolores aut magni quia sit nemo laudantium iste iste doloremque quia quasi quasi, sunt voluptas vitae accusantium accusantium sed et consequuntur iste nemo explicabo sunt dolores sunt ipsa sed eos eos, architecto illo error aperiam veritatis odit consequuntur inventore sed eos unde error natus natus, perspiciatis quia totam enim odit sed unde et quia rem. Lorem ipsum dolar sit amet sed odit aut omnis ratione ratione, doloremque doloremque aut architecto quia nemo inventore consequuntur quae error nemo error illo ratione unde sed eos eos, aut. Autexplicabo doloremque dolores architecto quae rem doloremque natus. Natusvitae odit odit, enim sed sit quae quia explicabo sit dicta ipsa vitae veritatis beatae error iste iste error error, ratione ipsa quia voluptas aspernatur fugit voluptatem enim perspiciatis dicta aut qui laudantium accusantium voluptas aut totam totam, eos veritatis ut veritatis rem eos sed qui ratione odit quae rem omnis aperiam architecto vitae voluptatem omnis omnis, beatae ipsa ratione quasi voluptas</P>

<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet quasi aspernatur explicabo aut ratione fugit fugit, sunt ut quia quasi dolores aut sit dicta eos sed aut iste aut nemo explicabo explicabo, sit et omnis nemo vitae explicabo fugit ab sed ab doloremque. Doloremquequia illo sit sit, explicabo dicta aperiam ipsam et ut sed natus ab aut voluptatem error consequuntur consequuntur, ab voluptas ut natus accusantium sit laudantium sit eos inventore inventore natus doloremque eaque unde totam perspiciatis sed sed, error unde consequuntur error quae aut quia odit laudantium ipsam aperiam quasi veritatis eos eos aperiam sit ratione dicta dicta, dolores enim et omnis qui vitae ab sed voluptatem laudantium sit magni veritatis fugit sed </p>
</P>

<H3 ALIGN="LEFT"><a name="3"></a>Third chapter</H3>

<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet sed sit enim quae beatae perspiciatis inventore quasi odit ipsam dicta vitae vitae, accusantium vitae aperiam laudantium error beatae aut iste eos omnis aperiam eaque eaque, architecto quasi totam totam perspiciatis voluptas perspiciatis sunt natus ipsa totam qui iste illo fugit ab ab, quia fugit ipsam illo qui beatae veritatis quia quae quia quia. Quiaaccusantium ab sunt ab ipsam ipsam, sed doloremque </p>
<h4 ALIGN="LEFT">Lorem ipsum heading</h4>

<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet totam voluptas quasi sed voluptatem consequuntur quia beatae error error, beatae beatae laudantium aspernatur eos voluptatem natus magni dolores et illo ut ab omnis totam eaque et iste quae quae, aperiam sed voluptatem veritatis doloremque aut unde. Undeenim beatae rem dolores. Doloresdolores, et. Etaut totam omnis enim illo omnis sit ratione aperiam inventore consequuntur inventore omnis omnis, quasi eos aperiam fugit sunt unde quae et quia ratione nemo omnis totam voluptatem voluptatem, doloremque odit sit ut doloremque </p>

<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet beatae ipsam vitae ab voluptatem magni aspernatur architecto natus error enim beatae beatae, voluptatem ipsa illo perspiciatis vitae quasi architecto doloremque dolores totam ratione laudantium ipsa et natus iste quia sit ipsa ut ut, beatae inventore error et voluptatem enim aut voluptas magni beatae perspiciatis unde sunt sed accusantium totam enim totam nemo inventore inventore, perspiciatis natus quia inventore unde </p>


<h4 ALIGN="LEFT">Lorem ipsum heading</h4>


<P ALIGN="JUSTIFY">Lorem ipsum dolar sit amet quasi eos rem doloremque fugit fugit, eos architecto aspernatur qui accusantium illo nemo voluptatem rem perspiciatis iste voluptas veritatis veritatis, nemo enim odit aperiam enim veritatis voluptas quia quia nemo quae architecto sit sed iste veritatis voluptas beatae. Beataeaut aut, eaque magni voluptatem quasi voluptatem ratione sit voluptatem error eos magni qui quasi error rem perspiciatis vitae vitae, accusantium sit doloremque sit sed et ipsa et inventore dicta ipsa voluptatem ipsa aut fugit enim aperiam </p>




<P ALIGN="JUSTIFY""><b><font size=-2>Information about author and date production of document. </font></P>
</div>
</td>
</tr>
</table>


<tr>
<td VALIGN=CENTER COLSPAN="7" BGCOLOR="#969696">

</td>


<tr>



<td VALIGN=CENTER COLSPAN="3">
</td>

<td ALIGN=LEFT COLSPAN="2">&nbsp;<a href="#top">TOP</a>
</td>

<td ALIGN=RIGHT><a href="../../index.html">HOME</a>&nbsp;
</td>
</tr>
</table>

</body>
</html>


Link (http://monumento.bravehost.com/test1.html)

abduraooft
Feb 6th, 2010, 08:35 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
That's an incomplete DOCTYPE (http://www.alistapart.com/articles/doctype). I'd recommend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
instead.

Now, take a look at http://bonrouge.com/2c-hf-fluid.php, to see how to make a good 2 column CSS based layout.

philcoa
Feb 6th, 2010, 09:02 AM
That's an incomplete DOCTYPE (http://www.alistapart.com/articles/doctype). I'd recommend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
instead.

Thanks for the update.


Now, take a look at http://bonrouge.com/2c-hf-fluid.php, to see how to make a good 2 column CSS based layout.

Looks neat when I tried it in my editor. However, I wish to keep the original cross divider solution as much as I can, and I don't really know how I'd be able to adjust this two column set in similar form.

Excavator
Feb 6th, 2010, 09:34 AM
Hello philcoa,
Good for you for dropping the tables!
See if this will give you a start -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #fff;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 100%;
margin: 0 auto;
overflow: auto;
font-size: 0.8em;
}
#header {
height: 40px;
border-bottom: 7px solid #cdcdcd;
}
#left {
width: 25%;
min-width: 197px;
float: left;
margin: -25px 0 0 10px;
padding: 35px 10px 10px;
border-right: 7px solid #cdcdcd;
}
#content {
margin: 0 0 0 30%;
padding: 10px 10px 10px 0;
}
#footer {
height: 40px;
clear: both;
border-top: 2px solid #969696;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end left--></div>
<div id="content">
<p>
A lot of text here
</p>
<!--end content--></div>
<div id="footer"></div>
<!--end container--></div>
</body>
</html>

This has it's limitations. The way it is now, the left column needs to be the longest one or you'll lose that right border on it. Could easily be fixed the other way though.

abduraooft
Feb 6th, 2010, 09:35 AM
Looks neat when I tried it in my editor. However, I wish to keep the original cross divider solution as much as I can, and I don't really know how I'd be able to adjust this two column set in similar form. Applying a border-right to the left column or border-left to the right column with sufficient border-width would give you a basic vertical divider. However, you'd need to adopt a faux column method (http://www.alistapart.com/articles/fauxcolumns/), if you are unsure about which column would be longest.

Similarly, the top divider can also be accomplished by a border-top or applying a background-image to the header.

philcoa
Feb 6th, 2010, 10:24 AM
Hello philcoa,
Good for you for dropping the tables! See if this will give you a start ...

This has it's limitations. The way it is now, the left column needs to be the longest one or you'll lose that right border on it. Could easily be fixed the other way though.

Hi Excavator!

Thanks much for that great input! Would like to know how to get it the other way round.

Another thing are the borders/margins of the divider and the footer. Like it has a marginal to the top it should also have same space marginals at both sides and a smaller marginal at the bottom.

All "hang in the air" so to speak. Tried to adjust it with the width values, but didn't get straight throughout.

philcoa
Feb 6th, 2010, 10:36 AM
Applying a border-right to the left column or border-left to the right column with sufficient border-width would give you a basic vertical divider. However, you'd need to adopt a faux column method (http://www.alistapart.com/articles/fauxcolumns/), if you are unsure about which column would be longest.

Similarly, the top divider can also be accomplished by a border-top or applying a background-image to the header.

Thanks for telling me about faux columns, never heard of them before. The example shown looked good. However, it seems to be above what I could do at this point. Also, I wish to avoid images if I can. Something which I think that the faux method would require.

Excavator
Feb 6th, 2010, 11:05 AM
Hi Excavator!

Thanks much for that great input! Would like to know how to get it the other way round.

Another thing are the borders/margins of the divider and the footer. Like it has a marginal to the top it should also have same space marginals at both sides and a smaller marginal at the bottom.

All "hang in the air" so to speak. Tried to adjust it with the width values, but didn't get straight throughout.

Add some margins to the header and footer to stop them from going full width.
Moving the border-right from the left coloumn over the the right column as a border left makes the swap you want.
Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #fff;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 100%;
margin: 0 auto;
overflow: auto;
font-size: 0.8em;
}
#header {
height: 40px;
margin: 0 40px 0 10px;
border-bottom: 7px solid #cdcdcd;
}
#left {
width: 25%;
min-width: 197px;
float: left;
margin: 0 0 0 10px;
padding: 10px;
}
#content {
margin: -25px 0 0 30%;
padding: 35px 10px 10px;
border-left: 7px solid #cdcdcd;
}
#footer {
height: 40px;
margin: 0 40px 0 10px;
clear: both;
border-top: 2px solid #969696;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end left--></div>
<div id="content">
<p>
A lot of text here
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end content--></div>
<div id="footer"></div>
<!--end container--></div>
</body>
</html>

philcoa
Feb 6th, 2010, 11:24 AM
Add some margins to the header and footer to stop them from going full width. Moving the border-right from the left coloumn over the the right column as a border left makes the swap you want.

Thanks for that Excavator!

That was pretty much exactly what I was looking for. The only thing now would be to adjust the text in the right column to keep in line with those margins.

Also, there should be some space for text below the footer, like the original (http://monumento.bravehost.com/test1.html) had.

Excavator
Feb 6th, 2010, 07:17 PM
That was pretty much exactly what I was looking for. The only thing now would be to adjust the text in the right column to keep in line with those margins. .

Play with the padding in #content to adjust where the text limits are.

Have you tried putting any text in that footer Yet?
Just remove that height: 40px; (heights in a demo are only to show what it would look like if it had actual content) from #footer and place your text as you normally would.

philcoa
Feb 7th, 2010, 06:59 AM
Play with the padding in #content to adjust where the text limits are.

Yup, I think I can adjust that to the measures I want. I also made a new border at the right side, with same color as the background, seems to work well.


Have you tried putting any text in that footer Yet? Just remove that height: 40px; (heights in a demo are only to show what it would look like if it had actual content) from #footer and place your text as you normally would.

The more tricky part is to get these links where I want them. I used to have a table for that on the old page (http://monumento.bravehost.com/test1.html). Most of the CSS is new to me so I don't know how I can get these links likewise at opposite ends in line with the left side of the divider (not the page as a whole). I wish to avoid &nbsp; it :).

Excavator
Feb 7th, 2010, 07:17 AM
The more tricky part is to get these links where I want them. I used to have a table for that on the old page (http://monumento.bravehost.com/test1.html). Most of the CSS is new to me so I don't know how I can get these links likewise at opposite ends in line with the left side of the divider (not the page as a whole). I wish to avoid &nbsp; it :).

Try float:left; and float:right; then margin them into place. Remember that a width is needed to float an element.
Put text-align:center; on #footer to center the other links.

philcoa
Feb 7th, 2010, 08:34 AM
Try float:left; and float:right; then margin them into place. Remember that a width is needed to float an element. Put text-align:center; on #footer to center the other links.

OK. Actually it's only these two links below the footer. The rest of the stuff are ads at bravehost.

About the coding, would it work with inliners or should I use something like class tags? I'm happy if you could exemplify.

Excavator
Feb 7th, 2010, 08:47 AM
About the coding, would it work with inliners or should I use something like class tags?

Inline code is probably ok for something you're only going to do one time but you are likely to have plenty of floats before you're done here so you might as well make a class and plan on re-using it.

In this example, I've given them classes to float them. They get their widths and margins from the separate id's I gave them -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #fff;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 100%;
margin: 0 auto;
overflow: auto;
font-size: 0.8em;
}
#header {
height: 40px;
margin: 0 40px 0 10px;
border-bottom: 7px solid #cdcdcd;
}
#left {
width: 25%;
min-width: 197px;
float: left;
margin: 0 0 0 10px;
padding: 10px;
}
#content {
margin: -25px 0 0 30%;
padding: 35px 10px 10px;
border-left: 7px solid #cdcdcd;
}
#footer {
margin: 0 40px 0 10px;
clear: both;
border-top: 2px solid #969696;
text-align: center;
}
#footerIn {
clear: both;
margin: 50px 0 0 0;
text-align: center;
}
#top {
width: 100px;
margin: 0 0 0 30%;
}
#home {
width: 100px;
margin: 0 25px 0 0;
}
/*--------------------------------------*/
/*------------classes-------------------*/
.floatL {float: left;}
.floatR {float: right;}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left">
<p>
Lorem ipsum dolor sit amet.
</p>
<!--end left--></div>
<div id="content">
<p>
A lot of text here
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!--end content--></div>
<div id="footer">
<a href="#top" class="floatL" id="top">TOP</a>
<a href="../../index.html" class="floatR" id="home">HOME</a>
<div id="footerIn">
<a href="http://www.bravenet.com/webhosting/" style="font: 11px tahoma, sans-serif; color: #004891;">Web Hosting</a>
&middot;
<a href="http://www.bravenet.com/webtools/journal" style="font: 11px tahoma, sans-serif; color: #004891;">Blog</a>
&middot;
<a href="http://www.bravenet.com/webtools/guestbook/" style="font: 11px tahoma, sans-serif; color: #004891;">Guestbooks</a>
&middot;
<a href="http://www.bravenet.com/webtools/forum/" style="font: 11px tahoma, sans-serif; color: #004891;">Message Forums</a>
&middot;
<a href="http://www.bravenet.com/webtools/elist/" style="font: 11px tahoma, sans-serif; color: #004891;">Mailing Lists</a>
<br />
<a href="http://viviti.com/" style="font: 11px tahoma, sans-serif; color: #004891;" rel="nofollow">Easiest Website Builder ever!</a>
&middot;
<a href="http://resources.bravenet.com/bravenet_toolbar" style="font: 11px tahoma, sans-serif; color: #004891;">Build your own toolbar</a>
&middot;
<a href="http://www.bravenet.com/webtools/sitepal/" style="font: 11px tahoma, sans-serif;color: #004891;" rel="nofollow">Free Talking Character</a>
&middot;
<a href="http://www.bravenet.com/webtools/elist/" style="font: 11px tahoma, sans-serif; color: #004891;">Email Marketing</a>
<br />
<a href="http://www.bravenet.com" style="text-decoration: none; color: #004891; font: bold 10px tahoma, sans-serif; display:block; padding-top: 10px;">
powered by <img src="http://assets.bravenet.com/bravenet/images/poweredby.gif" alt="a free webtools company" style="vertical-align: middle;" /> bravenet.com</a>
<!--end footerIn--></div>
<!--end footer--></div>
<!--end container--></div>
</body>
</html>

philcoa
Feb 7th, 2010, 02:39 PM
Inline code is probably ok for something you're only going to do one time but you are likely to have plenty of floats before you're done here so you might as well make a class and plan on re-using it.

In this example, I've given them classes to float them. They get their widths and margins from the separate id's I gave them...

Thanks Excavator, that was helpful indeed!

What I'm struggling with now is the seemingly simple thing to get the vertical divider staying 'locked' to the footer no matter how little text on the page (it follows the text presently). Had it first but then lost it during coding! Is there a simple way to have it staying there for good? A wrap or nowrap something?

Thanks much again!

Excavator
Feb 7th, 2010, 05:55 PM
What I'm struggling with now is the seemingly simple thing to get the vertical divider staying 'locked' to the footer no matter how little text on the page (it follows the text presently). Had it first but then lost it during coding! Is there a simple way to have it staying there for good? A wrap or nowrap something?



Let's have a look at the current version of your code. Do you have a test site up yet?

philcoa
Feb 8th, 2010, 07:01 AM
Let's have a look at the current version of your code. Do you have a test site up yet?

This testpage is demonstrating the problem:

http://monumento.bravehost.com/test2.html

All I want basically is to have that vertical divider stuck on the footer. No matter what amount of space used in the columns.

Added to this I would like to have the 'top' and 'home' links right below and in line with the text in the main (right) column. Tried to adjust it by changing margins etc but they won't lie exactly where I want them.

I'm pretty sure you have a plausible sulution or advice, so I say thanks in advance!

PS. Is this correct coding, one can mix percentage and pixels?


#top {
width: 100px;
margin: 0 0 0 30%;
}
#home {
width: 100px;
margin: 0 25px 0 0;
}

abduraooft
Feb 8th, 2010, 08:04 AM
All I want basically is to have that vertical divider stuck on the footer. No matter what amount of space used in the columns. Take a look at the liquid faux column (http://www.communitymx.com/content/article.cfm?cid=afc58) method. You could make a horizontal strip of 5px(1px is enough) height with a white or transparent background and a small gray cut at the left. Then apply ut as the background of the container and add a suitable background position.

Excavator
Feb 8th, 2010, 10:05 AM
All I want basically is to have that vertical divider stuck on the footer. No matter what amount of space used in the columns.

In the first version I gave you, the longest column needed to be the left one.

We fixed that so the right column would hold more text but you don't have enough text in there for it to be taller than the left column.
Add more content to that right column and it will extend the center divider.
To show more graphically what's happening, put a background color on it like this -

#content {
border-left:7px solid #cdcdcd;
border-right:50px solid #FFF;
margin:-28px 0 0 30%;
padding:45px 30px 15px 35px;
background: #00f;
}


If you want the divider to follow either column, no matter which one has the most content, then faux columns is how you'll need to do it. Look at my faux columns demo (http://nopeople.com/CSS/faux_columns/index.html), abduraooft's link or google it for lots more examples.

philcoa
Feb 8th, 2010, 12:34 PM
Thanks for the infos, Excavator as well as abduraooft.


In the first version I gave you, the longest column needed to be the left one.

By way of simplicity the left column solution would be the best as that will be the column which mostly would have the most content. I try to get that back now, but it's not that easy for me.


If you want the divider to follow either column, no matter which one has the most content, then faux columns is how you'll need to do it. Look at my faux columns demo (http://nopeople.com/CSS/faux_columns/index.html), abduraooft's link or google it for lots more examples.

That faux coding is interesting but definitely above my present level. Working with images also gives some flashbacks from the spacer gifs days. However, I did try to make a cube-like .jpg file and got that principle right, it does follow whichever column has the most content. Yet to get exactly what I wish on the page is another topic altogether.

Thanks for bearing with me so far, I understand you if you don't by now :;)

Excavator
Feb 8th, 2010, 05:18 PM
Good morning philcoa,


By way of simplicity the left column solution would be the best as that will be the column which mostly would have the most content. I try to get that back now, but it's not that easy for me.
You have my original example to go off of, all that needs done is a couple lines of CSS to be changed. You'll get a much better understanding of how your page works by taking it apart and putting it back together yourself.
Keep in mind your only moving a border from one div to another. You will also need that negative margin to pull the div up and the padding to push the text inside it down.

That faux coding is interesting but definitely above my present level. Working with images also gives some flashbacks from the spacer gifs days.
It shouldn't. Spacer divs are useless extra markup where faux columns is accomplishing something that can't be done by CSS.

philcoa
Feb 9th, 2010, 06:24 AM
Good evening, Excavator.


You have my original example to go off of, all that needs done is a couple lines of CSS to be changed. You'll get a much better understanding of how your page works by taking it apart and putting it back together yourself. Keep in mind your only moving a border from one div to another. You will also need that negative margin to pull the div up and the padding to push the text inside it down.

OK. I'll keep trying a little more.

Then again, my other question: can you combine % and px in the same tags? Like this:


#top {
width: 100px;
margin: 0 0 0 30%;
}
#home {
width: 100px;
margin: 0 25px 0 0;
}

I ask since I like to use % when I can, if you use high numbers of px it might look different depending upon screen resolution.

Excavator
Feb 9th, 2010, 06:47 AM
It's not like using % and px is invalid or anything... I hate % layouts myself. If it works and resizes the way you want, then it's fine. If it doesn't act right then you'll need to try another approach.