PDA

View Full Version : Box Layout



jenius
Jan 26th, 2010, 12:54 AM
This isn't a super complex question, I don't think - really what I'm trying to ask was why did I need to put in so much seemingly random code to get the boxes to display this way? Is there an easier way for me to arrange them? This seems to work fine and look the same in all the browsers I've tested it in, but the strangeness of the code I needed to put in to get this to work disturbed me a bit.

Is there any way for me to make this simpler or slim it down a bit?

View site here: http://djjenius.com/testing

Relevant CSS and HTML:




/* @group Site Mods */

RELEVANT CSS --- doctype and other styles not included, but are there ---

#wrapper {
padding-top: 200px;
margin-left: auto;
margin-right: auto;
width: 834px;
height: 414px;
border: 2px solid red;
}

#wrapper #about {
width: 362px;
height: 414px;
margin-right: 2px;
border: 1px solid;
}

#wrapper #connect {
width: 470px;
height: 113px;
margin-left: 363px;
margin-top: -416px;
margin-bottom: -1px;
border: 1px solid;
}

#wrapper #work {
width: 470px;
height: 300px;
margin-left: 363px;
border: 1px solid;
}

/* @end */

RELEVANT HTML ---

<div id="wrapper">

<div id="about">

</div> <!-- /about-->

<div id="connect">

</div> <!-- /connect-->

<div id="work">

</div> <!-- /work-->


</div> <!-- /wrapper-->


Thanks so much for looking this over anyone who did! :)

Excavator
Jan 26th, 2010, 02:35 AM
Hello again jenius,
You are having to move #wrapper down 200px because the floats in your #nav are not cleared.
To illustrate that, put a background:#f00; on #nav and you'll see nothing happens. Clear the floats in #nav by adding overflow:auto; and you'll see even more problems.

Have a look at the easy way of clearing floats (http://www.quirksmode.org/css/clearing.html).

Another concept that will help you is how a basic 2-column layout can be coded to work in all browsers. By floating one column and margining the other over you can sidestep an IE6 bug or three. Here is a demo I have of a simple 2-column layout (http://nopeople.com/CSS/simple_2-column/index.html) that demonstrates this.

With those 2 things in mind, and some CSS condensing, I've come up with this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome to Jenius.me!</title>
<style type="text/css">
html, body {
height: 100%;
overflow-y: scroll; /* force scrollbars */
color: #999;
text-shadow:rgba(0,0,0,0.1) 0 0 0;
font: 100% "Lucida Grande", Tahoma, Verdana, sans-serif;
}
body{
background: #050505 url(metal.png) 0 0 repeat-x;
line-height: 1.4;
font-size: 0.75em;
}
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
#wrapper {
width: 834px;
margin: 0 auto;
overflow: auto;
border: 2px solid #f00;
background: url(light2.png) center top no-repeat;
}
#nav {
height: 200px;
text-align: center;
}
#about {
width: 362px;
height: 414px;
float: left;
border-top: 1px solid;
border-right: 1px solid #ccc;
background: #cf6 url(about_box.png)
}
#connect {
height: 114px;
margin-left: 363px;
border-bottom: 1px solid #ccc;
background: #0f0;
}
#work {
height: 300px;
margin-left: 363px;
background: #999;
}
#nav ul {
width: 594px;
margin: 0 auto;
background: #00f;
overflow: auto;
}
#nav li {
list-style-type: none;
display: inline;
margin-top: 100px;
float: left;
}
#nav ul li a {
display: block;
height: 50px;
background-position: 0 0;
outline: 0;
}
#nav .home a {
background: url(home1.png) no-repeat;
width: 84px;
}
#nav .home a:hover {background-position: 0 -50px;}
#nav .home a:active {background-position: 0 -100px;}
#nav .about a {
background: url(about1.png) no-repeat;
width: 71px;
margin-left: -2px; /* unexplainable 2px margin fix */
}
#nav .about a:hover {background-position: 0 -50px;}
#nav .about a:active {background-position: 0 -100px;}
#nav .portfolio a {
background: url(portfolio.png) center no-repeat;
width: 91px;
}
#nav .portfolio a:hover {background-position: 0 -50px;}
#nav .portfolio a:active {background-position: 0 -100px;}
#nav .blog a{
background: url(blog.png) center no-repeat;
width: 69px;
}
#nav .blog a:hover {background-position: 0 -50px;}
#nav .blog a:active {background-position: 0 -100px;}
#nav .resources a{
background: url(resources.png) center no-repeat;
width: 92px;
}
#nav .resources a:hover {background-position: 0 -50px;}
#nav .resources a:active {background-position: 0 -100px;}
#nav .hire a{
background: url(hire.png) center no-repeat;
width: 84px;
}
#nav .hire a:hover {background-position: 0 -50px;}
#nav .hire a:active {background-position: 0 -100px;}
#nav .contact a{
background: url(contact.png) center no-repeat;
width: 103px;
}
#nav .contact a:hover {background-position: 0 -50px;}
#nav .contact a:active {background-position: 0 -100px;}
a {text-decoration: none;}
p {margin-bottom: 1em;}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li class="home"><a href="#"></a></li>
<li class="about"><a href="#"></a></li>
<li class="portfolio"><a href="#"></a></li>
<li class="blog"><a href="#"></a></li>
<li class="resources"><a href="#"></a></li>
<li class="hire"><a href="#"></a></li>
<li class="contact"><a href="#"></a></li>
</ul>
</div> <!-- nav -->
<div id="about">
</div> <!-- /about-->
<div id="connect">
</div> <!-- /connect-->
<div id="work">
</div> <!-- /work-->
</div> <!-- /wrapper-->
</body>
</html>

