The banner on this page here (a work in progress), has the following structure
<div id="top">
<div class="sidebox">
<div class="boxhead">
<h2>Chalets des Bouleaux</h2>
</div>
<div class="boxbody">
<p>Tel. 819-444-4444</p>
<p>Notre-Dame de Pontmain, Québec, Canada</p>
</div>
</div>
</div>
The div with class sidebox and all it's child elements make up the logo shown in the centre of the banner. The photo shown behind the banner is a background image of the top div. I would like the logo to appear as though it is floating on top of the photo, i.e. the photo shows through the white parts of the logo. Obviously this isn't happening at the moment, though I'm unsure why, because I've set the background color to transparent for all the elements of which the logo is composed.
Update:
The page that I linked to has changed so I've removed the link to avoid confustion. Please ignore this question and vote to close it!
The background of your GIFs are white! Make them transparent!
<div id="top" style="background-image:url(backgroundimagepath)">
<div class="sidebox">
<div class="boxhead">
<h2>Chalets des Bouleaux</h2>
</div>
<div class="boxbody">
<p>Tel. 819-444-4444</p>
<p>Notre-Dame de Pontmain, Québec, Canada</p>
</div>
</div>
</div>
Change it in this way and also sidebox should have a transparent background.
You need to replace the images of the sidebox with ones that have transparent backgrounds.
These images:
images/sbbody-r.gif
images/sbhead-r.gif
images/sbbody-l.gif
images/sbhead-r.gif
The following images will need to be recreated as 24-bit PNG's with semi-transparent backgrounds:
sbhead-l.gif
sbbody-l.gif
sbbody-r.gif
sbhead-r.gif
If you need the transparency in IE6 then you should use something similar to SuperSleight to patch up the holes.
Related
I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.
I want create the border show in the picture but i want to stay clickable the under picture of frame.
I use a div on the other div,it's work but under div is not clickable.
I use border image,but the corner of left bottom is not create like the picture.
Any other way?
http://i.stack.imgur.com/z8HSs.jpg
I am using .png picture that cut center of that png picture.
My code is this:
<div id="slideshow204" class="slideshow" style="position:absolute;top:22px;right: 34px;z-index: 1;">
......
</div>
<div class="decor"><img style="position: absolute;z-index: 4;" src="http://shakeri.info/images/logo/zendeginameh.png" alt="">
</div>
problem solved.
I must add
pointer-events: none;
to the png's div to clickable under div.
need detail?
Click through a DIV to underlying elements
I have a page with a huge background which is fixed - as in:
body {
background: url(...) no-repeat center center fixed;
}
Now, to remove some focus from the background image, I thought about simply blurring it at the moment the real content starts. Think about a transparent jumbotron, followed by one giant div containing all the content. An example markup:
<div id="navigation">
<nav>...</nav>
</div>
<div id="page">
<div class="transparent-jumbotron">
Big intro to the site goes here
</div>
<div class="content">
The actual content goes here
</div>
</div>
<div id="footer">...</div>
I have been trying out various hints and tricks on the internet - but the most I got was that #page.contents had the site's background - but upon scrolling a bit, it turned out that there was one instance of the background covering the original, and then there was the normal, unblurred background. This contents div also has a semi-transparent background applied through rgba() to darken the background.
So my question is: How can I blur the larger portion of a site, which has a fixed background image but much content that will require scrolling (as in, dynamicaly applying the blur filter)?
You should use opacity property in css
opacity : <A number between 0 and 1, e.g:0.5 1 is fully focused and 0 makes the elmend hidden >;
I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.
This is the div for my product, you can see the demo like this:
<div class="productItem">
<div>
<!--image -->
</div>
<div>
<!--text -->
</div>
</div>
http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg
Each product has a product image and product text. The image is on the top, and the text is under each image. But you can see that, image can have different size, so I don't want the text always in the bottom instead of just below the image. How can I layout the text must in the bottom, except from assigning the absolute position.
It might be worth considering making your images a standard size. Perhaps a large and a smaller size? You could always have an option to show a larger image when someone clicks on the smaller one?
You could also simplify your HTML using something like this:
<div class="productItem">
<img class="large" />
<p>Text</p>
</div>
This would let you change the CSS depending upon the image (by giving it a class), and reduce unnecessary div's.
Perhaps force the image to display above the text using the block attribute?
img {display:block;}
I must be missing something because this seems fairly simple.
<style type="text/css">
.productItem {
text-align: center;
}
<div class="productItem">
<img src="whatever"><br style="clear: both;" />
Text
</div>
Perhaps there's more that I'm not understanding.
From your screenshot, it looks like your text is always below the image, but in the right half of your screenshot, when a small image is in the same row as a larger image, the text isn't lining up (the product descriptions aren't at the bottom of the cell). Is that what you're asking about? How to get the text all aligned to the bottom of the row when the image size varies?
You could set the table row that's containing all the products to be <tr valign="bottom">, which will push everything to the bottom, stacking the images on top of the text. This would mean that the small images would all have their bottoms aligned with each other, not their tops. If you want the images to stay up, but the text to go down, instead style the image DIV like this: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. This will create a larger placeholder for smaller images such that the text beneath them all lines up, and if an image is too big, it will get cropped rather than stretch out and cause the text to get all out of line.
i assume you have a container for productItem
so it should be something like that:
<div class="productList">
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
</div>
i don't know why you dont want to use absolute positioning but that's only solution in this case (without giving fixed height to image or divs).
This setting would not hurt anything and will work on all common modern browsers including ie6.
All you need to do is give a different classname for product text or use different tag for addressing it.
css:
.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}
try this. should work perfectly
other solution is written above by MidnightLightining. using fixed height for image container.