Jump to content
ghoste

-Resolved- 30px being added to right side, causing horizontal scroll bar

Recommended Posts

Seems like a fairly common topic, but no solutions have worked so far. My art portfolio site is set up with a header image, navigation on the left under that, then the content separated by big black divs. I'll use my shop subdomain as the example (some NSFW images, but thumbnailed): http://shop.ghoste.net/shopNew.php The problem is that space is being created on the right side, causing a horizontal scrollbar. I've tried overflow:hidden, and that's fine as a bandaid, but still looks awful on mobile devices/smaller displays. On my homepage I have larger images that might not fit on a smaller screen, so I want there to be a scrollbar if there's a legit need for it. The best I can figure is it's caused by the black dividers, cuz if I don't use them, everything's fine: http://shop.ghoste.net/ Here's my code for the dividers- .title { display:block; float:left; border-left: 26px solid transparent; border-bottom: 26px solid #000000; color:#33fce2; font-size:12pt; text-decoration: none; height: 0; width: 100%; margin-bottom:30px;} and the HTML- <div class="title"><div style="width:100%; height:26px;display: table; #position: relative;"><div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; font-family:Verdana, Helvetica, Arial; font-size:12pt; white-space: nowrap;">"Bodies in Space" Series Giclee Prints</div></div></div> (At the moment I also use a different code for the same angled edge effect for the dividers on other sections of the site- <div style= "margin-top:0px; margin-bottom:30px;"><div style="position:absolute; width: 32px; height: 26px; float:left; background-position:left; background-image:url('http://ghoste.net/images/nav/edge.png'); background-repeat:no-repeat;"></div><div style="width:100%; margin-left:32px; height:26px; background-color:#000000;display: table; #position: relative;"><div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; font-family:Verdana, Helvetica, Arial; color:#33fce2; font-size:12pt; white-space: nowrap;">{title}</div></div> Both methods cause the same problem.) The whole display:table-cell business is to vertically center the text. If there's a better method, I'm listening, but that's the only thing I could get to work. I've attached the full code to this post. Try not to laugh too hard; I'm very much a novice at this and I'm sure there are tons of unnecessary things in there. I'd really appreciate any suggestions! style2.cssshopNew.php

Edited by ghoste

Share this post


Link to post
Share on other sites

Why don't you just wrap everything in divs narrow enough to avoid the problem?

Share this post


Link to post
Share on other sites

Don't use 100% width on elements that already has padding or margins, as it will match the width of parent container and add margin/padding to its overall width, note the removal of width: 100%; also display: table/ cell and addition of float: left; to second div.

 <div style="height: 26px; background-color: #000; margin-left: 26px; /*display: table; width:100%;*/"><div style="vertical-align: middle; font-family: Verdana,Helvetica,Arial; color:#33FCE2; font-size: 12pt; white-space: nowrap; float: left; /*display: table-cell;*/ float:left; /*float added by dsonesuk*/">Print Shop — <strong>Free shipping</strong> possible on orders ≥ 2</div><form method="post" action="https://www.paypal.com/cgi-bin/webscr" target="paypal"><input type="hidden" value="_s-xclick" name="cmd"><input type="hidden" value="-----BEGIN PKCS7-----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-----END PKCS7-----" name="encrypted"><div style="float:right; margin-right:90px;"><input type="image" border="0" alt="PayPal - " name="submit" src="/images/viewcart.png"></div><img width="1" height="1" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt=""></form></div>

.title {	border-bottom: 26px solid #000000;	border-left: 26px solid transparent;	color: #33FCE2;   /* display: block;	float: left;   removed by dsonesuk*/	font-size: 12pt;	height: 0;	margin-bottom: 30px;	text-decoration: none;    /*width: 100%; removed by dsonesuk*/}

this element is block by default, removing 100% width, and removing float returns it to its normal block element state that will stretch to the total width of parent element.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks dsonesuk. Your advice helped quite a bit, I think. The problem persists, but it's consistent, now. The black bars have the same amount of space on the right as the header, which is more than I could manage alone. However, deleting the display:table/cell parts only made it so the headline text wasn't vertically centered. I did that to just the first "print shop" headline to illustrate: http://shop.ghoste.net/shopNew3.php Here's the full css-

@charset "UTF-8";/* CSS Document */html {    margin:0;    padding:0;}body {    margin: 0;    padding: 0;    }.header {    height: 217px;      border:0;    margin:0;    background-image: url('images/header.png');    background-repeat:no-repeat;    background-color:#33fce2;    background-position:center;}.title {    border-left: 26px solid transparent;    border-bottom: 26px solid #000000;    color:#33fce2;    font-size:12pt;    text-decoration: none;    height: 0;    margin-bottom:30px;}.text {margin-bottom:30px;max-width:700px;margin-right:100px;margin-left:32px;color:#000000;font-size:9pt;}#content {height:100%;margin-left:212px;margin-bottom:30px;}.thumb {width:180px;margin-right:20px;margin-bottom:20px;float:left;}.thumbContainer {margin-left:32px;margin-bottom:30px;width:100%;float:left;}.ribbon {margin-bottom:10px;margin-top:20px;}.link {margin-left:17px;;margin-bottom:20px;width:98px;}.desc {margin-left:17px;margin-bottom:17px;width:140px;}.sidebar {float:left;width: 212px;height: 100%;}A { color: #ff64ad; text-decoration: none; }A:link {    color: #ff64ad;    padding: 0;    text-decoration: none;}A:visited {    color: #ff64ad;    text-decoration: none;}A:active {    color: #ff64ad;}A:hover {    color: #000000;}img {border:0;}BODY,TD,TR{    font-family: verdana, arial, sans-serif;    color:#000000;    font-size:10px;    font-weight:normal;}

Niche, I could do that, but I feel like this isn't a problem that can't be solved. Not that it's a great design or anything, but I'd rather try to get it working properly than compromise it.

Share this post


Link to post
Share on other sites

Awesome, that is a much more elegant solution. Thanks! I messed around with it a bit today, keeping in mind what you said about width:100%, and got it to a much better state, I think. The shop page works fine because I could make sure that no element could extend beyond the window boundary, but the problem is still happening on the main site (http://ghoste.net) It happens when the window width is narrower than the content, it seems. With the window maximized, it's fine. But when an image extends off the side and a horizontal scrollbar appears, the header image and all the black post-title bars fall short of the edge. On an ipad the issue is always visible: http://i.imgur.com/wCQvq.png I don't understand why those elements won't fill in the entire width. Any thoughts? The HTML for the homepage:

<?PHPob_start();?><!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"><script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script><head><META NAME="DESCRIPTION" CONTENT="oooooOOOOoooOO it's a ghost. art blog thang."><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>ghoste net</title><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><link href="style.css" rel="stylesheet" type="text/css" /><link rel="icon"	  type="image/png"	  href="http://ghoste.net/images/favicon.png"><script type="text/javascript"><!--function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script><!--ANALYTICS--><script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-26216138-1']);  _gaq.push(['_setDomainName', 'ghoste.net']);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script></head><body onload="MM_preloadImages('images/homeRO.png','images/shopRO.png')"><!--HEADER--><div class="header"></div>            <div class="sidebar">    <!--HOME AND PAGES-->          <div style="margin-bottom:10px;">    <a href="http://ghoste.net/"><img src="images/home.png" name="home" width="212" height="32" id="home" onmouseover="MM_swapImage('home','','images/homeRO.png',1)" onmouseout="MM_swapImgRestore()" /></a>    </div>        <div class="desc">    Pages: <strong>    <a href="http://ghoste.net/index.php?start_from=0&ucat=&archive=&subaction=&id=&">1</a>    <a href="http://ghoste.net/index.php?start_from=20&ucat=&archive=&subaction=&id=&">2</a>    <a href="http://ghoste.net/index.php?start_from=40&ucat=&archive=&subaction=&id=&">3</a>    </strong>    </div>    <!--SHOP-->          <div class="ribbon"><a href="http://shop.ghoste.net"><img src="images/shop.png" name="shop" width="212" height="32" id="shop" onmouseover="MM_swapImage('shop','','images/shopRO.png',1)" onmouseout=        "MM_swapImgRestore()" /></a>    </div>          <div class="desc">    <strong>New prints available!</strong>    International shipping and all that. Possibly even free.    </div>    <!--ABOUT-->          <img class="ribbon" src="images/about.png" name="about" width="186" height="31" id="about" />	 <div class="desc">    I am Nathan Hoste and I made these lines and colors. I do these things in the event horizon of Metro Detroit.  My least favorite words are: juxtaposition, wonky, style, and seepage. I am a carbivore, unless bacon and beef and sausage and chicken are carbs, in which case I'd be a carbitarian. Crab has got to be a carb. My contact info is below– feel free to write and bore me with any inane thing. My hobbies are: bread, honking, etc. My interests include: cats.</div>        <div class="desc">    <div style="margin-right:10px; float:left;"><a href="http://ghoste.net/images/ecto1.jpg" rel="lightbox[about]" title="This is a picture of me (I'm the car).">			  <img src="images/thumbs/ecto1.jpg" width="40" height="40"></a></div>    <div style="margin-right:10px; float:left;"><a href="http://ghoste.net/images/workspace.jpg" rel="lightbox[about]" title="Where I do all the things.">			  <img src="images/thumbs/desk.jpg" width="40" height="40"></a></div>    <div style="float:left;"><a href="http://ghoste.net/images/bowie.jpg" rel="lightbox[about]" title="Bowie, my little victim of stockholm syndrome.">			  <img src="images/thumbs/bowie.jpg" width="40" height="40"></a></div>    </div>    <!--CONTACT-->          <img src="images/contact.png" alt="contact" name="contact" width="186" height="31" class="ribbon" id="contact" />    <div class="desc">    <a href="mailto:nathan@ghoste.net"> nathan@ghoste.net </a></div>    <!--BODIES IN SPACE-->          <div class="ribbon"><a href="http://bodiesinspace.ghoste.net"><img src="images/BIS.png" name="bodiesinspace" width="212" height="32" id="shop" onmouseover="MM_swapImage('bodiesinspace','','images/BISRO.png',1)" onmouseout=        "MM_swapImgRestore()" /></a>    </div>          <div class="desc">    <strong>What really happens to a body exposed to outer space? </strong>It's not what the sci fi movies show. Follow me!</div><!--OUTSIDE LINKS TO INPRNT, TUMBLR, ETC.-->        <img src="images/alsoOn.png" alt="contact" name="contact" width="186" height="31" class="ribbon" id="alsoOn" />    <div class="link"><a href="http://www.inprnt.com/gallery/ghoste/"><img src="images/inprnt.png" width="98" height="40" alt="inprnt"/></a></div>    <div class="link"><a href="http://ghostenet.tumblr.com/"><img src="images/tumblr.png" width="98" height="40" alt="tumblr"/></a></div>    <div class="link"><a href="http://www.etsy.com/shop/ghoste#"><img src="images/etsy.png" width="98" height="40" alt="etsy"/></a></div></div><div id="content" style="background-image: url(images/nav/backgroundBlack.gif); background-repeat: repeat-x; margin-bottom:40px;"><?PHP$pre_include = ob_get_clean();$number=20;$template = "Default2";$category= "1,2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 25, 26, 27, 28, 29, 30";if($_POST['do'] == "search" or $_GET['dosearch'] == "yes"){ $subaction = "search"; $dosearch = "yes"; include("./search.php"); }elseif($_GET['do'] == "archives"){ include("./show_archives.php"); }elseif($_GET['do'] == "stats"){ echo"You can download the stats addon and include it here to show how many news, comments ... you have"; /* include("$path/stats.php"); */ }else{ include("cutenews/show_news.php");}?> </div></body></html>

The code from the content management system:

<div style= "margin-bottom:30px;"><div style="border-left: 26px solid transparent;    border-bottom: 26px solid #000000;    text-decoration: none;    height:0;    margin-bottom:30px;"><div style="height:26px;"><div style="font-family:Verdana, Helvetica, Arial; color:#33fce2; font-size:12pt; white-space: nowrap; line-height: 26px;">{title}</div></div></div><div style="max-width:700px; font-size:9pt; color:#000000; text-align:left; padding:1px; margin-top:20px; margin-bottom:10px; margin-left:32px;">{short-story}</div><div style="color:#000000; margin-left:32px; white-space: nowrap;"><em> posted on {date} by {author} </em></div><div style="color:#33fce2; margin-left:32px; white-space: nowrap;">Tags: {category}</div></div>

The full css:

@charset "UTF-8";/* CSS Document */html {    margin:0;    padding:0;}body {    margin: 0;    padding: 0;    border-bottom: 10px solid #000000;    }.header {    height: 217px;      border:0;    margin:0;    background-image: url('images/header.png');    background-repeat:no-repeat;    background-color:#33fce2;    background-position:center;    overflow:hidden;}.title {    border-left: 26px solid transparent;    border-bottom: 26px solid #000000;    color:#33fce2;    font-size:12pt;    text-decoration: none;    height: 0;    margin-bottom:30px;}.text {margin-bottom:30px;max-width:700px;margin-right:100px;margin-left:32px;color:#000000;font-size:9pt;}#content {height:100%;margin-left:212px;margin-bottom:30px;}.thumb {width:180px;margin-right:20px;margin-bottom:20px;float:left;}.thumbContainer {display:inline-block;margin-bottom:30px;}.ribbon {margin-bottom:10px;margin-top:20px;}.link {margin-left:17px;;margin-bottom:20px;width:98px;}.desc {margin-left:17px;margin-bottom:17px;width:140px;}.sidebar {float:left;width: 212px;height: 100%;}A { color: #ff64ad; text-decoration: none; }A:link {    color: #ff64ad;    padding: 0;    text-decoration: none;}A:visited {    color: #ff64ad;    text-decoration: none;}A:active {    color: #ff64ad;}A:hover {    color: #000000;}img {border:0;}BODY,TD,TR{    font-family: verdana, arial, sans-serif;    color:#000000;    font-size:10px;    font-weight:normal;}.footer {    position: absolute;    bottom: 0;    background:#000;    height:10px;    width:100%}

Share this post


Link to post
Share on other sites

Not a problem. Your suggestion worked! Seems obvious now, of course, but I didn't think of it. min-width:1050px and there's no more issue. PM me if you like any of those giclee prints. I'd be happy to send one as thanks. If not, I'll just say: Thanks!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...