homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Horizontal scrolling crops left and right
How to accomplish this?
jeffz




msg:4397263
 12:48 am on Dec 13, 2011 (gmt 0)

This page,

[arkansas.com...]

crops both the menu bar and main photo on the left and right as the browser window is narrowed. No horizontal scroll bar appears until the browser window impinges on the text even though the menu bar and photo extend beyond the window width. Anyone know how this is accomplished? Thanks!

(I am not sure if this is a css question. If not, please refer me to the correct forum category).

 

lucy24




msg:4397285
 2:49 am on Dec 13, 2011 (gmt 0)

How much of the code did you look at?

:: detour to add some desperately needed spaces and line breaks ::

Ignore all the jquery and conditional yakkety-yak. The text is a red herring: Every one of those items has an explicitly declared width to go with the embedded font. (Baaaaad Arkansas! :)) Incidentally, it's a list.

The answer is here:

#mainNav {position: absolute; top: 217px; left: 50%; z-index: 1000; width: 976px; margin: 0 0 0 -488px}

That's all.

50% = guess what relationship to -488px and 976px.

Try it and see. Put in a visible border and fill with some meaningless text and watch it happen before your very eyes. You can do it with ems too. The image is background and therefore has no effect on the page scrolling.

jeffz




msg:4397322
 6:35 am on Dec 13, 2011 (gmt 0)

Very cool and thanks. It worked on the first try.

birdbrain




msg:4397357
 9:49 am on Dec 13, 2011 (gmt 0)

Hi there jeffz,

this would be the the normal way to code your example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.arkansas.com/!userfiles/mp_core/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
margin:0;
background-color:#6f6a4d;
background-image:url(ar11_mp_core_fall_02.jpg);
background-repeat:no-repeat;
}
#container {
width:860px;
padding:20px;
border:1px solid #000;
margin:auto;
background-color:#fff;
opacity:0.5;
}
</style>

</head>
<body>

<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu
et mauris scelerisque tristique. Donec fringilla mauris dolor,
sit amet vulputate lacus. Nulla feugiat mattis nulla non
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis
nisi eget neque tempus facilisis eu quis sapien.
</p><p>
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim,
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat
massa sed congue. Sed eros nisl, volutpat ac dapibus quis,
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit.
Proin viverra, neque non eleifend vehicula, nulla augue gravida
felis, non fermentum lorem odio ac nunc. Aliquam pretium
scelerisque consectetur. Proin ultrices urna non magna interdum
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu
sodales cursus. Maecenas bibendum neque vitae orci mollis ac
vulputate ante auctor. Sed sodales odio id ante sagittis faucibus.
</p>
</div>

</body>
</html>

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved