|
CSS - Truncating Large Image To Match Screen Width?
Hi - I'm a bit of a noob when it comes to CSS etc. but have been asked to modify some code for someone. Basically it's a simple site that has the main content centered on the screen (about 960px wide). However there is a large banner image that is about 2000px wide that is supposed to stretch as wide as say a large 27" mac. I am not sure if this is the correct way to do it but I guess they couldn't use a smaller image and repeat it because there is a unique design/pattern throughout the whole width. Anyway, on smaller browsers everything looks good except the horizontal scroll bar allows the user to scroll all the way to to the right. Is there anyway to clip the image on the top to prevent the scroll bar from showing based on screen width?
Hope that makes sense. Thanks. Similar TutorialsI have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? On http://www.h****inson.co.uk/h****inson5.4 (I guess you can work out the name of the site...I've used a tiny-url in the link though) a horizontal scrollbar is displayed even though there is not content (as far as I can see) that is pushing the sides out this far. Although it is not detremental to the website, can anyone please suggest what is wrong. The main css code is at http://www.h****inson.co.uk/h****inson5.4/files/css.css Thanks for any help. Hi, is there anyway to make the horizontal menu on the top of the webpage fit the entire width of the screen along with the titlebar? I mean, irrespective of the number of menu items, the menu should be exactly as wide as the screen. Thanks. hi, i m trying to design a page with a logo at the top.just like this site. http://richgirlstore.com/xcart/home.php but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks... I've been working on a CSS style for a web site, and I've got a small issue with the right hand column not staying within the bounds of the screen. When using a tool to see where the div's borders the right is about 200 px going off the right of the screen, making the screen horizontally scrolling. I am not a CSS expert. I know enough to get around, but this I don't understand. (I might have posted too much, but I figured if someone needed something more, it's already all there.) Thanks for any assistance that can be provided. HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Experience Inc. - Warren and Forest Counties Office of Aging</title>
<link href="css/grey_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<span style="float:left;">
<img src="images/logo.gif" />
</span>
<span style="float:right;">
<div style="text-align:center">
<div id="outerFirst"><a href="index.php"><span>Home</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Services</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Senior Centers</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Trips / Events</span></a></div>
<div id="outerFirst"><a href="index.php"><span>About / Contact</span></a></div>
</div>
</span>
</div>
<div class="CellBackGround">
<table width="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="pictureContainer">
<div id="largeHomeText">
Warren and Forest Counties Area Agency on Aging
</div>
<div class="together">
<img src="images/home_image_bar/image1.jpg" />
<img src="images/home_image_bar/image2.jpg" />
<img src="images/home_image_bar/image1.jpg" />
</div>
</div>
<div class="CellBackGround">
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="navigation">
<p>
</p>
</div>
<div id="extra">
</div>
<div id="footer">
<p>This is the footer area. </p>
</div>
</body>
</html>
CSS Code:
body {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
font-style: normal;
font-weight: normal;
color:#FFFFFF;
background-color:#666666;
margin-left:0;
margin-top:0;
margin-right:0;
}
#header {
width: 100%;
background-color: #666666;
overflow:auto;
vertical-align:top;
height:auto;
}
#menu {
height: 54px;
margin: 3em 0;
padding:0 1em;
border-bottom: 0px solid black;
overflow:inherit;
}
#outerFirst {
float: left;
width: 90px;
height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
#outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:90px;
height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
#outerFirst span {
height: 54px;
display: block;
margin:0;
padding: 25px 0px 0px 0px;
}
#outerFirst a:hover {
width:90px;
height:54px;
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
color: yellow;
}
#outerFirst a:active {
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
}
.CellBackGround {
height:2px;
background: url('../images/redPixel.gif') center center;
}
.CellBack2 {
background: url('../images/redPixel.gif') center center;
}
#pictureContainer {
width:100%;
background-color:#666666;
overflow:auto;
height:95px;
}
#largeHomeText {
color:#999999;
font-size:13pt;
float:left;
padding-top:74px;
padding-left:3px;
}
.together img {
padding: 0;
margin: 0;
border: 0;
display: inline;
float: right;
overflow:hidden;
}
#mainTextContaner {
color:#660000;
margin-left:-5px;
}
#footer {
color:#666666;
}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 45%;}
.br {background: url(../images/br.gif) 100% 100% no-repeat}
.tl {background: url(../images/tl.gif) 0 0 no-repeat}
.tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl2 {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 35%;}
.br2 {background: url(../images/br.gif) 100% 100% no-repeat}
.tl2 {background: url(../images/tl.gif) 0 0 no-repeat}
.tr2 {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
a:link {
font-size: 14pt;
color:#999999;
}
a:hover {
font-size: 14pt;
color:#660000;
}
a:visited {
font-size: 14pt;
color:#999999;
}
#news {
background: url(../images/news.jpg) 100% 0 no-repeat;
width:370px;
height:600;
}
div#wrapper{
float:right;
margin-right:-30%;
width:99%;
}
div#content{
margin-right:30%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
height:400px;
padding-top:10px;
}
div#navigation{
float:left;
width:32.9%;
padding-top:10px;
}
div#extra{
float:left;
clear:left;
width:32.9%;
padding-top:10px;
}
p{
margin:0 10px 10px
}
div#footer{
clear:both;
border-top:2px solid;
border-top-color:#660000;
border-bottom:2px solid;
border-bottom-color:#660000;
text-align:left;
color:#FFFFFF;
}
div#footer p{
margin:0;
padding:5px 10px;
width:10%;
}
Hang on to this post, I have found a couple of answers, so will post again when i get stuck! Charlie I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. Trying to delete my post but no option to delete so just removing content. Hi I'm having trouble getting my drop downs in my menu to work properly in firefox My website is www dot baliweddingsolutions dot com the menu's are truncating, I've looked at the css in firebug but can't for the life of me work out a fix, can anyone offer me some advice? Thanks Diana Hi Folks, I really have spent days trying to fix this problem. http://test.fluid-rock.com/ I have some nested divs that use background images and colours to create the 3 column effect. In IE [of course] there's a problem. You can see it in the page above. White bands appearing on the right and flashing different heights on resize. I now have a border [red] around the wrapper div, because I've discovered that a border helps to tlessen the damage. Without it - the white rectangle/void stretches all the way accross blanking/truncating the text in the middle column too! It's completely weird. Before I post hundreds of lines of code I thought I'd let you just see the page, perhaps the problem looks familiar? Thanks so much, John Hi I am designing a page in which I want to include a background image that is anchored to the bottom right of the screen. I have managed to do this, the only problem I am having is that due to the image being a big one (dimensions) when the user's screen is of a lower resolution such as 800 x 600, the image takes over most of the page's background which is distracting from the main content. My idea is to have the image resize based on the user's screen resolution. Is this a feasible solution and if yes, how can it be achieved? Thanks I'm trying to set up a box to hold an image and a caption. I thought it would be really easy, but I'm having huge difficulties... Here's what I want: A floating box contains my image and caption. It shrinks to fit the image width (which varies depending on the image), and the caption wraps onto new lines if needed. Simple, eh? Well, apparently not... I just can't get my text to wrap. If the line of text is longer than the image, it stretches the whole container. No matter how many workarounds I try! Can someone please tell me how it's done using CSS?! I'm trying to set a background image that spans from edge to edge in my browser window. Currently, I have everything set up and positioned as I'd like, but the image stops just short of reaching the very edges of the browser window on the left and right sides. The image itself is 2000px wide, so that various browser widths show the continuation of the image. You can see the problem I have at URL Notice the blue lines on either side aren't quite making it to the edge of the browser. The relevant CSS is located at URL The .main div at the bottom is the one with the background image code. Thank you for any help offered. I'm wondering what's the word is called for setting the image width and height in CSS Code:
img.test
{
<<What's the keyword??>>: 10 px;
}
Thanks, FletchSOD Hi, I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp. Is this possible? Basically, I want the browser to manage the scaling of the image. Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? I am trying to teach myself doing a tableless website using css and I am starting with header then working my way down I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE .. Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background .. Here the html and css <body> <div id="logoheader"> <img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" /> <img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" /> </div> </body> </html> ------------------------ the css ------------------------ body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color : #FFFFFF ; } #logoheader { background: url(../images/stlaware_03.png) repeat; height: 90px; width: 100%; } How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width? Thanks .. Bill I'm trying to make up a thumbnail page that shows pics in a row at a constant height. I don't want the images distorted so the width will vary. I tried: Code: img.proj_thumb {border-style:none; height:75px; width:auto}
Ths worked on mylaptop, but fails on the server - see the attached pics. Any suggestions? Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help |
|||||||