Forum Moderators: not2easy
Ok, ok, this is soooo lame....
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
I am using a simple two column layout, the text links are in the sidebar div, and the images/text are in the main content div....
Here is HTML code for side-bar links:
<div id="sidebar-a"><!-- /////////////// BEGIN DIV "SIDEBAR-A" /////////////// -->
<span class="arrow_off">›</span><a href="folio.php?display=3d" title="→ ambiguism ← {3D]">3D</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=art" title="→ ambiguism ← {Art]">Art</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=audio" title="→ ambiguism ← {Audio]">Audio</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=bitmap" title="→ ambiguism ← {Bitmap]">Bitmap</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=fontography" title="→ ambiguism ← {Fontography]">Fontography</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=interactive" title="→ ambiguism ← {Interactive]">Interactive</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=logotypes" title="→ ambiguism ← {Logotypes]">Logotypes</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=misculaneous" title="→ ambiguism ← {Misculaneous]">Misculaneous</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=photography" title="→ ambiguism ← {Photography]">Photography</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=playground" title="→ ambiguism ← {Playground]">Playground</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=print" title="→ ambiguism ← {Print]">Print</a>
<br />
<span class="arrow">«</span><a href="#" class="current" title="→ ambiguism ← {Vector]">Vector</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=videography" title="→ ambiguism ← {Videography]">Videography</a>
<br />
<span class="arrow_off">›</span><a href="folio.php?display=websites" title="→ ambiguism ← {Websites]">Websites</a>
<br />
</div><!-- /////////////// END DIV "SIDEBAR-A" /////////////// -->
And the code for my main content div looks like this:
<div id="content"><!-- /////////////// BEGIN DIV "CONTENT" /////////////// -->
<div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_01/slideshow.php','','width=560,height=675')">
<img src="../img/folio/photography/thumbs/tn_gm_ps_01.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_01.jpg" /></a></p>
<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_01/slideshow.php','','width=560,height=675')">
The Playground</a></p>
<p class="under_p6">Description: First time I picked up a camera in years.</p>
<p>Theme: Stay confined to small playground.
<br />Notes: none.</p>
<div class="clear"> </div>
</div><div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_02/slideshow.php','','width=560,height=675')">
<img src="../img/folio/photography/thumbs/tn_gm_ps_02.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_02.jpg" /></a></p>
<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_02/slideshow.php','','width=560,height=675')">
The Train Station</a></p>
<p class="under_p6">Description: My second photo outting in years.</p>
<p>Theme: Train station.
<br />Notes: none.</p>
<div class="clear"> </div>
</div>
</div><!-- /////////////// END DIV "CONTENT" /////////////// -->
So, if you are not confused as of yet, here is my CSS:
/* This is the main container div that holds #content and #sidebar-a: */
#container {
width: 850px;
padding: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
/* Main content DIV: */
#content {
margin-left: 270px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Sidebar DIV: */
#sidebar-a {
float: left;
width: 200px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
margin: 0px;
}
/* Below for links: */
.arrow {
color: #666600;
font-weight: bold;
}
.arrow_off {
color: #333333;
font-weight: bold;
}
/* And this is for text/images in content DIV: */
div.thumbs65 {
float:left;
width: 480px;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.l_fl {
float:left;
display: block;
border:0;
padding-right: 10px;
}
.under_p6 {
margin: 6px 0 0 0;
}
.img_border {
border: 1px solid #000000;
}
p {
margin: 0;
}
div.clear {
clear: left;
height: 0;
line-height: 0;
}
Hopefully that the above is not too confusing... better yet, hopefully the above is a quick fix! :D
I did notice that if I put my sidebar-a after my content (in HTML), the content works fine in IE and Safari, but the sidebar links get pushed to bottom of main content DIV.... maybe I should do that and have the sidebar CSS clear right?
Why do the contents of my content DIV get affected by the contents of the sidebar DIV? :(
Oh man, please help.....
BTW, I have not even had a chance to test on any other platform/browsers exept for the ones mentioned... ugh, I should just start over anyway.... make it more simple... geez, I hate all the imperfections of web-dev and design.
Thanks
Cheers
Micky
[edited by: DrDoc at 6:35 pm (utc) on Oct. 6, 2004]
Check here [macedition.com] for more information.
Whether or not this is your problem, I don't know, but it's worth looking into (and, sadly, unfixable). :(
Fortunately Paul over at sitepnt was able to help me fix it up:
[QUOTE=Paul O'B]It looks like the clear is clearing any floats previously in the html (as well it might) and clearing the side bar as instructed.
Try wrapping everything that is insice the #content div in another div and give it these styles.
#innercontentwrap {
width:99.9%;
float:left;
}
Thanks again for your quick response, I appreciate you sharing your knowlege :)
Cheers
Micky
