homepage Welcome to WebmasterWorld Guest from 54.81.170.186
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS layout help
What's the best way to do this layout.
a0731370




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

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.

 

PhotoJoe




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

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

PhotoJoe




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

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


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved