PDA

View Full Version : need help 'locking' table


bramble
04-09-2008, 10:32 PM
Hello

I am an novice to intermediate when it comes to html and css. I designed this page in Dreamweaver with a preexisting template as a guide. 1 header. Table in the middle for main content and two side modules. I am trying to 'lock' the header (which includes hyperlinks) so that it does not scroll with the middle main table and the side tables. This is all I'm trying to do. If some one could please help me, I would be forever grateful.

Here is the link to my page I'm working on:
http://www.showlistportland.com/dbtest2.html

Here is my code for the page:

Please help me out!! Thank you so much!


<!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=UTF-8" />
<title>PORTLAND, OR Showlist</title>
<style type="text/css">
<!--
body {
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #FFFFFF;
background-image: url(showlistportlandbkgd.jpg);
background-attachment: fixed;
background-position:center top;
background-repeat:no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.thrColAbsHdr #container {
position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
width: 780px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px none #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: transparent;
}

/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
*/
.thrColAbsHdr #header {
height: 150px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: transparent;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
}
.thrColAbsHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 74px;
left: -208px;
width: 146px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
font-family: "Andale Mono";
background-color: transparent;
font-size: 14px;
font-style: normal;
font-weight: normal;
}
.thrColAbsHdr #sidebar2 {
position: absolute;
top: 67px;
right: -208px;
width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: transparent;
}
.thrColAbsHdr #mainContent {
margin-top: 20;
margin-right: 200px;
margin-bottom: 0;
margin-left: 200px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
top: 100px;
}
.thrColAbsHdr #footer {
padding: 0 10px 0 20px;
background-color: #FFFFFF;
}
.thrColAbsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.style2 { font-family: "Andale Mono";
}
a {
font-size: 14px;
color: #333333;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #CC6666;
}
a:active {
text-decoration: none;
}
.style10 {
font-size: 16px;
color: #000000;
font-weight: bold;
}
.style12 {
font-style: italic;
color: #33CC33;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbsHdr #sidebar1 { width: 180px; }
.thrColAbsHdr #sidebar2 { width: 190px; }
</style>
<![endif]--></head>

<body class="thrColAbsHdr">

<div id="container">
<div id="header">
<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="archives.htm" target="_self">archives</a> - <a href="venues.htm" target="_self">venues</a> - <a href="disclaimer.htm" target="_self">disclaimer</a> - <a href="showlistportland/links.htm" target="_self">links</a> - <a href="index.html" target="_self" class="style12">list!</a></p>
</div>
</div>
<div id="sidebar1">
<em><a href="advertising.htm" target="_blank">Advertise Here</a> </em>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>
<script type="text/javascript"><!--
google_ad_client = "pub-4504237886175255";
//200x90, created 1/7/08
google_ad_slot = "9211859184";
google_ad_width = 200;
google_ad_height = 90;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</h3>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<p class="style2"><span class="style10">Monday, Jan 28</span><br />
</p>
<pre class="style2"><a href="http://www.liarsliarsliars.com">LIARS</a>, <a href="http://www.myspace.com/nonoage">NO AGE</a> @ <a href="http://www.wonderballroom.com">Wonder Ballroom</a>
9pm, $16/door
<a href="http://www.funbags.com">FUN BAGS</a> @ <a href="http://www.kellysolympian.com">Kelly's Olympian
</a>10pm, $8<span class="style10"></span><br /><br /><span class="style10">Tuesday, Jan 29</span>
aa
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
aa
a
a
a
a
atest<br />
<br />
</pre>
<p class="style2">&nbsp;</p>

<pre class="style2"></pre>
<h1>&nbsp;</h1>
<!-- end #mainContent --></div>
<div id="footer">
<p>&nbsp;</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

bramble
04-09-2008, 11:05 PM
PS I'm also trying to make it so where there's the text, "Monday, Jan 28" starts.. I'm hoping I can have that scroll and disappear just below the links/navbar above. Any help would be greatly appreciated.

bramble
04-12-2008, 04:58 PM
:bump: Anyone have any ideas on this?? It's driving me crazy! I can't figure it out- Thanks-

domedia
04-13-2008, 10:38 PM
http://www.showlistportland.com/dbtest2.html
header seem to be fixed now.

bramble
04-13-2008, 11:00 PM
No. I haven't fixed it yet. Still can't figure it out.

This is the "header":
archives (http://www.showlistportland.com/archives.htm) - venues (http://www.showlistportland.com/venues.htm) - disclaimer (http://www.showlistportland.com/disclaimer.htm) - links (http://www.showlistportland.com/showlistportland/links.htm) - list! (http://www.showlistportland.com/index.html)

I want that header/links to remain still and not scroll with the rest of the site. But, the side columns, and middle main content, I want to scroll. As well as the middle main content to vanish just below the links above if possible.




Any ideas??????:confused:




(http://www.showlistportland.com/index.html)



(http://www.showlistportland.com/index.html)

domedia
04-14-2008, 05:00 PM
position: fixed in CSS is what you are looking for.
So for the paragraph that has you main navigation, append a style attribute like this:
<p style="position: fixed">[your header links]</p>

bramble
04-14-2008, 06:18 PM
Thanks domedia!

Now, my other question was;

How can I make the "main center content" div (i.e. Monday, Jan 28, etc..) disappear/fade out just underneath the paragraph that has my main navigation links??

Thank you!!!!:confused:

domedia
04-15-2008, 01:50 PM
That's a complete different technique I think.. you should have said something about that earlier :)
You probably want to look into the Catfish approach, just switch top and bottom:
http://www.sitepoint.com/blogs/2005/10/18/the-catfish-part-1/

bramble
04-21-2008, 07:15 PM
I did say something about that earlier.. In post #2.

The Catfish approach looks interesting, will give it a try..

But, isn't there just an easier way, like implementing a margin at the top for the middle main div or something??

Here is my new testing page: http://www.showlistportland.com/dbtest3.html

bramble
04-25-2008, 01:02 AM
:bump:

Does anyone possibly have a simpler (css?) approach?

This is the page we're looking at:
http://www.showlistportland.com/dbtest3.html

I need "Monday, January 28" etc. info in main column to disappear just underneath the main navigational links.

Any help would be GREATLY appreciated!!!

Thanks!

edbr
04-25-2008, 01:34 AM
not sure what you want. do you mean so the content scrolls?
if so make a container div with overflow scroll, the a child (relative) div inside it with height larger than the parent

bramble
04-25-2008, 02:59 AM
Notice how the main middle div content (i.e. Monday, Jan 28 etc) scrolls off the page, over the nav links and the main "SHOWLIST PORTLAND" graphic header? - (http://www.showlistportland.com/dbtest3.html)

I need that main middle div info to not scroll across the navs and off the page, but to vanish just below the navigation links (i.e. "archives - venues - disclaimer - links - list!").

How do I achieve this?

edbr
04-25-2008, 03:47 AM
still a bit lost sorry.
I would think you just need a 3 column layout. for ex sections(divs):

#header for your banner
#content to hold main section
inside this three divs
#left (floated left,width set,relative)
#middle (floated left,width set,relative)
#middle (floated left,width set,relative, cleared right)
#footer
Or then agaain i might have got it completely wrong as to what you want:)

bramble
04-27-2008, 07:40 PM
:bump:

I honestly am not sure how to be any more clear than I was in post #12.

Sum up: I want the main middle content div (i.e. Monday, Jan, etc..) to disappear UNDERNEATH the top div (archives - venues - disclaimer - links - list!) instead of scrolling over it.

On this page: http://www.showlistportland.com/dbtest3.html

Thanks!

bramble
04-29-2008, 11:57 PM
:bump:

Anyone else have any ideas to my post #14?
This is driving me crazy. It seems some sort of css positioning mixed with a scroll would work, but I can't figure it out.

Thanks!!!

domedia
04-30-2008, 04:04 PM
I gave you a link earlier to how this can be done.

Rob_Che
04-30-2008, 04:21 PM
The Catfish approach looks interesting, will give it a try...

Did you? have you tried anything other than post the same question again?
I can't see (looking at your page) that you've tried anything...

Getting angry that noone has replied is a little unfair when the answers have been given but you havent acted on them.

What have you tried so far - how far have you got ?

Rob

domedia
04-30-2008, 05:04 PM
I used the catfish approach a while ago on this website:
http://twurl.nl/8nad7q

Worked like a dream imho

bramble
05-04-2008, 04:45 AM
Thank you everyone for your help. I have received help on here before and you guys are always awesome. I appreciate you taking the time to help noobs. I apologize if I seemed "angry".

I went with a simpler approach instead. I just inserted a fixed image map as the top nav so that the main center content scrolled underneath this image.

Thanks again for all your help! It is valued.

Rob_Che
05-04-2008, 10:06 AM
Glad you got it sorted...