Genki Dave Posted December 11, 2005 Share Posted December 11, 2005 Hey there, I'm new to CSS, so please speak laman's terms if possible. Problem I'm designing a web page where I need 50% (right side) of the page's background color to be red and the other 50% (Yup, you guessed it! The left side) to be plain white, but I can't use frames, due to the fact that I have text and an image at the very top that needs to be centered not matter what resolution the visitor is viewing it in, or browser.I've tried and tried, and tried again, but no matter what I do, I can't split the page with 50% of both colors for right and left. Any suggestions? ThanksGenki Dave Link to comment Share on other sites More sharing options...
Selacius Posted December 11, 2005 Share Posted December 11, 2005 create a background image, with one side red and the other white. When you put it into your body tag if the resolution is larger than the image itself, then the image should just be stretched, which won't ruin anything pixel wise. Link to comment Share on other sites More sharing options...
F-Man Posted December 11, 2005 Share Posted December 11, 2005 I believe background-images do not stretch, not until CSS3 anyway.Here, try this:CSS: html, body { background-color: white; height: 100%; margin: 0;}#half2 { background-color: red; position: absolute; left: 50%; width: 50%; height: 100%;}#content { position: absolute;} HTML: <body> <div id="half2"></div> <div id="content"> Place content here </div></body> Link to comment Share on other sites More sharing options...
Jonas Posted December 11, 2005 Share Posted December 11, 2005 A similar question has been asked earlier, so I'm just gonna refer you to that topic, so you can look through it and see if you find anything helful:http://w3schools.invisionzone.com/index.php?showtopic=900 Link to comment Share on other sites More sharing options...
Genki Dave Posted December 12, 2005 Author Share Posted December 12, 2005 Well F-Man, it work!Now the new problem is, the graphic at the top along with the text (Main Title) are bothchopped in half! On the right had side (red side) the background is red, GREAT! But now I have to figure out a way to get ALL of my graphic and title at the top without being chopped, but that was an awesome trick dude, THANKS!! Can you help on this new issue?Genki Dave Link to comment Share on other sites More sharing options...
F-Man Posted December 12, 2005 Share Posted December 12, 2005 Well F-Man, it work!Now the new problem is, the graphic at the top along with the text (Main Title) are bothchopped in half! On the right had side (red side) the background is red, GREAT! But now I have to figure out a way to get ALL of my graphic and title at the top without being chopped, but that was an awesome trick dude, THANKS!! Can you help on this new issue?Genki Dave<{POST_SNAPBACK}> Hm, that's weird.I noticed there was something I forgot in my code: give the #content div a width of 100%. Though I don't see how that is causing problems with graphics being chopped... You're putting everything inside the #content div right? Link to comment Share on other sites More sharing options...
Genki Dave Posted December 12, 2005 Author Share Posted December 12, 2005 Yep, I am.I'll try to find a free PHP web hosting site and put it up so you can see what I mean.I'll place a post here ASAP.Thanks! Link to comment Share on other sites More sharing options...
Genki Dave Posted December 17, 2005 Author Share Posted December 17, 2005 Almost there. I think I'll start from scratch though. I made some changes, and they worked, but thecenter of the backbgrounds of red and white were shifting when I tested to see if I made the browser winder smaller. The top graphic stayed fixed, but the center of the two colored backgrounds shifted. Wierd!Genki Dave 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