Jump to content

misselka

Members
  • Posts

    10
  • Joined

  • Last visited

Everything posted by misselka

  1. P.S. You may not notice that it is not centered unless you are using a resolution as large as 1680 x 1050.
  2. Hello. I've created a page that has a grey body and a background image within the container in the body. The container will not show the background image when centered. I read up on this online and found that if I float the container to the left, the background image shows up. Sure enough, it worked, but I want my container centered. Does anyone have a work around for this? Here is the page http://aphoniastudios.com/TestSite/t3/ and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#e22426; text-decoration:none;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 2.1%;background-image: url(Images/background1.jpg);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:688px;margin: 0px .5% 0px 7%;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding:8px 4px;}#p {font-size:13px;position:absolute;bottom:100px;line-height: 17px;}#column1 #footer {background-color: #e22426;padding: 8px;box-shadow:3px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 10%;height: 100%;color:#4D4D4D;font-size: .65em;font-weight:900;}nav {position: absolute;z-index: 2;background-color: #999;width: 10%;height: 100px;margin-top: 52px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {display:block;list-style-type: none;margin: 10px;padding: 0px;line-height:65%;}#column3{float:left;margin-top: 52px;margin-bottom: 0px;position: relative;z-index: 1;width: 285px;height: 60%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 150px;.aboutlinks {word-spacing: 2px;color: #e22426;}#column4 {float: left;position: relative;left:-100px;width: 20%;height:100%,padding: 0px;}
  3. Thank you both for your responses. I'm a newbie and the background-position: right top; worked perfectly.
  4. I have run into a problem coding for a background image to be positioned absolutely to the top right of my column3 div container. I've attempted to give the image the following properties: position:absolute; top:0; right:0However, the image shows up, on the top left instead of top right. That said, the image is in a div that is floated left and has a z-index and therefore a position of relative. This is the only thing that I can figure to be causing the problem. If you think this is the problem, is there any way around it? If you don't think this is the problem, what might it be. On another note, something I hope you might help me understand is why the background-repeat:no-repeat; only works outside of the img style. I would expect it to work inside the img style, but instead it repeats. Thanks in advance for your help. Here is a link to the page http://aphoniastudio...2/about_ss.html and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:none;}ul:active {background-color:#E1231E;}ul:visited {background-color:#E1231E;}.aboutlinks a:visited {color:#E1231E;}.aboutlinks {color:#E1231E; word-spacing:12px;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 2.1%;background-image: url(Images/conference1_ss.png);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:700px;margin: 0px .5% 0px 7%;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding:8px 4px;}#p {font-size:13px;position:absolute;bottom:100px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}.stretch {max-width:100%; max-height:100%;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 10%;height: 100%;color:#4D4D4D;font-size: .65em;font-weight:900;}nav {position: absolute;z-index: 2;background-color: #999;width: 10%;height: 100px;margin-top: 54px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {display:block;list-style-type: none;margin: 10px;padding: 0px;line-height:65%;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 30%;height: 80%;padding-top: 30px;padding-right: 2.8%;padding-bottom: 20px;padding-left: 5%;box-shadow:3px 3px 5px 0px #333333;overflow: auto;background-image: url(Images/triangle.png);background-repeat:no-repeat;img {position: absolute; right:0; top:0;max-width: 100%;}.aboutlinks {word-spacing: 2px;}#column4 {float: right;width: 20%;height:100%,padding: 0px;}#container #column2 nav ul li {}
  5. Yes, very strange. Well, I guess I'll just have to make it fixed unless someone figures out this paradox. Thanks everyone!
  6. When I add in height, it changes the height of the box, but the text remains extended. Also, I'd prefer to have the height of that column be 100% instead of a fixed height. Either way, it is still extending beyond the parent. I was able to get scroll bars, by adding the overflow:scroll tag to the column3 div. However, overflow:hidden placed in the column3 div still does not work.
  7. I don't see scroll bars either, but column3 (the white box) should be ending at the end of the container (end of the background image). Instead it is extending beyond it. The red footer, on the other hand, is obeying the overflow: hidden tag and ends at the end of the container. Scrolling would be fine too, but when I change overflow to scroll, I don't get the scroll bars.
  8. Thank you both. I did everything that you suggested and am still having the problem. I have updated the test site. Please check it out.
  9. @FoxyMod - Thanks for your response, but adding the semi-colon didn't change anything.
  10. I have an overflow tag set in body element that is working on one div element, but not the other. Could it be caused by the fact that the second div has a z-index? I've tried placing the overflow directly in the <div id="column3">, which is where the overflow, is happening to no avail. Does anyone see the problem or have any tips? Thanks. I've posted a junk site, so you can see the problem. http://aphoniastudios.com/TestSite/test.html Here's the css: @charset "UTF-8";/* CSS Document */ <style type="text/css">html {height:100%}body {background: #CCC;width: 90%;height: 90%overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:underline;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 50px;background-image:url(Images/junk.png);background-size: 100%;background-repeat:no-repeat;}.stretch { width:100%; height:100%;}#column1 {float: left;width: 230px;height: 100%;margin: 0px 4px 0px 49px;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding-right: 8px;padding-left: 8px;padding-top: 276px;padding-bottom: 16px;}#p {font-size:13px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 0%;height: 100%;color:#4D4D4D;font-size: .75em;}nav {background-color: #999;position: relative;z-index: 2;width: 120px;height: 100px;margin-left: 0px;margin-right: 0px;margin-top: 54px;margin-bottom: 0px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {margin: 10px;padding: 0px;}nav ul li {color: #FFF;text-decoration: none;list-style-type: none;line-height: 0.6em;font-size: 0.8em;font-style: normal;font-weight: 900;background-position: 0px 0px;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 20%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 140px;box-shadow:3px 3px 5px 0px #333333;}.aboutlinks {word-spacing: 2px;color: #E1231E;}#column4 {float: right;width: auto;height:100%,padding: 0px;}</style>
×
×
  • Create New...