Ok.. Trying to do this layout in css, and normally I do ok with it.. However, this time, I have a top left and right image, with content overlapping them in the middle, then an area to the right for a menu... problem is the menu wants to take the whole width of the right div, and Im trying to find a way to line it up like the sample layout image on the site..
Can anyone help? Im going nuts on this!
Traveling Watchmen Link (<!-- m --><a class="postlink" href="http://twbeta.webhop.net">http://twbeta.webhop.net</a><!-- m -->)
After several hours fighting it, I know its got to be something really simple Im missing...Should look like this attachment:It wasn't impossible to work your example to get the results you wanted. But I thought that I could do a much crisper version of what you were trying to accomplish. Here is the link:
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/examples/TravelingWatchmen.html">http://www.prism.gatech.edu/~gte207x/ex ... chmen.html</a><!-- m -->
If you still want to keep the topright.png image in the <div id="right">, use another <div id="menu"> within it, ansd use:
#menu{width: 180px; position: absolute; top: 320px; right: 0}
Hope this helps,
NiketYou hit it right on the nose Niket, thanx! Love your layout btw, and have been to the CSS zen garden.. beautiful site.. Anyways, Now Im going to spend some time disecting yours to see how you did it, and see where I went wrong.. A lot of it might have been trying to do the layout at 2am, but hey..
Thanx again!Glad to help.
What I did was to put the left image as bgimage for the body. I then put the right image as bgimage for the contents div. I gave the appropriate padding to the contents div so that the text doesnt overlap the image.
At this point, I have the two bgimages and the contents. Now I need to put the right hand menu. I needed to position that to the right edge of the screen, fit it in a 180px-wide space and keep it clear of the bgimage on the top. So I absolute-positioned it with:
- top: 325px to stay clear of the bgimage.
- right: 0px to keep it at the right edge of the screen.
- padding: 5px to keep the text from touching the edges
- width: 170px so that it occupies the 180px-wide space
Then I used the box model hack to feed width: 180px to IE5.
FInally, I used the font-family and font-size stuff to give it a "better" look.
Can anyone help? Im going nuts on this!
Traveling Watchmen Link (<!-- m --><a class="postlink" href="http://twbeta.webhop.net">http://twbeta.webhop.net</a><!-- m -->)
After several hours fighting it, I know its got to be something really simple Im missing...Should look like this attachment:It wasn't impossible to work your example to get the results you wanted. But I thought that I could do a much crisper version of what you were trying to accomplish. Here is the link:
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/examples/TravelingWatchmen.html">http://www.prism.gatech.edu/~gte207x/ex ... chmen.html</a><!-- m -->
If you still want to keep the topright.png image in the <div id="right">, use another <div id="menu"> within it, ansd use:
#menu{width: 180px; position: absolute; top: 320px; right: 0}
Hope this helps,
NiketYou hit it right on the nose Niket, thanx! Love your layout btw, and have been to the CSS zen garden.. beautiful site.. Anyways, Now Im going to spend some time disecting yours to see how you did it, and see where I went wrong.. A lot of it might have been trying to do the layout at 2am, but hey..
Thanx again!Glad to help.
What I did was to put the left image as bgimage for the body. I then put the right image as bgimage for the contents div. I gave the appropriate padding to the contents div so that the text doesnt overlap the image.
At this point, I have the two bgimages and the contents. Now I need to put the right hand menu. I needed to position that to the right edge of the screen, fit it in a 180px-wide space and keep it clear of the bgimage on the top. So I absolute-positioned it with:
- top: 325px to stay clear of the bgimage.
- right: 0px to keep it at the right edge of the screen.
- padding: 5px to keep the text from touching the edges
- width: 170px so that it occupies the 180px-wide space
Then I used the box model hack to feed width: 180px to IE5.
FInally, I used the font-family and font-size stuff to give it a "better" look.