CSS for buttons - automatically filling space, how?

**SubEffect** · May 29, 2011 04:34

I'm trying to make a mobile friendly page/app and I'm using buttons as links between the pages.

I have a few questions.

1. How do I get rid of the spaces between them so they border each other?
2. How do I get them to fill the entire width of the content div? If I set the height to 100% they nicely fill the height of the div. I need to have a flexible system that will fit any phone screen size.
3. Should I be using buttons for this? I could use link tags and style the a tags I suppose but this will likely end up with me using li tags and styling those. It seems that buttons are a more well contained solution.

I suppose I'm trying to simulate the build in Android tab interface, if that's any help.

Tables are supposed to be depreciated for layouts but in this instance it's looking like the best way to do this.

**ralph.m** · May 29, 2011 06:31

Originally Posted by SubEffect

How do I get rid of the spaces between them so they border each other?

We really need to see your code, and what you want the interface to look like, to be able to help much. I have no idea what the Android interface looks like.

Tables are supposed to be depreciated for layouts but in this instance it's looking like the best way to do this.

They are deprecated for a reason.

Tables are not appropriate for this. It sounds like a UL with nicely styled links is the way to go (this is the normal approach). But again, we need more info.

**SubEffect** · May 29, 2011 07:13

I'm trying to have a layout like this.

Uploaded with ImageShack.us

The yellow, green and red areas will be menu "buttons" - clickable on a website but I'll be converting it all so they are touch buttons on Android. The blue area will be for content and other buttons that I don't mind just using a form to create.

Ideally the entire layout will be dynamic and fill any size screen, including if you turn your phone sidewards, and I'd like it to be flexible enough that I can easily add or take away menu buttons for different pages/apps.

To clarify - this site will exist both as a regular site that you can access on your desktop/laptop or even on a smartphone. But I will also be converting it into a stand alone Android app using PhoneGap. If it works on a website it'll work when converted; I've done this before but it's this CSS specific layout I'm stuggling with this time.

And in an ideal world the website version will have a maximum width so that if it's viewed on a computer there will be even margins on either side. I can already do this with my regular sites using auto margins of course.

**ralph.m** · May 29, 2011 07:44

This is a basic starting point:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
* {margin: 0; padding:0;}
body {background: blue;}
ul {list-style: none;}
li {float: left; width: 33%;}
li a {display: block; line-height: 5em; background: yellow; color: blue; text-align: center; test-decoration: none; }
li + li a {background: green;}
li + li + li a {background: red;}
li + li + li {width: 34%;}
</style>
	
</head>

<body>
    <ul>
      <li><a href="#">Text</a></li>
      <li><a href="#">Text</a></li>
      <li><a href="#">Text</a></li>
    </ul>
</body>

</html>

In terms of the max-width, you could always put a wrapper around the content and center it. E.g.

Code:

.wrap {max-width: 1200px; margin: 0 auto;}

Code:

  <div class="wrap">
    <ul>
      <li><a href="#">Text</a></li>
      <li><a href="#">Text</a></li>
      <li><a href="#">Text</a></li>
    </ul>
  </div>

**SubEffect** · May 29, 2011 07:57

Thanks.

I'd practically done this in the posting interim but your version is more elegant than mine. Interesting use of "+" and the 34% as well; I had no idea about this. Brilliant.

It's almost there with one problem - the li/a elements don't fill the entire space with colour, just the around the text.

**ralph.m** · May 29, 2011 08:03

Originally Posted by SubEffect

the li/a elements don't fill the entire space with colour, just the around the text.

What browser are you viewing this in? For me (Mac browsers), the link blocks are fully colored. Screen shot attached.

Interesting use of "+" and the 34% as well

Yes, the + is very handy, called a sibling selector. li + li means "an li right next to an li", so to speak. And the 34% was just to save messing with too many decimal places etc.

**SubEffect** · May 29, 2011 08:16

Actually I've got the colour blocks working fine by putting height:100px as a li property.

I don't get the nice picture you get though. I've got a blue border around the left and top of my coloured blocks. It's very odd.

I'm using 3 divs - wrap, menu and content - to give properties to each area. The menu div has the coloured blocks in it and is 100px high.

I'm testing in Chrome, Opera and Firefox. It looks the same on each.

**SubEffect** · May 29, 2011 08:22

Ok, I hadn't used the * to eliminate padding and margins. It's looking good now.

Thanks very much, this has sorted everything out big time!!

**ralph.m** · May 29, 2011 08:31

Originally Posted by SubEffect

Ok, I hadn't used the * to eliminate padding and margins. It's looking good now.

Ah, I didn't realize you were using your version. The * thing is really for demos, as it's not advised to use that in production. a better way is to remove margin and padding from selected elements, as in this basic style sheet reset:

Code:

html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: bottom;
}

I also would recommend against setting the height on the LIs if you can avoid it. I used line-height on the <a>s, but that was based on there not being much text. If the text wraps, then it's a different matter.

Thanks very much, this has sorted everything out big time!!

Glad to have helped.

**SubEffect** · May 29, 2011 08:47

Which element was retaining a margin then? It was a pretty odd looking page with about a 10px blue margin around the top and left of the 3 coloured blocks.

I've converted it for Android and it works a treat!

**ralph.m** · May 29, 2011 08:54

Originally Posted by SubEffect

Which element was retaining a margin then?

It was default margins on the <body> element in this case.

I've converted it for Android and it works a treat!

Great!

Off Topic:

Now … don't let us ever catch you reverting to tables again!

**SubEffect** · May 29, 2011 09:00

Ha ha. I've never used table before but I'm so out of practice with CSS that I almost turned! I'm actually very keen on HTML5 and CSS and that's what I want to be developing from now on.

I've taken the margin and padding out of <body> but even doing that I get the same problem. Using * is the only thing that seems to fix it.

**Paul O'B** · May 29, 2011 09:11

Originally Posted by SubEffect

I've taken the margin and padding out of <body> but even doing that I get the same problem. Using * is the only thing that seems to fix it.

It will be one of the other elements you are using then

Make sure you have used Ralph's small reset.

Code:

html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea,  span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {     margin: 0;     padding: 0; }

Most elements have default margins/padding and you need to control them all.

**SubEffect** · May 29, 2011 09:18

Found it! It's the ul.

User Tag List

Thread: CSS for buttons - automatically filling space, how?

Thread Tools

Display

CSS for buttons - automatically filling space, how?

Bookmarks

Bookmarks

Posting Permissions