Jump to content

960 Grid System - Need help!

danieldrave
in Computer Science

Featured Replies

post-56315-0-28097900-1314800428_thumb.png

 

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

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

  • Author

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.

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.

  • Author

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.

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

  • Author

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:

 

 

<div class="grid_4 twitterfeed">

 

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

Twitter Feed

</p>-->

<p> SAMPLE TEXT <BR>

SAMPLE TEXT<BR>

</p>

 

</div> <!--END TWITTERFEED BOX-->

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.

  • Author

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.