Below is my div structure. I've got 2 arraow set on the top and at the bottom.
My question is how do I make the 2 arrows centered and slightly towards the column of images?
Here is a Fiddle
I tried this but no luck
.arrows{
border: 3px solid lime;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
display: inline-block;
height: auto;
}
html:
<div id="Wrapper">
<div class="row">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
<div id="itemWrapper">
<div id="items">
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
</div>
</div>
<img src="http://img42.com/h1DoP+" class="arrows" height="128" width="128" />
</div>
</div>
Well, you were on a right track with display-inline and text-align:center
You just needed to set the align property on the parent element so that any inline or display-inline HTML element inside that parent element would be centered.
#Wrapper{
height: 100%;
border: 1px solid #f60;
text-align:center;
width:300px;
}
.arrows{
border: 3px solid lime;
display:inline-block;
background:red;
position:relative;
z-index:10;
}
You could also use negative margins on #itemWrapper to offset the arrows up and down.
#itemWrapper{
height: 100%;
overflow: hidden;
position: relative;
border: 1px solid brown;
margin-top:-15px;
margin-bottom:-15px;
}
JSFIDDLE
Centering the arrows
Enclose the arrows in div tags. Set the width of the divs to be the same width as the images. Then, use text-align: center in your css, for the div.
<div class="arrow-wrapper">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>
css:
.arrow-wrapper{
width: 200;
text-align: center;
}
Making them closer
In order to get them closer to the image, give each arrow its own class:
<img src="http://img42.com/p2OH4+" class="arrows top" height="128" width="128" />
<img src="http://img42.com/p2OH4+" class="arrows bottom" height="128" width="128" />
And then put css:
.top{
position: relative;
top: 20px;
}
.bottom{
position: relative;
bottom: 20px;
}
To add to #Slavenco's answer and to wrap this up entirely, I would suggest adding an "arrow-top" class, and "arrow-bottom" class, and adjust the margin to achieve the overlapping effect you are looking for. You may need to adjust the z-index to make the arrows appear on top.
I wrapped each image like so:
<div class="arrow arrow-top">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>
(Of course, the bottom arrow is arrow-bottom instead of arrow top)
and the CSS is as follows:
.arrow { width: 100%; text-align:center; }
.arrow-top{ margin-bottom: -10px; }
.arrow-bottom{ margin-top: -10px; }
You can obviously adjust the margins until you get the absolute desired overlap you're looking for.
https://jsfiddle.net/b899145q/12/
I'd use position: relative; for class="row" and position: absolute; for class="arrows" to get the overlap you want. Take them out of document flow. To just get them to just center without overlap, move the text-align: center; to the containing element.
Related
I want to put the play button (first img) centered to the second images. I can do it with position absolute and margin but how can that be dynamic? What if I'm in a loop and the height of the second images is not always the same?
<img src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
There are two solutions to do this
1) Put that image between paragraph tags and give style to that paragraph "text-align:center;", just like below
<p style="text-align:center"><img src="#url to your image"/></p>
2) Give style to that img tags margin:0px auto , just like below
<img src="#url to your image" style="margin:0px auto;"/>
you will need to add a parent for the images and position the play image absolute and set it top left 50% and set negative margin of half the width of the play image so that it align it vertically and horizontally
div {
margin: 30px;
position: relative;
border: 1px solid red;
}
img.main {
width: 100%;
height: auto;
vertical-align: middle;
}
img.play {
position: absolute;
top: 50%;
left: 50%;
margin: -63px 0 0 -63px;
}
.second .main {
height: 400px;
}
<p>with smaller height</p>
<div>
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
<p>with larger height</p>
<div class="second">
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
I'm trying to format an image so it aligns to the bottom of a div. I put what I think is the relevant code in a fiddle: http://jsfiddle.net/5KEyD/
<div id="main">
<div style="display: inline-block; margin-left: 15px">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="Bottom-Text.png" alt="Some Image" width="800" height="152" /></div> </div></div>
#main{width:800px; height: 200px; padding-right:40px; overflow:hidden; background- color: #c0c0c0;}
#imageWrapper { position: relative; height: 152px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0px; }
What I need is for the image to align (centered) all the way at the bottom, with no extra grey space under it.
Thanks for any help!
<div style="width: 800px; margin: 0 auto;">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="/wp-content/uploads/2014/05/Bottom-Text.png" alt="Some Image" width="800" height="152">
</div>
</div>
I think that happens because of using display: inline-block for div element. Inline-block rule always adds 5px margins to element. So if you remove it the issue will be fixed. If you need that rule you can add -5px bottom margin.
How can I center vertically the span and the image here?
<div id="foo">
<span>Im great</span>
<image src="">
</div>
div {
height:350px;
background:yellow;
}
div span{
line-height: 350px;
background: red;
}
DEMO
When I remove the image the span is centered, but if I add the image the span is not centered any more..why?
This seems to work
<div id="foo">
<span style="vertical-align:middle;">Im great</span>
<image style="vertical-align:middle;" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROD-0j3FBYzU2dxJMpps3ZWiYl0dKoEdt1EE4c5zVHtPfhyw_59q4WEX2S">
</div>
Wrap them in a div and then use the following:
HTML:
<div id="foo">
<div class="wrapper">
<span>Im great</span>
<image src="">
</div>
</div>
CSS:
#foo{
position: relative;
}
.wrapper{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}
And if you want fully centered you can add: left: 0, right: 0 .
http://cdpn.io/yvanH
adding a <br /> tag after span lets the img flow below the span
I'm looking to position images over top of a div which has a set background. I'm using CSS to style the div as well as the images sitting on top of the background but I'm not seeing the results that I'd expect. The images which are sitting on top of the div's background image does not adjust based on my pixel settings.
Here's my HTML:
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected" />
<img src="images/color_C.png" class="c_image" />
<img src="images/color_K.png" class="k_image" />
<img src="images/color_M.png" class="m_image" />
<img src="images/color_Y.png" class="y_image" />
</div>
Here's my CSS:
#colorpicker{
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{
top: 50px;
right: 25px;
}
I can't make up from your question how exactly you want to position those four images, but I would make a selector for your images and not the parent div:
html:
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected">
<img src="images/color_C.png" id="c_image" class="image" />
<img src="images/color_K.png" id="k_image" class="image" />
<img src="images/color_M.png" id="m_image" class="image" />
<img src="images/color_Y.png" id="y_image" class="image" />
</div>
css:
img.image {
/*whatever you want to do here*/
}
#colorpicker {
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{ top: 50px; right: 25px; }
Sidenote: you can just type/copy-paste the code here, select in and press the above 'code sample' button. This will display it correctly as you see above (make sure you do this for html and css separately) :-)
To get the images to "stack", with a margin between then, add the following CSS:
#colorpicker img {
display: block;
margin-bottom: 2px;
}
See http://jsfiddle.net/KX5mS/ for a working example.
Firstly, I would like to show you a image(made in paint).
Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.
I tried myself using z-index and so, but without any success. Here's what I tried:
<div> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
<div style="margin: auto;">
text text text
</div>
</div>
but this didnt turn out any good. How can i do this?
Something like this?
http://jsfiddle.net/QGMPB/1/
HTML:
<div id="wrap">
<img src="http://jsfiddle.net/img/logo.png" />
<div id="text">text</div>
</div>
CSS
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
position: absolute;
width: 40px;
right: 0;
top: 0;
bottom: 0;
background: black;
color:white
}
Your code is messy and overcomplicated for such a simple issue, you can simplify it a lot by only using two elements. The simpler the better.
Please specify if you need the <img> tag.
HTML:
<div id="golf_course">
<div class="text_wrap_right">
text text text text
</div>
</div>
CSS:
#golf_course
{
background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
background-position: 0 -200px;
width: 900px;
height: 259px;
border: 5px solid #000;
}
.text_wrap_right
{
width: 300px;
height: 100%;
float: right;
background: #000;
color: #fff;
border-left: 2px solid #000;
}
And an example for you here: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/
I prefer a simple and more semantic HTML5 solution
HTML:
<figure>
<img src="..." />
<figcaption>text text text ... </figcaption>
</figure>
CSS:
figure {
position : relative;
z-index : 1;
width : 860px;
height : 240px;
}
figcaption {
position : absolute;
z-index : 1;
top : 0;
right : 0;
width : 200px;
height : 240px;
background : #000;
}
Use position:absolute to overlap 2 divs. You have to play with left and top properties to adjust its position.
<div style="position:absolute"> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
<div style="margin: auto;">text text text</div>
</div>
You need to put that text div inside the div that contains the image.. then set top and right to 0px and position absolute. take some hints from here: http://jsfiddle.net/U25XQ/1/
The following example shows how this can be done, please let me know if it is not what you mean: Example.
z-index only works for positioned elements (position: (absolute|fixed|relative)). So you have to position your elements. For example
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;">
<img src="http://w3schools.com/images/w3cert.gif" />
</div>
<div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
</div>
</div>
should work.
For writing text over image you put image in background style and alt text like this-
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>