SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast alexkmoore's Avatar
    Join Date
    Jan 2010
    Location
    North Bay, ON
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick Fix Please

    Hey there my site is http://www.inkzoid.com.

    In order to make my page centered instead of it being on the left hand of the screen I had to have it redone without using absolute positioning. Now my only problem is trying to line up 3 images.

    The pic of Zoid is divide into 3 slices, the top of his hat being part of the banner, the middle slice being part of the navigation bar, and the bottom...well you get the idea.

    If someone could help me it would be appreciated.

    CSS:
    body {
    background-color: #111111;
    background-repeat: no-repeat;
    scrollbar-base-color: #1ac817;
    scrollbar-face-color: #1ac817;
    scrollbar-arrow-color: #ffffff;
    scrollbar-darkshadow-color: #083e0a;
    }
    a:link {
    text-decoration: none;
    color: #FFFFFF;
    }
    a:visited {
    text-decoration: none;
    color: #FFFFFF;
    }
    a:hover {
    text-decoration: none;
    color: #FFFFFF;
    }
    a:active {
    text-decoration: none;
    color: #FFFFFF;
    }
    p.text {
    color: #FFF;
    font-family: 'letter gothic std', 'times new roman';
    font-size: 80%;
    font-weight: bold;
    padding: 6px 0px 0px 2px;
    margin: 0;
    text-align: center;
    }
    p.header {
    color: #128911;
    font-family: 'letter gothic std', 'times new roman';
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    }
    .nav {
    float: left;
    margin: 0;
    padding: 0;
    }
    img.floatLeft {
    float: left;
    margin: 0;
    padding: 0;
    }
    img.floatRight {
    float: right;
    margin: 0px;
    padding: 0px 0px 0px 2px;
    }
    .clearboth {
    clear: both;
    }
    .thumbnail {
    float: left;
    width: 100px;
    height: 75px;
    padding: 0px 0px 5px 5px;
    margin: 0px;
    }
    a img {
    list-style-type: none;
    border: none;
    margin: 0px;
    padding: 0px;
    }
    ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    }
    #wrapper {
    width: 800px;
    margin: 0 auto;
    }
    #banner {
    height: 140px;
    }
    #nav {
    background-color: #128911;
    height: 30px;
    padding: 0px 0px 0px 2px;
    background-image:url(Images/bar.jpg);
    }
    #left {
    float: left;
    background-color: #111111;
    overflow-y: scroll;
    height: 323px;
    width: 349px;
    padding: 0px 0px 0px 2px;
    }
    #bottom_banner {
    clear: left;
    background-color: #111111;
    height: 120px;
    }
    div.hcb-shadow-tl {
    background:url(shadow-bg.jpg) top left;
    }
    div.hcb-shadow-tr {
    background:url(shadow-bg.jpg) top right;
    }
    div.hcb-shadow-bl {
    background:url(shadow-bg.jpg) bottom left;
    }
    div.hcb-shadow-br {
    background:url(shadow-bg.jpg) bottom right;
    }
    div.hcb-shadow-t {
    background: url(shadow-bg-t.jpg) repeat-x;
    }
    div.hcb-shadow-b {
    background: url(shadow-bg-t.jpg) repeat-x bottom;
    margin-bottom: 5px;
    }
    div.hcb-shadow-m {
    background: url(shadow-bg-r.jpg) repeat-y right;
    padding-right: 7px;
    clear:both;
    }
    div.hcb-shadow-r {
    background: url(shadow-bg-l.jpg) repeat-y left;
    display:block;
    }
    div.hcb-shadow-t, div.hcb-shadow-tr, div.hcb-shadow-b, div.hcb-shadow-br, div.hcb-shadow-tl, div.hcb-shadow-bl {
    background-color: #128911;
    height:7px;
    }
    div.hcb-shadow-tr, div.hcb-shadow-br, div.hcb-shadow-tl, div.hcb-shadow-bl {
    width:7px;
    }
    div.hcb-shadow-tr, div.hcb-shadow-br {
    float:right;
    }
    div.hcb-shadow-tl, div.hcb-shadow-bl {
    float:left;
    }
    br.hcb-shadow-clear {
    display:block;
    clear:both;
    }
    #HCB_comment_box {
    float: left;
    width: 415px;
    padding:17px;
    min-height: 323px;
    background-color: #128911;
    }
    #HCB_comment_box * {
    margin:0;
    padding:0;
    outline:0;
    border:0;
    }
    #HCB_comment_box textarea.commentbox {
    width:100%;
    display:block;
    border: 0;
    background-color: #ffffff;
    }
    #HCB_comment_box textarea, #HCB_comment_box input.text, #HCB_comment_box input.submit {
    border: 0px;
    background-color: #ffffff;
    padding-left:5px;
    }
    #HCB_comment_box div.hcb-wrapper {
    width: 70%;
    }
    #HCB_comment_box input.text {
    width: 70%;
    }
    /* the submit button */
    #HCB_comment_box .submit {
    cursorointer;
    font-weight:bold;
    background-color:#128911;
    width:84px;
    height:25px;
    background-image:url(submit.jpg);
    }
    #HCB_comment_box span.home-desc {
    font-size:10px;
    opacity:0.4;
    }
    #HCB_comment_box blockquote {
    margin:0 !important;
    padding:20px;
    background:url(speech-bubble.jpg) no-repeat;
    }
    /* the individual comment display containers */
    #HCB_comment_box div.comment {
    border-bottom:1px solid #ffffff;
    margin-bottom:5px;
    }


    HTML:

    <!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>Inkzoid - A Bunch of Useless **** I Do When I'm Bored</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
    </head>
    <body onload="MM_preloadImages('Images/home_glow (2).jpg','Images/gallery_glow.jpg','Images/cool_stuff_glow.jpg','Images/friends_glow.jpg')">
    <div id="wrapper">

    <div id="banner"><img src="Images/sadfasdfsdfds.jpg" width="800" height="140" /></div>

    <div id="nav">
    <img src="Images/bar.jpg" width="1" height="30" />
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Images/home_glow (2).jpg',1)">
    <img src="Images/home (2).jpg" alt="home" name="home" width="77" height="30" border="0" id="home" /> </a>
    <a href="our_gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','Images/gallery_glow.jpg',1)">
    <img src="Images/gallery.jpg" alt="gallery" name="gallery" width="91" height="30" border="0" id="gallery" /> </a>
    <a href="cool_stuff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cool stuff','','Images/cool_stuff_glow.jpg',1)">
    <img src="Images/cool_stuff.jpg" alt="cool stuff" name="cool stuff" width="123" height="30" border="0" id="cool stuff" />
    </a>
    <a href="inkzoids_friends.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','Images/friends_glow.jpg',1)"><img src="Images/friends.jpg" name="Image30" width="91" height="30" border="0" id="Image30" />
    </a>
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar.jpg" />
    <img src="Images/bar_overlap.jpg" width="129" height="30" />
    </div>

    <div id="bar_overlap"></div>

    <div id="left">
    <p class="header">
    Jan 29, 2010
    <br />
    <br />
    <a href="http://www.vimeo.com/9062679">
    <img src="Images/ipad.jpg" class="floatLeft"/>
    </a>
    <p class="text">
    <a href="http://www.apple.com/">
    <span class="style3">Apple</span>
    </a>
    </span>
    has a new product on the market - the iPad, which is pretty much a larger, more glorified iPhone. It starts at $499 US. Click on the image and watch the video to see all the awesome features. So far the biggest model yet is 64GB.
    <br />
    <br />
    <img src="Images/news_bar.jpg">
    <br />
    <br />
    <p class="header">
    Jan 28, 2010
    <br />
    <br />
    <p class="text">
    <img src="Images/sachmo_story_cover.jpg" />
    <br />
    <br />
    <span class="style4">Inkzoid</span> is having trouble with the comment box. That's what you get when you use an online HTML comment box instead of programming your own! It works but it overlaps the bottom purple banner. I'll try to fix it soon.
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 28, 2010
    <br />
    <br />
    <p class="text">
    <img src="Images/h1n1.jpg" class="floatLeft"/>Take a look at a few of the following pages. There's two sides to every story. One of the most incredible claims is that this virus was genetically engineered. I'm not even going to blog about this as there's simply too much ground to cover. Make an informed decision that is not influenced by politics or religion and make up your own mind.
    <br />
    <br />
    <br />
    <br />
    <br />
    <p class="text">
    <a href="http://www.infowars.com/ron-paul-on-h1n1-hoax-scare-the-people-to-death/">
    <span class="style3">
    Ron Paul on H1N1 Hoax:
    <br />
    &nbsp;
    “Scare the People to Death”
    </span>
    </a>
    </span>
    <br />
    <br />
    <a href="http://www.infowars.com/video-footage-of-phoenix-mass-grave-site/">
    <span class="style3">
    Video Footage of Phoenix Mass Grave Site
    </span>
    </a>
    </span>
    <br />
    <br />
    <a href="http://www.naturalnews.com/026503_pandemic_swine_flu_bioterrorism.html">
    <span class="style3">
    Journalist Files Charges against WHO and UN for Bioterrorism and Intent to Commit Mass Murder
    </span>
    </a>
    </span>
    <br />
    <br />
    <br />
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 26, 2010
    <br />
    <br />
    <a href="http://news.ca.msn.com/top-stories/cbc-article.aspx?cp-http://www.cbc.ca/video/news/player.html?http://blog.peta2.com/2010/01/canadian_seal_slaughter_suppor.html">
    <img src="Images/pie_in_face.jpg" class="floatRight" alt="PETA success" width="211" height="172" />
    </a>
    <p class="text">
    <a href="http://www.peta.com/">
    <span class="style3">PETA</span>
    </a>
    </span> may become labelled a terrorist organization! Because slapping a tofu pie in the Federal Fisheries Minister's face means that you are a danger to the country and it's people! If this label gets accepted, guess who's going to Guantanamo Bay when they make their next donation to
    <a href="http://www.peta2.com/">
    <span class="style3">PETA</span>?
    </a>
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 26, 2010
    <br />
    <br />
    <img src="Images/sachmo_story_cover.jpg" />
    <p class="text">
    I've got a comment box put up in the Gallery section but I have to do some more work on it as it looks like ass right now. You can use it if you 'd like...just keep that in mind.
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 25, 2010
    <br />
    <p class="text">
    Wow. So next time if you notice a sudden sharp pain on the tip of your tongue...
    <br />
    <br />
    <img src="Images/centipedes_in_vagina.jpg" width="355" height="140" />
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 24, 2010
    <br />
    <p class="text">
    Here's a pic I did a few years ago but just managed to put it up today.
    <br />
    <br />
    <a href="rob_beach.html">
    <img src="Images/rob_beach.jpg" width="354" height="254" />
    </a>
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 23, 2010
    <br />
    <img src="Images/sachmo_story_cover.jpg" align="center"/>
    <p class="text">
    I'd like to point out that <span class="style4">Inkzoid</span> now has a
    <a href="cool_stuff.html"><span class="style3">Cool Stuff</span>
    </a></span> section that I've been working on for the past few days, adding links to really interesting and sometimes hilarious sites. Some of my favourites include
    <span class="style2">
    <a href="http://www.heartattackgrill.com"><span class="style3">The Heart Attack Grill</span></a></span> (home of the Triple Bypass Burger), The Darwin Awards and a bunch of miscellaneous astronomy links. I'll be improving the content of this section with images and maybe even videos soon.
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 21, 2010
    </p>
    <p class="text">
    Anyone who'se known Alex Moore (me) for longer than five minutes is well aware that I'm a pizzaholic. Once a friend of mine and I got into a pizza competition. Unfortunately I don't have a pic of my entry but below is Rob Beaudry's Overkill Pizza which made me constipated for 16 years.

    <img src="Images/overkill_pizza.jpg" class="floatLeft" />

    Now, I've made over 100 homemade pizzas like Cajun Chicken on Whole Wheat Honeydough and Death By Cheese. Some really crazy ingredients have gone into the dough as well like vanilla extract (which makes an awesome crispy vanilla crust) and Molson Canadian beer. But I'd like to show you something a little different. Something I ordered, not made! Check it out.

    <img src="Images/pizza_of_death.jpg" class="floatRight" />

    Triple pepperoni. Triple cheese. Double steak. Double bacon strips. Double bacon crumble. I'm suprised they didn't deliver it with a complimentary ShamWow.

    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <br />
    <br />
    <p class="header">
    Jan 21, 2010
    <br />
    <img src="Images/sachmo_story_cover.jpg" />
    </p>
    <p class="text">
    Finally <span class="style4">Inkzoid</span> has a newer design. I've worked on it through so many sleepless nights that I could punch a baby!
    Ok, now that we've got that out of the way let's get down to business:
    <br />
    <br />
    This site is just a side project for fun but from time to time I do requests if you're patient. Unless I'm busy walking naked downtown at 4:30 am foaming at the mouth with chunky peanut butter crammed up my asscrack.
    <br />
    <br />
    Give me time and I'm sure I'll be able to make you happy. With artwork. Not peanut butter. Speaking of artwork I've got a few new pieces that I've done recently, so check out the <a href="our_gallery.html"><span class="style3">gallery</span></a></span>.
    </p>
    <br />
    <br />
    <img src="Images/news_bar.jpg" />
    <p class="header">
    Jan 22, 2010
    </p>
    <p class="text">
    Here's a digital fish painting I did for a particular fish-o-holic otherwise known as Rob Beaudry, co-owner of Top Level Roofing.
    <br />
    <br />
    <img src="Images/robs_walleye_green.jpg" />
    </p>
    </div>
    <div id="preview">
    <img src="Images/zoid_drawing.jpg" alt="zoid drawing" width="374" height="304" /><br />
    <p class="text">No transdimensional transvestites or lesbian goatfish were harmed in the making of this page. That we know of...</p>
    </div>
    <div id="bottom_banner">
    <img src="Images/banner_bottom.jpg" alt="bottom banner" /></div>
    <div id="notice">
    <p class="style4" align="center">
    Inkzoid does not use Facebook, MySpace, Twitter or any other social networking site.
    </p>
    </div>
    </div>


    </body>
    </html>

    Thanks!
    Alex

  2. #2
    SitePoint Zealot agarcia831's Avatar
    Join Date
    Nov 2009
    Location
    California
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    quick fix...give the middle and bottom image left margin values to push them over to the right and aligned with the top image.

    for the middle image, you don't really have any way to target the image with css, so maybe add a class...

    <img src="Images/bar_overlap.jpg" width="129" height="30" class="bar-overlap" />

    then the css for the margin...

    .bar-overlap { margin-left:5px; }

    for the bottom image, it's the only image in the div enclosing it so try this in your css...

    #preview img { margin-left:35px; }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    @alexkmoore

    Not to discount the previous solution, but I think there's a simpler way. I would use just one full image. Remove the black background and make it a transparent gif. Place the image in the #preview div and simply give it a negative top margin to pull it upwards. Much simpler and more robust.

    E.g.

    Code:
    #preview img {margin-top: -40px;}

  4. #4
    SitePoint Enthusiast alexkmoore's Avatar
    Join Date
    Jan 2010
    Location
    North Bay, ON
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Margin values! It was so simple haha
    I was using
    &nbsp;
    like fifteen times in a row to push the image over. I'm trying it now. Thanks to both of you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •