Not sure if there is an issue with nested DIV that prevents scrolling or I have missed something in the code itself. At any rate cant seem to get the div with class .txtpodscroll to actually scroll. Bar appears fine just wont scroll? Below is the CSS rule I have applied to the DIV
.txtpodscroll {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
width: 360px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
}
<div class="holder-northeastphotobooth">
<div class="imgpod"><img src="alt-img/nephotobooth-logo.png" width="370" height="89"></div>
<div class="txtpodscroll">Photo booths are one of the most sought-after wedding reception additions, and we’ve got one of the best ready to bring to your big day. We will deliver our professional booth to your venue, assemble it, and man it for the duration to make sure your guests have a great time taking lots of memorable pictures. Afterwards, we’ll dismantle and clear away the booth. We can be as formal or as crazy as you like and will tailor it to suit your needs. You can select a range of fun green screen backgrounds for guests to choose from, allow uploading to Facebook, add multiple pictures to each print, take videos, and we can even bring along a box full of fun props for your guests to wear. Hire our booth and you’ll get unlimited pictures and prints on the night, plus we’ll give you a USB stick with all of the pictures on to take away and for a limited time we’ll even supply a 2nd set of prints in a lovely photo album for you to take home and treasure. </div>
</div>
Plus this is a link to it live and not working.
http://www.yourwedding.com/yourweddingwow/index-northeastphotobooth.html
it's because the book's inner shadow is above the scrollbar, so you cannot click it, but you still see it because the shadow is a transparent PNG...
change this line:
standard-variable.css (line 83)
.holder-northeastphotobooth {
float: left;
font-family: Arial,Helvetica,sans-serif;
height: 470px;
margin: 0;
padding: 15px;
position: relative; /* added */
width: 370px;
z-index: 1; /* added */
}
Make sure to remove the background property as well, so the shadow will be shown "under" the page, and not above it. try it on firebug and see, it's very easy to fix.
you have a div with a class of .wowbook-gutter-shadow that you have placed on top of the scroll bar, this is why it doesn't scroll
if you give .txtpodscroll the following style: z-index:2 it should fix your problem
To prevent scroll you should use "percentage".
.txtpodscroll {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
width: 360%;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
}
if the scroll is horizontal.
width: 360%;
Hope this helps.
Related
I created a text box over an image for a client that has a overflow set to scroll so that the text does not spill over when the page is resized. For some reason I do not see scroll bars on my screen but my client sees them on both the x and y axis.
Does anyone know if having "overflow: scroll;" causes scroll bars to show up in certain versions of Chrome and if there is a solution to make them invisible?
My client's alternative would be to use images with text on them and I would like avoid that for myriad reasons including accessibility.
I have an offline version of this as well and still see no scrollbars.
I am using a Mac and they are using PC but, to my knowledge and recollection, this shouldn't make a difference for this issue.
You can view the page here.
The page is cramped at the moment as we are doing a stylesheet overhaul that is offline.
Here is a snippet of the CSS I am using for this. Thinking some of it may be redundant. Not sure if removing any parts of this will change things visually as I can't replicate the issue.
.boxwrapper {
position: relative;
font-family: Arial;
margin: 10px 15px;
}
.imagebox {
position: absolute;
top: 15px;
right: 15px;
background-color: #ffffff;
color: white;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
height: 85%;
width: 35%;
overflow: scroll;
}
.imagebox p{
color: #000;
overflow: scroll;
font-size: 18px;
}
Expected results are for the page to render with no scroll bars like it does for me.
I am using a template for my blogger blog in which images are set to resize automatically to fit the whole width. Therefore no matter I align a photo to left or right or resize the photo, they will always appear as full width. There is however one insatance I can override this, if I include the photo with this code:
<img alt="" border="0" src="##" id="BLOGGER_PHOTO_ID_5428874514942438946" style="cursor: hand; cursor: pointer; float: right; height: 240px; margin: 0 0 10px 10px; width: 320px;" />
However each time I create a post I have to add this manually for each photo because blogger automatically adds this piece of code for a photo that is aligned right as well:
<img border="0" src="##" height="240" width="320" />
But above code won't do it, and it is also a problem for previous posts. I found a part in xml file of my template a part which I believe can be the part setting the sizes of the images, here it is:
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
Though I am not sure if it is really that part, and I don't know if how I can change it and that is also because I not good with xml codes.
Any ideas how I can fix that problem?
Thanks.
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
The above part, which I was thinking might be the solution, was actually not. While going through the code, I checked all width values that might be corresponded to blog posts and found this part:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;width: 100%;
height: auto;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
Here, width: 100% was the part forcing all the images to appear full width. My first solution was to set it to width: auto but it didn't help. Thought specifying width or height in xml file wouldn't be necessary so I went ahead and removed the width and height, making the final code like this:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
It all works fine now and all the images went back to original sizes they are set.
P.S. There is another code right below to this one which is exactly same but it controls the static pages, I fixed it the same way as well.
I was facing the same problem.
I found out the img class as suggested by #H.Aziz.
.post-image img{
max-width:100%;
height:auto;
}
But there was no width attribute at all to delete.
The way I accomplished the goal was by changing max-width:
.post-image img{
max-width:50%;
height:auto;
}
This reduced the size of image to the appropriate one. However, a new problem that arose was that the image was shifted to the left. To fix this, the final change I made:
.post-image img{
display:block;
margin-left:auto;
margin-right:auto;
max-width:50%;
height:auto;
}
A common trick to bring an image to the center of the parent div is make it into block of its own and apply the margin properties to it.
Edit: There is an image behind this, so adding a background color would thus obstruct the image even though it would hide the text. Thanks!
I have a fixed element on a page and a div containing text below it. When the page is scrolled, I want the text to disappear behind the fixed div but it does not. Using z-index does not work (see code). Sorry about all the text, I needed enough for the screen to scroll.
<div id="screen">
<div class="title">
About
</div>
<div class="body">
t only the beginning of a weekend away from the rigours of Primary school and learning my times tables, but also my first real social experiences. Saturday was ‘Club Day’. At around the age of 8 or 9, my Mum decided that I needed to get out into the real world and get a taste of ‘Saturday life’, and all it had to offer. So, on the advice of my much older and wiser 10 year old cousin, I chose to join the local craft club. Each Saturday morning from that day onwards, I would join the 6 or 7 other girls in the hot, cramped ‘Cathy’s Crafts’ store in Montmorency. For $7 a week I could paint pieces of wood shaped as teddies, or perhaps even stick some glitter on a nice picture for Mother’s Day. Either way it served as a warning for the rest of my life that craft was definitely nolet roll cover in my house again.” Dad wad not quite so understanding. My skills with the paintbrush were often criticised, as I had not used a ‘polyglaze’ the valiant Montmorency, who had never yet won a club championship and are likely to never achieve this coveted goal. My Saturdays had taken on a new light, a change of direction and an earlier morning wake-up. Every Saturday I would wake up early, in excited anticipation of the day ahead. Mum would check my schedule and inform me of the day’s events. Int flowers quite right, the time had come for me to give my craft club days away. Forever. And so it was that I found myself, hand glued to Mum’s, at the Little Athletics sign-up day. And so it was that I found myself being talked into being
</div>
</div>
And the CSS
#screen{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.title{
font-size: 30px;
margin-bottom: 15px;
margin-top: 110px;
text-align: center;
width: 90%;
position: fixed;
margin-left: 170px;
z-index: 3;
}
.body{
margin-top: 160px;
margin-left: 294px;
margin-right: 90px;
text-align:justify;
height: 53%;
z-index: 2;}
If you wish for the whole text to disappear you should have the "body" element be the one with overflow scroll, that way the other title element stays visible. There isn't really a way I could find to do this using a fixed div. Added a p tag around the title to align it to the bottom. and other heights were modified but this will give you a good starting place
#screen{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url('http://thisisarequiredfield.com/home_files/field1.jpg');
}
.title{
position:relative;
font-size: 30px;
height: 20%;
text-align: center;
float:left;
width: 100%;
z-index: 3;
}
.title p{
position:absolute;
bottom:0;
left:294px;
}
.body{
padding:0;
margin:0;
padding-left: 294px;
padding-right: 90px;
height:80%;
text-align:justify;
overflow: auto;
z-index: 2;
}
see the jsfiddle:
http://jsfiddle.net/J69Pw/5/
The background of your div is transparent so we can still see the text behind.
Do you want something like this : http://jsfiddle.net/QkGwy/
If it is, then set the background color:white to the div having 'title' class.
.title{
font-size: 30px;
margin-bottom: 15px;
margin-top: 110px;
text-align: center;
width: 90%;
position: fixed;
//margin-left: 170px;
z-index: 3;
border:1px solid;
background:white
}
And margins are also not proper in the css that's why content is visible on the upper side on title div on scroll. Correct those as well.
Been noodling about with CSS for the first time in ages and I have a nasty feeling I've backed myself into a corner.
I've created a 3 column floating layout with this:
* {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
#wrapper {
width: 960px;
background: silver;
margin: 0 auto;
}
#column-left {
width: 240px;
float: left;
background: #f4d2d4;
padding-top: 36px;
}
#column-center {
margin-top: 41px;
margin-left: 34px;
margin-right: 34px;
width: 492px;
float: left;
background: white;
}
#column-right {
width: 160px;
float: left;
background: white;
margin-top: 49px;
}
The left-hand column, as you can see, has a coloured background. But it doesn't stretch to the bottom of the page, only to cover the content. And I need it to stretch all the way down.
Switching to position absolute or fixed screws up the 3-column layout. Using height: 100% has to go all the way back to body, and that messes everything up completely. Is there an easy way to fix this?
Dan Cederholm has a good way of making it look like the columns extend using a "faux column" technique. Rather than re-write it, I'll link it here:
http://www.alistapart.com/articles/fauxcolumns/
Chris Coyier also has a good write up of ways different people have solved this if you ever decide to use a fluid layout:
http://css-tricks.com/fluid-width-equal-height-columns/
Add height:100% to body, html and your columns.
Supposing I'm setting a background image for a web page in CSS like this:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url(images/desk.gif) repeat bottom left;
}
Is there any way to layer a second image on top of the desk.gif within the body element itself, or is the only way to create a separate class and use the z axis?
Sorry, it's a simpleminded question, but I've been trying to figure this out and though I haven't been able to make it work, I also haven't found a clear slapdown of the idea anywhere online... so, is there a way, or is this just a no can do?
Thanks!
Layered backgrounds are part of the CSS3 Working Draft but, as far as I know, support for them is limited to WebKit/KHTML-based browsers such as Safari, Chrome, Konqueror and OmniWeb.
Using your example code, this would look like:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url("images/top.gif") left bottom repeat,
url("images/desk.gif") left bottom repeat;
}
I've already posted the solution in a duplicate question, but for anyone that may require this information I'll post it here as well.
As far as I am aware it is not possible to put it in the same layer, but it is possible to put several images in separate div's on top of one another, and has been implemented by popular usability testing website Silverback (check the background to see how it has been layered). If you look through the source code you can see that the background is made up of several images, placed on top of one another.
Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.
In short, it's not possible. You can do this, but you need to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.
Hope this helps!
Nowadays this can be done in all the "modern" browsers (not < IE9, afaik). I can confirm that it works in Firefox, Opera, Chrome. There is no reason not to do it, as long as you have a decent fallback solution for older browsers / IE.
For the syntax you can choose between
background:url(..) repeat-x left top,
url(..) repeat-x left bottom;
and
background-image:url(..), url(..);
background-position:left top, left bottom;
background-repeat:repeat-x;
You don't need the linebreaks, but the comma is important.
Attention! The following will create two backgrounds, even though you specified only one image url:
background-image:url(..);
background-position:top, bottom;
And of course, there is the alternative to use nested containers, but this will bloat your html.
Ancient question here but the answer for this is the :after pseudo-element.
SCSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
&:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
}
CSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
}
body:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
The only way is to use another container. Each element may contain only one background image.
Use absolute positioning and a z-index to get the second element on top.
link text
Above mentioned link best describes what you r upto...
Don't forget you can apply styles to the HTML element:
html {
background: url(images/whatever.gif);
}