HTML non square layout design issues

Question

Possible Duplicate:
Generate repeating hexagonal pattern with CSS3

I want to make a layout as in the image

enter image description here

But I am unable to do this in basic html.

Please help me with this. (As it's hexagon and it's images are not square bouded so I am facign problem)

You can download the unit hexagon from : Click here :

I just used table and img tags not much... I wasn't getting any idea about this kind of layout as I havnt much experience.. — user1773104, Oct 25 '12 at 04:44
@FoolishSeth thanks for the reply!! This is what I was expecting!! — user1773104, Oct 25 '12 at 05:31

score 8 · Answer 1 · edited Jun 20 '20 at 09:12

8

You can do it in a much simpler manner:

demo

You use a structure like:

<div class='box-wrapper'>
    <div class='row'>
        <div class='hexagon'><a href='#'></a></div>
        <!--and so on, more hexagons-->
    </div>
    <!--and so on, more rows-->
</div>

And the CSS is simply:

.box-wrapper { margin: 5em 1em 1em; border: solid 1px silver; padding: 3.2em 0; }
.row { margin: -1.6em 0; text-align: center; }
.hexagon {
    display: inline-block;
    overflow: hidden;
    width: 8em; height: 8em;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.hexagon a {
    display: block;
    height: 100%;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866);
    background: gainsboro;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 25 '12 at 08:24

Ana

35,599
6
80
131

THank you very much! one of the simple solution!!! – user1773104 Oct 25 '12 at 09:47
@Ana ..the tranform property not working in my browser(google chrome. ) when I open it from my localfile , I mean the demo link is working well. but when i put this code in my file then browser it still shows sqares! – user1773104 Oct 25 '12 at 11:02
That's because you need to add the prefixed version `-webkit-transform: rotate(-30deg) skewX(30deg) scaleY(.866);` (also `-ms-transform: rotate(-30deg) skewX(30deg) scaleY(.866);` for IE9 and `-o-transform: rotate(-30deg) skewX(30deg) scaleY(.866);` for Opera 12.0 and older) ***BEFORE*** the unprefixed one. Same goes for the transform used for `.hexagon a`. IE 10, Firefox 16+ & Opera 12.1+ support the unprefixed version, but WebKit browsers and older versions of those mentioned above do not. – Ana Oct 25 '12 at 11:18
This is amazing stuff. But how do you reduce the spacing between the hexes? – Maelish Feb 21 '14 at 21:03

score 0 · Answer 2 · answered Oct 25 '12 at 04:59

0

You can do it using HTML Map Tag very very easy and perfectly precise, if you use Dream Weaver then that will be piece of cake, so what you need is the actual picture of hexagons and start drawing them in DW or whatever other WYSIWYG editor you have, here is an example: Map Area Tag

Although it can be achieved with pure css/html too, by controlling the Margins of the divs.

answered Oct 25 '12 at 04:59

Special K.

521
1
8
18

Also you can add links on the Map and jQuery effects on hover and stuff like that, if this was the asnwer you was looking for, please accept my comment. – Special K. Oct 25 '12 at 05:32
Ya it will be use full to!!! Thanks @Special K.. – user1773104 Oct 25 '12 at 06:25

Faizul Hasan · Answer 3 · 2012-10-25T06:06:26.533

0

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <style type="text/css">
        .odd,
        .even{
            background:url('unite.png');
            height:202px;
            margin-bottom:-47px;
        }
        .odd{
            margin-left:88px;
        }
    </style>
</head>
<body>
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
    <div class="even"></div>
</body>

If this is what you want I would be happy.. :)

Latest change for image but will give problem for links unless you use HTML Map Area

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <style type="text/css">
        .odd{
            height:202px;
            padding-left:88px;
        }
        .even{
            height:202px;
            margin-top:-47px;
        }
    </style>
</head>
<body>
    <div class="odd">
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
    </div>
    <div class="even">
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
    </div>
</body>

edited Oct 25 '12 at 06:06

answered Oct 25 '12 at 05:12

Faizul Hasan

625
1
7
17

@Faisal Hasan thank you for the help!! But later on I have to add links and JQuery effects to the hexagons.. So this may not be help full after on..But again thanks for the help!! – user1773104 Oct 25 '12 at 05:28
@user1773104 If you need to add links and jQeury effects then you better try with div and CSS instead of image. I have no idea about any of the image tools so I do not know whether can we create hexagon images. Because in this image you have hexagon shape but inside square image. So following link will help you I hope. http://css-tricks.com/examples/ShapesOfCSS/ Or else if you really need to use the images then you have to go with HTML Map Area.. – Faizul Hasan Oct 25 '12 at 06:00
Thanks again man..!!This one is simpler and more useful for my objective!! :) – user1773104 Oct 25 '12 at 06:23
You are welcome mate.. but you need to be carefully use this, because image is square but the shape you have is hexagon. So to set the links only for the hexagon area you need to use Map Area also.. http://www.w3schools.com/tags/tag_map.asp – Faizul Hasan Oct 25 '12 at 06:40
Oh yes.. I am working on it write now!! – user1773104 Oct 25 '12 at 09:30

HTML non square layout design issues

3 Answers3

demo