Dividers in a CSS layout [Archive]

Cheerio

08-15-2007, 09:43 PM

Hi all,

I'm in the process of creating my third website, for a club I'm in at school, and am using CSS (instead of a table) for the first time. I have encountered 2 challenges so far:

(1) I would like to have a dotted line dividing my content from a side bar. I tried to do this by creating 3 divs; one for the content, one for the divider, and one for the side bar, then placing these all in a container div. I then set the height of them all to 100%. I thought that this would mean they would all be the same height, allowing the dotted line background in the divider div to tile downwards as far as it needs.

The dotted line image, however, only appears once, so there is effectively no divider.

I've attached a screenshot as my site as it is right now -- you can see how a small portion of dotted line is there, but doesn't tile to fit the content on either side.

I hope I'm not missing something painfully obvious, and apologize if I am, but if anyone can help me to achieve the effect I'm looking for, it would be greatly appreciated!

Thanks in advance :)

Below is what I have for my style sheet:

<style type="text/css">

A:active { text-decoration: none;
color: #F44E0F; }

A:hover { text-decoration: underline;
color: #F44E0F; }

A:link { text-decoration: none;
color: #F44E0F; }

A:visited { color: #F44E0F;
text-decoration: none; }

h1 { font-family: calibri, trebuchet ms;
color: #F44E0F;
font-size: 16;
font-weight: normal }

h2 { font-family: calibri, arial narrow;
color: black;
font-size: 16;
font-weight: normal }

td { padding: 0px; }

#container { width: 747px; }

#title { background-color: red
width: 747px;
height: 232px;
padding-bottom: 0px; }

#links { padding-top: 0px;
padding-bottom: 0px;
spacing: 0px;
width: 747px;
font-family: calibri, trebuchet ms; }

#content { font-family: calibri, trebuchet ms;
width: 521px;
float: left;
padding-left: 6px;
height: 100% }

#divider { background-image: url('Images/divider.gif');
background-repeat: repeat;
width: 3px;
float: left;
height: 100% }

#sidebar { padding-left: 6px;
padding-top: 6px;
font-family: calibri, trebuchet ms;
color: #CCCCCC;
width: 223px;
float: left;
height: 100%; }

#footer { width: 747px;
font-family: calibri, trebuchet ms;
color: #CCCCCC; }

</STYLE>

The following is the HTML for the home page:

<HTML>

<HEAD>
<TITLE>THE ATRIUM: The Official Student Magazine of Laurier's SBE</TITLE>
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
</HEAD>

<BODY>


<DIV ID="title">
<IMG SRC="Images/title.gif" width="747" height="232" VSPACE=0>
</DIV>


<DIV ID="links">
<TABLE>
<TR HEIGHT=20>
<TD WIDTH=95>      <A HREF="index.html">Home</A></TD>
<TD WIDTH=119><A HREF="aboutus.html">About Us</A></TD>
<TD WIDTH=90><A HREF="staff.html">Staff</A></TD>
<TD WIDTH=155><A HREF="photogallery.html">Photo Gallery</A></TD>
<TD WIDTH=113><A HREF="archives.html">Archives</A></TD>
<TD WIDTH=140><A HREF="getinvolved.html">Get Involved</A></TD>
<TD WIDTH=140><A HREF="contactinfo.html">Contact Info</A></TD>
<TD WIDTH=113><A HREF="sitemap.html">Site Map</A></TD>
</TR>
<TR><TD COLSPAN=8>
<IMG SRC="Images/doubleline.gif" HSPACE="0" VSPACE="0" width="747" height="6"></TD</TR></TABLE>
</DIV>

<DIV ID="container">


<DIV ID="content">
<IMG SRC="Images/featurephotohome2.gif" width="514" height="299">
<BR>
<FONT COLOR=#CCCCCC>August 26, 2007</FONT>
<H1>ATRIUM INFORMATION DURING ORIENTATION WEEK</H1>
The <I>Atrium</I> will be very active during Orientation week. First years -- stop by our information kiosk that will be set

up in the SBE Atrium. Also look out for us in the SBE clubs and "Find Your Fit" information sessions!
Looking forward to your involvement!
<BR>- The Atrium Staff

</DIV>


<DIV ID="divider">
</DIV>


<DIV ID="sidebar">

<FONT COLOR=black>JOIN THE MAILING LIST</FONT>
<BR>
Sign up to recieve a monthly update on <I>Atrium</I> activity.


<form method="post" enctype="multipart/form-data" action="http://pub2.bravenet.com/emailfwd/senddata.php">
<input type="hidden" name="usernum" value="128184790">
<input type="hidden" name="cpv" value="2">


