Log In · Register

 
I forgot a code
GunsNRachel
post Feb 28 2009, 11:58 AM
Post #1


Senior Member
****

Group: Member
Posts: 292
Joined: Jul 2007
Member No: 545,047
I know I've used it before but I'm blanking. I have a very wide image, which I want to use for the header of a layout. I made it so large, so that people with bigger resolutions can see more. I don't know how to explain this too well..

I want the image to only show what can fit on the screen. I don't want a scroll bar that show shows the whole image. How do I do this?

Also, I don't want this image to be the background. I want to have it on a div.
 
 
 Start new topic
Replies (1 - 13)
Maccabee
post Feb 28 2009, 12:05 PM
Post #2


Senior Member
*******

Group: Official Designer
Posts: 5,880
Joined: Nov 2007
Member No: 593,382
So do you want to keep it center and just remove the scrollbars? Or do you want to know how to make it smaller?

To make an image smaller you add style="width:***px;" to the image and that will also adjust the height accordingly. Or if you just want to remove the scroll bars add overflow:hidden in the body css.
 
GunsNRachel
post Feb 28 2009, 12:16 PM
Post #3


Senior Member
****

Group: Member
Posts: 292
Joined: Jul 2007
Member No: 545,047
I just wanted to get rid of the scroll bars.

thanks!
 
Mickey
post Feb 28 2009, 12:27 PM
Post #4


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127
Try this:

CODE
<style>
.header {position:absolute; top:#px; left:50%; margin-left:#px; height:#px; width:#px; overflow:hidden; background:url("URL") center no-repeat scroll; display:block;}
.headerimg {height:#px; width:#px;}
</style>

<div class="header">
<img src="http://i33.tinypic.com/2j1t0sh.jpg" class="headerimg">
</div>

Replace URL in the CSS code with the url of the image you want to use as your header. Also, replace the pound symbols with the appropriate values. See if that works for you.
 
GunsNRachel
post Feb 28 2009, 12:38 PM
Post #5


Senior Member
****

Group: Member
Posts: 292
Joined: Jul 2007
Member No: 545,047
CODE
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
background:url("http://i636.photobucket.com/albums/uu84/RachelPlafchan/hellyeabg.png");
background-repeat: repeat;
background-attachment: scroll;
font-size: 14px;
color: black;
text-align: center;
font-family: arial;
}

#header {
position: absolute;
width: 1800px;
left: 50%;
margin-left: -900px;
overflow: hidden;
top: 0px;
}



</head>
</style>
<body>
<div id="header">
<img src="http://i636.photobucket.com/albums/uu84/RachelPlafchan/finally2.png" />
</div>
</body>
</html>


That's my code. Only problem is that there's a scroll bar that lets you go to the right, but not the left. I don't want a scroll bar at all. Help?
Reason for edit: Please use [codebox] tags instead of [code] tags when posting longer codes. - Mike
 
Mickey
post Feb 28 2009, 12:41 PM
Post #6


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127
Replace this:

CODE
body {
background:url("http://i636.photobucket.com/albums/uu84/RachelPlafchan/hellyeabg.png");
background-repeat: repeat;
background-attachment: scroll;
font-size: 14px;
color: black;
text-align: center;
font-family: arial;
}

With this:

CODE
body {
background:url("http://i636.photobucket.com/albums/uu84/RachelPlafchan/hellyeabg.png");
background-repeat: repeat;
background-attachment: scroll;
font-size: 14px;
color: black;
text-align: center;
font-family: arial;
overflow: hidden;
}

That should remove the scrollbar.
 
GunsNRachel
post Feb 28 2009, 12:48 PM
Post #7


Senior Member
****

Group: Member
Posts: 292
Joined: Jul 2007
Member No: 545,047
Thank you so much!
 
GunsNRachel
post Feb 28 2009, 12:51 PM
Post #8


Senior Member
****

Group: Member
Posts: 292
Joined: Jul 2007
Member No: 545,047
Actually I have another problem now. I want it to be able to scroll down for my content area. Otherwise I have no room to put anything. Is there a way to only get rid of the horizontal scroll bar? or only do the overflow:hidden thing for the header part?
 
Mikeplyts
post Feb 28 2009, 01:08 PM
Post #9


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
Try using this to make it scroll but no horizontal scrollbar. Add it to the css of your content area.

CODE
overflow:x-hidden;


But I think you need to remove the width property of your content area for it to work.
 
GunsNRachel
post Feb 28 2009, 01:44 PM
Post #10


Senior Member
****

Group: Member
Posts: 292
Joined: Jul 2007
Member No: 545,047
Doesn't work =\
 
Mickey
post Feb 28 2009, 02:05 PM
Post #11


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127
It's actually like this:

CODE
overflow-x:hidden;

That should do it.
 
Mikeplyts
post Feb 28 2009, 02:14 PM
Post #12


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
^Oh yeah. haha. rofl1.gif
 
GunsNRachel
post Feb 28 2009, 02:21 PM
Post #13


Senior Member
****

Group: Member
Posts: 292
Joined: Jul 2007
Member No: 545,047
I love you guys! Thanks a ton =)
 
Mickey
post Feb 28 2009, 02:46 PM
Post #14


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127
Topic closed & moved.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic