ghoste
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by ghoste
-
-
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%} -
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.
-
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
-Resolved- 30px being added to right side, causing horizontal scroll bar
in CSS
Posted
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!