|
CSS - Horizontal Scrolling Issues
I have a couple divs using percentage columns.
The issue I am having is that when the page is displayed (in IE or FireFox) I am getting the horizontal scrollbar. It scrolls an extra ~15%. I am learning CSS (slowly) so any help would be greatly appreciated. -K html Code:
<div id="wrapper">
<div id="content">
<p>
text
</p>
</div>
</div>
<div id="navigation">
<p>text</p>
</div>
<div id="extra">
<p>text</p>
</div>
Code:
div#wrapper{float:right;width:100%;margin-right:-33%;
display:block;}
div#content{
margin-right:33%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
}
div#navigation{
float:left;
width:32.9%;
}
div#extra{
float:left;
clear:left;
width:32.9%
}
p{margin:0 10px 10px}
Similar TutorialsHi all, I have just found this forum and have an issue to solve... I'm creating my online portfolio and as many photographer I have choosen to use an horizontal scrolling. It works fine on all browsers except IE below version 8. Do you know what can be the trick ? The code is the following : There is a main images container in which two type of images are placed (landscape or portrait orientation) Code: #images {
background-color: #FFF;
overflow: auto;
position: absolute;
left: 0;
right: 0;
height : 600px;
top: 63px;
white-space: nowrap;
z-index:1;
overflow-y: hidden;
}
.imagew {
display: inline-block;
width: 800px;
height: 600px;
text-align: center;
line-height: 600px;
}
.imageh {
display: inline-block;
width: 450px;
height: 600px;
text-align: top;
line-height: 600px;
}
after that the code is : Code: <div id="images"> <div class="imagew"><img alt="" src="offshore/1.jpg"/></div> <div class="imagew"><img alt="" src="offshore/2.jpg"/></div> <div class="imagew"><img alt="" src="offshore/3.jpg"/></div> <div class="imagew"><img alt="" src="offshore/4.jpg"/></div> <div class="imagew"><img alt="" src="offshore/5.jpg"/></div> </div> Hi all, I'm fairly new at CSS and web development in general, but I've started working on a project which needs an unknown number of divs to be nested inside an external one. What's happening at the moment is that, if the internal divs are too long, they'll wrap around to the next line. What I need to happen is that a horizontal scrollbar will appear when the internal divs go past the end of the page. I've tried putting "overflow: auto;" on every possible component of the HTML but, so far, there has been no effect. A test version of the code is below and I really hope that someone can help me with this. Thanks! CSS: Code: #main { overflow: auto; } .a { float: left; }
HTML: Code: <body> <div id="main"> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> </div> </body> Hi all, I'm working on a "toolbar" in a site, which users can populate with links and notices as they desire. Since it's possible that they'll put so much into the bar that it wont fit on the screen, I want to make it scroll horizontally - but without scrollbars. I'm hoping to have an area to the left and right of the toolbar that they can mouseover to scroll it in that direction. Here's a pictu I'm not having much luck getting it working, despite trying a few things google turned up... Apparently I can get rid of the scrollbars by having a div with overflow:auto inside one with overflow:hidden... (link) The same site also shows how to only a horizontal scrollbar... (link) I experimented a bit with white-space:nowrap to get the content to stay all on one line, which seems to work in FF (stays on one line inside the horizontally scrolling div) but not IE (stays on one line but stretches the div size)... Any ideas? hey guys im having some problems getting this to work in IE 6 but it works fine in FF. Im really not sure whats wrong any help would be great. Code:
<div style="display: block; height:150px; overflow:auto;overflow-x:scroll; overflow-y:scroll; overflow:-moz-scrollbars-horizontal;">
<div style="float:left; white-space: nowrap;">
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
</div>
</div>
I'm trying to make one of my current websites compliant with W3C standards by not using marquee tags. The problem is that I still want to keep my horizontal scrolling text (yes, I know there is an issue with accessibility standards but I still need the scrolling text). Anyways, I have found all sorts of ways to use CSS and JavaScript for vertical scrolling text while still being compliant however I have no clue how to do it with horizontal scrolling text. The site I am trying to update is www.gpfbarracudas.org , specifically the scrolling text under the title image. Any help would be greatly appreciated! Josh Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. I have a small problem and I can't figure out what it is that's causing it as the CSS used to replicate the issue doesn't really give any insight as to why things are getting ****ed up. My site is: ( jump for joy I got my routers firewall to forward port 80 ) http://24.224.254.115/~wayne/moorhousehome.ca/NEW The CSS in question will work, but I have comments after the two lines that cause issues. Code: css
#inner-wrap{/*there is no outer-wrap*/
position:absolute;
top:0;
left:50%; /*causes the main body to clear the navigation*/
margin-left:-400px; /*causes the main body to clear the navigation*/
}
If I comment out both lines the issue goes away, but the horizontal centering disappears too. If I uncomment either of them the issue reappears. I will leave the issue live on my website while people have a look. And once I fix this I will be fixing the two images in the bottom left corner with the text beneath each one. There won't be a hover over effect as there is in Firefox. I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code: Code: <html>
<head>
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
color: #33C;
display: block;
float: left;
font: bold 16px arial, sans-serif;
height: 24px;
margin:0 auto;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #22B;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>
<body>
<div>
<div style="float:left; width:50%; background-color:#EEE">
<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
</div>
<div style="float:right; width:50%; background-color:#DDD">
<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
</div>
</div>
</body>
</html>
And here's a link to the test page: http://rentalocal.thad.com/test Does anyone know what I've done wrong? Thanks, Thad Hi - I'm working on a page with what I think should be a relatively simple CSS layout. Basically, I have a table on the top half of the page (it displays an address book). The table has a <thead> and <tbody>, and the <tbody> is set to overflow: auto, to give me a scrollbar when its contents gets too big. The bottom half of the page uses AJAX to fetch an entry from the address book, and display more details. It too uses overflow: auto to show scroll bars when necessary. Each element is in a <div>, and I used height: 45% (or so) on each to try to make the whole thing fit on one page, so that there is no whole-page vertical scrolling. An example of the code I'm working with can be found at http://kc9ddi.us/ex.html . My design is working nicely in Firefox, but not IE. IE does not seem to do the right thing with the height: attribute in CSS, so their is no scroll bars in the individual parts of the page, like I want. Can anyone offer any advice here? HTML Code: <div id="nav"> <ul> <li class="first"><a title="#" href="#">About Company</a></li> <li><a title="#" href="#">RRR News</a></li> <li><a title="#" href="#">Apartment Communities</a></li> <li><a title="#" href="#">Commercial Properties</a></li> <li><a title="#" href="#">Current Developments</a></li> <li class="last"><a title="#" href="#">Resident Login</a></li> </ul> </div> CSS Code: /*** Main Navigation Styling ***/
#nav {
border-top: 1px solid #897409;
border-bottom: 1px solid #897409;
background:#fff url(../images/nav_off_back.jpg) repeat-x center;
height: 29px;
}
#nav ul{
font-size: 17px;
margin:0;
float:left;
text-align:center;
width:100%;
}
#nav li {
display:inline;
margin:0;
float:left;
list-style: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-height: 27px;
height: 27px;
line-height:27px;
padding:1px 0;
}
#nav li.first {
background:url(../images/nav_bars.gif) left center no-repeat;
padding-left:2px;
_margin-left:24px;
}
#nav li.first a,
#nav li.first a:link{
border-left:0;
}
#nav li.last {
border-right:1px solid #fff;
}
#nav li a {
color: #000;
text-decoration: none;
text-align:center;
min-height: 27px;
height:27px;
padding:6px 17px 6px 17px;
border-right:1px solid #b49f36;
border-left:1px solid #fff;
}
#nav li a:hover {
text-align:center;
background: url(../images/nav_on_back.jpg) repeat-y center;
color:#fff;
min-height:27px;
height: 27px;
padding:6px 17px 6px 17px;
}
This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all. I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all. Hello. Im new to the forums and Im hoping someone would be able to help me and I hope Im posting in the correct forum. I recently redesigned my site with Adobe Dreamweaver utilizing CSS. Both the HTML and CSS validates. I have tried to search for my problem but havent found it already addressed. I had CSS before but my old software didnt support it as well. Im still learning a lot about the CSS so my problem might be minor, but I just dont have enough knowledge yet to know or to even begin to fix it. The site appeared fine in IE. I didnt think (stupid I know) to test it in firefox. Recently I did and noticed it did not show the top header, the right menu or did it allow you to scroll down the page. Ive read elsewhere that part of my problem may be due to having this at the top of my page Code: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> but if I remove that, then the site looks the same in IE as it does in Firefox. Here is a link to the index page of my site. I currently have the above line of code in the page so you can see what it is suppose to look like. Please view this in both browsers so you can see what its suppose to look like (IE) and how firefox is displaying it: http://www.herbal-connection.com/index.htm Here is a copy of my css: Code: table.sale {
border-collapse: separate;
background-color: white;
text-align: center;
vertical-align: middle;
width: 30em;
margin-left:auto;
margin-right:auto;
}
img
{ border-style: none;
}
body {
text-align: center;
color: #FFFFFF;
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
}
.twoColFixRtHdr #container {
width: 1043px;
margin: 0 auto;
border: thin solid #000000;
text-align: justify;
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
}
.twoColFixRtHdr #header {
background-image: url(herbalconnectionlogo1.gif);
HEIGHT: 82px;
background-repeat: no-repeat;
overflow: visible;
position: fixed;
}
.twoColFixRtHdr #header h1 {
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #004278;
font-size: 30px;
background-color: transparent;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 5px;
}
.twoColFixRtHdr #header H2 {
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #006397;
background:transparent;
vertical-align: top;
font-size: 20px;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 5px;
}
.twoColFixRtHdr #mainContent {
background-color: #FFFFFF;
padding-right: 20px;
padding-left: 20px;
position: fixed;
width: 860px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
}
.twoColFixRtHdr #mainContent h1 {
PADDING: 0em;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
FONT-SIZE: x-large;
text-align: center;
COLOR: #004278;
MARGIN: 1em;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent h2 {
PADDING: 0em;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
FONT-SIZE: large;
text-align: center;
COLOR: #004278;
MARGIN: .1em;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent h3{
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #004278;
font-size:medium;
text-align:center;
background:transparent;
margin-top: .5px;
}
.twoColFixRtHdr #mainContent h4{
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
color:#B22222;
font-size:medium;
text-align:center;
background:transparent;
margin-top: .5px;
}
.twoColFixRtHdr #mainContent a:link {
color: #B22222;
font-weight:bold;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent a:visited {
color: #B22222;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent a:hover {
color: white;
background: black;
}
.twoColFixRtHdr #mainContent a:active {
color:#B22222;
background-color: #FFFFFF;
}
.twoColFixRtHdr #sidebar1 {
float: right;
width: 140px;
background-color: #D7DEE4;
text-align: center;
position: fixed;
background-position: top;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
}
.fltrt {
float: right;
margin-left: 8px;
width: 0px;
}
.fltlft {
float: left;
margin-right: 8px;
width: 0px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.center {
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
background-color: #FFFFFF;
}
.hrule {
border-bottom-width: 0.04em;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-top: 0em;
padding-bottom: 1em;
}
I appreciate all input anyone can give, just please dont get to high techy with me as Im still learning. This is my business site and now I see why my sales have declined since probably a lot of people cant see the site properly. Please let me know if you need any other details. Thanks, Pamela I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
Hi guys, I've this div with overflow:auto. This div is populated using xmlhttprequest (it's an IM chat) so it will be getting full to the point where there's an overflow and the scrollbar shows up. What I would like to do is, whenever a new content line was added to the div (I'm using DOM to do so), the scroll (if overflow has happened) would go all the way down in a way where the last line of visible text in the div would always be the last line inserted. I'm somewhat newbie at this stuff so, any help in the right direction would be great! Thx Hugo Good morning, I have a problem with a layer(div) that I am putting over my page everytime the user clicks a button and a transaction is send to the host. My problem is that if there is an scroll and the user scroll, the message scrolls up and dissapears. I need to fix it to the center of the screen. I have tried with % instead of absolute px. Can anyone help me, please?. I am close to my deadline, so any help would be really apreciated. I am attaching my code: window.onbeforeunload=new Function("Procesando.style.visibility='visible';"); window.onblur=new Function("Procesando.style.visibility='hidden';"); //window.onfocus=new Function("Procesando.style.visibility='hidden';"); document.write('<div style="position:absolute; top:160; left:313; visibility:hidden; overflow:hidden; background-color:#CCCCCC; clip:rect(12,177,50,3); " id="Procesando">\n'+ '<select size=4 name="cbEspera" class="TextoTablaIzq" style="background-color:#CCB8E0; font-Weight:bold;">\n'+ '<option> </option>\n'+ '<option> Procesando su petici'+unescape("%F3")+'n. </option>\n'+ '<option> Espere por favor... </option>\n'+ '<option> </option>\n'+ '</select></div>\n'); Hey guys!! I got a quick question. I have a CSS layout page with 2 scrollbars. The first one for a news section and the second for a product. I have a lot of content for both sections, The scrollbars work fine, but on the main IE the scrollbars keep adjusting to the content that I have. if i have less content then its small..... I want to have no scrolling on my main window. Hi! I am a new member brand new to CSS. The page is my first CSS attempt and I am having problems. The images on the right are not visible without scrolling. Thanks, Twillie Code: <style type="text/css">
body
{
background-image: url('background.png');
background-repeat: repeat-x;
background-position: top;
background-color: #cc99ff;
height: 100%;
width: 100%;
}
div.main
{
background: White;
width: 100%;
overflow: hidden hidden;
margin-left: 15%;
margin-top: 0px;
}
b.rtop, b.rbottom
{
display: block;
background: #cc99ff;
clear: both;
}
b.rtop b, b.rbottom b
{
display: block;
height: 1px;
overflow: hidden hidden;
background: White;
clear: both;
}
b.r1
{
margin: 0 5px;
clear: both;
}
b.r2
{
margin: 0 3px;
clear: both;
}
b.r3
{
margin: 0 2px;
clear: both;
}
b.rtop b.r4, b.rbottom b.r4
{
margin: 0 1px;
height: 2px;
clear: both;
}
div.logo
{
width: 100%;
height: 100%;
padding-top: 10px;
}
div.search
{
width: 100%;
height: 100%;
text-align: right;
vertical-align: top;
padding-top: 10px;
border-bottom: 1px solid #cc99ff;
}
input.search
{
margin-right: 15px;
margin-bottom: 4px;
}
div.leftmenu
{
width: 10%;
font-family: Century Gothic;
font-style: italic;
font-weight: bold;
float: left;
}
ul.leftmenu
{
list-style: none;
font-family: Verdana;
font-size: medium;
}
li.leftmenu
{
padding-top: 4px;
}
div.footer
{
width: 80%;
text-align: center;
margin-left: 30%;
margin-right: 30%;
}
div.description
{
text-align: center;
font-size: small;
padding: 4px;
}
span.description
{
font-weight: bold;
font-style: italic;
}
div.bottommenu
{
color: #FF0000;
font-size: small;
text-align: center;
padding: 4px;
}
a.bottommenu
{
color: Black;
padding-left: 4px;
padding-right: 4px;
}
div.content
{
width: 80%;
height: 100%;
float: right;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="main">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b>
<div>
<div class="logo">
<img src="images/MP_header2.jpg" alt="Monogram Plus Logo" />
</div>
<div class="search">
<input name="sp-q" type="text" />
<input name="submit" type="submit" value="Search" class="search" />
<input name="sp-a" type="hidden" value="sp0535f800" />
</div>
<div>
<div class="leftmenu">
<ul class="leftmenu">
<li class="leftmenu"><a href="index.html">Home</a></li>
<li class="leftmenu"><a href="links.html">Links</a></li>
<li class="leftmenu"><a href="online_store.html">Online Store</a></li>
<li class="leftmenu"><a href="products.html">Services</a></li>
<li class="leftmenu"><a href="faqs.html">FAQ'S</a></li>
<li class="leftmenu"><a href="catalogs_all.html">Catalogs</a></li>
<li class="leftmenu"><a href="form_online_quotes.html">Quick Quote</a></li>
<li class="leftmenu"><a href="forms.html">Forms</a></li>
<li class="leftmenu"><a href="about_us.html">About Us</a></li>
<li class="leftmenu"><a href="contact_us.html">Contact Us</a></li>
<li class="leftmenu"><a href="sitemap.html">Site Map</a></li>
</ul>
</div>
<div class="content">
<div style="float: left; width: 700px;">
<div style="float: left; width: 380px;">
<div style="float: left;">
<div style="padding-bottom: 10px;">
<a href="spirit.html">
<img src="mplus/images3/Index_spirit_pict2.jpg" alt="Spirit" style="width: 239px; height: 246px;
border: 0px;" /></a>
</div>
<div style="color: Red; font-size: large; width: 239px; text-align: center;">
<a href="web_service.html" style="color: Black; font-size: large; font-weight: bold;">
Need an Online Store for your club or business?</a>
<br />
We create FREE Custom Apparel Stores!
</div>
</div>
<div style="width: 100px; text-align: center; float: right;">
<a href="business_wear.html">
<img src="images/logowear_sm.jpg" alt="Starter Special" style="width: 132px; height: 83px;
border: 0px;" /></a> <a href="starter_special.html">Embroidered Logo Shirts Starter
Special<span style="color: Red;">-ONLY $85!</span></a>
</div>
</div>
<div style="float: right; font-size: medium; width: 270px;">
Phone/ Fax: (518) 374-5220<br /><br />
1819 State Street<br />
Schenectady, NY 12304<br />
<p style="font-size: small; font-style: italic;">(3 Buildings east of Blue Ribbon Diner)<br />
Parking: Right at our front door or in shared lot to the right of our building.</p><br /><br />
Hours: Mon-Fri 9:00 - 5:00 EST<br />
<p style="font-size: small; font-style: italic;">Weekend and After Hours happily by Appointment</p><br />
</div>
</div>
<div style="float: right; text-align: center; padding-right: 20px;">
<a href="/wool_jackets.html" style="display: block;">
<img src="images/w_guild_front_sm.jpg" alt="Guild Front" style="width: 109px; height: 112px;
border: 0px;" /></a> <a href="blanket.html" style="display: block;">
<img src="images/Blanket_sweat_red.jpg" alt="Blanket Sweat Red" style="width: 136px; height: 92px;
border: 0px;" /><div>
Sweatshirt Blankets</div>
</a><a href="wool_capital.html" style="display: block;">
<img src="mplus/images3/w_SHS_back_sm.jpg" alt="SHS Back" style="width: 122px; height: 112px; border: 0px;" /></a>
Capital District NY
</div>
</div>
</div>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
<div class="footer">
<div class="description">
Since 1981, <span class="description">Monograms Plus</span> has been providing high-quality
imprinted sportswear in Schenectady, NY. We offer custom screen printing and embroidery
to the community at large, with friendly customer service, quality custom work,
and competitive pricing. Come by and get your school, business or company apparel.</div>
<div>
<div class="bottommenu">
<a href="/index.html" class="bottommenu">Home</a>| <a href="/about_us.html" class="bottommenu">
About Us</a>| <a href="/online_store.html" class="bottommenu">Online Store</a>|
<a href="/products.html" class="bottommenu">Services</a>| <a href="/search.html"
class="bottommenu">Search</a>| <a href="/faqs.html" class="bottommenu">FAQ's</a>|
<a href="/contact_us.html" class="bottommenu">Contact Us</a>| <a href="/links.html"
class="bottommenu">Links</a>| <a href="/return_policy.html" class="bottommenu">Returns</a>|
<a href="catalogs_all.html" class="bottommenu">Catalogs</a>
</div>
</div>
<div style="font-size: small; text-align: center; padding: 4px;">
Monograms Plus All rights reserved. Updated 7/04/11</div>
</div>
</body>
</html>
Hi, I have a webpage that has a fixed background with a header. I want my content to be able to scroll without overlapping my header. Meaning, the content needs to be masked? Or on a different z-index? Or in a frame? I know these are possible but nothing seems to be working. Please help!!! HTML CODE: Code:
<div id="background">
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="safaris.html">Safaris</a></li>
<li><a href="lodging.html">Lodging</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div></div>
<div id="content">
<h1><span>About Us</span></h1>
<p> Welcome to Trompettersfontein. Our expertise is to create exclusive and
unique safaris, professionally assisting you in your most unforgettable
hunting experience. Originally a cattle ranch during the 1960's, we are
now a prominent name in the gaming and ranching industry. Located in the
Elisraas region, Lepahale, in the Limpopo province close to thabazambi and
the waterburg area creating a wildlife oasis making it a prime hunting ground
of South Africa. Situated on 1000 hectors, with special hunting permission
our total hunting area extends over 3000 hectors of typical bushveld area.
The terrain makes makes excellent meat hunting and bow hunting grounds.
Owned and managed by Marius Moolman, a professional game hunter since 1986.
An exceptional tracker with a vast knowledge of the bush and game, he has
studied the age-old natural relationship between predator and prey. He has
also had the privilege of hunting the Big 5 and is a great host and sense
of humour that will leave you with a longing of coming back soon.</p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
</div>
</div>
CSS CODE: Code:
body {
background:#000000;
margin:0px;
padding:0px;
width:100%;
}
#background{
background-image: url('Images/background2.jpg');
background-repeat: no-repeat;
background-position:top;
background-attachment: fixed;
margin:0px;
padding:0px;
width:100%;
height:100%;
z-index:-10;
}
#menucontainer {
width:650px;
margin:auto;
padding:150px 0 0 0;
}
#menu{
width:650px;
margin:0px;
position:fixed;
z-index:5;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: none;
}
a:visited, a:active {
color: #FF6600;
text-decoration: none;
}
#menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
text-decoration: none;
list-style-type:none;
margin:0px;
text-transform: uppercase;
font-weight: bold;
}
#menu ul li{
display:inline;
margin: 0px;
padding:3px 14px 3px 14px;
}
#content{
width:500px;
margin:auto;
padding:0 0 400px 0;
position:relative;
top:30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align:justify;
z-index:1;
}
h1 {
background: url('Images/about.png') no-repeat top left;
width:168px;
height:38px;
}
h1 span {
visibility:hidden;
}
p {
line-height: 18pt;
}
As I am pretty new to CSS (about 3 months now) please be patient if I dont understand very advanced coding. Thanks for your time and effort. Any help is much appreciated. |
|||||||