Centered 3 row layout

Hi everyone!

I’m currently trying to make a layout like the one below:

Basically, I want three rows, one row with one item, a second row with three items, and the final row will have a menu using Kwicks for Jquery.

The problem I’m having is centering everything both vertically and horizontally and being able to set the margins between the different items.

I’ve been playing around with different things but nothing seems to really work the way I want it to.

Does anyone know of a basic template I could use? Or any other pointers would be greatly appreciated!

Thanks! :slight_smile:

A little late, I know.
I just wanted to express my thanks to the people that helped with this issue. Especially Rayzur. I got everything working as I want and it looks wonderful.
Thank you very much Rayzur for all the help you’ve offered. I appreciate it a lot! :slight_smile:

The problem I’m having is centering everything both vertically and horizontally and being able to set the margins between the different items.
Hi juicyy, Welcome to SitePoint! :slight_smile:

Horizontal centering is never really a problem since that is achieved by setting auto side margins along with a width. Vertical centering is where things will get tricky with css.

However, there is a very simple method for v-centering a fixed height wrapping div. It may not work for you since I don’t know all the aspects of your requirements. From what I am seeing with your demo image is that the top of the three elements in the middle row are at vertical center of the page. The method I just linked to can handle that very easily but the top block and the footer would remain in the same place.

Here is a quick mock-up of that method with your three rows -
http://www.css-lab.com/test/vert-cntr-wrap.html

There may be some more ways to go about it but we will need to know how you want all the elements to behave. If the footer has to stay at the bottom of the page you could use a fixed positioning but there will be limitations with that too.

Hey Rayzur,

Thanks for the warm welcome :).

The mock-up you showed me works great! It’s exactly what I’ve been looking for. Thank you!

However, one slight problem is the bottom navigation menu. I’d like for it to be centered but I can’t seem to figure out how to get it that way. Tried a few different things but it isn’t budging. This is the code I’m using to get it in the layout:

 <div id="nav"><div id="kwick" class="first">
<ul class="kwicks">
			<li><a class="kwick lastfm url" href="http://www.last.fm"><span>lastfm</span></a></li>
			<li><a class="kwick goodreads url" href="http://www.goodreads.com/"><span>goodreads</span></a></li>
			<li><a class="kwick steam url" href="http://steamcommunity.com/><span>steam</span></a></li>
			<li><a class="kwick facebook url" href="http://www.facebook.com"><span>facebook</span></a></li>
			<li><a class="kwick twitter url" href="http://twitter.com"><span>twitter</span></a></li>
		</ul></div></div>  

And this is the css associated with the menu:

.first {
	position: absolute;
}


#kwick .kwicks {
	display: block;
	height: 43px;
}

#kwick li {
	float: left;
	list-style: none;
}

#kwick .kwick {
	display: block;
	cursor: pointer;
	overflow: hidden;
	height: 43px;
	width: 60px;
	background: #fff;
	margin-right: 15px;
}

#kwick .kwick span {
	display: none;
}


#kwick .lastfm {
	background: url(Lastfm.png);
	background-repeat: no-repeat;
}

#kwick .facebook {
	background: url(Facebook.png);
	background-repeat: no-repeat;
}

#kwick .goodreads {
	background: url(Goodreads.png);
	background-repeat: no-repeat;
}

#kwick .twitter {
	background: url(Twitter.png);
	background-repeat: no-repeat;
}

#kwick .steam {
	background: url(Steam.png);
	background-repeat: no-repeat;
}

Maybe it’s not moving because it’s a list? Any ideas on how to move it to the center?

Thank you!

Maybe it’s not moving because it’s a list? Any ideas on how to move it to the center?

Hi,
Since your list items are fixed widths you can add their total widths plus margins and set the parent to that width. Then give the parent a left padding equal to all the right margins on the li.

After doing that it was not moving because the absolute positioning on that .first class was giving more weight over the #kwick div.

You really don’t need to be nesting that UL in two divs and much less one div. I don’t know all the specifics about that kwick menu but I will leave one wrapping div since it may be doing something I am not aware of.

Removing the absolute positioning from the .first class (which leaves that class meaningless now) will produce this.

http://www.css-lab.com/test/vert-cntr-wrap.html

I would like to see you get rid of that #kwick div and just style the UL alone since it is capable of handling everything.

