SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: layout troubles
-
Aug 25, 2004, 13:52 #1
- Join Date
- Jun 2004
- Location
- denver,colo
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
layout troubles
what i want to do shouldent be to difficult.
here is an out line of what i want to do i have most of the header built but i'm wondering how to place the photo div. should i float it?
http://tripwire66.com/v2/i/layout.gif
here is the code
http://tripwire66.com/v2/index.php
i'm pretty sure i have to right amount of div to provide the control i want and for later use maybe . any adive would be helpfull
-
Aug 25, 2004, 14:23 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
If the photo is to go alongside the menu bar and nav and is never going to be any higher than the left side then you can just absolutely place it to the right and forget about it.
If however the photo is higher then the left side then it needs to be in the flow so you will have to float it so that it goes alongside and then clear it for following content. Remember that floats must come first in the html before the content they wrap around.
I notice you have made an error in your calculations and your menu should be 150px high and not 100px. Mozilla will crop the size to 100px whereas ie will let it expand.
Code:#menu { position:relative; width:120px; height:150px; background:red }
Paul
-
Aug 25, 2004, 14:42 #3
- Join Date
- Jun 2004
- Location
- denver,colo
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
well that would explain why i couldent get the float right. I think this will work .
thank you so much agian!!!
-
Aug 25, 2004, 15:00 #4
- Join Date
- Jun 2004
- Location
- denver,colo
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok i thought i had it right. It works fine in firefox but falls to crap in IE what did i do wrong?
http://tripwire66.com/v2/
-
Aug 25, 2004, 15:25 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
There are two things you need to consider.
The first is the border that you have given to each div which means the elements width will be increased by 2 pixels.
This means that in ie your nav gets pushed wider because its inner is 120px + 2px for the borders while its outer is also specifed at 120px. Moz on the other hand won't expand an element which is why the layout doesn' break in moz.
The second ie problem is that ie adds 3 pixels of space to content alongside a float and where space is tight there is nowhere to go so an element must drop.
The only solution is to cut off 3 pixels from the float using a negative margin which won't affect the size because ie adds it back on again to make the correct size.
heres the css
Code:div { border:1px solid black; } #all { width:600px; margin:0px auto; text-align:left; padding:15px; border:1px dashed #333; background-color:#eee; } #header { width:590px; height:400px; background-color:#FFF; } #menu { position:relative; width:120px; height:234px; background: url(http://tripwire66.com/v2/i/menu_BG.gif) repeat-y; } #nav { position:relative; width:118px; height:50px; margin:50px 0; } #photo { float:right; width:465px; height:367px; background: url(http://tripwire66.com/v2/i/photo.jpg) no-repeat; } * html #photo {margin-left:-3px} /* for ie only */
Paul
-
Aug 25, 2004, 16:55 #6
- Join Date
- Jun 2004
- Location
- denver,colo
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
well that makes perfect sense and it works great. thank you allot.
Does the book you guys have on tableless layouts get into semi-complex fluid layouts ? and some of these little fix's ?
agian you are the master.
-
Aug 26, 2004, 01:52 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
For most of the fixes your probably best just to browse this forum as every question that can come up probably has
Books are good for understanding how things should work but its usually practice that tells you how they really work in the different browsers.
Paul
Bookmarks