danieldrave Posted August 31, 2011 Share Posted 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 Link to comment Share on other sites More sharing options...
mooeypoo Posted August 31, 2011 Share Posted 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 Link to comment Share on other sites More sharing options...
danieldrave Posted August 31, 2011 Author Share Posted 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. Link to comment Share on other sites More sharing options...
mooeypoo Posted August 31, 2011 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
danieldrave Posted August 31, 2011 Author Share Posted 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. Link to comment Share on other sites More sharing options...
mooeypoo Posted August 31, 2011 Share Posted 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 Link to comment Share on other sites More sharing options...
danieldrave Posted August 31, 2011 Author Share Posted 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: <div class="grid_4 twitterfeed"> <!--<p class="tbannertext"> Twitter Feed </p>--> <p> SAMPLE TEXT <BR> SAMPLE TEXT<BR> </p> </div> <!--END TWITTERFEED BOX--> Link to comment Share on other sites More sharing options...
mooeypoo Posted August 31, 2011 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
danieldrave Posted August 31, 2011 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now