Caitlin-havener Posted October 27, 2011 Share Posted October 27, 2011 I'm using the 960.gs framework, hopefully someone is familiar. I'm trying to make this website for class. I can't figure out why I have this extra space on the right side of the page. It's pretty apparent: http://sulley.dm.ucf.../dashboard.html I've messed with the margin-right's on like everything on that side... not sure. Let me know if you see it. THANKS! Source code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Dashboard - Caitlin Havener</title><link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /><link rel="stylesheet" type="text/css" media="all" href="css/text.css" /><link rel="stylesheet" type="text/css" media="all" href="css/960.css" /><link rel="stylesheet" type="text/css" media="all" href="css/style.css" /></head><body> <div class="container_12"> <div class="grid_10" id="header"> <div class="header_text"> <h1 class="media">Media</h1><h1 class="moderation">Moderation</h1> </div> </div> <div class="grid_2" id="top_right"> <p>Hello, Milton! <a href="#">Not you?</a></p> </div> <div class="grid_9" id="content"> <h2>Media Consumption this Week</h2> <img id="mediachart" src="img/mediachart.jpg" alt="mediachart" /> </div> <div class="grid_3" id="right_side"> <div class="roundedBox"> <div class="left"><div class="right"> <div class="top"> <div class="boxContent"> <ul class="navigation"> <li><a href="dashboard.html">Dashboard</a></li> <li><a href="customize.html">Customize</a></li> <li><a href="help.html">Help</a></li> <li><a href="#">Log-Out</a></li> </ul> <div class="belowNav" <h2>Total Media Consumption This</h2> <form action=""> <select name=""> <option value="">Day</option> <option value="">Week</option> <option value="">Month</option> <option value="">Year</option> </select> </form> <p>:2 days 21 hrs 30 min</p> </div> </div> <div class="bottom"> </div></div> </div></div> </div> </div> <hr/> <div class="grid_12" id="footer"> <h2>Media Moderation © 2011</h2> </div> </div></body></html> CSS: @charset "utf-8";/* CSS Document */@font-face{ font-family: ostrich-black; src: url('../fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.eot'), url('../fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.ttf'), url('../fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.svg'), url('../fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.woff');}@font-face{ font-family: ostrich-bold; src: url('../fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.eot'), url('../fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.ttf'), url('../fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.svg'), url('../fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.woff');}@font-face{ font-family: ostrich-dashed; src: url('../fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.eot'), url('../fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.ttf'), url('../fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.svg'), url('../fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.woff');} @font-face{ font-family: ostrich-light; src: url('../fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.eot'), url('../fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.ttf'), url('../fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.svg'), url('../fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.woff');}@font-face{ font-family: ostrich-regular; src: url('../fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.eot'), url('../fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.ttf'), url('../fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.svg'), url('../fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.woff');}@font-face{ font-family: ostrich-rounded; src: url('../fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.eot'), url('../fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.ttf'), url('../fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.svg'), url('../fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.woff');}body{ background-color:MidnightBlue;}h2{ font-family:ostrich-regular; font-size:30px; margin-left:20px;}.container_12{ background-color:white; border: 1px black solid;} #header{background-image:url('../img/pinkgradient.gif');background-repeat:repeat-x;height:120px; margin-right:0;margin-left:0; text-align:center;}#header .header_text{ margin-left:auto; margin-right:auto;}.media{ font-family: ostrich-bold; font-size:70px; display:inline; margin-right:10px; color:rgb(211,209,32);}.moderation{ font-family: ostrich-regular; font-size:74px; display:inline; color:rgb(255,130,26);}#top_right{background-image:url('../img/pinkgradient.gif');background-repeat:repeat-x;height:120px; margin-left:0; margin-right:0;}#right_side{ height:420px;}#content{ height:420px; background-color:white;}#mediachart{ width:550px; height:350px;margin-left:auto; margin-right:auto;}.navigation{ list-style-type:none; margin-left:auto; margin-right:auto; padding:0;}.navigation a{ display:block; width:135px; background-color:rgb(38,255,151); text-decoration:none; text-align:center; margin:0px 0px 0px -30px; padding:5px; color:black; font-family:ostrich-black; font-size:25px;}.navigation a:hover{ background-color:rgb(20,130,77);}.navigation a:active{ background-color:rgb(20,130,77);}.left {background: url('../img/left.gif') repeat-y left; height:380px; }.right {background: url('../img/right.gif') repeat-y right; height:380px;}.top {background: url('../img/top.gif') no-repeat top; height:55px;}.bottom {background: url('../img/bottom.gif') no-repeat bottom; height:70px; padding-top:0; margin-top:0;}.roundedBox{ height:400px;position:relative;left:-10px;padding:0px 17px 0px 20px;margin-right:0;}.boxContent { position:relative; left:3px; top:35px; margin:0px 19px 25px 20px; padding-top:15px; padding-bottom:0px; height:305px; background-color:rgb(38,255,151);}.boxContent h2{ font-size:18px; margin-left:10px;}.boxContent form{ margin-left:10px;}.boxContent p{ margin-left:10px;}.boxContent h2, .boxContent form{ display: inline;}.belowNav{ text-align:center; margin-left:10px;} #footer h2{font-family: Arial, Helvetica, sans-serif;font-size:10px;text-align:right;} Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2011 Share Posted October 27, 2011 ??? are you talking about the 40px space from pink gradient, that because #header is 780px, and #top_right is 140px, you are 40px short from one of these. Edit: OR just add gradient to #container_12 instead. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted October 27, 2011 Author Share Posted October 27, 2011 I tried your second suggestion and it didnt work .container_12{ background-color:white; border: 1px black solid; background-image:url('../img/pinkgradient.gif') repeat-x top;} I also don't get why the top isn't spanning the whole 960 pixels because I am using all 12 grid columns...?? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2011 Share Posted October 27, 2011 you are trying to use shorthand styling within a specific individual declaration background-image:url('../img/pinkgradient.gif') repeat-x top; should be background:url('../img/pinkgradient.gif') repeat-x top; Link to comment Share on other sites More sharing options...
Caitlin-havener Posted October 30, 2011 Author Share Posted October 30, 2011 Great, I changed that. you guys are great! But I still have that margin there off to the right Any more ideas? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2011 Share Posted October 30, 2011 Make the header total width of page, and insert top_right inside header, and float right with a right margin would be the normal way. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted October 30, 2011 Author Share Posted October 30, 2011 I made the header the whole width but when i floated the right side inside of header it went to the next line. I ended up just relatively positioning top right over the header that I extended the whole width. Any ideas why the "cell phone" image to the right of the page is staggered on one of my computers and lines up on the other? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2011 Share Posted October 30, 2011 option1 : remove all position relative, top etc float right top_right and place it LEFT of header_text. because header text is block it will force floated element to stack, unless the top_right placed before it option 2: float the header_text left, and again remove all position relative, top etc and float right the top_right element, you may have to set a width for header_text. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.