SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 25
-
Aug 2, 2004, 13:06 #1
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Head, foot, right-nav fixed, fluid content?
I have my site home page working with three columns, spaced by % (adapted from FU2K.org 3Col_NN4_FMFM). The left two columns are actually in one div, so the remaining pages use that div without three total columns. Here is a simplified version of the basic code:
www.zepfanman.com/temp/emcol.php
I would like to make two main changes:
(1) Fixed-width nav (right-column) instead of percentage (preferably around 9em).
(2) Hide Nav/Show Nav toggle like in SitePoint. I'd really only like this if it's not too complicated. I have yet to work on a "Print" format icon (just a different CSS template?) that I'd like to do for each page, so that might be as good as the Nav toggle.
* I want to be able to fix my CSS document and leave the content .php files the same, i.e. ordered as header, content, nav.
(3 - low priority) The following code seemed to be buggy as it made IE freeze after some font resizing. Is there an easy way to set it up where the fluid layout stops at the point where the browser window is too small to fit the text (eg. depending on the size of the text, if the browser window is, say, less than 600px, the formatting starts to drop all over the page making the content virtually illegible). Min-width:600 equivalent?
Code:.box-wrap { width:expression(document.body.clientWidth < 600? "599px": "auto" );}
~ Zepfanman.com: When you can't find it on Google
-
Aug 2, 2004, 13:15 #2
- Join Date
- Jul 2004
- Location
- Central Coast, CA
- Posts
- 321
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Lucky for you, someone already has done this
All you need to do is add in a footer, and remember to put in clear:both; into it so it stays at the bottom.
Also, you said you wanted fixed width, but gave a percentage-based unit (em). Nonethless, just set it in pixels - width:200px;
2- This is pretty easy, all you're going to have to find some javascript that basically says "when this object is clicked, set this class to my right nav. Then in that additional class put in display:none;
3- unfortunately this isn't supported (semantically) with any method. What I would advices is including a spacer gif (I know, I almost puked) the minimum width. That way your page remains that size when shrunk down to accomidate the wide spacer gif.
I've oversimplified all my explinations... let me know if you don't understand what I'm getting at.Studio Rockstar's Blog - A journey to quitting the dayjob.
-
Aug 2, 2004, 13:35 #3
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Brak
I'll try out 2 & 3 later on. 1 is my biggest problem for now....
-
Aug 2, 2004, 13:49 #4
- Join Date
- Jul 2004
- Location
- Central Coast, CA
- Posts
- 321
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I made this REALLY quickly, so it's got a lot of issues, but it should give you the jist of it. Also, you'll have to implement faux columns (search on google for the ALA article).
http://www.neathdesign.com/resources/magic.htmlStudio Rockstar's Blog - A journey to quitting the dayjob.
-
Aug 3, 2004, 03:38 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
If you use expressions then you need to use the appropriate script for quirks mode or standards mode as there are differences otherwise your code does freeze the browser.
I believe this will work for standards mode whereas the code you were using was for quirks mode (but js isn't my area).
Code:.box-wrap {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );}
You could float the right column and give it a width and let the left be fluid but you would have to change the order of the html which I believe you didn't want to do.
Anyway I've put all the above into the file below so you can mess around with it. The columns will hide now and the min-width is applied for ie. (If you copy the format then you can use it for the other expressions that you wanted.)
Code:<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>emcol</title> <style type="text/css"> /*.box-wrap { width:expression(document.body.clientWidth < 500? "499px": "auto" );}*/ .box-wrap {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );} .box-wrap {min-width:500px}/* for mozilla etc */ .box-wrap, #columns-float, .column-one, .column-two, #column-three, h2 {position:relative} .box-header {margin:0px; border:2px solid red; padding:3px; border:none} .box-footer {text-align:center; background:#996; padding:0.3em; clear:both; border:none} #columns-float { margin-right:204px; border:2px solid red; } /*cols 1 & 2 interchange*/ #column-three { float:right;width:196px; border:2px solid blue;} .column-three-content {margin:3px} .column-one {float:right; width:66%} .column-two {margin-right:66%; background:blue; /* max-width:10em; min-width:8em; width:expression(document.body.clientWidth < 600? "8em": "auto" ); width:expression(document.body.clientWidth > 700? "10em": "auto" )*/} .column-one-content, .column-two-content, .columns-float-content { margin:3px; /* border: thin dotted;*/} </style> <script type="text/javascript"> function toggle() { if (!(document.getElementById)) { return; } var right = document.getElementById('column-three'), ctn = document.getElementById('columns-float'); if (right.style.display == "none"){ right.style.display = ""; ctn.style.width = "auto"; } else { right.style.display = "none"; ctn.style.width = "100%"; } } </script> </head> <body> <div class="box-wrap"> <a style="text-align:right; float:right" href="styles.cfm" onclick="toggle() ;return false;">Hide/Show Sidebar</a> Zepfanman.com - header <div id="column-three"> <!-- right column _______--> <div class="column-three-content"> bahlkja alkj alkjs lkja sdlkj lkajs dlkj asldj asdiugou 14n5lkjas lkj iwh n lakjsd oij qwenoinas joij w;lkj fiq nnwe joain wfenm oinwef nqwe </div> </div> <!-- end column-three --> <div id="columns-float"> <div class="column-one"> <!-- center column _______--> <div class="column-one-content"> Column center content </div> </div> <div class="column-two"> <!-- left column _________--> <div class="column-two-content"> left column </div> </div> <!-- end column-two & col2-content --> </div> <!-- close columns-float --> <div class="clear"> </div> <div class="box-footer"> footer </div> </div> <!-- close box-wrap --> </body> </html>
Hope the above helps anyway.
PaulLast edited by Paul O'B; Aug 3, 2004 at 14:13.
-
Aug 3, 2004, 06:42 #6
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
Compromises, compromises....
Oh, about the hide nav feature: is there an easy way to set it as a cookie so it stays that way from page to page?
-
Aug 3, 2004, 06:55 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Oh, about the hide nav feature: is there an easy way to set it as a cookie so it stays that way from page to page?
http://www.alistapart.com/articles/alternate/
that I'd need to reorder my column-three content on all my pages - no other way, eh? I like how it
Paul
-
Aug 3, 2004, 07:22 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
that I'd need to reorder my column-three content on all my pages - no other way, eh? I like how it
Code:<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>emcol</title> <style type="text/css"> /*.box-wrap { width:expression(document.body.clientWidth < 500? "499px": "auto" );}*/ .box-wrap {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );} .box-wrap {min-width:500px}/* for mozilla etc */ .box-wrap, #columns-float, .column-one, .column-two, #column-three, h2 {position:relative} .box-header {margin:0px; border:2px solid red; padding:3px; border:none} .box-footer {text-align:center; background:#996; padding:0.3em; clear:both; border:none} #columns-float { float:left;width:98%; border:2px solid red; margin-right:-4px; } /*cols 1 & 2 interchange*/ #wrapper {margin-right:204px} #column-three { float:right;width:196px; border:2px solid blue;} .column-three-content {margin:3px} .column-one {float:right; width:66%} .column-two {margin-right:66%; background:blue; /* max-width:10em; min-width:8em; width:expression(document.body.clientWidth < 600? "8em": "auto" ); width:expression(document.body.clientWidth > 700? "10em": "auto" )*/} .column-one-content, .column-two-content, .columns-float-content { margin:3px; /* border: thin dotted;*/} </style> <script type="text/javascript"> function toggle() { if (!(document.getElementById)) { return; } var right = document.getElementById('column-three'), ctn = document.getElementById('columns-float'); if (right.style.display == "none"){ right.style.display = ""; ctn.style.width = "auto"; } else { right.style.display = "none"; ctn.style.width = "100%"; } } </script> </head> <body> <div class="box-wrap"> <a style="text-align:right; float:right" href="styles.cfm" onclick="toggle() ;return false;">Hide/Show Sidebar</a> Zepfanman.com - header <div id="wrapper"> <div id="columns-float"> <div class="column-one"> <!-- center column _______--> <div class="column-one-content"> Column center content </div> </div> <div class="column-two"> <!-- left column _________--> <div class="column-two-content"> left column </div> </div> <!-- end column-two & col2-content --> </div> <!-- close columns-float --> </div><!-- end wrapper --> <div id="column-three"> <!-- right column _______--> <div class="column-three-content"> bahlkja alkj alkjs lkja sdlkj lkajs dlkj asldj asdiugou 14n5lkjas lkj iwh n lakjsd oij qwenoinas joij w;lkj fiq nnwe joain wfenm oinwef nqwe </div> </div> <!-- end column-three --> <div class="clear"> </div> <div class="box-footer"> footer </div> </div> <!-- close box-wrap --> </body> </html>
PaulLast edited by Paul O'B; Aug 3, 2004 at 14:14.
-
Aug 3, 2004, 07:39 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Of course you will now have to change the hiding routine as follows:
Code:<script type="text/javascript"> function toggle() { if (!(document.getElementById)) { return; } var right = document.getElementById('column-three'), ctn = document.getElementById('wrapper'); if (right.style.display == "none"){ right.style.display = ""; ctn.style.marginRight = "204"+"px"; } else { right.style.display = "none"; ctn.style.marginRight = "0"; } } </script>
-
Aug 3, 2004, 13:08 #10
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
(1) On the test toggle page I created (the format identical to all but the home page), my "FULL MENU" header is off-center; it also disappears when the window is resized.
(2) The test toggle page footer isn't laying out right, either.
(3) On the test home page, Hide Nav results in the main content overlapping the header.
I can't make sense of any of the above three changes since all I did was change a couple elements to ID instead of CLASS - and added the columns-wrap ID.
(4) I can't figure out how to float the "Hide/Show Sidebar" link to the right of the header: pathetic, I know.
(5) Somewhat unrelated: can I get the columns to simply stop compressing (creating a horiz. scroll bar) instead of shifting all over the place when the window gets really small?
FYI, I think I'm going to forget about the whole min-width thing as it's kind of pointless. Also, Paul, you might want to edit that one line of long code in half so this page isn't so wide. Thanks again for being patient in working this out with me.Last edited by RockOfVictory; Aug 3, 2004 at 13:54.
-
Aug 3, 2004, 14:53 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
1)...it also disappears when the window is resized.
Code:#column-three {float:right;width:9.4em; border:0px solid blue;position:relative;}
(5) Somewhat unrelated: can I get the columns to simply stop compressing (creating a horiz. scroll bar) instead of shifting all over the place when the window gets really small?. Just use it on the body to keep the whole screen at a set min-width. (Personally I don't see the need as the idea with floats is that they drop down when space is small - but I know some people prefer to fix the width.)
Most of your other issues can be solved if you followed the format of my first post whic corrected all theses issues.
I'll have a look at your home page in a little while and see whats going on.
Paul
-
Aug 3, 2004, 15:34 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You need to use the javascript I posted above which sorts out the columns.
I'll have to post all the code again so sorry to anybody reading this.
Code:<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Zepfanman.com - When you can't find it on Google</title> <style> html {margin:0px; padding:0px; font-family:sans-serif; font-size:small} body {margin:0px; padding:0px;min-width:750px;} body {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );} div {margin:0px; padding:0px} p {padding:0px; margin:0 .3em .7em .3em;} a {color:black} a:visited {color:#99c} a img {border-color:#99c} a:visited img {border-color:#99c} h1 {margin:0px; font-weight:bold; font-size:1.2em} h2 {font-size:.9em; margin:0 0 0.5em 0; padding:0.25em} form {margin-bottom:2px; padding-bottom:1px} .clear { clear:both; height:1px; overflow:hidden; margin-top:-1px; } div.box-header { background:white !important; border-width:0 0 8px 0; border-style:solid} .box-header {margin:0px; padding:3px; border:none} div.box-header h1, div.box-header h2, div.box-header h1 a:visited { display:inline; color:black; text-decoration:none} div.box-header h1 {font-size:1.5em} div.box-header h1 span {color:#f33; display:inline} div.box-header h2 {color:gray; padding-left:.7em; font-size:1.2em} .toggle {font-size:x-small;float:right;width:10em;position:relative;} .box-footer {text-align:center; background:#996; padding:0.3em; clear:both; border:none} #columns-wrap {margin-right:9.5em;} #column-three {float:right;width:9.4em; border:0px solid blue;position:relative;} #columns-float {float:left;width:99.9%; border:0px solid red; margin-right:-4px;} .column-three {margin-left:79%;position:relative} .columns-float {float:left; width:79%} /*cols 1 & 2 interchange*/ .column-three-content {margin:3px; /* max-width:10em; min-width:8em; width:expression(document.body.clientWidth < 600? "8em": "auto" ); width:expression(document.body.clientWidth > 700? "10em": "auto" )*/} .overview {border:2px solid #bbb; font-size:medium} .overview a, .overview a:visited {border:2px solid white; display:block; color:gray; text-decoration:none; text-align:center; font-weight:bold; margin:1px; padding:0} .overview a:hover,.overview a:active { border:2px solid #bbb !important} /*outset*/ #navbel {background:#fcc} #navled {background:#ffc} #navgal {background:#cff} #navblo {background:#cc9} #navlin {background:#cfc} .search {margin:2px; text-align:center} .search input {font-size:smaller; margin:1px -2px} .toc a {text-decoration:none} .toc ul {padding:0; margin:.1em 0 .3em .2em} /******* .toc li { x-small} only for debug ******/ .toc li{margin:0 0 .8em 0; padding:0; list-style-type:none; font-weight:bold; line-height:90%} .toc ul li ul {margin:0 0 0 1em; list-style-type:disc} .toc ul li ul li {margin:0 0 0 .3em; list-style-type:disc; font-weight:normal;} .toc ul li ul li ul, .toc ul li ul li ul a {color:#888} .toc p {margin:.1em; border-width:.1em 0 0 0; border-style:solid; border-color:#bbb} .section {border:2px solid #bbb; margin-bottom:.4em;} .section h2 {background:#bbb; font-size:small; padding:0 0 1px 0; margin:2px; margin-bottom:0; text-align:center; text-transform:uppercase; } .section h2 a:visited {color:black} .synd {text-align:center; color:#888; margin-top:1em; vertical-align:bottom} .linknew, .linkedit {font-style:italic; font-size:smaller} .linknew {color:red} .linkedit {color:#888} .title {font-style:italic} .details {font-size:smaller} .column_padding_after {height:0px; font-size:1px; line-height:0px; clear:both} .box-wrap, .columns-float, .column-one, .column-two, .column-three, h2 {position:relative} div.box-header, div.box-footer, p.here{ background:#bbb; border-color:#bbb} .column-one {float:right; width:66%} .column-two {margin-right:66%} .column-one-content, .column-two-content, .columns-float-content { margin:3px; /* border: thin dotted;*/} .ledzep h2 {background:#ffc; text-align:center; text-transform:none; font-family:Georgia, serif} .lzintro {font-family:sans-serif; font-size:x-small; text-align:center} .lznav {font-family:sans-serif; font-size:small; line-height:140%; margin:0 .2em 0 2px; padding:0 .2em .2em .2em; float:left; background:#ffc} .blognew {border:2px solid #bbb; margin-bottom:.4em} .bloghead {background:#cc9; padding:0 0 1px .3em; margin:2px} .bloghead h3, .bloghead div div div {text-decoration:underline} .bloghead h2, .bloghead h2 a, .bloghead h2 a:visited { font-size:small; color:#f33; text-transform:uppercase; text-align:center; padding:0 .3em 0 0; margin:0; display:block} .blogentry {margin: .4em; padding:0 0 .4em 0} .blogentry h3, .bloghead h3 {font-weight:bold; font-size:small; display:inline} .blogentry div, .blogcat, .bloghead div div { font:normal small sans-serif; display:inline; white-space:nowrap; color:#aaa; text-transform:none} .blogentry p {display:inline; font-size:small} .blogcat a {text-transform:uppercase} .galrand h2 {background:#cff} .galrand p {text-align:center; margin:2px} .linkbox h2 {background:#cfc} .welcome p {margin:.3em; text-align:center; font-size:small} .words h2 {background:#fcc} .words h3 {font-size:small; display:inline} .words p {margin:.3em .3em .9em .3em} .wordscom {font:normal small sans-serif; color:#888} .wordshead {margin:.2em .1em 0 .3em} .wordsmore {font:normal small sans-serif; display:block; text-align:right; color:#888; margin:0 0 .2em 0} .wordsmore a {color:#888} </style> <script type="text/javascript" src="ResizeReloadNN4.js"></script> <script type="text/javascript" > function toggle() { if (!(document.getElementById)) { return; } var right = document.getElementById('column-three'), ctn = document.getElementById('columns-wrap'); if (right.style.display == "none"){ right.style.display = ""; ctn.style.marginRight = "9.5"+"em"; } else { right.style.display = "none"; ctn.style.marginRight = "0"; } } </script> <script language="javascript" type="text/javascript"> function OpenComments (c) { window.open(c,'comments', 'width=480,height=480,scrollbars=yes,status=yes');} function OpenTrackback (c) { window.open(c,'trackback', 'width=480,height=480,scrollbars=yes,status=yes');} </script> </head> <body> <div class="box-wrap"> <div style="text-align:center">(Zepfanman.com is <a href="/normore.php#css">UNDER CONSTRUCTION</a>)</div> <div class="box-header"> <h1><a class="toggle" href="/toggle.php" onclick="toggle() ;return false;">Hide/Show Sidebar</a><a href="http://zepfanman.com">Zepfanman<span>.com</span></a></h1> <h2> When you can't find it on Google</h2> </div> <div id="columns-wrap"> <div id="columns-float"> <div class="column-one"> <!-- center column _______--> <div class="column-one-content"> <div class="section"> <div class="ledzep"> <h2><a href="ledzep">Led Zeppelin Evermore</a></h2> <div class="lznav"> -<a href="lednews.html">News</a><br /> -<a href="#">Discs</a><br /> -<a href="#">Ref.</a><br /> -<a href="#">Lyrics</a><br /> -<a href="#">Sounds</a><br /> -<a href="#">Gallery</a><br /> -<a href="#">Links</a> </div> <p class="lzintro">~ Map to the Zeppelin WWW ~</p> <div class="lznews"> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000017.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/22" dc:title="New *A to Zeppelin* DVD" dc:identifier="http://zepfanman.com/archives/000017.php" dc:subject="LedZep" dc:description="Lots of interviews, but NO music." dc:creator="rockofvictory" dc:date="2004-06-29T17:45:36-06:00" /> </rdf:RDF> --> <div class="blogentry"> <div>Jun29 </div> <h3><a href="http://zepfanman.com/archives/000017.php">New *A to Zeppelin* DVD</a></h3 > <p>Lots of interviews, but NO music.</p> <div>Comment(0) </div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000015.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/20" dc:title="Remember the Honeydrippers?" dc:identifier="http://zepfanman.com/archives/000015.php" dc:subject="LedZep" dc:description="Plant's first post-Zeppelin band looking to release a second album." dc:creator="rockofvictory" dc:date="2004-06-16T08:36:06-06:00" /> </rdf:RDF> --> <div class="blogentry"> <div>Jun16 </div> <h3><a href="http://zepfanman.com/archives/000015.php">Remember the Honeydrippers?</a></h3 > <p>Plant's first post-Zeppelin band looking to release a second album.</p> <div>Comment(1) </div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000014.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/19" dc:title="JPJ Joining MAS's August Tour" dc:identifier="http://zepfanman.com/archives/000014.php" dc:subject="LedZep" dc:description="7/27-8/19 US tour (Seattle to DC)." dc:creator="rockofvictory" dc:date="2004-06-16T08:29:09-06:00" /> </rdf:RDF> --> <div class="blogentry"> <div>Jun16 </div> <h3><a href="http://zepfanman.com/archives/000014.php">JPJ Joining MAS's August Tour</a></h3 > <p>7/27-8/19 US tour (Seattle to DC).</p> <div>Comment(0) </div> </div> </div> </div> <div class="clear"></div> </div> <!-- end ledzep section --> <div class="blognew"> <div class="bloghead"> <h2><a href="/blog">NEW BLOGS</a></h2> <div> <h3>Title</h3> <div>(Comments) <div>Category</div> Date</div> </div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000026.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/31" dc:title="Primped Out" dc:identifier="http://zepfanman.com/archives/000026.php" dc:subject="Gallery" dc:description="<![CDATA[<a href="/archives/000026.php"><img src="/albums/04july/P7311063.thumb.jpg" alt="MegsnJJ Masked" align="right" vspace="2" hspace="7"></a> A healthy Saturday: YMCA, massage, steaks on the grill, clean shave, and... masks?]]>" dc:creator="rockofvictory" dc:date="2004-08-01T08:26:33-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000026.php">Primped Out</a></h3> <div>(1)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_gallery.php">Gallery</a> </div> <div>Aug01</div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000025.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/30" dc:title="Bourne Still Going Strong" dc:identifier="http://zepfanman.com/archives/000025.php" dc:subject="Links" dc:description="Not having read any of the four Bourne books, it's hard to say how well the movies are being adapted...." dc:creator="rockofvictory" dc:date="2004-07-25T16:07:22-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000025.php">Bourne Still Going Strong</a></h3> <div>(0)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_links.php">Links</a> </div> <div>Jul25</div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000024.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/29" dc:title="Ode To Megan" dc:identifier="http://zepfanman.com/archives/000024.php" dc:subject="News" dc:description="Thank you for giving me a person worth sharing things with. No matter how much instruction other people give me,..." dc:creator="rockofvictory" dc:date="2004-07-25T15:40:37-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000024.php">Ode To Megan</a></h3> <div>(2)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_news.php">News</a> </div> <div>Jul25</div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000023.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/28" dc:title="*Revenge of the Sith* Announced" dc:identifier="http://zepfanman.com/archives/000023.php" dc:subject="Links" dc:description="Star Wars III has an official title. It is set to be relesed in May 2005. As the title suggests,..." dc:creator="rockofvictory" dc:date="2004-07-25T14:00:13-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000023.php">*Revenge of the Sith* Announced</a></h3> <div>(0)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_links.php">Links</a> </div> <div>Jul25</div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000022.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/27" dc:title="Election 04 Websites" dc:identifier="http://zepfanman.com/archives/000022.php" dc:subject="Links" dc:description="It's about time I start looking for a candidate to vote for. In addition to the two rich candidates (you..." dc:creator="rockofvictory" dc:date="2004-07-23T14:34:16-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000022.php">Election 04 Websites</a></h3> <div>(1)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_links.php">Links</a> </div> <div>Jul23</div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000021.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/26" dc:title="Zepfanman.com REDESIGNED!" dc:identifier="http://zepfanman.com/archives/000021.php" dc:subject="News" dc:description="I finally decided to get rid of the /beta site and just go for it. MovableType blog and Gallery.Menalto are..." dc:creator="rockofvictory" dc:date="2004-07-09T15:48:15-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000021.php">Zepfanman.com REDESIGNED!</a></h3 > <div>(0)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_news.php">News</a> </div> <div >Jul09</div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000020.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/25" dc:title="Summer Photos" dc:identifier="http://zepfanman.com/archives/000020.php" dc:subject="Gallery" dc:description="Kicking off the hottest holiday at the hottest place: Houston...." dc:creator="rockofvictory" dc:date="2004-07-07T00:07:51-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000020.php">Summer Photos</a></h3 > <div>(0)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_gallery.php">Gallery</a> </div> <div >Jul07</div> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000018.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/23" dc:title="<![CDATA[Reality & Low-Carb Madness]]>" dc:identifier="http://zepfanman.com/archives/000018.php" dc:subject="News" dc:description="I just need to rant for a few seconds. I'm sure if I surfed around some, I could find others..." dc:creator="rockofvictory" dc:date="2004-06-29T22:09:04-06:00" /> </rdf:RDF> --> <div class="blogentry"> <h3><a href="http://zepfanman.com/archives/000018.php">Reality & Low-Carb Madness</a></h3 > <div>(0)</div> <div> <a class="blogcat" href="http://zepfanman.com/archives/cat_news.php">News</a> </div> <div >Jun29</div> </div> </div> <!-- end blognew section --> <div class="section"> <div class="galrand"> <h2><a href="/gallery">Featured Shot</a></h2> <p><a href='http://www.zepfanman.com/gallery/view_photo.php?set_albumName=04gatlin&id=P5310960 ' title="HASH(0x8884248)" ><img src='http://www.zepfanman.com/albums/04gatlin/P5310960 .thumb.jpg' alt="MT::Template::Context=HASH(0x886b874)" class="HASH(0x8876f54)" /></a></p> </div> </div> <!-- end galrand section --> <div class="section"> <div class="linkbox"> <h2><a href="favs.html">Zepfanman's Favs</a></h2> <p><a href="http://jamiepeck.com">JamiePeck.com</a> <span class="details">- A good friend's personal site; sports and tech oriented. </span></p> <p><a href="http://christiananswers.net">ChristianAnswers.net</a> <span class="details">- Q&A site with many media resources, as well.</span> </p> <p><a href="http://www.linwood.demon.co.uk/news.html">TBL/Web News</a> <span class="details">- Zeppelin news updated almost daily.</span ></p> <p><a href="http://care2.com">Care2.com</a> & <a href="http://charityusa.com">CharityUSA.com</a> <span class="details">- I go to these sites once a day and click about 20 times to donate to all these causes for free. Care2 has a better interface, but both are popular and effective sites.</span></p> </div> </div> <!-- end linkbox section --> <div class="synd"> <a href="http://zepfanman.com/index.rdf">Syndicate (RSS 1.0, XML)</a> </div> </div> </div> <div class="column-two"> <!-- left column _________--> <div class="column-two-content"> <div class="section"> <div class="welcome"> <h2>Welcome</h2> <p>Your starting point for finding the web's most fun & useful links (particularly in one of the categories listed in the right column).</p> </div> </div> <!-- end welcome section --> <div class="section"> <div class="words"> <h2><a href="bibsalva.html" title="The most important part of the website" >Most Important!</a></h2> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://zepfanman.com/archives/000027.php" trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/32" dc:title="August Words - What's Your Response?" dc:identifier="http://zepfanman.com/archives/000027.php" dc:subject="Beliefs" dc:description=""A farmer went out to sow his seed.... some fell along the path.... some fell on rocky places.... other seed..." dc:creator="rockofvictory" dc:date="2004-08-01T14:02:36-06:00" /> </rdf:RDF> --> <div class="wordshead"> <a href="http://zepfanman.com/archives/000027.php"> <h3>August Words - What's Your Response?</h3> </a ><br /> <a class="wordscom" href="http://zepfanman.com/mt/mt-comments.cgi?entry_id=27" onclick="OpenComments(this.href); return false" >Comment(0)</a> </div> </div> <p /> <p>"A farmer went out to sow his seed.... some fell along the path.... some fell on rocky places.... other seed fell among thorns.... Still other seed fell on good soil."<br /> ^ <a href="http://biblegateway.com/cgi-bin/bible?passage=MARK%2B4%3A3-20&version=NASB">Mark 4:3-20</a> (NIV)</p> <p>Look closely at verses 14-20 to see what the elements of this parable represent. I often have to look back at my own life and wonder if "other things come in a choke the word, making it unfruitful" (v.19) - am I receiving God's Spirit and the Word but being choked by thorns?</p> <span class="wordsmore">(<a href="/words">For more Words...</a>)</span> </div> </div> <!-- end words section --> <div class="section"> <div class="linkbox"> <h2><a href="favs.html">Bored?</a></h2> <p><a href="http://homestarrunner.com">Homestarrunner.com</a> <span class="details">- Hilarious, clean fun. You won't be disappointed.</span ></p> <p><a href="http://addictinggames.com">AddictingGames.com</a> <span class="details">- Hundreds of quick-loading nifty games.</span></p> <p><a href="http://aintitcoolnews.com">AintItCoolNews.com</a> <span class="details">- movie trailers, comment posting, and lesser-known films & TV. Compare to <a href="http://upcomingmovies.com">Upcoming Movies</a> on Yahoo!</span></p> </div> </div> <!-- end linkbox section --> </div> </div> <!-- end column-two & col2-content --> </div> </div></div> <!-- close columns-float & wrap--> <div id="column-three"> <!-- right column -------> <div class="column-three-content"> <div class="overview"> <a id="navbel" href="/beliefs">Beliefs</a> <a id="navled" href="/ledzep">LedZep</a> <a id="navgal" href="/gallery">Gallery</a> <a id="navlin" href="/links">LINKS</a> <a id="navblo" href="/blog">Blog</a> </div> <!-- end overview section --> <FORM method="GET" action="http://www.google.com/search" class="search"> <INPUT TYPE="text" name="q" size="10" maxlength="255" value="All of Zepfanman.com" onClick="this.form.q.select()" /> <input type="hidden" name="sitesearch" value="zepfanman.com" /> <INPUT type="submit" name="btnG" VALUE="Go" /> </FORM> <div class="section"> <div class="toc"> <h2>Full Menu</h2> <ul> <li><a href="/">Home</a> <ul> <li><a href="/blog">News*</a></li> <li><a href="/gb.php">Guestbooks</a></li> <li><a href="/normore.php">Help</a></li> <li>Site Map</li> </ul> </li> <li><a href="/beliefs">/Beliefs</a> <ul> <li><a href="/archives/cat_beliefs.php">News*</a></li> <li><a href="/salvation">"LAWS"</a></li> <li><a href="/bible">Bible</a> <ul> <li><a href="/words.php">Words</a></li> <li><a href="/bible.html">Curious.</a></li> </ul> </li> <li><a href="/equality">Feminism*</a> <ul> <li><a href="/bibearti.html">Articles</a></li> <li><a href="/bibequal.html#books">Books</a></li> <li><a href="/bibeqfor.html">Forum</a></li> <li><a href="/bibequal.html#issue">Issues</a></li> <li><a href="/bibequal.html#links">Links</a></li> <li><a href="/bibeqsta.html">Statement</a></li> </ul> </li> <li><a href="/biblinks.php">Links*</a></li> <li><a href="/music">Music*</a> <ul> <li><a href="/music.html#Music Comments">Comments</a></li> <li><a href="/ledzep">LedZep*</a></li> <li><a href="/musiclin.php">Links*</a></li> <li><a href="/lyrics.html">Lyrics</a></li> </ul> </li> </ul> </li> <li><a href="/ledzep">/LedZep</a> <ul> <li><a href="/archives/cat_ledzep.php">News*</a></li> <li><a href="/discogra.html">Discs</a></li> <li><a href="/ledref.html">Ref.</a></li> <li><a href="/ledlyrso.html">Lyrics</a></li> <li><a href="/ledlyrso.html">Sounds</a></li> <li><a href="/ledpics.html">Gallery*</a></li> <li><a href="/ledlinks.html">Links</a></li> </ul> </li> <li><a href="/gallery">/Gallery</a> <ul> <li><a href="/archives/cat_gallery.php">News*</a></li> <li><a href="/galhelp.php">Help</a></li> <li><a href="/photold.php">Old</a></li> </ul> </li> <li><a href="/links">/LINKS</a> <ul> <li><a href="/archives/cat_links.php">News*</a></li> <li><a href="/service.html">Activities</a></li> <li><a href="/art.html">Artwork</a></li> <li><a href="/bloghelp.php">Blog*</a></li> <li><a href="/favs.php">FAVORITES</a></li> <li><a href="/equality">Feminism*</a></li> <li><a href="/friends.html">Friends</a></li> <li><a href="/genealog.html">Genealogy</a></li> <li><a href="/wwwSite2.html">misc.</a></li> <li><a href="/movies">Movies 1</a> <a href="/movies2.php">2</a></li> <li><a href="/musiclin.php">Music*</a></li> <li><a href="/wwwSite.php">Reference</a></li> <li><a href="/biblinks.html">Religious*</a></li> </ul> </li> <li><a href="/blog">/Blog</a> <ul> <li><a href="/bloghelp.php">Other*</a> <ul> <li><a href="http://zepfanman.com/archives/cat_beliefs.php">Beliefs(3)</a>*</li> <li><a href="http://zepfanman.com/archives/cat_gallery.php">Gallery(3)</a>*</li> <li><a href="http://zepfanman.com/archives/cat_ledzep.php">LedZep(3)</a>*</li> <li><a href="http://zepfanman.com/archives/cat_links.php">Links(9)</a>*</li> <li><a href="http://zepfanman.com/archives/cat_news.php">News(8)</a>*</li> </ul> </li> </ul> </li> </ul> <p>* = Sections listed more than once </div> </div> </div> <!-- end toc & col3-content --> </div> <!-- end column-three --> <div class="clear"></div> <div class="box-footer"> <p><a href="/normore.php">About</a> - <a href="/contact.html">Contact</a> - <a href="http://movabletype.org">MovableType 2.661</a> - <a href="http://gallery.menalto.com">Gallery 1.4.2</a></p> <p> <!--#echo var="HTTP_HOST"--> <!--#echo var="DOCUMENT_URI"--> zepfanman.com/index_toggle.php last modified 2004Aug03 15:06:20EST <!--#config timefmt="%Y%b%d %X%Z"--> <!--#echo var="LAST_MODIFIED"--> </p> </div></div> <!-- close box-wrap --> </body> </html>
Paul
-
Aug 4, 2004, 15:32 #13
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
However.... That ALA article is a little confusing as it refers more to a stylesheet file instead of just a couple class changes. Anyone wanna help me out with that code, too (what is a common cookie expiration length)? I've never worked with cookies, so maybe a link to a tutorial would better suit everyone's time.
Also, I just noticed that my "BORED?" section on the home page (bottom left) is a little bit wider than the rest of the column. If I simply cut and paste that section above the "MOST IMPORTANT!" section, it goes back to normal.... GrrrrLast edited by RockOfVictory; Aug 4, 2004 at 19:04.
-
Aug 5, 2004, 08:23 #14
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Also, I just noticed that my "BORED?" section on the home page (bottom left) is a little bit wider than the rest of the column. If I simply cut and paste that section above the "MOST IMPORTANT!" section, it goes back to normal.... Grrrr
Find the end of the column-two-content div and stick the section in there.
I've tried it locally and it works fine. You will just have to find the correct closing div
For cookies have a look here for cookies in the javascript section.
http://www.quirksmode.org/
Paul
-
Aug 5, 2004, 10:36 #15
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
-
Aug 5, 2004, 13:50 #16
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Is there anything I can help you with in particular - web related or not?I'll bear it in mind.
Yes that quirksmode site is a good resource
-
Sep 14, 2004, 09:49 #17
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Specific box model implementation?
Once again, I've run into a problem. I've noticed that my right column doesn't show up properly in IE5. Is this a box model problem? I can't seem to figure out how to get it working.
Know of any good links to debates or info about client-side vs server-side stylesheets (i.e. using an alternate sheet if its discovered that IE5 is being used). The only thing I don't like about server-side is that it's one more stylesheet that I have to keep up with.
-
Sep 14, 2004, 16:26 #18
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Once again, I've run into a problem. I've noticed that my right column doesn't show up properlyWheres the link to it?
-
Sep 14, 2004, 17:26 #19
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
-
Sep 15, 2004, 07:53 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
This might work but don't ask me to explain it as it would take too long.
Code:/* to cater for ie5 and ie5.5. and ie6 all of which need something different*/ * html #columns-wrap{float:left;margin-right:9.4em;voice-family: "\"}\""; voice-family:inherit;} * html #columns-wrap{margin-right:0;fl\oat:none;ma\rgin-right:9.4em} * html #columns-float {margin-right:-9.4em;ma\rgin-right:-4px} /* order not to be changes else cascade is wrong */
This makes it work in ie5 and ie5.5. and ie6. If it causes any other problems then I give up
Paul
-
Sep 15, 2004, 21:19 #21
- Join Date
- Feb 2004
- Location
- Louisville, KY
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
-
Aug 5, 2005, 14:48 #22
- Join Date
- Aug 2005
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
on my page, gamingandtech.com, I can't get my adsense to not 'jump' when loaded. is this a float issue?
what can I do to fix it? i've tried playing with percentages, but it seems to be that the adsense wants to rise higher and my style sheet is making it stay low. maybe i am not making much sense.
if anyone has time or is willing to give me some much appreciated advice, please do. thanks!
-
Aug 5, 2005, 16:34 #23
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Helo
maybe these treads helps
http://www.sitepoint.com/forums/show...irefox+flicker
-
Oct 10, 2007, 10:19 #24
I had the same problem in Firefox, but I tried it with Opera and it is good enough, at least for my foreign online pharmacy where it proved not to work at all. Now, I guess they have solved it in Firefox, but I am not willing to try it there.
-
Oct 10, 2007, 13:23 #25
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by fayth
Bookmarks