Thanks for the code, Rayzur! It looks like it does exactly what it should, however the ‘animated’ part of it makes the menu go to the bottom. Probably because the width isn’t long enough. I tried changing it to 500px but that made the menu go back to the left. I’ve made some screenshots so you can see exactly what I’m talking about.

As it looks now:

What it looks like when hovered over:

Here’s a live working example of what I’m talking about: test.html Hopefully this will make it more clear.

So how would I go about increasing the width for this particular part?

You’ve been a lifesaver so far! Thank you!

Hopefully this will make it more clear.

So how would I go about increasing the width for this particular part?
Hi,
Yes that helps a lot!
Now that I have the images and js I see why they were using the absolute positioning on that .first class that was being set on the #kwick div.

I would like to see you get rid of that #kwick div and just style the UL alone since it is capable of handling everything.
I was able to style everything on just the UL and eliminate that div that was wrapping the ul as I mentioned earlier.

There may no longer be a need for that vertical centering method since you have changed the height to 800px. I am getting a scrollbar now but I will go into that later.

Here is a live example using your images and js -
http://www.css-lab.com/test/juicy/test.html
( FYI - I have set the images and js files in their own folders so the file paths will be different than your live example )

To center the ul and allow it to expand when the list items are hovered on we will use that AP that was on the .first class originally and just hook it to the UL itself.

/*=== Kwick Nav Styles ===*/
[B]ul#kwick[/B] {
    [COLOR=Blue]position:absolute;[/COLOR] /*shrink wrap and remove from flow*/
    height:43px;
    [COLOR=Blue]left:50%;[/COLOR]
    margin:109px 0 0 [COLOR=Blue]-180px[/COLOR];/*180px is half of UL total width*/
    padding:0 0 0 10px;
    /*background:red; for testing*/
}

It is shrinkwrapping (as AP elements do) and the width of the list items is what is determining the total width. We will set the UL at left:50%; and then drag it back with a negative left margin that is half of the width of the total amount of the list items which is 360px.

Now for a little housecleaning on the html. We will just set that #kwick ID on the UL and eliminate the div.


    <ul id="kwick">
        <li><a class="kwick lastfm" href="http://www.last.fm"><span></span></a></li>
        <li><a class="kwick goodreads" href="http://www.goodreads.com/"><span></span></a></li>
        <li><a class="kwick steam" href="http://steamcommunity.com"><span></span></a></li>
        <li><a class="kwick facebook" href="http://www.facebook.com"><span></span></a></li>
        <li><a class="kwick twitter" href="http://twitter.com"><span></span></a></li>
    </ul>

That gives us this CSS for the UL styles now. The no-repeat rules have been worked into the shorthand background property for all the anchor classes.

/*=== Kwick Nav Styles ===*/
ul#kwick {
    position:absolute; /*shrink wrap and remove from flow*/
    height:43px;
    left:50%;
    margin:109px 0 0 -180px;/*180px is half of UL total width*/
    padding:0 0 0 10px;
    /*background:red; for testing*/
}
#kwick li {
    float:left;
    list-style:none;
}
#kwick a.kwick {
    display:block;
    cursor:pointer;
    overflow:hidden;
    height:43px;
    [COLOR=Blue]width:60px[/COLOR];[COLOR=DarkGreen]/*([B]70px[/B] total with right margin) x (5 list items) = [B]350px[/B] + UL [B]10px[/B] left padding = [B]360px[/B] total UL*/[/COLOR]
    [COLOR=Blue]margin-right:10px;[/COLOR]
}
#kwick li span {display:none;}

#kwick a.lastfm {background: url(images/lastfmg.png) no-repeat;}
#kwick a.facebook {background: url(images/facebookjs.png) no-repeat;}
#kwick a.goodreads {background: url(images/goodreads.png) no-repeat;}
#kwick a.twitter {background: url(images/twitterr.png) no-repeat;}
#kwick a.steam {background: url(images/steamuk.png) no-repeat;}


Here is a version that gets the html a little leaner.

http://www.css-lab.com/test/juicy/test-2.html

It eliminates the top div and moves those styles to the anchor instead.

The mid div gets turned into a UL and likewise the styels were moved to the UL#mid.

Amazing. Thank you! I’m learning so much!
But yes, the scrollbars seem to be there even though my resolution should be big enough to prevent them from showing up. Pressing f11 eliminates them and using a higher resolution also makes them no show up.
Does this mean I should make the height less than 800px? What would you suggest?

