hello, im new here (obviously) and i've been looking at CSS as a way of designing my layout. Unfourtuantly i just can't get it right. if someone could explain how to get this layout into CSS (no tables) i would be extremly happy!
<!-- m --><a class="postlink" href="http://www.synet.eclipse.co.uk/ianswww.jpg">http://www.synet.eclipse.co.uk/ianswww.jpg</a><!-- m -->
where there is the gap on the right hand side i will be implementing a flash presentation there. The layout needs not to flex and just stay centered as it is in the image. The 3 content boxes will have text in them and the bottom left dark gray one will flex downwards the more content needed.
If anyone can send my in te right direction on how to get this layout CSS-a-lized i would be most greatfull.
thank you
MarkWell, you would either use position: reletive or position: absolute
With absolute you'd hve to work with positioning elements by luck by trying out combinations of these to position the elements:
position: absolute;
top: Number;
left: Number;
right: Number;
bottom: Number;
In the end you'll position all the elements you need
I also suggest you see this: <!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->
RyanJYou could also use floated elements and nested DIVs.Crazy picture you've got there.
I'd like to help, but is there anything more specific to work with?
(No expert myself by the way, but capable)Well, I've decided to give it a shot. I'll post again when I've got the layout working in PC browsers, you'll have to test Mac browsers your self.Try this out. It works in Mozilla and Opera 7.2. IE-Win has a small issue with the lower right content box where it seems to display it too wide, but it doesn't break the layout. People are welcome to find the bug and fix it. I'm out.
EDIT: I've got an image-sliced PSD file if you want that. I'd have to email it to you since it's a little over 300K in size.
<!-- m --><a class="postlink" href="http://www.synet.eclipse.co.uk/ianswww.jpg">http://www.synet.eclipse.co.uk/ianswww.jpg</a><!-- m -->
where there is the gap on the right hand side i will be implementing a flash presentation there. The layout needs not to flex and just stay centered as it is in the image. The 3 content boxes will have text in them and the bottom left dark gray one will flex downwards the more content needed.
If anyone can send my in te right direction on how to get this layout CSS-a-lized i would be most greatfull.
thank you
MarkWell, you would either use position: reletive or position: absolute
With absolute you'd hve to work with positioning elements by luck by trying out combinations of these to position the elements:
position: absolute;
top: Number;
left: Number;
right: Number;
bottom: Number;
In the end you'll position all the elements you need
I also suggest you see this: <!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->
RyanJYou could also use floated elements and nested DIVs.Crazy picture you've got there.
I'd like to help, but is there anything more specific to work with?
(No expert myself by the way, but capable)Well, I've decided to give it a shot. I'll post again when I've got the layout working in PC browsers, you'll have to test Mac browsers your self.Try this out. It works in Mozilla and Opera 7.2. IE-Win has a small issue with the lower right content box where it seems to display it too wide, but it doesn't break the layout. People are welcome to find the bug and fix it. I'm out.
EDIT: I've got an image-sliced PSD file if you want that. I'd have to email it to you since it's a little over 300K in size.