I'm pretty sure it still works - I didn't adjust the path to any of your images so I didn't double check. If I did happen to break it, you should still be able to see what I was trying to do.
Hope that helps a bit... :)

jenius
Jan 26th, 2010, 08:00 AM
Thanks so much for your help! This is amazing... I really appreciate it, and it must have taken you a while. Is there any way I could link to you or your website once this is finished? That's the least I could do... you've really made this a million times less frustrating for me.

Either way, the site broke with the changes, so I stuck with the original, but I added in a bunch of the changes you made, and it definitely helped. Thanks so much again!

Update: I've moved quite a ways since this last post in the site's development. Here's the current site:
http://djjenius.com/testing

As you can see, I ran into a little snag with the image slider in the bottom right (surprisingly in the css, not the script). I made a frame that I wanted to layer over the images, but I can't get it to layer that way (even though the buttons are layering just fine). I even tried changing the frame to being absolute positioned and upping the z-index, but that wouldn't do it.

This seems like such a trivial problem, but do you know how I could get the frame to layer over the images here? Here's a little clip of the code directly involved, so you don't have to browse the whole source looking for it.

Thanks so much again :D




CSS Styles ------

#wrapper #work {
width: 470px;
height: 300px;
margin-left: 363px;
}

.hidden { display: none; }

#prevNext {
margin-bottom: -4.7em;
z-index: 2;
}

#prevNext img {
position: relative;
z-index: 2;
cursor: pointer;
}

#slides {
position: relative;
left: 21px;
width: 405px;
height: 247px;
z-index: 1;
}

HTML -----

<div id="work">

<div class="heading"></div>

<div class="monitor">

<div id="prevNext">
<div class="leftbutton"><img src="transparent.png" alt="Left Button" class="jFlowPrev" /></div>
<div class="rightbutton"><img src="transparent.png" alt="Left Button" class="jFlowNext" /></div>
</div> <!-- /prevNext-->

<div id="slides">
<div><img src="sample_eyes.png" alt="photo" /></div>
<div><img src="sample_light.png" alt="photo" /></div>
</div> <!-- /slides-->

<div id="controller" class="hidden">
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
</div>

</div> <!-- /monitor-->

</div> <!-- /work-->

finoy_ako
Jan 26th, 2010, 01:45 PM
w0w great page i didn't see any table here,, wew pretty awesome. i got another idea.

Excavator
Jan 26th, 2010, 07:41 PM
Update: I've moved quite a ways since this last post in the site's development. Here's the current site:
http://djjenius.com/testing

Have you seen that in FF3.6? It's a little messed up because it can't center without the floats being cleared in #nav.
Add this bit in red -

#nav {
width: 594px;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: auto;
}

Excavator
Jan 26th, 2010, 07:58 PM
This seems like such a trivial problem, but do you know how I could get the frame to layer over the images here? Here's a little clip of the code directly involved, so you don't have to browse the whole source looking for it.

Guess I'm not seeing the problem. It looks and works good in FF3.6, IE8 and IE7.

jenius
Jan 26th, 2010, 11:05 PM
Oh yeah good call on the firefox, and thanks for the fix.

I guess it's not too obvious, but the pictures are layed over a picture frame that I wanted them to be under. It looks ok like this, but would look infinitely better if I could get the pictures to move below the frame.

The frame looks like this: http://djjenius.com/testing/HD_monitor.png - and it is defined in the class "monitor".

It looks much better against a dark background - it has rounded corners which fits with the rest of the site, and light overlay that makes the pictures appear glossy.

I didn't get this class into the relevant code last time (my bad) but here it is:



CSS Styles ------

/* styles defining the script related elements (buttons, pictures, controller) */

.hidden { display: none; }

#prevNext {
margin-bottom: -4.7em;
z-index: 2;
}

#prevNext img {
position: relative;
z-index: 2;
cursor: pointer;
}

#slides {
position: relative;
left: 21px;
width: 405px;
height: 247px;
z-index: 1;
}

/* styles defining the "work" area */

#wrapper #work {
width: 470px;
height: 300px;
margin-left: 363px;
}

#wrapper #work .heading {
width: 107px;
height: 35px;
margin-left: auto;
margin-right: auto;
background-image: url(work_title.png);
}

#wrapper #work .monitor {
position: relative;
width: 447px;
height: 250px;
background-image: url(HD_monitor.png);
z-index: 3;
}

#wrapper #work .monitor .leftbutton {
position: relative;
background-image: url(left_arrow_sprite.png);
top: 109px;
left: 2px;
width: 38px;
height: 39px;
z-index: 3;
}

.leftbutton:hover {background-position: 0 -39px;}
.leftbutton:active {background-position: 0 -78px;}

#wrapper #work .monitor .rightbutton {
position: relative;
background-image: url(right_arrow_sprite.png);
top: 70px;
left: 409px;
width: 38px;
height: 39px;
z-index: 3;
}

.rightbutton:hover {background-position: 0 -39px;}
.rightbutton:active {background-position: 0 -78px;}

HTML -----

<div id="work">

<div class="heading"></div> <!-- title that says "my work" -->

<div class="monitor"> <!-- monitor screen - I'd love for this to appear on top of the slides -->

<div id="prevNext"> <!-- left and right buttons -->
<div class="leftbutton"><img src="transparent.png" alt="Left Button" class="jFlowPrev" /></div>
<div class="rightbutton"><img src="transparent.png" alt="Left Button" class="jFlowNext" /></div>
</div> <!-- /prevNext-->

<div id="slides"> <!-- photos -->
<div><img src="sample_eyes.png" alt="photo" /></div>
<div><img src="sample_light.png" alt="photo" /></div>
</div> <!-- /slides-->

<div id="controller" class="hidden"> <!-- hidden controller, this works fine and doesn't affect anything else -->
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
</div>

</div> <!-- /monitor-->

</div> <!-- /work-->

Excavator
Jan 27th, 2010, 12:19 AM
I see what you're saying. It would look better if the frame stayed on top. I don't see an obvious fix right off, I'm assuming you've already experimented with z-index...

jenius
Jan 27th, 2010, 06:47 AM
Ok, so I managed to fix this using seriously questionable (and even sometimes guessed) methods. I went into this thinking my code would be all shiny and clean, but now it's a total mess with large parts in which I don't even understand how I got it to work. But the site does work, as far as I can tell (in firefox, safari, and chrome)!

Either way, here's the final result of my new homepage!
http://djjenius.com/testing

Thanks so much again for the help Excavator, and if you have a website or anything I'd be more than happy to link to it - without you i would have spent many more hours stuck and frustrated with this stuff.

Excavator
Jan 27th, 2010, 05:31 PM
Ok, so I managed to fix this using seriously questionable (and even sometimes guessed) methods. I went into this thinking my code would be all shiny and clean, but now it's a total mess with large parts in which I don't even understand how I got it to work. But the site does work, as far as I can tell (in firefox, safari, and chrome)!

Either way, here's the final result of my new homepage!
http://djjenius.com/testing

Oops, not so fast. IE8 has a different way of seeing that. Looks good in FF3.6 and IE7 though! :thumbsup:
Validator finds a few things to fix too.


Thanks so much again for the help Excavator, and if you have a website or anything I'd be more than happy to link to it - without you i would have spent many more hours stuck and frustrated with this stuff.

Always glad to help - :) -Check your PMs jenius.

jenius
Jan 28th, 2010, 01:59 AM
oh boy... how does it look in IE8? Do you know how I can fix it? I thought I was in the clear, but apparently not yet...

jenius
Jan 28th, 2010, 09:32 AM
Got it!!

I just spent quite a while going back, cleaning up, and restructuring my entire code. I used an IE8 renderer and the screenshot looked like it worked (does it?). The html is now valid, css is valid (except for the bits of css3 in there), and I actually understand everything in the layout. Score! I even got the favicon to work!

http://djjenius.com/testing

Thanks so much again for the help! On to the other pages, although these should now be significantly easier (except for the blog, which I'm going to try to develop in drupal...)

Excavator
Jan 28th, 2010, 05:16 PM
Wow jenius, That looks very nice. :thumbsup:
Works perfectly in the 3 browsers I have - FF3.6, IE8 (also IE8 compatability mode) and IE7.

You already know about Attached vs. Linked CSS (http://www.giantisland.com/Resources/CSS_Embed_Import_or_Linked.aspx) don't you?

jenius
Jan 28th, 2010, 07:48 PM
Thanks! It feels so much better to have nice clean code that makes sense to me. I guess the real breakthrough for me was realizing that you can't stack divs on top of each other, that they automatically are spaced below like paragraphs, and I need to use negative positioning to get them to stack right.

Yes I do, I like to develop with an internal stylesheet for convenience and then export if after the site is done (is this not a good way to do it?)

Excavator
Jan 28th, 2010, 08:02 PM
Yes I do, I like to develop with an internal stylesheet for convenience and then export if after the site is done (is this not a good way to do it?)

Just personal preference, it's not going to make any difference when working on one page. Later on, when you start developing multiple pages,you will want it linked. That way you can double check your specificity and make sure your not building in conflicts.