960 Grid System extension problem

danieldrave · September 2, 2011

Hi guys, got a small issue.

I'm developing a site and I'm using the 960 Grid System, which is great everything should mathematically be alligned.

I've got this problem as you can see above the social networking bar extends outside of the grid system. I've increased the padding on the links as a test just to see if was the links but it seems to be the division/div itself.

Here's some source code,

HTML:

<p class="navpar"> Social Media:

<a href="http://www.facebook.com/aberguild" class="facebook"> FACEBOOK </a>

<a href="http://twitter.com/#!/aberguild" class="twitter"> TWITTER </a>

</p>

<p class="navpar2"> Student Media:

<a href="http://www.bay-radio.co.uk" class="bayradio">BAY RADIO </a>

<a href="http://abercourier.com/" class="courier">THE COURIER </a>

<a href="http://www.abertv.co.uk/" class="abertv">ABERTV</a>

</p>

</div>

CSS:

.navpar, .navpar2

{

display: inline;

}

.navpar2

{

margin-left: 4em;

}

#secondnavbar

{

background-color: black;

color: white;

text-transform: uppercase;

padding: 1em;

padding-left: 0em;

margin-top: 0em;

margin-bottom: 1em;

font-family: arial;

font-size: 16px;

font-weight: bold;

}

I really can't see any issue, so I thought a fresh programmer looking at it for the first time might spot the problem, its really just taken me back and is ruining my productivity!

Thanks for the help,

Dan

khaled · September 3, 2011

I design a website using the block method, here is an example:

<html>
<body>
<div style="margin-left:auto;margin-right:auto;width:800;height:800;background:#EEE;">

<div id="header" style="position:absolute;left:auto;top:0;width:800;height:100;background:#DDD;"><br><h1>Title</h3><div>
<div id="top_bar" style="position:absolute;left:auto;top:100;width:800;height:40;background:#BBB;text-align:center;"><br><b>Home : Forums : Contact : Info : Help</b><div>

<div id="content" style="position:absolute;left:auto;top:50;width:800;height:150;">
<div class="block" style="float:left;width:30%;background:#A00;height:100%;margin-left:20;"><br><br><br>RED</div>
<div class="block" style="float:left;width:30%;background:#080;height:100%;margin-left:20;"><br><br><br><br>GREEN</div>
<div class="block" style="float:left;width:30%;background:#08B;height:100%;margin-left:20;"><br><br><br><br><br>BLUE</div>
<div>

<div id="content" style="position:absolute;left:auto;top:160;width:800;height:150;">
<div class="block" style="float:left;width:30%;background:#A00;height:100%;margin-left:20;"><br><br><br>RED</div>
<div class="block" style="float:left;width:30%;background:#080;height:100%;margin-left:20;"><br><br><br><br>GREEN</div>
<div class="block" style="float:left;width:30%;background:#08B;height:100%;margin-left:20;"><br><br><br><br><br>BLUE</div>
<div>

<div id="content" style="position:absolute;left:auto;top:160;width:800;height:150;">
<div class="block" style="float:left;width:30%;background:#A00;height:100%;margin-left:20;"><br><br><br>RED</div>
<div class="block" style="float:left;width:30%;background:#080;height:100%;margin-left:20;"><br><br><br><br>GREEN</div>
<div class="block" style="float:left;width:30%;background:#08B;height:100%;margin-left:20;"><br><br><br><br><br>BLUE</div>
<div>

<div id="content" style="position:absolute;left:auto;top:160;width:800;height:150;">
<div class="block" style="float:left;width:30%;background:#A00;height:100%;margin-left:20;"><br><br><br>RED</div>
<div class="block" style="float:left;width:30%;background:#080;height:100%;margin-left:20;"><br><br><br><br>GREEN</div>
<div class="block" style="float:left;width:30%;background:#08B;height:100%;margin-left:20;"><br><br><br><br><br>BLUE</div>
<div>

<div id="bottom_bar" style="position:absolute;left:auto;top:160;width:800;height:40;background:#999;"><div>
<div id="footer" style="position:absolute;left:auto;top:40;width:100%;height:50;background:#777;text-align:center;"><br>All rights are reserved for Khaled Khunaifer, 2011<div>

</div>
</body>
</html>

It's based on dividing a block into smaller blocks to fully fit inside, where outer boxes are adjusted for a better look ...

Then enforce it using absolute position, with left:auto; for horizontal center, and top: xxx ; given the appropriate hight from the top region

good luck,

Sign In

960 Grid System extension problem

Recommended Posts

danieldrave

khaled

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information