960 Grid System - Need help!

danieldrave · August 31, 2011

I am trying to achieve a box like this using the 960 Grid System, my only issue is how to get the headings on the side of the box.

Any code/ideas would be fabulous!

Thanks,

Dan

**mooeypoo** · August 31, 2011

I didn't have a chance to work with 960 grid system yet, although I have started reading about it. From what I understood, it's more for the general outline of the pages rather than the styles inside those boxes. That is, in this case I don't think the particular box has anything to do with 960gs.

I am pretty sure the vertical text is an image. I see two options that are probably the easiest:

Create the headings as its own separate <div> with purple background and a no-repeat background (top, left) for the text, then another div for the text.
Make the vertical text with its background a long bg, and just make it the no-repeat top left background for the text box, with wide left padding.

There are ways to make vertical text, by the way, using CSS, but I am not sure I'd bother with this one.

~mooey

danieldrave · August 31, 2011

I like using the no repeat idea, any ideas of specific syntax? No-repeat style declarations confuse me, i get the html part you're trying to get across, thank you.

**mooeypoo** · August 31, 2011

Can you give me the url for the original box example you gave ? If I can examine their CSS, I'll be able to help more.

Also, check this link out: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position

Play around with the code on the right, change "background-position:right top;" to "background-position:left top;" and "margin-right:200px;" to "margin-left:200px;"

The picture is obviously not the one for you to use, but you can see that if you create a picture of the horizontal text with a bar that's longer than the box, and put it stationary on the left-top side, let it go all the way down.

danieldrave · August 31, 2011

tried out the code editor which is good with an image, could that be applied to text within a div as well? The image has no URL its a printscreen taken from a concept design that's part of a web project i'm working on.

**mooeypoo** · August 31, 2011

tried out the code editor which is good with an image, could that be applied to text within a div as well? The image has no URL its a printscreen taken from a concept design that's part of a web project i'm working on.

Yep, it'll work in a div. Try changing the code a bit to this:


<head>

<style type="text/css">
.example
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>

</head>

<body>

<div class='example'>

<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set postion example.</p>
<p>Now the background image is only show once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>

</div>
</body>

</html>

See I only added a 'div' with class 'example', and then changed the CSS from "body" to ".example".

~mooey

danieldrave · August 31, 2011

hmm doesn't seem to appear on the side of the div. Here's the source the code...

CSS:

.twitterfeed

{

height: 30%;

margin-bottom: 1em;

background-image: url('img/twitter.png');

background-repeat: no-repeat;

background-position: left top;

margin-right: 200px;

margin-left: 200px;

}

HTML:

<!--<p class="tbannertext">

Twitter Feed

</p>-->

<p> SAMPLE TEXT <BR>

SAMPLE TEXT<BR>

</p>

</div>

**mooeypoo** · August 31, 2011

Do you have this code up online on a test server somewhere? I'd like to see the problem first-hand. It can be so many things (from bad syntax to bad location of image, etc). If you give me the place it's on I can use Firebug to help out on the problem specifically.

If not, I'll try to do this myself at home but that will have to be later when I get a bit of time.

Also, if I do it myself I'll have to install 960grid and all that to check how ti works with that system rather than standalone... if you can upload this somewhere I can see it, it'll be the best solution.

danieldrave · August 31, 2011

Okay thank you for all your help if i can't solve it myself will upload to a server and inform you on here! xx

Sign In

960 Grid System - Need help!

Recommended Posts

danieldrave

mooeypoo

danieldrave

mooeypoo

danieldrave

mooeypoo

danieldrave

mooeypoo

danieldrave

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information