Centre wide image without horizontal scroll

Hi
I wonder if somebody could help me out.
I have a website header image which is extra-wide to accommodate for any screen size.
The person I’m making the website for loves the design but is dead-set against background images (various reasons I won’t go into).
Is there a way to keep the header image centred without the whole page stretching to the pixel width of the header (and without RESIZING the image to fit any screen size)? So that the sides of the header are just cropped off?
Any help would be hugely appreciated!

Unfortunately if you place it as an image, the page will have scroll bars and the only way to avoid that is to use a background which is not an option.
Personally speaking, you should really consider making the header image that can stretch to any screen size because "extra-wide" is a matter of opinion rather than a stated width. For instance, let's say I have an old laptop with an 800x600 resolution, a cheap Dell monitor with 1280x1024 resolution and a nice iMac with a 2560x1440 resolution. Would the extra wide only fit the iMac? Or maybe it would look ok on the Dell?
The point I am trying to get at is that first, sit down with your client and go over their web stats to determine an optimal width, not just extra-wide because it looks nice. Then cut up that header and code it in CSS with repeating backgrounds as needed and static images on top.

Similar Messages

Multi-image (300+) horizontal scroll bar buttons

I am new to DreamWeaver, and need some guidence: I need to
create 300+ square image buttons in a horizontal scroll bar, but
haven't been able to find how to yet. Can someone direct me to
where I may find out how to create this?

So what are you having trouble with exactly -- Making 300 +
images with
your image editing software or making a horizontal scroll bar
in DW?
Why exactly do you want to make people scroll through 300+
image buttons?
Is this supposed to be an image gallery or something? Sorry
for all the
questions but it's hard to picture what you're trying to do
without more
facts.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"J. Donovan Smith" <[email protected]> wrote
in message
news:fc1iks$4td$[email protected]..
> I am new to DreamWeaver, and need some guidence: I need
to create 300+
square
> image buttons in a horizontal scroll bar, but haven't
been able to find
how to
> yet. Can someone direct me to where I may find out how
to create this?
>

How to show images in horizontal scroll field in blackberr

hi i want to show images in horizontal field manager and scroll right to left. focused image should be show up.
Solved!
Go to Solution.

please reply with your device model (e.g. Blackberry Curve 8520)
Click "Accept as Solution" if your problem is solved. To give thanks, click thumbs up Blackberry Battery Saving Tips | Follow me on Twitter

How to adjust the space between images in a carousel or images with horizontal scroll

I use the next steps to create a carousel or horizontal scroll of images:
Webcenter portal: Spaces
Spaces
Manage Settings
Pages
Create page
Content management
Content presenter
Add images with Plus Icon
It works, but between every image has a lot of space, can you tell me how to reduce the space between every image.
My Oracle Version 11gR1 (11.1.1.3.0)
Regards
Tomas Reyes

Remove line 234 in your HTML code.
<p>& n b s p</p>
This is a redundant line of code. Your spacing should get resolved.
PS: I've given spaces between the tag because otherwise this forum would not display the line correctly.

When i zoom in google chrome, the paragraphs are resized to adjust without horizontal scroll. can this be done in safari?

when i zoom in a website while viewing in chrome, there is less chance of the horizontal scroll. but the same page in safari leads to lot of horizontal scroll.
vertical scrolling is ok while reading, but not both.

yeah smart zoom is definelty good, thanks for the quick response, i feel home by getting such quick response.
but may be few cases i felt chrome has done some good tweeks while zooming the paragraph. may be when i find specific pages i will post them.
actually i like safari, but previous favorite was chrome. so wanted to get some best things from there.

Space images in Horizontal scroll

