ello I'm new to html and css and tried to display a images that are floating right. Now I want to get the images under each other but is doesn't work. Can someone help me?
this my css code for the images:
.imagesLeft{
float: left;
margin: 5px;
}
.imagesRight{
float: right;
margin: 5px;
}
this my html code for the images:
<div class="imagesRight">
<img src="../images/medewerkers.jpg">
</div>
<div class="imagesRight">
<img src="../images/medewerkers1.jpg">
</div>
<div class="imagesRight">
<img src="../images/medewerkers2.jpg">
</div>
Thanks in advance !
If you want them to be stacked under each other you can use:
.imagesRight{
float: right;
margin: 5px;
clear: right;
}
Floating won't get the images stacked. For that, you'll have to use position:absolute, and top/bottom, left/right positioning. You can use z-index to change the stack order.
.imagesRight {
position:absolute;
top:0;
left:0;
}
Here is a fiddle demonstrating it. As per the comment below, placing a containing div with positioning to it may prevent future headaches. I've updated my fiddle to include that.
Cause your question was not real clear to me what you want with stacking I've created a little example with 3 different possibilities have a look at the fiddle.
the last two examples are probably the interesting ones. the styling looks there liks this:
.position-relative {
background-color:orange;
}
.position-relative img {
position:relative;
display:block;
}
.z-index {
background-color:gold;
position:relative;
margin:20px;
padding:20px;
}
.z-index img {
position:absolute;
top:0px;
left:0px;
border:2px solid red;
}
.z-index img.first {
z-index:3;
}
.z-index img.seccond {
z-index:2;
}
.z-index img.last {
z-index:1;
}
Maybe this fiddle can help you:
u don't have to use float this divs, because it's stacked.
fiddle example
Related
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I've noticed that Chrome (34.0.1847.131 m) and Opera (21.0.1432.67) are creating an small gap between two divs when using the property display:table;. (and not when using display:block, for example)
Here's a fiddle reproducing it. (adjust the width of the panel, it doesn't take place with every width)
To reproduce it:
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
left: 0px;
}
.right {
right:0px;
}
.left, .right {
width: 50%;
position: absolute;
height: 350px;
background:#000;
display:table;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
How can I get rid of this gap? Is this some kind of bug?
Changing table to table-cell seemed to do the trick:
http://jsfiddle.net/3z24S/7/
add 1 px to the placement of the right div:
.right {
right:1px;
}
http://jsfiddle.net/3z24S/12/
I have two potential solutions:
Option 1:
Use css calc(); to set the width of the two divs, like so:
Working Example 1
.left, .right {
width: calc(50% + 0.1px); /* Important bit */
position: absolute;
height: 350px;
background:#000;
display:table;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
Option 2:
Use JavaScript to set the width of the two divs, like so:
Working Example 2
wid = function () {
$('.left, .right').width(Math.ceil($(window).width() / 2)); //Math.ceil() will round the value up
};
$(document).ready(wid);
$(window).resize(wid);
If you can get away with using calc() its probably the better option, using JavaScript seems expensive for something like this.
If it is a matter of vertical-align and known height, you can do without display:table/table-cell; DEMO or you could do without absolute position.
You may use inline-block, vertical-align and pseudo élément.
HTML :
<div class="left">
<div class='content'>
<p>content</p>
</div>
</div>
<div class="right">
<div class='content'>
<p>content</p>
<p>content</p>
</div>
</div>
the div.content will be inline-block or is display:table-cell in your problem.
CSS
.left {
left: 0px;
}
.right {
right:0px;
}
.left, .right {
width: 50%;
position: absolute;
height: 350px;
background:#000;
color:white;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
.left:before,
.right:before ,
.content {
display:inline-block;
vertical-align:middle;
max-width:95%;
}
.left:before,
.right:before {
content:'';
height:100%;
width:0;
}
Even answering here to your question , i still do not understand why position:absolute; and still not sure if elements are suppose to have an known height. It looks more like you are not using the proper or best method to your needs.
The pixel bug is, in my opinion, already answered in comments and obviously a different way for chrome to handle this display value.
Site: http://bit.ly/13nL8jV
Demo: http://jsfiddle.net/bBckp/
Brief: I am trying to get the CURRENT PROGRAMS to float under the SIGNATURE PROGRAMS with no luck. All of the columns in the footer have the CSS:
float: left;
width: 29%;
The columns are dynamic so I can't just wrap SIGNATURE and CURRENT in it's own div (I can probably hack it with JS)...CLARRIFICATION - I'm referring to the menus in the FOOTER.
Any thoughts how I can do this with just CSS?
You can tweak the element like so. This does leave a hole where it used to be, but that's what relative positioning does.
.item-130 {
position:relative;
left:-180px;
top:25px
}
Alternately you can set the parent UL to position:relative, and use absolute positioning:
.nav-pills {
position:relative;
}
.item-130 {
position:absolute;
left:0px;
top:25px
}
it may help you
html like this way;
<div class="wrapper">
<div class="SIGNATURE PROGRAMS">
..........
</div>
<div class="CURRENT PROGRAMS">
..........
</div>
</div>
and css
.wrapper{
overflow:hidden;
}
.SIGNATURE PROGRAMS{
float:left;
}
.CURRENT PROGRAMS{
clear:both;
}
EDIT:: if you cant change your html..then you may try this
.moduletable.current-prog {
position: relative;
left: -29%;
margin-top: 100px;
}
I am trying to create a simple html file with 2 column like structure. I managed it but there is no space between each element as you can see in the JSFiddled demo. I tried margin and padding but failed. How can I put some space between input elements for example?
JSFiddle
And here is my css:
.left
{
position:relative;
left:10px;
}
.right
{
position:fixed;
left:300px;
}
You could also use p elements to surround your label-field matches instead of using br line breaks, and would still be valid HTML.
For example:
<p>
<label for="foo">Foo:</label>
<textarea id="foo"></textarea>
</p>
Here's a fiddle.
Try this, but why are you using relative label and fix position for inputs?
.left {
display: inline-block;
left: 10px;
margin-bottom: 10px;
position: relative;
}
.left
{
position:relative;
left:10px;
width:300px;
float:left;
display:block;
}
.right
{
position:relative;
left:0px;
display:block;
}
This works fine with your jsfiddle. Tested it there. Add further margins if you need. The display:block does the trick
Try this using inline-block for this type of thing:
.left {
display: inline-block;
width: 300px;
margin-left: 0.6em;
}
label, input, select {
margin: 0.5em 0;
}
I am having some problems with placing two divs one below another.
I tried out some solutions found in Stackoverflow like below.
But Nothing seems to be working.
Code:
#wrapper {
position: absolute;
}
#up {
position: absolute;
float: left;
}
#down {
position: absolute;
float: left;
clear: left;
}
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
Here's My Attempt,
Fiddle
Helps would be appreciated.
Remove the CSS. DIV tags are block elements and would naturally flow down the page. You are floating them which would cause them to be displayed side by side.
Especially remove the "float" attributes.
That's how DIV's work by default, just remove your css. See a working example here: jsfiddle
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
I'm not sure if you want the outer div to be greater than the height of the page, but that's what this does:
#DivSlider
{
width:100%;
position:absolute;
height:170%;
background-color:green;
}
#DivHome
{
height:26%;
background-color:orange;
border:1px solid black; /* You were missing the 'px' here */
}
#DivSkills
{
height:25%;
background-color:white;
border:1px solid black;
}