- This topic is empty.
-
AuthorPosts
-
June 23, 2009 at 11:35 am #25064
nchipping
MemberI have been working on more and more pages for the site I’ve been doing (knowonder.com/index.php is the home page for it), but I am having to create a defined height for each of my main-content areas for each page, because they are different. Is there a way I can just make it fit automatically what is within it, and expand to what that is without having issues? I tried putting it to 100% and it just shrunk up into nothing, and everything collapsed…
The code I am having to change the height on each time is my container, which holds the pictures and main content. Does that make sense? I have used relative positioning on the container, so I can have absolute positioning within it, so I’m not sure if that is possibly what is messing things up, but I don’t want to use margins to position things.
I would REALLY appreciate any help!
Here is my code of one page, and my main style sheet, just for reference:
Code:
Knowonder – Subscribe
“I can’t wait to get my hands on this magazine! What a great idea!
I love reading, and I know the importance of having new matieral
all the time to help my kids stay interested in reading. Thank you,
Knowonder, for such a great product!”— Janice B., NY.
“Very cool, and also very cute! This looks like a winner. My family
will be subscribing for a long time to come.”— Susan K., MI.
“As an elementary teacher, I can tell you that new material, every
day, is one of the biggest keys to helping a child love reading. New
adventures, new problems, new challenges, new friendships…
There’s nothing like an exciting story to excite the imaginations of
our children. I will support Knowonder!”— Lucinda M., NB.
Code:* {margin:0px; padding:0px;}p {font-family:Arial, Helvetica, sans-serif;}
ul {font-family:Arial, Helvetica, sans-serif;}
img {text-decoration:none; border:none;}
body {background:url(../images/background_03.png); background-repeat:repeat;}
#container {width: 980px; height:660px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-contact {width: 980px; height:800px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-about {width: 980px; height:780px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-storytime {width: 980px; height:880px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-crafts {width: 980px; height:590px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-media {width: 980px; height:700px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-signup {width: 980px; height:740px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container2 {width: 980px; position:relative; margin:30px auto;}
#container2 p {margin:0px 50px 5px 50px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}#header {padding:5px 0px 0px 0px;}
#login {float: right; list-style:none; color:#CCC; position:absolute; top:10px; left:840px;}
#login ul {list-style:none;}
#login ul li {list-style:none; float:left; padding:0px 5px 0px 5px;}#magazine-free {float: left; position:absolute; top:0px; left:390px;}
#nav {position:absolute; top:100px; left:0px; width:980px; height:25px; background:#E977AF; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#nav ul {list-style:none; position:absolute; top:5px; left:195px;}
#nav ul li {list-style:none; float:left; padding:0px 10px 0px 10px;}
#nav a {color:#FFF; text-decoration:none}
#nav a:hover {color:#FFF; text-decoration:none;}
#nav a:visited {color:#FFF; text-decoration:none}#body {background: #D3EDF1; width:875px; height:480px; position: relative; border:#47C3D3 solid 1px;}
#body-header {position: absolute; top:12px;}#body-left {float: left; width:232px; position:absolute; top:125px; left:25px;}
#body-left2 {float: left; width:253px; position:absolute; top:140px; left:285px; font-family:Arial, Helvetica, sans-serif;}
#body-left2 p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}#body-right {float: right; width:253px; position:absolute; top:140px; right:35px; font-family:Arial, Helvetica, sans-serif;}
#body-right p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}#winmoney {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#winmoney ul {list-style:none; position:absolute; top:90px; left:60px;}
#winmoney ul li {list-style:none; float:left; margin:0px 3px; }#winmoney a {text-decoration:none; color:#00AEEF;}
#winmoney a:hover {text-decoration:underline; color:#00AEEF}
#winmoney a:visited {text-decoration:none; color:#00AEEF;}#winmoney2 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#winmoney2 ul {list-style:none; position:absolute; top:210px; left:60px;}
#winmoney2 ul li {list-style:none; float:left; margin:0px 3px;}#winmoney2 a {text-decoration:none; color:#00AEEF;}
#winmoney2 a:hover {text-decoration:underline; color:#00AEEF}
#winmoney2 a:visited {text-decoration:none; color:#00AEEF;}#winmoney3 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#winmoney3 ul {list-style:none; position:absolute; top:90px; left:60px;}
#winmoney3 ul li {list-style:none; float:left; margin:0px 3px;}#winmoney3 a {text-decoration:none; color:#00AEEF;}
#winmoney3 a:hover {text-decoration:underline; color:#00AEEF}
#winmoney3 a:visited {text-decoration:none; color:#00AEEF;}#left {width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;}
#left-text {position:absolute; top:120px;}#right {width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;}
#right-nav {position:absolute; top:400px; left:175px; list-style:none;}
#right-nav ul {list-style:none;}
#right-nav ul li {list-style:none; float:left; margin:0px 10px;}#body2 {background:#FFF; width:900px; position:relative;}
#left-pics {float:left; width:160px; position:absolute; top:160px; left:30px;}
#right-pics {float:right; width:160px; position:absolute; top:160px; right:-60px;}
#main-no-pics {float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#666}
#main-no-pics a{color:#666; text-decoration:none;}
#main-no-pics a:hover{text-decoration:underline;}#main-about {float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666;}
#main-about2 {margin:10px 0px; position:absolute; top:30px; left:0px;}
#main-about2 a{text-decoration:none; color:#666}#main-no-pics-l {float:left;}
#main-no-pics-l input{margin:5px auto;}/*THIS IS THE CSS FOR THE FORM STUFF OF THE WEBSITE*/
input.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}
select.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}
td.required {font-family:Arial, Helvetica, sans-serif; font-size:12px; }
input.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #999;}
select.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #666;}
td.optional {font-family:Arial, Helvetica, sans-serif; font-size:12px; }
input.submit {border: solid 2px #000;font-family:Arial, Helvetica, sans-serif; font-size:14px;}
/*THE END OF THE FORM CSS*/
#art {width:875px; margin:30px auto; padding:0px 0px 20px 0px;}
#art-pic {float:left; width:244px; position:absolute; top:160px; left:30px;}
#art-main {float:left; width:545px; position:absolute; top:160px; left:230px;}
#art-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}
#art-dizzle {float:right; width:39px; margin:45px 6px 30px 0px;}
#art-dizzle2 {float:right; width:39px; margin:87px 6px 30px 0px;}
#art-dizzle3 {float:right; width:39px; margin:3px 6px 30px 0px;}#art-main2 {float:left; width:545px; position:absolute; top:160px; left:320px;}
#art-main2 p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}#crafts-main {float:left; width:545px; position:absolute; top:140px; left:320px;}
#crafts-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}#art-dizzle-page-orange{float:right; width:16px; height:40px; position:absolute; top:127px; right:0px; background:url(../images/yellow_slice.png) no-repeat}
#art-dizzle-page-orange:hover {background:url(../images/orange.png) no-repeat; height:40px; width:45px;}
#art-dizzle-page-orange a {display:block; width:100%; height:100%;}#art-dizzle-page-green {float:right; width:16px; height:40px; position:absolute; top:169px; right:0px; background:url(../images/green_slice.png) no-repeat}
#art-dizzle-page-green:hover {background:url(../images/green.png) no-repeat; height:40px; width:45px;}
#art-dizzle-page-green a{display:block; width:100%; height:100%;}#art-dizzle-page-pink {float:right; width:16px; height:40px; position:absolute; top:212px; right:0px; background:url(../images/pink_slice.png) no-repeat}
#art-dizzle-page-pink:hover {background:url(../images/pink.png) no-repeat; height:40px; width:45px;}
#art-dizzle-page-pink a{display:block; width:100%; height:100%;}#art-buttons {position:absolute; top:545px; left:0px;}
#art-buttons ul {list-style:none;}
#art-buttons ul li {list-style:none; float:left;}#art-buttons2 {position:absolute; top:345px; left:0px;}
#art-buttons2 ul {list-style:none;}
#art-buttons2 ul li {list-style:none; float:left;}#craft-buttons {position:absolute; top:370px; left:0px;}
#craft-buttons ul {list-style:none;}
#craft-buttons ul li {list-style:none; float:left;}#list-l {float:left; margin:0px 0px 0px 50px;}
#list-r {float:right; margin:0px 0px 0px 50px;}#art-main2 {float:left; width:545px; position:absolute; top:150px; left:320px;}
#art-main2 p{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:15px 0px 0px 0px;}
#art-nav-buttons{position:absolute; top:370px; left:-5px;}
#art-nav-buttons ul {list-style:none}
#art-nav-buttons ul li {list-style:none; margin: 10px 0px;}/*HERE ARE WHERE THE CLASSES START*/
.clear {clear:both;}
.stories {color:#FF9933; font-size:22px;}
.art {color:#A0CF67; font-size:22px;}
.crafts {color:#F173AC; font-size:22px;}
.more {color:#5F4B9F; font-size:22px;}/*BOX STUFF*/
.inside {width: 980px; position:relative; margin:30px auto;}
.inside .tl { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.inside .tr { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.inside .bl { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.inside .br { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }/*INNER BLUE BOX ROUNDED CORNERS*/
.box2 {width: 875px; position:absolute; top:120px; left:50px; margin:30px auto;}
.box2 .tl2 { position: absolute; width: 12px; height: 12px; background: url(../images/corners/images/tl.png); top: -1px; left: -1px; }
.box2 .tr2 { width: 12px; height: 12px; background: url(../images/corners/images/tr.png); position: absolute; top: -1px; right: -1px; }
.box2 .bl2 { width: 12px; height: 12px; background: url(../images/corners/images/bl.png); position: absolute; bottom: -1px; left: -1px; }
.box2 .br2 { width: 12px; height: 12px; background: url(../images/corners/images/br.png); position: absolute; bottom: -1px; right: -1px; }/*BOTTOM BOX ROUNDED CORNERS*/
.box3 {width: 468px; position:absolute; top:0px; float:left;}
.box3 .tl3 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.box3 .tr3 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.box3 .bl3 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.box3 .br3 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }.box4 {width: 468px; position:absolute; top:0px; right:0px; float:right;}
.box4 .tl4 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.box4 .tr4 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.box4 .bl4 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.box4 .br4 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }June 24, 2009 at 2:14 pm #59601nchipping
MemberAnyone have any ideas here? I really need some help please!
June 26, 2009 at 10:33 am #59759nchipping
MemberDoes ANYONE know how to get this right?
June 26, 2009 at 11:12 am #59761apostrophe
ParticipantSlice it into 3 horizontal parts and repeat the centre one on the y axis.
June 26, 2009 at 11:47 am #59762nchipping
Memberapostrophe,
I’m sorry, but I’m not quite clear on what you mean… Are you saying to take the #container div and make it 3 separate divs, each containing their own parts, like the header, body, and then the background between the main body and the two information pieces on the bottom of the site? I am willing to try a bunch of different solutions to fix this…
June 26, 2009 at 1:26 pm #59763apostrophe
ParticipantYou will have to redo these images as I only had the flattened version to play with which made getting rid of the background difficult. But this should give you the idea.
html:Code:THE CONTENTand the css:
Code:#container {
background:transparent url(path/to/bg_container_center.jpg) repeat-y scroll 0 0;
float:left;
width:982px;
}#container_top {
background:transparent url(path/to/bg_container_top.jpg) no-repeat scroll 0 0;
float:left;
width:982px;
}#container_bottom {
background:transparent url(path/to/bg_container_bottom.jpg) no-repeat scroll left bottom;
float:left;
width:982px;
}June 29, 2009 at 6:05 pm #59892nchipping
MemberSo let me make sure I’m understanding what you’re saying correctly…
You are saying to put the div #container_bottom inside the #container_top, which is inside the div #container – correct? The #container_bottom would hold the main content, and then the top would be there and then the #container around it all. Is that what you meant?
I’m sorry if my brain is just fried, but I can’t understand how that would work – could you please try to explain it a little further?
June 29, 2009 at 10:41 pm #59901apostrophe
ParticipantI’ve done it for you and I really don’t see how I can make it any clearer, the code and the images speak for themselves.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.