cash415 Posted March 11, 2011 Share Posted March 11, 2011 I need someone to help me with a problem I've been trying to solve for like hours and hours with no real progress. What I'm trying to do is copy this image Mondrian. I'm just starting to learn css so there are a bunch of little details I'm still not used to. I was able to copy all do all 3 boxes on the left, but I'm having a hard time figuring out how to make the red box in the middle and the following boxes below and the two boxes on the right. At one point I made it all the way to the bottom white box, but I couldn't figure out how to make the two boxes on the right. I tried using Float:left, but I wasn't able to line it up with the first box. I'm about to quit this if I can't figure it out by today. If possible, can someone please send me their email address or Google Talk info so I can ask them a few questions. I'm so pissed off right now because I've been working on this for hours and I still can't figure it out. Link to comment Share on other sites More sharing options...
cash415 Posted March 11, 2011 Author Share Posted March 11, 2011 How the ###### do I make these block elements to go horizontal? I did it at one point but I don't think I did it properly. All my block elements are vertically and I don't understand how to change it. That's how I wrote it. I know I did a crappy job but let me know what mistakes I did. The whole relative/absolute position is a bit confusing as well.<style type="text/css">.container { position:absolute; height:700px; width:900px; margin:10px 50px; background-color:black; }.logo { position:relative; width:97px; height:76px; background-color:white; color:black; font-family:Impact; font-size:xx-large; padding:10px 10px; margin:15px;}.content { width:337px; height:348px; margin:15px; background-color:red; }.nav1 { width:116px; height:230px; margin:10px 15px 15px 15px; background-color:white;}.nav2 { width:116px; height:155px; margin:0px 15px 15px 15px; background-color:blue;}</style></head><body><div class="container"><div class="logo"></div> <div class="content"></div><div class="nav1">nav1</div><div class="nav2">nav2</div></div></body></html> Link to comment Share on other sites More sharing options...
[dx] Posted March 11, 2011 Share Posted March 11, 2011 Work with tables instead divs. Link to comment Share on other sites More sharing options...
cash415 Posted March 11, 2011 Author Share Posted March 11, 2011 Work with tables instead divs.i was thinking of using that too, but for now i want to concentrate on why i'm not able to make this work without the use of the tables. Link to comment Share on other sites More sharing options...
jeffman Posted March 11, 2011 Share Posted March 11, 2011 This can be done without tables or positioning of any kind, using just dimensions and floats. Here are a couple tips and a warning.The warning. IE7 doesn't play like everyone else, including IE8, when it comes to float and clear.Tip one. Use a wrapper div to constrain the width of the whole Mondrian.Tip two. Think in terms of horizontal rows FIRST, rather than sides, since browsers want to fill up horizontal spaces before moving vertically down. This will also eliminate the need to have nested container divs. The only divs you need are one for each "box" and the wrapper.Tip three. Notice that each row contains to elements that are vertically stacked. One stack is on the left. The other stack is on the right. So something about the bottom row will have to be done exactly the opposite of the top row. Link to comment Share on other sites More sharing options...
thescientist Posted March 11, 2011 Share Posted March 11, 2011 Work with tables instead divs.I think he would get a more practical benefit from learning the box model than just resorting to tables. this is a good exercise in learning it, and not using positioning.--well, the first thing you need to know is how div's behave. since they are block level elements, they will always force a new line after themselves. This can be resolved by changing it's display to inline, or inline block. floating takes an element out of the flow, and thus lets you move it around.the first thing I would do it cut the picture in half. have a container, and a top half and a bottom half. for the top half, you could have a left and right side. two divs stacked on top of each other on the left, and one big one on the right. for the bottom half, three divs, with the right one containing two div's stacked on top of each other. Link to comment Share on other sites More sharing options...
jeffman Posted March 11, 2011 Share Posted March 11, 2011 @thescientist:Remember that IE can be disagreeable when block-level elements (like divs) are "demoted" to inline or inline-block. I think your plan will work if the elements are spans.But it can all be done with floating divs, too, without changing the display property. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 11, 2011 Share Posted March 11, 2011 (1) make sure your page has a doctype specified strict or transitional(2) set the width of container element to include the boxes plus margins total, this will prevent bottom row trying to align themselves with top row. Also because the inner elements are floated and out of flow, the container has nothing to surround, but by using overflow: hidden this will fix this problem(3) all element will be given float, but the divided elements (top - 2 x left of red box, bottom 2x on right), must be floated in the opposite direction to the others on the same row.(4) DO NOT USE POSITION ABSOLUTE. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.