Being new to AS and Flash 8 I am using an online tutorial as a guide to the creation of a horizontal mouse driven scrolling gallery.
I was hoping to use the model script and make simple adjustments of file names and loading specs but it has gone beyond my simple understanding.
I have 64 images which need to load 50 pixels apart starting with a 50 pixels pace. The image sequence will loop. Each image is of constant 385 pixels deep but widths vary and I hoped AS could load them in sequence at 100% instead of using a finite number for the width. The attached file shows the gallery images at bottom right, loaded but all stacked upon each other with the last image uppermost.
Code so far:
this.createEmptyMovieClip("container",1);
var imagesNumber:Number = 64;
var baseX:Number = 0;
var spacing:Number = 50;
for (i=1; i<=imagesNumber; i++) {
container.attachMovie("image"+i,"image"+i+_mc,i);
myImage_mc = container["image"+i+_mc];
myImage_mc._x = baseX
myImage_mc._y = (Stage.height == myImage_mc.height);
baseX = baseX + myImage_mc._width + spacing
Once I get the loading process correct I think I can revert to the tutorial model for the rest of the AS.
Can anyone help please?

Thank you both for the response guys.
The code above is part of a tutorial describing the AS to create a mouse driven scrollable gallery. The tute uses thumbs and clicks to a larger image window from each thumb. I simply wanted to create a gallery of images straight out of the fla Library to a standard height. I figured the exercise would allow me to engage constructively with AS in a real project. the code is only the first part of the tute project. I changed the code image names to suit my files and the fact that the model has thumbs and images suggests I may have rendered some code unusable or redundant and caused a malfunction in the Test. Yup, I am trying to run before I can walk and the points you guys have made illustrate the need for me to assemble specific code models instead of trying to adapt code at this stage when I know so little.
I want to sincerely thank you guys for your helpful responses. I shall check out each code element again in the light of your observations. I very much appreciate your detailed observations.

Getting rid of horizontal scroll bar

how do you make it so if a window is not fully maximizedthere
is no scroll bar? For example if you AIM window is up and docked on
most sites there is no horizontal scroll bar but on the site im
building there is.....
see links for examples.
With
Horizontal Scroll Bar
Without
Horizontal Scroll Bar

It's been a while since I looked at this... basically just
put everything in a centered wrapper and let the divs position
themselves the way they are supposed to. You rarely ever need to
use positioning/layers.
=========================
And... what I always say:
"write it for FireFox then hack it for IE."
Use the right
DocType
Validate your Markup
Validate your CSS
Why you want to
validate
Don't
use tables for layout

Is it possible to fill the width of the browser without creating horizontal scrolling?

I'm trying to fill the width of the browser with placed images across the page so that they bleed off. But as soon as I reach the edge of the working area and then preview it just scrolls to show empty white space.
I'm trying to achieve the effect that if you're viewing on a wide screen monitor the you'll see all the images, but if viewed on a smaller monitor the images will just bleed off with no option to horizontally scroll.
Is it possible?

If I'm understanding your question correctly, create a rectangle at 100% width, either by clicking the 100% width icon or dragging the edges out to the edge of the browser space until the edge turns red. Now go to the Fill Panel and select Add Image. Choose your image. Set the location to Centre. Set the Fitting to Original Size - this will prevent the image from resizing with the browser. You'll need to make sure the images are wide enough to fill the screen, of course.

Horizontal scrolling with captioned images?

Hey everybody I'm helping a friend with his new site and need help figuring this out:
- I want to add left-aligned text captions below each of the horizonal scrolling images.
- I also want the images/captions to automatically resize to fit every window size (as the images currently do) - would be great if the image caption texts would automatically resize and become smaller with smaller window sizes.
Example here (this is a test without captions): http://briankokoska.com/indextest2.html
If somebody could please try to code the page including the word "caption" left-aligned underneath each of the images I would be very greatful. This way i can add the proper captions myself.
Thanks in advance for your help!!!

Horizontal scrolling and fixed divisions don't work well in mobile devices.
Try this code in a new, blank document and SaveAs test.html. This works much better in mobile/tablet devices.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BRIAN KOKOSKA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
body {
width: 98%;
color: #000;
padding: 0 1%;
font-size: 125%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
header {
position: fixed;
top: 0;
right: 3%;
margin: 0;
width: 35%;
font-weight: bold;
text-align: right;
background: rgba(255,255,251,0.5)
header * { padding-right: 1% }
header address a {
padding-top: 25px;
margin-bottom: 0;
color: red
header p { margin-top: 25px; }
header h2 a {
color: blue;
font-size: 75%;
margin-top: -10px;
section { display: table; }
article { display: table-row; }
/**Captions**/
article p {
display: table-cell;
vertical-align: middle;
margin: 2%;
padding: 2%;
color: red;
/**re-usable classes**/
.center { text-align: center }
.right { text-align: right }
.red { background: rgba(255,0,0,0.5); }
.white { background: rgba(204,204,204,0.5) }
.blue { background: rgba(0,102,204,0.5) }
/**links**/
a img { border: none }
a {
text-decoration: none;
color: #000;
display: block;
line-height: 2em;
a:hover, a:active, a:focus { text-decoration: underline }
/* Special Rules for Mobile, Tablets */
@media only screen and (max-width: 1024px) {
body { font-size: 90% }
img { width: 100% }
header {
width: 100%;
position: static;
padding: 0.5%
article p {
display: block;
padding: 0;
font-size: 90%
</style>
</head>
<body>
<header>
<h1 class="right">BRIAN KOKOSKA</h1>
<address>
<a href="mailto:[email protected]">[email protected] </a>
</address>
<h2><a href="http://mfineart.ca/artists/brian-kokoska-selected-works/" target="_blank">Macaulay & Co. Fine Art</a></h2>
<p class="blue"><a href="http://briankokoska.com/installationviews">INSTALLATION VIEWS</a><p>
<p class="white"><a href="http://briankokoska.com/selectedworks">SELECTED WORKS</a></p>
<p class="red"><a href="http://briankokoska.com/info">INFORMATION</a></p>
</header>
<section>
<article>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest2.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest2.jpg">
</a></p>
<p> Caption goes here... </p>
<p>image here</p>
Etc.....
</article>
</section>
</body>
</html>
Nancy O.

Broad Question - Horizontal Scrolling Slideshow with Still Images

Hi everyone,
I have to make a horizontal scrolling slideshow using many images of different filetypes, sizes and DPI in Premiere Pro CS5.5. I have tried a few different methods but each has its own problems:
1. Arrange still images horizontally in the timeline, adjacent to eachother, and apply a custom Push video transition between each one. This is a consistent method that doesnt require much work but it's tough to control the amount of whitespace between the images, especially when the images are all different proportions.
2. Arrange still images both horizontally and vertically in the timeline, so that there is no white space between the images (the images overlap across multiple video lanes). Then, set up motion fx for the position of the image for each clip. This is tedious and I have to make every clip the same size and make sure the distance each clip travels (in the motion fx) is the same. So for instance, I have to set the starting key to 1200 on the x-axis, and the ending key to -300, for every single image (tedious when there are many). Another problem with this is that it becomes very difficult to change the duration of the motion fx once ive set it up for many.
3. To have an easier time composing the arrangement of images, I just make a single giant image by laying out dozens of photos in InDesign, then export a very wide jpeg. The great thing about this is it's fast, easy, and the composition is exactly how i want it. The bad thing is that premiere doesn't handle many megapixel images well, and furthermore the image quality is horrific compared to the quality of importing individual images.
The biggest problem with all of these is the image quality (extremely poor compared to viewing the source images on their own) and the animation smoothness (all three methods produce very jittery and erratic videos). The biggest question I have is: should I even be doing a slideshow in Premiere? Can someone recommend a better application I should be using for something like this? Do i have to learn Flash? I am not trying to make an interactive thing, just a video/animation where I hit play and dozens of images scroll horizontally, at the same speed, with a lot of control over the scaling of the images and their horizontal and vertical arrangement (the amount of whitespace between them).
Thanks for everyone's time and help!

Don't know if it is still being sold, but Grass Valley's Imaginate was the perfect application for your intended purpose. There are many others as well, but PR is not the program of choice for this.

Horizontal scrolling. Help with large images.

Putting together a .pdf publication for iPad.
I have content that fits a standard iPad format BUT I also have these very long timelines (170cm x 21 cm). These need to be displayed zoomed in - with the reader swiping right to accessing the remainder of the content. So a horizontal scroll! Whenever I test it on the iPad it display the full image (so zoomed out and tiny). The other images are displaying fine.
So how do I make sure I view them as I require?
Thanks!

I also need this feature, to view and mark up street plans that are long narrow landscape format pages with "match lines" at the left and right sides. What I want is similar to Acrobat's existing "Enable Scrolling" -- but in the horizontal direction. Planners need this for road and path plans. Musicians and composers need this for viewing multi-page sheet music so they can browse the entire "timeline" of the piece. And as the OP notes, schedule planners need this for reviewing timelines such as Gantt charts.
Adobe, please add this feature. I'll gladly pay for an upgrade (currently using Acrobat Pro XI Mac).

Horizontal Scrolling Image Viewer

I am new to web design but certainly trying - my goal is to
include/make a horizontal scrolling image viewer like the one seen
on this site:
http://www.fraxel.com/patients.aspx
- any advice?
-JL

are you good with Flash?
http://board.flashkit.com/board/showthread.php?t=756627
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com

Because horizontal scroll bar appears on the Muse, even without any evidence beyond the scope of the

Whenever I create a layout when I view appears the horizontal scroll bar, but nothing beyond the margin, is this normal or a bug Standing Muse? Is how to fix this? Thank you.

Actually I would like to create a site with 100% width, but when I put the slide appears the horizontal scroll bar, sometimes it happens before putting the slide. I'm doing the rectangles 100% with the rectangle tool. Way to go, or am I doing wrong? Thank you.

Horizontal scroll

Hi,
I´m building a centered contents website with an horizontal scroll of images, but i got stuck on some problems:
1. How can i make the end images stop scrolling in the centre?
2. On the horizontal scroll of images, how can i make it possible to click drag with the mouse (similar to touch screen devices) without having to use the scroll bar?
3. I'm experiencing problems with mac os platform devices: some contents appear out of place. This is the website - www.craft.pt
Could you please advise me?
Thank you,
Vânia

Here are the images on ios devices:
Thank you for your help.

Background image causes horizontal browser scrollbar

We have a large background image on a website so that people can change the size of their browser window amd still see the background image. The image is also part of the page design so we can't use any of the scale options. All page content is centred and there are no objects other than the background image anywhere outside the 940 pixel wide centre column.
The problem is that the background image is causing the horizontal scroll bar to appear at the bottom of the browser, which is undesirable. Worse is that the scroll bar is not centred, it is instead all the way to the left. Can this behaviour be fixed in the next update please?

Figured out what was causing it (the footer, d'uh!). Any ideas on how to fix the footer up so it doesn't do that? The footer has an image the same width as the page background.

Centre wide image without horizontal scroll

Similar Messages

Maybe you are looking for