Welcome to WebmasterWorld Guest from 54.161.25.142

Forum Moderators: not2easy

Message Too Old, No Replies

CSS layout help

What's the best way to do this layout.

     
4:07 pm on Jul 11, 2008 (gmt 0)

5+ Year Member



HI.

I just created all my graphics for my home page
but I'm not sure how exactly to do this layout.

What I need to have is all the hyperlinks on the left side
and text and images on the right.
The thing is, is that the links are under the logo.

I really wish I could post an image here
of the layout because it's a little different
then most 3 div layouts. Atleast I think it is.
Maybe I'm wrong.Anyways here is my attempt
at drawing it.

[....................[......................]
[LOGO.............[......................]
[............][......[TEXT...............]
[\\\\\\\\\\][......[......................]
[............][......[......................]
[LINKS....][......[......................]
[............][......[......................]
[............][......[......................]
[............][......[......................]
[\\\\\\\\\\][......[......................]
[............][......[......................]
[............][......[......................]

The text and image section takes up all the right side of the page.
Then there is the logo on the
top left, then below it is the hyperlinks box
then below that is some graphics.
That left hyperlinks box is more or less
in the middle left.

So what's the best way to go about this?
I know basic CSS but not enough on how to do this.
I tried absolute positioning but It turned into a mess.

Thanks for reading.

5:33 pm on Jul 12, 2008 (gmt 0)

5+ Year Member



First let me say I'm not a CSS expert yet.

But here is the html layout that I would use.



<body>
<div#wrapper>
<div#left-column>
<div#logo>
<!-- Enter logo information here -->
</div>
<div#nav>
<!-- Enter your links information here -->
</div>
</div> <!-- end of left column div -->
<div#right-column>
<!-- Enter your text information here -->
</div>
</div> <!-- End of wrapper div -->
</body>



Now there are couple ways to style this with CSS.

You could float the left and right column divs.
You could give div#wrapper a position of relative and div#left-column and div#right-column position absolute.

The first choice you can make your layout very fluid. The second would be more of a fix size, but you could use em's for your dimensions to make it work with different font sizes.

I would also do a Google search for tutorials on CSS, Eric Meyers would be a good author to use to narrow the search.

HTH

PhotoJoe

12:42 am on Jul 13, 2008 (gmt 0)

5+ Year Member



Sorry about my last post. I mixed the html and CSS syntax together. I should get it right this time.



<body>
<div id="wrapper">
<div id="left-column">
<div id="logo">
<!-- Enter logo information here -->
</div>
<div id="nav">
<!-- Enter your links information here -->
</div>
</div> <!-- end of left column div -->
<div id="right-column">
<!-- Enter your text information here -->
</div>
</div> <!-- End of wrapper div -->
</body>

Now there are couple ways to style this with CSS.
You could float the left and right column divs.
You could give div#wrapper a position of relative and div#left-column and div#right-column position absolute.

The first choice you can make your layout very fluid. The second would be more of a fix size, but you could use em's for your dimensions to make it work with different font sizes.

I would also do a Google search for tutorials on CSS, Eric Meyers would be a good author to use to narrow the search.

HTH

PhotoJoe

 

Featured Threads

Hot Threads This Week

Hot Threads This Month