How would I get

HTML & CSS
1

a layout with three or more side bars?
foe example, one at position: with an absolute; right position, one at the left and then a third below either one of those two div?
Thanks you
Daniela

2

You wouldn’t use AP for something like that, unless you know the actual height and width… which isn’t likely.

you would need to structure your markup this way:



<div class="content">
   <div class="sidebar left">x</div>
   <div class="sidebar right" >z </div>
   <div class="lowerside left">y</div>
   <div class="main">cc cc cc cc</div>
</div>

and your CSS


.content {overflow:hidden}
.sidebar, .lowerside{ width:100px; background: pink; min-height:50px;}
.left{ float:left;}
.right{ float:right;}
.lowerside.right{clear:right}
.lowerside.left{clear:left}
.main{background:silver; margin:0 100px}

NOTE:
I used used 100px as the sample width of the sidebars, you can change it to whatever you like,BUT ALSO change .main{ margin:0 100px} to the same value ( or more if you want a “gutter” effect)
ALSO, I only used “min-height” so I wouldnt have to type content… if you like, you can get rid of it in your own CSS.

3

There are only two sides, left and right, so treat everything down the left as a single sidebar, and everything down the right as a single sidebar. You can then put whatever formatting you want in the middle of them to create the appearance of horizontal breaks between different sidebar sections.

4

Thanks Dresden & thank you Stevie.
& yes you are right Stevie, but I guess I have a gift for complicating things or trying the hard crap when I have not yet got the easy crap.
But will try & upload the results tomorrow. & see how far I got.
you folks have a great evening!

5

I guess I have a gift for complicating things or trying the hard crap when I have not yet got the easy crap.

Ha, I am the same way. I find it’s a good way to actually learn HOW and WHY rather than just WHAT.

if you experiment with the code I suggested, you will realize that ON THE PROPER occasion, it has the advantage that you can flip all or parts of your sidebars w/o altering the code

6

that’s me! complicating things as a path to higher learning.
this is where I am trying to go. (Just saw need to get rid of double underlines, weird they showed up when I uploaded the file but not when I was testing by “open the file” on pc)
http://www.danielamorescalchi.com/dlmWeb/bigMeowTest/

I know it looks like crap but it is heading in a better direction than the original www.thebigmeow.us & some things I am just testing out.

I will do extra work w/your code dresden, but one of the probs I am running into is that in my book things start w/ a # in another book he skips the #.
So still trying to work things out.
Also if anyone knows…why do I get that white snowy effect on what is supposed to be a transparent gif? where it was just supposed to fade out?
Thanks you all
daniela
& yes the big meow is one of my side enterprises :slight_smile: in this economy trying a bit of everything even though art is what i want it to be.

7

CONSISTENCY is the key to CSS. Remember the CSS you write should apply to all pages as a cohesive site. A tip: sketch a boxed site on paper first…no contents, no stylish graphics just sections wher you intend to put types o contents and whatever wrappers you think you will need around your section… that will be the HTML you will need to stile as layout, the rest will be content… which of course you can style as well…

the gif is probably dithered ( that “snowy effect”) Remember, gifs aren’t really “transparent” they merly take ONE color and make it trnsparent. Perhaps you can accomplish the effect you wanted by setting the #header background to #fff ( this will make the top of the page white)

if what you wanted was a dark blue to light blue transition you need to re do the header image entirely.

8

Yes! I’ll try & redo my big meow site first as it is smaller & simpler then go on to my main site. I like the idea of having an external CSS sheet that keeps all the pages in order.
Thanks
Daniela