<table border="0" cellpadding="0" cellspacing="3" align="left" WIDTH=210>
<tr>
<td colspan=2>
<label for="FullName" style="float:left;width:50px;"><FONT COLOR="#CCCCCC">Name:</FONT></label><input type="text"

name="FullName" id="FullName" value="" maxlength="" style="width:150px;">
</td>
</tr>
<tr>
<td colspan=2>
<label for="YourEmail" style="float:left;width:50px;"><FONT COLOR="#CCCCCC">Email:</FONT></label><input type="text"

name="YourEmail" id="YourEmail" value="" maxlength="" style="width:150px;">
</td>
</tr>

<tr HEIGHT=20>
<td align="right">
<input type="submit" value=" Submit ">
<input type="reset" value=" Reset ">
</td>
</tr>
</table>
</form>


<BR>
<BR>
<BR>
<BR>
<BR>
<BR>

<FONT COLOR=black>HOT ISSUES</FONT>
<BR>
There are no new submissions.
<BR>
<BR>

<A HREF="calendar.html"><FONT COLOR=black>CALENDAR</FONT></A>
<BR>
Click <A HREF="calendar.html"><FONT COLOR="#CCCCCC">here</FONT></A> for an overview of upcoming events in the SBE.
<BR>
<BR>

<FONT COLOR="black">POLL OF THE WEEK</FONT>
<BR>
<I>Should more economics courses be required for the completion of an Honours BBA degree?</I>
<BR>
<BR>

<FONT COLOR="black">LAST WEEK'S POLL RESULTS</FONT>
<BR>
<I>Should the SBE Student Life Levy be a mandatory payment?</I>
<BR>
83% said <B>no</B>
<BR>
17% said <B>yes</B>
<BR>
<BR>

<FONT COLOR=black>PERSONAL SBE EXPERIENCE</FONT>
<BR>
<BR>

</DIV>

</DIV>

<DIV ID="footer">
<P ALIGN="center">(c) 2007</P>
</DIV>

</BODY>

</HTML>

(2) One more thing: I've used CSS before to change the appearance of my links, but never encountered this before. The links work/appear as expected until a link is visited. As soon as a link is visited, it won't show the underline when hovered over. So everytime you visit a page on the site, the hover effect for that link stops appearing.

My stylesheet looks no different than it has before, so I'm at a loss. Any suggestions are appreciated.

Thank you!!

Centauri

08-16-2007, 07:47 AM

A number of wrong assumptions here, as you are still looking at things from the table layout perspective. The individual divs' height is 100% - but 100% of what? - No height has been assigned to the container div, so there is no height to reference 100% from.

Instead of trying to force the divs to be equal length, you just have to make it look like they are. If you forget about a divider div, and float the #content and #sidebar divs beside each other, you can assign the dotted line graphic as a background to the #container div. As both the inside divs are floated, you also need to "clear" those floats. #container {
width: 747px;
background-image: url('Images/divider.gif');
background-repeat: repeat-y;
background-position: 522px top;
overflow: hidden;
}
#content {
font-family: calibri, "trebuchet ms";
width: 516px;
float: left;
padding-left: 6px;
}
#sidebar {
padding-left: 6px;
padding-top: 6px;
font-family: calibri, "trebuchet ms";
color: #CCCCCC;
width: 219px;
float: left;
}

Note also that total width is set width plus padding (plus borders plus margins), hence the adjustment to widths above.

The next big problem is NO DOCTYPE - A valid doctype should be the first thing on a page (I recommend html 4.01 strict). You won't get any sort of cross-browser compatability without a valid doctype.

For your second question - think L O V E H A T E - the css psuedo class order should be link, visited, hover, active.

And you should be able to get rid of that table and mark up the menu for what it is - an unordered list of links.

Cheerio

08-19-2007, 09:33 PM

Thanks a lot for your help, Centauri.

That pneumonic device was pretty neat -- I didn't know the different types of links in the style sheet had to go in a certain order, but I certainly won't forget it now :) .

Thanks also for your suggestions with my divider issue. I did revise the code in my stylesheet and the HTML, but am still not quite achieving the look I was hoping for. When I made the changes on the home page, the divider showed up where it was supposed to be, and repeated itself vertically, which was great! but then the page cut itself off midway through the picture featured in #content. It was quite odd, actually -- like someone had just sliced away the bottom 2/3rds of the screen.

So I tried applying the same changes to a different page in the site, the About Us page (which has the same layout and code as the home page, just a different picture) to see if the same thing would happen. When I did this, it had a different effect. The grey dotted line didn't appear, but the rest of the page appeared as expected.

I am a bit stumped... if you have any ideas, it would be greatly appreciated.

Also, thanks for pointing out that DOC TYPE ommission! I have now added it in to all the pages in the site :) .