3 replies [Last post]
drdopamine
drdopamine's picture
Offline
newbie
Charleston, SC
Last seen: 11 years 2 weeks ago
Charleston, SC
Timezone: GMT-4
Joined: 2011-06-18
Posts: 3
Points: 4

Hey, I'm having a problem with my sidebars that contain all the links on my page. The CSS and HTML are both valid (except some alt tags I didn't put in images and few other things I was too lazy to fix).

I have a "container" div that contains everything and four divs with content. I have a header, a main div with all the content, and two sidebars with links that are fixed as you scroll down the page.

The problem is, when I shrink my browser window it cuts off some of the links on the side. I set them to overflow:scroll to see if that would work and the scrollbars show up, but it doesn't even seem to register that there it's overflowing.

Basically what I want to do is have the window scroll down to the bottom of the sidebar, as if it were positioned absolutely, but then when the window hits the bottom of the div the sidebar remains fixed to the side and moves down with the content.

As I'm typing this it's seeming more and more impossible with CSS. XD But if anyone has any suggestions please let me know! I might have to resort to a menu at the top or use javascript (which I'm terribly unfamiliar with) but before I do that I want to make sure it's not possible.

Here's the site: http://www.drdopamine.com/drdiction/content.php?type=Home

Here's the CSS (just in case):

html, body { height:100% }
body.black { background-color:black; color: white}
body.white { background-color:white}
 
/*This is the most relevant stuff */
 
div.container { position:relative}
div.main{ overflow:auto; position:absolute;left:180px;right:180px;top:150px;z-index:2;background-color:white;border:solid white 10px }
div.left{ overflow:scroll; position:fixed;width:180px }
div.right{ overflow:scroll; position:fixed;width:180px;right:0;text-align:center;background-color:black }
div.header{background-color:black}
 
/* ^^^ */
 
div.center { text-align:center }
div.fontblack  { color:#000000 }
div.fontwhite { color:white }
div.fontblack { color:#4A4344 }
div.tit { font-size: 4em }
div.subtit { font-size: 2.5em }
div.serif  { font-family: ‘Lucida Console’, Monaco, monospace }
div.sans { font-family: ‘Arial Black’, Gadget, sans-serif }
div.content { font-family: Verdana, Geneva, sans-serif; font-size: 1em; line-height:1.5em}
div.links { font-family: Verdana, Geneva, sans-serif; font-size: 1em }
div.justify { text-align:justify }
div.bold { font-weight: bold }
 
 
img.right {padding-left:10px; float: right}
img.left{padding-right:10px; float: left}
img.logo{height:120px; width:160px}
 
 
a.home:link { text-decoration: none; color: white }
a.home:visited { text-decoration: none; color: white }
a.home:active { text-decoration: none; color: #00FF00 }
a.home:hover { text-decoration: none; color: black; background-color: white; font-size: 1.2em }
a.main:link { text-decoration: none; color: black }
a.main:visited { text-decoration: none; color: black }
a.main:active { text-decoration: none; color: #00FF00 }
a.main:hover { text-decoration: none; color: white; background-color: black }
 
a.strip:link {text-decoration:none; color:black}
a.strip:visited {text-decoration:none; color:black}
a.strip:active {text-decoration:none; color:black}
a.strip:hover {text-decoration:none; color:black}

And here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<?php //the doc is
$thedocis = " (Offline)";
?>
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>Dr.Diction - Freelance Writer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=6.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=6.0)" />
 
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
 
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
	newwindow=window.open(url,'Chat','height=475,width=650');
	if (window.focus) {newwindow.focus()}
	return false;
}
 
// -->
</script>
 
<?php
include('functions.php');
if (isset($_GET['type']))
{
	$type = $_GET['type'];
	if($type=="Home")
	{
		$sql = "SELECT * FROM content WHERE main = 'y' ORDER BY id DESC;";
		$header = "<div class='center sans' style='font-size:3em;color:white;background-color:black;'>Home</div><hr />";
	}
	else
	{	
		$sql = "SELECT * FROM content WHERE type = '$type' ORDER BY id ASC;";
		if ($type=="Miles")
		{
			$header = "<div class='center sans' style='font-size:3em;color:white;background-color:black;'>Miles to Nowhere</div><hr />";
		}
		else
		{
			$header = "<div class='center sans' style='font-size:3em;color:white;background-color:black;'>".$type."</div><hr />";
		}
	}	
}
else
{
	$id = $_GET['id'];
	$sql = "SELECT * FROM content WHERE id = '$id' ORDER BY id DESC;";
	$header = "";
}
 
$query = mysql_query($sql,$connect) or die(mysql_error());
 
 
$qsql = "SELECT * FROM quotes ORDER BY RAND(NOW()) LIMIT 1;";
$qquery = mysql_query($qsql,$connect) or die(mysql_error());
 
?>
 
</head>
 
 
<body class="black">
<div class="container" style="height:100%;width:100%;background-color:black;z-index:1">
 
 
<div class="header" style="position:absolute;left:0px;width:100%;z-index:3;">
<div>
<a href="content.php?type=Home"><img src="images/penvsword.jpg" class="logo left" style="position:fixed;z-index:3;" /></a>
<a href="content.php?type=Home"><img src="images/penvsword.jpg" class="logo right" style="position:fixed;right:10px;" /></a>
<div class="tit center sans" style="color:white;z-index:4">
B r a d &nbsp; C o o p e r
</div>
<div class="subtit center serif fontwhite" style="z-index:4">
Freelance Writer
</div>
</div>
</div>
 
<br />
<div class="right fontwhite links" style="z-index:2">
 
<br /><br /><br /><br /><br /><br /><br /><br /><br />
 
<div>
<a href="chat.php" class="home" onclick="return popitup('chat.php')">Chat With Brad
<?php echo $thedocis; ?></a>
<br /><br /><br /><br /><br /><br />
</div>
 
<div>
<a rel="shadowbox;width=440px;height=440px;" class="home" href="mail.php">Leave a message</a>
<br /><br /><br /><br /><br /><br />
</div>
 
<div>
<a rel="shadowbox;width=350px;height=200px" class="home" href="card.php">Business Card</a>
<br /><br /><br /><br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Influences" class="home" href="card.php">Influences</a>
<br /><br /><br /><br /><br /><br />
</div>
 
</div>
 
<div class="main">
 
<?php echo $header ?>
 
<br /><br />
 
<?php
while ($content = mysql_fetch_array($query))
{
	$title = $content['title'];
	$body = $content['body'];
	$id = $content['id'];
	?>
	<div class="subtit fontblack center bold serif">
	<?php echo "<a href='content.php?id=$id' class='strip'>".$title."</a>"; ?>
	</div>
	<br /><br />
 
	<div class="content fontblack sans">
	<?php echo $body; ?>
	</div>
	<br /><br />
	<hr />
	<br/>
	<?php 
}
 
$qarray = mysql_fetch_array($qquery);
$quote = $qarray['quote'];
$author = $qarray['author'];
?>
 
<div class="center fontblack sans" style="font-size:.75em;">
<?php echo $quote; ?>" -<?php echo $author; ?>
</div>
 
</div>
 
<div class="left center fontwhite links" style="z-index:2;">
 
<br /><br /><br /><br /><br /><br /><br />
 
<div>
<a href="content.php?type=Home" class="home">Home</a>
<br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Journalism" class="home">Journalism</a>
<br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Miles" class="home">Miles to Nowhere</a>
<br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Screenplays" class="home">Screenplays</a>
<br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Poetry" class="home">Poetry</a>
<br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Fiction" class="home">Fiction</a>
<br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Philosophy" class="home">Philosophy</a>
<br /><br /><br />
</div>
 
<div>
<a href="content.php?type=Cooking" class="home">Cookbook (with videos)</a>
<br /><br /><br />
</div>
 
</div>
 
 
</div>
</body>
</html>

drdopamine
drdopamine's picture
Offline
newbie
Charleston, SC
Last seen: 11 years 2 weeks ago
Charleston, SC
Timezone: GMT-4
Joined: 2011-06-18
Posts: 3
Points: 4

P.S.

I set the side divs to overflow:scroll to show what I'm talking about. I usually have them at overflow:auto and get the same result (obviously just without the scrollbar).

And if you click on the "Miles to Nowhere" link you'll know what I mean by the necessity of having fixed links, because I plan to have a lot of written content on this page.

Thanks in advance if anyone can help!

drdopamine
drdopamine's picture
Offline
newbie
Charleston, SC
Last seen: 11 years 2 weeks ago
Charleston, SC
Timezone: GMT-4
Joined: 2011-06-18
Posts: 3
Points: 4

Fixed

I'm not sure how to delete this post but I just decided to put a fixed menu at the top. The site link is different now. Still though, if anyone wants to take a look at the code or give me a general theoretical approach to what I was trying to do it would still be much appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Learning experience?

There is no good reason to delete a post/thread such as this. Other people with a similar, or the same issue will benefit from your experience. A forum such as this develops, over time, an institutional memory; one you are free to search.

And, speaking of similar issues …. See my response to this thread.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.