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

100% 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

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

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;
}

#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?

Most likely it isn’t that element causing the scfrollbar though :slight_smile:

Can you post a link? This could take forever :slight_smile:

How do I post a link?

You can’t be serious? :slight_smile:

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”

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/Website_background.jpg);
background-image: url(http://imgs.inkfrog.com/pix/klynnk1/Website_background_textured_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"/&gt;&lt;/p&gt;

</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>

  &lt;p&gt;This is a sampling of some of my projects - some for college and some just for fun.&lt;br&gt; 		         

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”>

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

  alt="baseball glove"/&gt;&nbsp;


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

alt=“The shed”/> 

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

  alt="broken fences"/&gt;&nbsp;
	

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

  alt="Miles twelve"/&gt;&nbsp;

		
  &lt;p&gt;&lt;span class="copyright"&gt;[&#169; Kathy Kuczek]&lt;/span&gt;&lt;/p&gt;

</div>

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

  border="0" alt="colored pencils"/&gt;&lt;/p&gt;

</div>

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

</body>

<footer>

</footer>

</html>

Put my homepage online … at

http://kathykuczek.com

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


p {font-size: small; color: white; [COLOR="Red"]padding-right: 28em;[/COLOR] }

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.

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