SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question space around a gif image

    Still a newbie at this css

    I have a gif image that I would like to add to my home page. I have already added a small one and that worked fine. When I tried adding one that was larger a scroll bar appears and I can now scroll to the right and I can see the edge of my header which is certainly not attractive. (my header width and tagline is set at 100% .... how can it be 100% if it stops?)

    The image fits visually on the screen with empty space 2" to the left and empty space 4" to the right. So why is it affecting my page this way? Do gif images add a margin around themselves? I tried adding padding:0; and margin:0; but it didn't help.

    question 2 .... where do you place a gif photo in the home.html so it can be moved anywhere on the page. Putting it in the header section gives me a huge scrollbar when there isn't anything to the right visually. Putting it in the body section limits how far left it can go. I would like a free floating section where I can place these gif image cutouts anywhere on the page.

    #pencils {
    position: absolute;
    top: 495px;
    left: 170px;
    padding: 0;
    margin: 0;
    z-index:3;
    }

    <div id="pencils">
    <p><img src="http://imgs.inkfrog.com/pix/klynnk1/pencils_test3.gif"
    border="0" alt="colored pencils"/></p>
    </div>

    Thanks for any help you can give me.

    Kuczek

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    100&#37; means means 100% of the parent. So if they have to scroll that's 100% width + the extra space to the right of the scrollbar.

    Do you have a structure like this? (Note that this may not be the exact same)
    <div id="wrapper">
    <some other thing here to the left >sdfjsklfjsd</some other thing here to the left>
    <div id="pencils">
    blah blah</div>
    </div>

    If so, on the top <div> there in my example you can give that right padding equal to the pencils div width. And then place the pencils on the right. With my example above, something like this
    Code:
    #pencils {
    position: absolute;
    top: 495px;
    width:300px;
    right:0;
    z-index:3; 
    }
    #wrapper{padding-right:300px;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't have a wrapper so I added it.

    I placed this in my <body></body> section and it jumped my body copy and photos to the top left conveniently tucked under my header and navigation. It made the scroll bar less but I can still scroll some and see the end of my header. Only about 1/2 inch now.

    I also tried placing it after my </body> section. Same thing.

    <div id="wrapper">
    <div id="pencils">
    <p><img src="http://imgs.inkfrog.com/pix/klynnk/pencils_test3.gif"border="0" alt="colored pencils"/></p>
    </div>
    </div><!-- end of wrapper content div -->

    ----------------------------------------------------------------

    #header, #tagline, #navigation, #bodycontent, {padding: 0px; margin-bottom: 0px; }

    #navigation, #bodycontent, {position: absolute; }

    #wrapper{padding-right:300px;}

    #pencils {
    position: absolute;
    top: 495px;
    left: 170px;
    padding: 0;
    margin: 0;
    z-index:3;
    }

  4. #4
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    #pencils {
    position: absolute;
    top: 495px;
    width:300px;
    right:0;
    z-index:3;
    }
    #wrapper{padding-right:300px;}

    I tried this suggestion .... no luck. I still get a scroll bar and a very wide page.

    Can you explain why it is doing this? It is a fairly large gif image but there is plenty of visual room around it. Why does the computer think it needs to add inches of dead space and the subsequent scrollbar to the right of my layout?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Most likely it isn't that element causing the scfrollbar though

    Can you post a link? This could take forever
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I post a link?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kuczek View Post
    How do I post a link?
    You can't be serious?

    Go to the website where this is at. Up at the top you will see the URL of the page. Copy that.

    Come into this thread. Paste the URL into this thread. Hit "submit reply"
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not on a website yet ... It is all on my computer.

    This is what I have ....... for my home page ....

    /*
    CSS for Stuff from my head
    */

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #3f4145;
    background-image: url(http://imgs.inkfrog.com/pix/klynnk1/...ckground.jpg);
    background-image: url(http://imgs.inkfrog.com/pix/klynnk1/...ed_brick.jpg);
    padding: 0;
    margin: 0;
    line-height: 125%;
    }

    h1, h2, h3, h6 {font-family: "Segoe Print", "Trebuchet MS", Arial, Helvetica, sans-serif; }


    h1 {font-size: X-large;color: #5ec6cc; }


    h2, ul {font-size: X-large; font-weight: normal; color: #5ec6cc; margin-top: 15px; padding-top: 15px; }



    p {font-size: small; color: white; padding-right: 28em; }


    #tagline p {font-family: Georgia, Times, serif; color: black; font-style: italic;
    background-color: #4d7a7d;
    background-color: #466E70;
    border-top: 1px solid black;
    border-bottom: 2px solid #3a3a3a;
    padding-top: .2em;
    padding-bottom: .1em;
    padding-left: 14em;
    margin: 0;
    }


    .fun {
    color: #339999;
    font-family: Georgia, Times, serif;
    letter-spacing: 0.05em;
    }



    /* -----------------------------------------------------------------------------------------------------------------
    This section deals with the position of items on the screen. It also includes all the graphic elements in my header.
    -------------------------------------------------------------------------------------------------------------------- */



    #header, #tagline, #navigation, #bodycontent {padding: 0px; margin-bottom: 0px; }

    #navigation, #bodycontent, #grass {position: absolute; }



    #pencils {
    position: absolute;
    top: 350px;
    left: -110px;
    z-index: 2;
    }

    #bodycontent {
    top: 160px;
    left: 200px;
    z-index:3;
    }

    #stuff, #gallery, #about, #guestbook {
    position: absolute;
    top: 32px;
    left: 152px;
    z-index: 3;
    }

    #blackblock {position: absolute; background-color: #000000;
    height: 88px;
    width: 100%;
    border-top: 4px solid #de182f; border-bottom: 4px solid #de182f;
    top: 18px;
    }

    #jumpingcat {
    position: absolute;
    top: 220px;
    left: 586px;
    z-index:3;
    }

    #catguestbook {
    position: absolute;
    top: 340px;
    left: 100px;
    z-index:3;
    }

    #grass {
    position: absolute;
    top: -150px;
    left: 237px;
    z-index:3;
    }


    #tagline {
    position: absolute;
    top: 115px;
    width: 100%;
    }

    #grayblock {
    position: absolute;
    background-color: #6e7273;
    height: 145px;
    width: 116px;
    border: 2px solid black;
    top: 4px;
    left: 15px;
    z-index: 2;
    }

    #logo {
    position: absolute;
    top: 2px;
    left: 28px;
    z-index:3;
    }


    #buttonA {
    position: absolute;
    top: 170px;
    left: 10px;
    }










    /* --------------------------------------------------------------------------------------------------------------------

    borders for photos on home page or wherever .......
    ----------------------------------------------------------------------------------------------------------------------*/

    .galleryphoto p {
    font-size: 65%;
    font-weight: bold;
    margin-top: 0px;
    width: 430px;
    line-height: 1.4em;
    }

    .galleryphoto img {
    border: 6px solid #eeeeee;
    }

    .copyright {
    font-weight: normal;
    color: gray;
    }



    /* --------------------------------------------------------------------------------------------------------------------

    these are my navigation links for left side of the page
    ----------------------------------------------------------------------------------------------------------------------*/


    #buttonA ul {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 30px;
    }

    #buttonA li {
    list-style-type: none;
    height: 30px;
    width: 125px;
    margin: 10px;
    text-align:center;
    }

    #buttonA li a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
    }

    #buttonA li a:link {
    color: #000000;
    font-weight: bold;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
    }

    #buttonA li a:visited {
    color: #000000;
    font-weight: normal;
    background-color: #4d7a7d;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
    }

    #buttonA li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #777777;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
    }

    #buttonA li a:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #666666;
    border-style: solid;
    border-top-color: #333333;
    border-left-color: #555555;
    border-right-color: #BBBBBB;
    border-bottom-color: #DDDDDD;
    }


    /* ------------------------------------------------------------------------------------------------------------------
    THIS GALLERY LAYOUT HAS BOTH LANDSCAPE AND PORTRAIT STYLE IMAGES
    -------------------------------------------------------------------------------------------------------------------- */

    a, a:visited, a:hover {}

    #container {position relative; width:620px; height:700px; background:none; border:1px solid none; margin:-50px auto; font

    -family:verdana, arial, sans-serif; font-size:12px;}

    #container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px;

    height:75px; cursor:default;}
    #container a.pics img.thumb {display:block; border:1px solid #595959;}


    #container a.pics span {display:none; border:0; width:600px; background:#bbb; border:1px solid #fff; text-align:center;

    line-height:18px;}
    #container a.pics span img {margin:10px auto; border:1px solid #000;}

    #container a.pics:hover {white-space:normal;}
    #container a.pics:hover img.thumb {border:1px solid #fff;}
    #container a.pics:hover span {display: block; position: absolute; left: 9px; top: 80px; z-index: 10; height: 500px;}

    #container a.pics:active img.thumb {border:1px solid #4d7a7d;}
    #container a.pics:active span {display: block;position: absolute;left: 9px;top: 80px; z-index: 5;outline: 0;height:

    500px;}

    #container a.pics:focus {outline:0;}
    #container a.pics:focus img.thumb {border:1px solid #4d7a7d}#container a.pics:focus span {display:block;

    position:absolute; left:9px; top:80px; z-index:5; outline:0; height:500px;}

    #container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:160px 0 0 0;

    width:600px; color:#eee; z-index:1;}
    #container span.info a {color:#000;}
    #container span.info a:hover {text-decoration:none;}


    #container {position: relative; top: 210px; left: -120px;}

    */ ------------------------------------------------------------------------------------------------------------------
    End of Gallery Layout
    ---------------------------------------------------------------------------------------------------------------------*/


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Kathy Kuczek - Stuff from my head</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
    <link href="style2.css" rel="stylesheet" type="text/css"/>

    </head>


    <body>


    <div id="header">

    <div id="blackblock">
    </div>



    <div id="stuff">
    <p><img src="http://imgs.inkfrog.com/pix/klynnk1/Website_Stuff_from_my_head_larger2.jpg"
    border="0"alt="Stuff from my head"/></p>
    </div>



    <div id="grayblock">
    </div>


    <div id="logo">
    <p><img src="http://imgs.inkfrog.com/pix/klynnk1/Mask_header_logo_94x125.jpg"

    border="0" alt="screaming mask with drill bits in head"/></p>
    </div>




    <div id="tagline">
    <p>Welcome -</p>
    </div>

    </div><!-- end of header div -->



    <div id="buttonA">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="pencil.html">The Gallery</a></li>
    <li><a href="aboutme.html">About me</a></li>
    <li><a href="guestbook.html">Guestbook</a></li>
    </ul>
    </div>


    <div id="bodycontent">


    <div id="jumpingcat">
    <p><img src="http://imgs.inkfrog.com/pix/klynnk1/CAT_180.gif"
    border="0" alt="jumping cat"/></p>
    </div>


    <div id="grass">
    <p><img src="http://imgs.inkfrog.com/pix/klynnk1/website_grass8.jpg"
    border="0" alt="gradient with grass"/></p>
    </div>


    <h1>Welcome to my portfolio -</h1>

    <p>This is a sampling of some of my projects - some for college and some just for fun.<br>

    Visit <em>" The Gallery "</em> and select from a range of mediums: pencil, pen & ink,

    acrylic, oils, mixed media, digital art, and 3-Dimensional sculpture.</p><br/>



    <div class="galleryphoto">



    <img src="http://imgs.inkfrog.com/pix/klynnk1/Home_150_Baseball_glove.jpg" border="0"

    alt="baseball glove"/>&nbsp;


    <img src="http://imgs.inkfrog.com/pix/klynnk1/Home_150_the_shed.jpg" border="0"

    alt="The shed"/>&nbsp;


    <img src="http://imgs.inkfrog.com/pix/klynnk1/Home_150_Broken_fences.jpg" border="0"

    alt="broken fences"/>&nbsp;


    <img src="http://imgs.inkfrog.com/pix/klynnk1/Home_125_Miles.jpg" border="0"

    alt="Miles twelve"/>&nbsp;


    <p><span class="copyright">[&#169; Kathy Kuczek]</span></p>

    </div>



    <div id="pencils">
    <p><img src="http://imgs.inkfrog.com/pix/klynnk1/pencils_test5.gif"

    border="0" alt="colored pencils"/></p>
    </div>




    </div> <!-- end of body content div -->

    </body>

    <footer>


    </footer>

    </html>

  9. #9
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put my homepage online .... at

    http://kathykuczek.com

  10. #10
    SitePoint Zealot agarcia831's Avatar
    Join Date
    Nov 2009
    Location
    California
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the images you've placed within p tags...logo, stuff, jumping cat, etc...all seem to have a lot of added space to the right of them due to the padding you've set for p...

    Code:
    p {font-size: small; color: white; padding-right: 28em; }
    the image that's actually causing the horizontal scroll is the grass image at the top. removing or at least reducing the padding should get rid of the scrollbar.

  11. #11
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    oh yeah .... now I remember doing that. Forgot all about it since I had adjusted it so my paragraph didn't go across the whole page.

    Thanks - I never would have seen that snafu.

    Kuczek


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
  •