19 replies [Last post]
mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Hey everyone,

I'm currently in the middle of planning a site redesign and here's a Photoshop mockup of what I'm planning.

http://www.scenepointblank.com/matt/SPB-December-2006a.jpg

My current issues are trying to find a grid layout to work with for that kind of layout. I've experimented with various 2 column layouts trying to break my layout into that sort of thing but it doesn't really fit. Does anyone have some kind of basic startpoint to go from for something like this?

Matt

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 13 years 18 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Here is how I see

Here is how I see it:

Header: logo image
Navigation: using List and floats to make that nav
Features: Two floats placced next to each other. The float with tabs is going to be a doozie to do. Goodluck with that!
Content: one large text div with a right margin. On the right a float for that more news section.

Yup.. that simple! haha Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

vinhboy wrote:The float with

vinhboy wrote:
The float with tabs is going to be a doozie to do.

Not really. You'd use something like sliding door tabs to create the menu and then there'd be possible three options for how it's positioned:

  1. Give the right div a margin to push it down to line up with the left one

  2. Use a negative margin on the ul that holds the tabs

  3. Use absolute positioning on the ul that holds the tabs so it doesn't affect the position of the divs underneath it at all


As vinhboy says, you'd use floats (or at least one float) to create the featured boxes. You'd also use floats to create the content that comes underneath. You'd need to view it as kind of making two separate two-column layouts that sit on top of each other cos you'd need different widths and floats for each.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Thanks guys, I've put

Thanks guys, I've put together a basic concept:

http://www.scenepointblank.com/dev/

do you think that will work if I start trying to use the sliding door tabs (thanks for the link Tyssen, I was going to use that technique already)?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Yes. Now you've got the main

Yes. Now you've got the main elements in, try and incorporate the sliding doors menu.

Verschwindende wrote:
  • CSS doesn't make pies

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Okay, I've experimented with

Okay, I've experimented with that, it looks okay (so far) in Firefox but not in IE (7):

http://www.scenepointblank.com/dev/

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 13 years 18 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

sliding door is ok, but not

sliding door is ok, but not reliable in my opinion
if you want true tabbed menu try these:

http://www.dynamicdrive.com/dynamicindex17/

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

vinhboy wrote:sliding door

vinhboy wrote:
sliding door is ok, but not reliable in my opinion

What's not reliable about it?

Matt, looking at your page just now it seems more out of whack in FF than IE, but try making these changes:

#latestreviewsContent { float:left; width:60%; font-size:93%; line-height:normal; background-color: #990000; }

#features {
float:right;
margin:0 0 0 1em;
padding:.7em;
width:35%;
background-color:#eeeeee;
border:1px solid #000000;
font-size:.8em;
}

Your width of 30em on #features was too wide and if you have the width in % on #latestreviewsContent then you should do the same on #features. Same with the padding and margins on the two divs - better to use % because it's harder to calculate what the correct em value should be so that width + margin + padding adds up to 100%.

Also, this type of stuff:

#footer { right:2.85em; margin-top:.2em; margin-bottom:2em; margin-left: 2.85em; margin-right:2.85em; voice-family: "\"}\""; voice-family: inherit; margin-left:2.85em; margin-right:2.85em; padding:1em .5em 1em .5em; background:#cccccc; font-size:.7em; text-align:center; } is pointless. You're using the outdated voice family hack and even then, you're not using it correctly. The idea behind it is to give modern browsers one value and then IE5+ a different value. You've specified the same value before and after which kinda defeats the purpose. But it's not a hack that people use anymore anyway - better to use conditional comments to target IE5+.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Tyssen: thanks for the

Tyssen:

thanks for the tips, I made those changes but the page still looks the same as before.

Incidentally, I got the basis of this layout from http://www.dbfnetwork.info/tinderbox/index.html - I'm still not hugely confident with CSS layouts (I can handle the smaller parts well, it's just putting it all together) so I figured it was easier to use existing code rather than re-inventing the wheel.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Sorry, I didn't read your

Sorry, I didn't read your previous post properly (missed the 7 after IE). IE7's problem is this: * html .clearfix {height: 1%;} IE7 doesn't understand * html but IE7 needs a dimension on #content (via .clearfix) to trigger hasLayout. You may need to use an IE conditional comment that gives height to .clearfix to all versions of IE but is hidden from other browsers.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Hey everyone, brief

Hey everyone, brief update:

http://www.scenepointblank.com/dev/2/

I basically started from scratch and within an hour or two I made much more progress (and this seems to work okay both in FF and IE, and Opera).

I'm a little scared to put the tabs into the "new reviews box", haha, but I'll cross that bridge when I come to it. For now, I want to get the search box to align to the right of the blue navigation bar, but I'm unsure how to do this, any tips?

What do you guys think in general? I know the logo looks awful, it's just a placeholder, and I'm saving the text formatting stuff till last since it's easy (just look at the Photoshop design I posted in my first post to see how that should look).

Matt

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

To get your search form to

To get your search form to the right, use float: right. The form needs to come before your navigation list in the source to do that though. Also, that nav list should be an unordered list with the list items set to display: inline, not a h2 with the anchors separated by |

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Thanks Tyssen, that worked

Thanks Tyssen, that worked perfectly. I had a little trouble with IE putting the bottom-right curved border image before the form began, but I just decreased the font size of the form inputs and it worked.

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Run into another little

Run into another little issue here:

http://www.scenepointblank.com/dev/2/

see the navigation arrows on the red box? When I insert an image after the "page 2/4" text, it automatically clears on the left. I have this code:

Read the interview
page 2/4

and then this in the CSS:

.bottom { width: 50%; clear: left; }

.bottom img {
float:left;
}

Changing the float/clear properties for either of these doesn't seem to do anything. Any tips?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

And whilst it displays (not

And whilst it displays (not the arrows) sort of OK in IE, it doesn't in FF where the rounded bottom is broken.

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Yeah, it's only when I

Yeah, it's only when I insert that image into the div that it messes up. The other rounded box uses the same code and works fine.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

mattpointblank wrote:Yeah,

mattpointblank wrote:
Yeah, it's only when I insert that image into the div that it messes up. The other rounded box uses the same code and works fine.

Does this mean a float hasn't been cleared?

mattpointblank
Offline
Enthusiast
Last seen: 13 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

Ahhhh yes, it was inheriting

Ahhhh yes, it was inheriting from something else; I thought I'd already tested that. Thanks!

linspirell
linspirell's picture
Offline
Regular
Indonesia
Last seen: 11 years 31 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2007-05-09
Posts: 25
Points: 0

i don't know what happened

i don't know what happened with u..
try developt your page first
then ask what the hard...

Hey friends! my name is -oka prinarjaya- Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Pssst . . . . 4-month-old

Pssst . . . . 4-month-old thread Wink

Verschwindende wrote:
  • CSS doesn't make pies