Topic: Best way to approach this CSS layout

Hey guys,

So I've completely embraced CSS and love every aspect of it. Now, I've run into a dilema that I can't quite figure out how to do in CSS.
I have this layout designed in PS, but I cannot for the life of me figure out how to build boxes around this.

It's a two column layout, but at certain sections I want to have a title bar on the left column align with the content on the right column. For example, if I'm on the ABOUT page, I'd like to have a small logo, next to the ABOUT content, but it's about 200-300 px lower.

http://www.wayoutwestenterprises.com/images/layout.png

I hope my description makes sense. I like my design, I just want to make it work in context of how I did it.



Here is my first attempt at building the html/css. It's really ugly as far as how I made the left icons align. <br><br><br><br><br> UGH.....

http://www.wayoutwestenterprises.com/dm/

That method works, and for the most part I'm almost fine with it... thought there's got to be some logical way to do this.

(Edited by Radical Rob on 07-24-2009 09:59)

it seems like it would be as easy as putting the icon in with the header and floating the header to the left by however many pixels the image is. I'm just beginning to get back in to web design/programming, so it's probably not as simple a fix as that, but if you have an html mock-up it's worth a shot


check out www.ixifx.net/mockup/test.html and see if that's what you'd be going for

I make no claims that the code is standards compliant, in fact I'm positive it won't validate, but you are welcome to use it =D

best of luck




You could stand me up at the gates of hell, but I won't back down (Tom Petty)

(Edited by I X I on 07-24-2009 09:53)

(Edited by I X I on 07-24-2009 09:58)

Negative margin-left and a background image should do fine.

Other notes:

Images like hdr_about.jpg & crew.jpg should not be images at all, as the text is not remotely fancy (and even if it were, we have dynamic web fonts now*). Image for the gradient in the latter, and the rounded corners.

None of your images should be JPEG; they should all be PNG. JPEG derives from Joint Photographic Experts Group, and photographs are pretty much all it's appropriate for (by design).

Logos are better if they can't be replicated merely by downloading REZ.ttf and typing 'discipleshipmedia'.

You could, if you wanted, make the curley braces vertically dynamic, allowing for any number of nav items in the future.

I have been informed that the way I did this in my original post did not cooperate well with internet explorer, so I have made some modifications
which apparently IE still doesn't like, but firefox and chrome seem to be playing nice. not sure why IE is having troubles.. maybe someone could enlighten me

the main bit of code to help with your problem of lining up the icon with the header

<div class="header"><img src="crew.png" />&nbsp;&nbsp;About</div>
<h3>Everything you need to know...</h3>
<hr />

and the corresponding css

.header {
display: inline;
font-size: 3em;
font-weight: bold;
margin-left: -60px;
}

...
so, instead of attempting to line up another element with the header, I just put the image in the header itself and moved it slightly to the left.

I also agree with pretty much everything else reisio said



I know the pieces fit, 'cause I watched them fall away (Maynard J. Keenan)

Static text should pretty much never be only within a div, as that's about as uninformative as plain text. Purely decorative images should always be added with CSS, never as img elements. hr's are basically vestigial, and overdue for official deprecation.

The markup should be something like this...

<h2>About<br />Everything you need to know?</h2>

...unless the second line is actually meant as a subsection heading where more sections may follow, then obviously <h2>, <h3>.

makes perfect sense. I knew that @font-family is coming out, but the logo was a placeholder for an actual "logo" of some sort.
Thanks for the input... I will make an attempt at it right now and see how it goes. Negative margin..... duh!!

One thing I can't figure out...

How do I make the left column stretch to the bottom so the right column doesn't wrap into my left column? As it is the left column has a height of like 650px, but I know there's got to be something wrong with that as well.

Posting results in a few...

btw reisio,
how would i make the curly brace vertically dynamic? I didn't want a gigantic brace, just enough to look aesthetically clean.



(Edited by Radical Rob on 07-24-2009 17:19)

quote:

---

Radical Rob said:

How do I make the left column stretch to the bottom so the right column doesn't wrap into my left column?

---

#rightcolumn { margin: 0 0 0 360px; }

quote:

---

Radical Rob said:

how would i make the curly brace vertically dynamic? I didn't want a gigantic brace

---

Sure, it's just nice to have things dynamic in case you add or remove even one item, or change text-size or something else slightly. You just need one top background image (top taper), one bottom (bottom), one repeating vertically (green vertical bar), and one in the middle (curl); or you could make either the top or bottom image ridiculously larger than it needs to be and skip the middle vertical repeater; or you could sacrifice perfect vertical symmetry for under-the-curl expansion only (or over ) and do it with just two images (top & bottom).

(Edited by reisio on 07-24-2009 17:47)

hehe... ok, little more complicated then I figured. I definitely want to figure it out, just to know how. thought I'm cool leaving it as is for now.
I carry a CSS book with me everywhere. It doesn't cover certain things like that though. :-)

margin left. duh.... im a dork.

When I try and validate the html to W3C, I get a float issue. I've always created two styles for images.

.imgleft {
float:left;
}

.imgright {
float:right;
}

And I get this...
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected

How do I define a width when the image size varies?

(Edited by Radical Rob on 07-24-2009 17:58)

If it's set on a container it won't matter what width you set. What you should really do is use HTML, though, as you've no justification for using XHTML.

Gotcha. One last question. I have the entire wrapper built the way it is because I couldn't figure out how to make the entire background be half beige and half white so when you expanded it would simply be two color. Doable or not worth the headache?

Doable. It's nice to have, though the background approach isn't all that hard to modify, either.