/    Sign up×
Community /Pin to ProfileBookmark

remove space between buttons

Copy linkTweet thisAlerts:
Nov 09.2006

I want to make 6*6 grid and each cell has one button .There should be no spaces between buttons horizontally or vertically.How to make this layout without using tables.
Thanks

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzNov 09.2006 — The easiest way would be to [url=http://www.dynamicsitesolutions.com/css/layout-techniques/#floats_margins]use floats[/url].
Copy linkTweet thisAlerts:
@WebJoelNov 09.2006 — My attempt:

[code=html]<div id="sixBysix">

<img alt="1" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="2" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="3" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="4" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="5" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="6" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<div style="clear:left;"><!-- clearing left-float --></div>

<img alt="1" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="2" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="3" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="4" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="5" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="6" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<div style="clear:left;"><!-- clearing left-float --></div>

<img alt="1" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="2" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="3" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="4" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="5" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="6" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<div style="clear:left;"><!-- clearing left-float --></div>

<img alt="1" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="2" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="3" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="4" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="5" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="6" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<div style="clear:left;"><!-- clearing left-float --></div>

<img alt="1" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="2" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="3" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="4" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="5" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="6" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<div style="clear:left;"><!-- clearing left-float --></div>

<img alt="1" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="2" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="3" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="4" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="5" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<img alt="6" src="#" style="width:80px; height:30px; float:left; border:1px solid gray;" />
<div style="clear:left;"><!-- clearing left-float --></div>

</div>[/code]

If you use images for the buttons, to remove any space between them, add:

<style>

#sixBysix img {border:0 none;}

</style>
Copy linkTweet thisAlerts:
@ray326Nov 09.2006 — For images you might also want to include display:block.
Copy linkTweet thisAlerts:
@KravvitzNov 09.2006 — d17may, even though WebJoel uses inline styles in his demo, in a real site you should use an external stylesheet instead.

WebJoel, why the clearer <div>s? Why not give a class to every 6th <img> to clear the others and make a new row?

ray326, why? Floated elements are automatically given display:block;.
Copy linkTweet thisAlerts:
@WebJoelNov 09.2006 — d17may, even though WebJoel uses inline styles in his demo, in a real site you should use an external stylesheet instead.

WebJoel, why the clearer <div>s? Why not give a class to every 6th <img> to clear the others and make a new row?

ray326, why? Floated elements are automatically given display:block;.[/QUOTE]

It looked to me as if the OP might be using TABLEs or at the very least, not be familiar with CSS, so I wanted keep it simple. As for clearer DIV, -this seemed to cause the expected 'new line' whereas "<br />" after every 6th image would merely drop the next image (first image of every row) about half of the height of the img. Assuming one knew the width of the buttom images, x 6 and minus any accumulated border widths, one could define a default width:foo for the container DIV. Not knowing that, I went with a generic 'it just works' route. the container DIV should expand for accomodate any combined-widths of six images.

I am sure that there is an shorter, more semantic method. Myself, I would put all the style="" of every image into it's own CLASS and put that in a STYLE statement at the top of the page or external *css file, -but I was just trying to keep it simple for the original postee, and typing it up fast. It works & looks identical in IE and Firefox, it validates, so I felt that it was okay. ?
Copy linkTweet thisAlerts:
@KravvitzNov 09.2006 — Apparently what I was suggesting doesn't work in IE7 and many other older browsers.

That being the case, using a <div> to clear the <img>s is fine, WebJoel.
Copy linkTweet thisAlerts:
@ray326Nov 10.2006 — [B]ray326, why? Floated elements are automatically given display:block;.[/B]Because I wasn't paying attention to the inline style.
Copy linkTweet thisAlerts:
@WebJoelNov 10.2006 — Apparently what I was suggesting doesn't work in IE7 and many other older browsers.

That being the case, using a <div> to clear the <img>s is fine, WebJoel.[/QUOTE]
Oh really? ? I did not know that. I am resisting using IE7 and if there had been a prob there, I would not have known.

I was thinking last night that my method with the 'empty clearing DIV' that I was using that some height or width might be default assigned to that because of the <!-- comment --> being present, and there might a pixel-bump on every new row and that maybe your solution would be the better solution unless the height/width was declared something ridiculously small, like 0.01em or something... You know, -the 'hasLayout' thing. But I guess being floated, they are 'block' and that isn't the case.

I added <!-- comment --> to the empty DIVs because I was thinking that my validator might cite 'empty tag' warning or some such thing.

-Too early in the morning here... need coffee! ~ ~~(_)>
Copy linkTweet thisAlerts:
@KravvitzNov 11.2006 — If I remember correctly, placing a comment as the only child of an element fixes a bug in IE6.

To clarify what I said in my original suggestion, you need to put the clear declaration on the first <img> of each row.
×

Success!

Help @d17may spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...