Problema de alineación de cuadrícula 960

Estoy teniendo problemas cuando se trata de la red 960. el siguiente código muestra el diseño que quiero usar, es decir, 6 contenedores repartidos uniformemente.

<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>

El problema que tengo es... cuando asigno bordes a cada una de las cuadrículas, cada borde se alimenta de la siguiente cuadrícula y, en consecuencia, causa problemas de alineación.

el código html con el que tengo problemas es:

<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>

el css para el control de fronteras que estoy usando es:

.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;
}

esto se muestra en http://www.virtualharrogate.co.uk

Cualquier ayuda es muy apreciada

preguntado el 22 de mayo de 12 a las 11:05

Este enlace de desbordamiento de pila relacionado puede ayudar a las personas que luchan con bordes/márgenes/relleno y clases 960Grid: > stackoverflow.com/questions/2903944/… -

1 Respuestas

después de consultar el sitio web (siguiendo el enlace en vivo en su pregunta), parece que el problema no se origina en el sistema de cuadrícula, sino en un marcado incorrecto: está anidando div elementos dentro de una lista desordenada (ul). aquí está el fragmento relevante copiado del sitio web:

<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>

ya sea quitar el ul ubicado debajo div.container_12 de la jerarquía, o cambiar el anidado divs en lis, y el problema se resolverá.

contestado el 23 de mayo de 12 a las 18:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.