I'm trying to do this:
(The search button has fixed size, the left side takes remaining width in screen).
The best I got yet: jsFiddle
HTML:
<input>
<img src="http://ii.alatest.com/css/iphone/search_icon.gif">
CSS:
input {
height: 100px;
font-size: 3em;
width: 100%;
float:left;
}
img {
float:right;
width:100px;
height:100px;
}
Edit: I forgot to mention, the search icon has to be clickable! This leads probably to a solution where it's a separate element, not a part of the background.
I'd recommend using the image as a background to the input like this jsFiddle example.
input {
height: 100px;
font-size: 3em;
width: 100%;
float:left;
padding-right:120px;
background-image: url(http://ii.alatest.com/css/iphone/search_icon.gif);
background-position: 98% 50%;
background-repeat: no-repeat;
}
Or, you can float both elements left and set a width on the input like this jsFiddle example.
input {
height: 100px;
font-size: 3em;
width: 70%;
float:left;
}
img {
float:left;
width:100px;
height:100px;
}
Related
I'm trying to allign two images on each side of the text using padding.
I works on the left side but not on the right.
Why will the right one dont fall down 10px?
html:
<img class="q1" src="http://i62.tinypic.com/2dkh7p2.png"/>
This is the quoted text, but how can I get the right img to align? Right now it's too high! --->
<img class="q2" src="http://i62.tinypic.com/282f3mr.png" />
css:
.q1 {
padding-right:2px;
padding-bottom:10px;
}
.q2 {
padding-left:2px;
margin-top:10px;
}
fiddle: http://jsfiddle.net/vvDdR/1/
Instead of using vertical margin or padding you can just nudge it:
.q2 {
padding-left:2px;
position:relative;
top:10px;
}
Before:
After
Demo: http://jsfiddle.net/5g4wt/
This should be made with background images in CSS.
As an example:
Have a Fiddle!
HTML
<blockquote>This is an amazing quote - mistermansam</blockquote>
More information on semantic quotations in HTML5.
CSS
blockquote {
background: url(http://i62.tinypic.com/2dkh7p2.png) no-repeat;
padding: 0 25px;
position: relative;
text-align: center;
width: 300px;
}
blockquote:after {
content:'';
background: url(http://i62.tinypic.com/282f3mr.png) no-repeat;
position: absolute;
height: 20px;
width: 20px;
display: block;
bottom: 0;
right: 0;
}
With a different typeface, this could also be achieved without images.
I would go with vertical-align:
img {
display:inline;
}
.q1 {
vertical-align:45%;
margin-right:2px;
}
.q2 {
vertical-align:-70%;
margin-left:2px;
}
Demo
MDN Documentation
Your current code won't work due to a simple typo.
The following does, given I understood your problem correctly.
Jsfiddle sample
.q1 {
padding-right:2px;
padding-bottom:10px;
}
.q2 {
margin-top: 10px;
margin-bottom: -10px;
}
I am working with a set HTML template that makes things a little tricky to customize exactly the way I want. So I am stuck with a structure that somewhat lacks flexibility.
I have a div that takes up 50% width of the page, but I want to center a containing div in the middle of the page. Due to other restrictions in other parts of the page, I really can't change the parent div being set to position: relative.
This is the effect I am after:
This is the code I have so far (which is not working):
HTML:
<div class="parent">
<div class="centerpage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Berlin_U-Bahn_Train_A3L71.jpg/220px-Berlin_U-Bahn_Train_A3L71.jpg"></div>
</div>
CSS:
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position: relative;
}
.centerpage {
position: absolute;
}
you can use the old method of absolute and negative margin :
http://codepen.io/anon/pen/Htpen
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position:relative;
}
.centerpage {
position: absolute;
left:100%;
top:50%;
vertical-align:middle;
margin :-80px 0 0 -110px;/* negative margin is equal to half height/width of image */
}
or use a background-image or gradient http://codepen.io/anon/pen/GDbtg :
.centerpage {
background:
linear-gradient(to right,
#85D782 0%,
#85D782 50%,
#ffffff 50%,
#ffffff
)
;
height: 400px;
text-align:center;
line-height:400px;
}
img{
display:inline-block;
vertical-align:middle;
}
put image into a div and apply class below
{
width: 100px /* with your width whatever it is */;
text-align: center;
padding: 0px;
height: 110px;
display: table-cell;
vertical-align: middle;
}
and add one more class
.centerpage img {
width:100%;
}
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
So I have two elements floated next to each other and one has a set width and the other needs to be a percentage so that when the window/browser is resized the content will flow with it. However I am having trouble keeping the content floated next to each other when the window size is smaller than certain ratio.
Here is my css code:
.box {
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
background-color: blue;
}
p {
width: 95%;
float: left;
margin: 0;
padding: 0;
}
Is there a way around this? Here is my fiddle so you can see what is going on.
My example
If you make the size smaller you will see the P tag drops down below the box.
If the box is a fixed width you can use the following styles:
.item {
padding-left: 60px;
}
.box {
width: 50px;
height: 50px;
float: left;
margin-left: -60px;
background-color: blue;
}
p {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
http://jsfiddle.net/3QhzS/1/
otherwise you will need to add a little bit of jquery to it to add styles on the fly:
http://jsfiddle.net/3QhzS/6/
If you don't know the width of the div.box (as you stated in comments) then you can use position:relative to the p tag which will do the trick.
p{
position:relative;
/* anchoring top, left and right sides */
top:0px;
right:0px;
left:0px;
margin:0;
padding:0;
}
Working Fiddle
Working Fiddle(with two div's)
I have a div which is 145px X 145px. I have an img inside this dive. The img could be of any size (longest side being 130px). I would like the image to be centered vertically in the div. Everything that I have tried works in most browsers, but not IE7. I need something that will work in IE7.
here's a cross-browser solution:
<div class="img-container"><img src="picture.png" class="cropped"/></div>
div.img-container {
width: 390px;
height: 211px;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
img.cropped {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can replace the image by a background on the div like this :
<div style="background:url(myimage.jpg) no-repeat center center"></div>
Not sure about IE7 but for IE9 and rest of the modern browsers following works.
.picturecontainer{
width:800px;
height:800px;
border:solid 1px;
display:table-cell;
vertical-align:middle;
}
.horizontalcenter{
display:block;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}
To use it
<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>
This places images at dead centre.
Not sure what you have tried so far but the vertical-align CSS property should work if the images are displayed as inline elements.
Some info on vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp
If you have to account for all image heights, that is pretty much the only way without using JavaScript.
If the images are not inline elements and you only had to accommodate images of a consistent height, you could do something like this:
img {
margin-top: -50px; /* This number should be half the height of your image */
position: absolute;
top: 50%;
}
Otherwise the only way I can think to accomodate images of varying height would be to do something similar with your CSS but set the negative margin to half of the image's height with JS.
Using the line-height property solved the problem for me.
Reference: vertical-align image in div
HTML:
<div class="img_thumb">
<a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a>
</div>
CSS:
.img_thumb {
float: left;
height: 120px;
margin-bottom: 5px;
margin-left: 9px;
position: relative;
width: 147px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
line-height:120px;
text-align:center;
}
.img_thumb img {
vertical-align: middle;
}
I created a little jQuery code to do this without having to use nasty tables:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
imagepos = function () {
$('img').each(function () {
imgheight = Math.round($(this).height() / 2);
imgwidth = Math.round($(this).width() / 2);
$(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
});
}
$(window).load(imagepos);
</script>
And you also need a little bit of css:
div
{
position:relative;
}
img
{
display:block;
margin:auto;
max-width:100%;
position:absolute;
top:50%;
left:50%;
opacity:0;
}