I have an image and also a small container that I want to be placed on the container, but it sets this ".innerimage" below the image.
Do not suggest using top: xx; because in my actual project I have many divs with the same class and I can't use top or it will screw it up.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
If I well understand your need and if you don't have to support IE7, maybe you could use the display:table and display:table-caption
I updated the JSFiddle with these CSS properties:
http://jsfiddle.net/ZhdMj/1/
Related
My image div seems to be taking up the entire top section of the browser, I am not sure what I did wrong, but in order to make the text align within the image, I will have to add top:250px, that doesn't seem right to me. Here is my code: http://jsfiddle.net/Swathi56/zzbwkoLj/1/
I have attached the image for your reference.
<div>
<div class="hero-image-download col-xs-12">
<div class="overlay"></div>
<div class="hero-text-download text-center">
<h1>aspenONE Download Center</h1>
<h2> Download your UPGRADE now!</h2>
<p>Simply select software suite and you need to start using the latest version.
It’s fast and easy</p>
</div>
</div>
<div class="engineering-section">
<div class="engineering-section-title title-text">Engineering</div>
</div>
</div><!--end div-->
Remove top: 250px; from your text and set their parent DIV's (.hero-text-download) position to absolute and align it to the bottom of it's parent DIV (bottom: 0;).
.hero-image-download .hero-text-download {
position:absolute;
margin:auto;
bottom: 0;
}
http://jsfiddle.net/zzbwkoLj/2/
Remove
background-size:cover
height:500px
from the .hero-image-download class styling.
After this you do not need to add top:250px in the text containers.
I hope this will help
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
I have to build mobile views for an existing website. HTML is like:
<div class="container">
<div class="right_column">
<img .....>
</div>
<p>...</p>
<p>...</p>
</div>
right_column has a float: right.
For mobile view I'd like to move right_column to the end of the container. Trying it with position:absolute doesn't work well, because the container doesn't grow.
Any ideas?
Alex
If the height of the container is fixed you can play around with padding-bottom and use position: absolute; bottom: XX but I am afraid you cannot guarantee the height of the container.
Another option would be to put the div at the end of your HTML and make it float to the right in normal view, that's what I would do.
Use table display properties. display: table on the container, display: table-footer-group on the right column.
Beware, this might have some fun side effects on the container.
http://jsbin.com/abivis/1
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.
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.