Thanks again for all your help :).

I missed this thread. Glad it seems sorted. Nice work Ray! :slight_smile:

Yet, as an alternative to the javascript enhancement, I want to chip in a CSS solution for the link backgrounds on-hover-extending. Of course it lacks the javascript delayed motion, but it’s an option to consider I think.

This nav-css should work together with the rest of the code that Ray supplied above:


/*=== Kwick Nav Styles ===*/
#kwick{
	margin:109px auto 0;
	padding-left:184px;
	width:534px;
	height:43px;
}
#kwick li{
	list-style:none;
	float:left;
}
#kwick a{
	float:left;
	padding-top:43px; /* push the link text out of sight */
	width:70px; /* instead of 10px left margin: 10px extra width and bg moved 10px right */
	height:0;
	overflow:hidden; /* don't show the link text overflow */
}
#kwick a:hover{
	width:234px; /* increase if more hover-space is needed to next icon */
}
#kwick .lastfm{ background:url(images/lastfmg.png) no-repeat 10px 0}
#kwick .goodreads{ background:url(images/goodreads.png) no-repeat 10px 0}
#kwick .steam{ background:url(images/steamuk.png) no-repeat 10px 0}
#kwick .facebook{ background:url(images/facebookjs.png) no-repeat 10px 0}
#kwick .twitter{ background:url(images/twitterr.png) no-repeat 10px 0}

In the html, you could also remove the spans:

    <ul id="kwick">
        <li><a class="lastfm" href="http://www.last.fm">Last-fm</a></li>
        <li><a class="goodreads" href="http://www.goodreads.com/">Good Reads</a></li>
        <li><a class="steam" href="http://steamcommunity.com">Steam</a></li>
        <li><a class="facebook" href="http://www.facebook.com">Facebook</a></li>
        <li><a class="twitter" href="http://twitter.com">Twitter</a></li>
    </ul

Hi Erik,

Thanks for chipping in with the CSS Hover version nav styles. :slight_smile:
That works very well and I set up a live version of it.

Juicyy: Test-3 (CSS Hover Nav)

Now if the CSS3 guys would give us a :hover-speed property we could say goodbye to a lot of scripts. :smiley:

Does this mean I should make the height less than 800px? What would you suggest?
That will ultimately be your decision. You need to consider that everyone’s settings and monitor sizes will be different. Some people stack up a lot of toolbars on their browser head while some people (like me) keep them very lean.

For me and my settings, if I reduce the height to around 720px then I get no scrollbar.

The code is great Erik! But it’s not as smooth as the menu using javascript. If this is just a matter of changing the hover-speed then it might work just the same. And consequently work on a lot more browsers (the ones that don’t support javascript).
I’d be interested in knowing how to implement the hover-speed property.

Another small thing I noticed is that with Erik’s code the menu moves slightly more to the right, centering it a little bit more than it was before. It there a way to get it in the same place, using the code used here: http://www.css-lab.com/test/juicy/test-2.html ?

Ray, I changed the height to 750px and that did the trick. No more scrollbars! :slight_smile:

Thank you both!

Hi juicyy,
The hover-speed property does not exist, it was something that I had made up. :slight_smile:
I was saying that it would be nice to have something like that in situations like this.

Yes, I had noticed that menu in test-2 was about 10px off center. I’ll get it corrected and update the page shortly.

Do you have a link to the page that is 750px tall now?

Haha, I figured it didn’t exist. Did some googling and nothing came up :lol:.

Here’s a test page that’s 750px tall: test2.html

Thanks :).

Hi,
I’ll look through the height adjustments of your updated link in a little while.

For now let me go ahead and show you what I have come up with as far as centering the UL with the scripted version. This version also moves all the images on the top and 3-middle black boxes as BG images in the css.

(Test-4) Kwick Nav with Fallback CSS Hover

What I have done is merged some of the styles from Erik’s css hover version. Specifically the 70px width on the anchors and the 10px left BG position for the images. In doing that I had to make some tweaks to the widths in the projects.js file

I have called it projects-2.js

224px is now 234px
and
60px is now 70px

I have made it where it falls back to the css hover if the user has their js disabled. This is working fine but the a:hover width kicks in first on the initial mouseover of a list item and shows a fast reaction. It straightens out quickly though after the js takes over.

#kwick a.kwick:hover {
    width:234px; /* show full BG image if "projects.js" is disabled */
}

