CODEWITHSUNDEEP
htmlcsslayout960.gs
scriptmonkey
scriptmonkey

Reputation: 870

960 Grid Alignment Issue

Im having trouble when it comes to the 960 grid. the code below depicts the layout that i want to use, i.e. 6 containers evenly spread. 

<div class="container_12" style="background:blue";>
    <div class="grid_2 alpha" style="background:red";>
        Alpha
    </div>
    <div class="grid_2" style="background:orange";>
        1
    </div>
    <div class="grid_2 " style="background:yellow";>
        2
    </div>
    <div class="grid_2" style="background:green";>
        3
    </div>
    <div class="grid_2" style="background:teal";>
        4
    </div>
    <div class="grid_2 omega" style="background:red";>
        omega
    </div>
</div>

The issue that im having is... when i assign borders to each of the grids each border eats into the next grid and consequently causes alignment issues.

the html code im having trouble with is:

<div class="container_12 ">
    <ul class="a-tab">
        <li>
            <a href="" class="grid_2 alpha">Today</a>
        </li>
        <li>
            <a href="" class="grid_2">Restaurants</a>
        </li>
        <li>
            <a href="" class="grid_2">Shops</a>
        </li>
        <li>
            <a href="" class="grid_2">Accomodation</a>
        </li>
        <li>
            <a href="" class="grid_2">Property</a>
        </li>
        <li>
            <a href="" class="grid_2 omega">Nightlife</a>
        </li>
    </ul>

the css for the border control that im using is:

.a-tab li{
    list-style-type: none;
    display: inline-block;
    float: center;
    border-color: #000;
    border-top:solid;
    border-right: solid;
    border-left: solid;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-size: 16px;
    margin:0 0 0 0;
}

this is shown at http://www.virtualharrogate.co.uk

Any help is greatly appreciated

Upvotes: 1

Views: 823

Answers (1)

Eliran Malka
Eliran Malka

Reputation: 16263

after checking out the website (following the live link on your question), it seems the issue does not originates from the grid system, but rather from an incorrect markup - you're nesting div elements inside an unordered list (ul). here's the relevant snippet copied from the website:

<div class="container_12 ">
    <ul>
        <div class="grid_2 alpha">
            <div class="tabframe" id="tabdetail">
                <li>
                    <a href="">Today</a>
                </li>
            </div>
        </div>
        <!-- etcetera -->
    </ul>
</div>

either remove the ul located under div.container_12 from the hierarchy, or change the nested divs into lis, and problem will be solved.

Upvotes: 1

Related Questions