knimbus Posted September 30, 2006 Share Posted September 30, 2006 Hi, I am learning CSS atm so that when my website goes up tomorrow I can make it look half decent, anyway, I was browsing around some sites for idea and I came accross http://blog.unknownserv.net/What I want to do is something similar, except I dont know how... How do I make it so that there is a background, in that sites case blue stripes, and then a white canvas over the top of that which scripts will stay inside... or to put it in an example, http://blog.unknownserv.net/ use wordpress 2, but how does wordpress know not to spill out over onto the blue stripes but stay in the white?Please answer asap because I know it will probably be something simple! lol Link to comment Share on other sites More sharing options...
aquatsr Posted September 30, 2006 Share Posted September 30, 2006 For the "stripes" you choose the background you want and set it using simple css or html commands.For the "canvas" you need to make a centered division (div) and using css give the div a white background.That will create the "illusion" of your white canvas flanked by stripes. Link to comment Share on other sites More sharing options...
knimbus Posted September 30, 2006 Author Share Posted September 30, 2006 hmmm I am really sorr to cause any potential inconvenience but can you give me a very quick example of setting up a Div and then making the CSS for it?just with a coloured background and a white canvas that says 'hello' or something pleasE? I have never used a div like this before.... Link to comment Share on other sites More sharing options...
aquatsr Posted September 30, 2006 Share Posted September 30, 2006 body {background: url(yourbackground.jpg) no-repeat fixed bottom right;}#canvas {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;float: left;width: 800px;height: 1000px;overflow: auto;padding: 1em;} That is some simple css code. I recommend you read W3Schools' CSS and XHTML tutorial to understand the basics. In the XHTML you would want to enclose the content of your page first with a <body> tag. Then for your 'canvas' you would put <div id="canvas"> and </div> around your content.You will understand this better if you read the tutorials. Link to comment Share on other sites More sharing options...
knimbus Posted October 1, 2006 Author Share Posted October 1, 2006 Thank you very much aquatsr, I worked it out like, 30 seconds before I read this, its always the way... lol... Just one question though, as we have seet the height as 1000px, how do I make it variable so that it expands if my typing is say, 2000px high? or is that what overflow does?thanks again,Chael Link to comment Share on other sites More sharing options...
Err Posted October 3, 2006 Share Posted October 3, 2006 Your content (images, characters) will force your height to expand even if it's set to a fixed height. I do believe that's different if you have your div to display: block; or floating (I'm not totally sure) which in that case your div will stay the same height and your content will "magically" go over the div, giving it a terrible look. overflow just adds scrollable content in a fixed sized div. More about it here:http://www.w3schools.com/css/pr_pos_overflow.asp 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