If you don’t want a css fallback or the fast initial hover it can all be fixed by removing that one rule. If it were me I would live with it for the sake of having the fallback.

IE6 is having trouble with the 10px BG position but I am looking into that now.

You can view the page source of the link above for the complete changes to the CSS/HTML but here is the specific nav styles that were tweaked.

/*=== Kwick Nav Styles ===*/
ul#kwick {
    float:left;/*shrink wrap and allow for expansion*/
    height:43px;
    margin:109px 0 0 225px;/*225px left will center the UL*/
    padding:0;
    display:inline;/*IE6 margin bug*/
    background:lime; /*for testing*/
}
#kwick li {
    float:left;
    list-style:none;
}
#kwick a.kwick {
    float:left;
    padding-top:43px; /* push the link text out of sight */
    width:70px; /* instead of 10px left margin: 10px extra width and bg moved 10px right */
    height:0;
    font-size:0;/* IE6 insurance */
    overflow:hidden; /* don't show the link text overflow */
}
#kwick a.kwick:hover {
    width:234px; /* show full BG image if "projects.js" is disabled */
}

#kwick a.lastfm {background:red url(images/lastfmg.png) no-repeat;}
#kwick a.goodreads {background:url(images/goodreads.png) no-repeat;}
#kwick a.steam {background:red url(images/steamuk.png) no-repeat;}
#kwick a.facebook {background:url(images/facebookjs.png) no-repeat;}
#kwick a.twitter {background:red url(images/twitterr.png) no-repeat;}

#kwick a.lastfm,
#kwick a.goodreads,
#kwick a.steam,
#kwick a.facebook,
#kwick a.twitter {background-position: 10px 0;}

Ok, I found out what the problem is.
It is the supersleight-min.js , when using the AlphaImageLoader you loose the ability to use BG position.

A fix would be to go back to the 60px width and 10px right margin if IE6 support is important to you.

Hi Ray,

IE6 isn’t that important. If I took out that supersleight-min.js code, would the menu remain static in IE6 browsers? As in, would only the icons show up and not have the scrolling effect you see in other browsers? If so, it wouldn’t be that big a deal. I’m sure the few people that still use IE6 will know that the ‘F’ icon stands for Facebook and so forth.

Thank you for your help. I’m going to carefully look through all the coding again, but I’m pretty sure this is exactly how I would like it to be. You have been such a great help. I would’ve never been able to figure this out on my own. Thanks to Erik too. I will definitely be returning to these forums in the future. :slight_smile:

Hi,
I had actually reworked your images in the kwick nav by adding about 10px worth of blank space to the left of them. What I did was basically center up the icon within the first 70px of each image, the facebook icon was narrower than the others so it scooted over a little more.

By doing that I was able to do away with the need for bG position in all browsers and it works in IE6.

(Test-4) Kwick Nav with Fallback CSS Hover

I have also set the height to 740px from your 750px. I adjusted some of the margins and got the top of the three items in the middle row at exactly 370px (half of the total height).

As I mentioned in post#14, I had made it work as a fallback CSS hover if js is disabled. It works fine but it is a little jumpy until the js takes control. I am not a js/jquery coder but if there was some way to make the script set the width on a:hover rather than “mouseenter” then they would not be conflicting.

The nav code works just fine though and you can remove the a:hover width if you don’t like the initial jumpiness. Of course you would loose your css hover fallback. It might be worth a trip to the js forum to see if the script can be tweaked to set the width to 234px on a:hover rather than mouseenter.

#kwick a:hover {/* show full BG image if "projects.js" is disabled */
    width:234px; /* this has been changed to 234px in the "projects-2.js" also */
}
            kwick.addEvent[B]('mouseenter',[/B] function(e){
                var obj = {};
                obj[i] = {
                    'width': [kwick.getStyle('width').toInt(), [B]234][/B]
                };
                kwicks.each(function(other, j){
                    if (other != kwick){
                        var w = other.getStyle('width').toInt();
                        if [B](w != 70)[/B] obj[j] = {'width': [B][w, 70][/B]};
                    }
                });
                fx.start(obj);
            });
        });
        
        $('kwick').addEvent('mouseleave', function(e){
            var obj = {};
            kwicks.each(function(other, j){
                obj[j] = {'width': [other.getStyle('width').toInt(), [B]70][/B]};
            });
            fx.start(obj);
        });
    }