I am trying to do something really simple: have image and input on the same line, but can not achieve it:
HTML
<img src="path/to/img"/>
<input/>
CSS
img {
height: 50px;
}
input {
height: 50px;
margin: 0;
padding: 0;
}
As you clearly see from this fiddle, image is much higher than the input. How can I fix it?
Use the vertical-align property:
img{
height: 50px;
vertical-align: middle;
}
See updated fiddle
I was able to achieve the effect you are looking for with floats:
img{
height: 50px;
float: left;
}
input{
height: 50px;
margin: 0;
padding: 0;
float: left;
}
Fiddle
Use vertical-align, like this:
img{
height: 50px;
vertical-align: middle;
}
input{
height: 50px;
}
You can also set float on the img like this:
img{
height: 50px;
float:left;
}
input{
height: 50px;
}
Related
I hate CSS like the plague.
I have a table header, with several table cells inline. This works perfectly until I start trying to add an image to one of the cells, which causes the height of the div to extend but I have absolutely no idea why.
Example of blank table cells working perfectly.
Example of the demon that has been haunting me all day.
.header {
display: table;
width: 100%;
background: white;
border-bottom: 2px solid #eeeff3;
.burger-menu {
width: 75px;
margin-left: auto;
margin-right: auto;
background: url("https://s23.postimg.org/o8wb4i5u3/1484768142_menu_alt.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
text-indent: 0px;
}
}
.outer {
display: table;
vertical-align: top;
position: relative;
height: 100%;
width: 100%;
}
.outer-icon {
display: table-cell;
position: relative;
height: 75px;
width: 5%;
overflow: hidden;
border-right: 2px solid #eeeff3;
img {
height: 100%;
}
}
.middle {
display: table-cell;
vertical-align: middle;
}
.search-bar {
display: table-cell;
vertical-align: top;
width: 80%;
input {
height: 75px;
border: 0;
padding: 0;
width: 100%;
border-right: 2px solid #eeeff3;
}
}
.inner {
width: 75px;
margin-left: auto;
margin-right: auto;
}
Can anyone put me out of my misery?
Remove height from .outer-icon. I don't know that it's ever a good idea to apply height to a table cell. Set vertical-align: middle; on .search-bar and .outer-icon.
I don't know if this will solve everything but changing display on add-friend seems to improve things:
.add-friend {
background-image: url(https://placeimg.com/75/75/face);
width: 75px;
height: 75px;
display: inherit; <- this here thingy
}
https://codepen.io/anon/pen/zNNdYw
I don't think you want to set an explicit height on .outer-icon because you are wrapping a lot of elements with it and should let the inner content set the height.
.outer-icon {
height: 75px; // remove this line!!!
}
Then set the hamburger menu to be absolute inside of its relative parent div.
.burger-menu {
position: absolute;
left: 20px;
top: 25px;
}
Cheers
i wanna view an image in the size based on div that contains the image. i use yii framework.
i have a css code like this
#ukuran1{
margin: 10px;
width: 250px;
height: 250px;
background: red;
float: left;
display: block;
}
and a layout code like this
<div id="ukuran1"><?php echo $this->ukuran1 ?></div>
and the view code like this
$this->ukuran1 = CHtml::image(Yii::app()->request->baseUrl.'/images/Desert.jpg');
the image shows, but in the actual size of the image. i want the image to sized as the div.
what shoul i do?
thanks guys..
Try putting this rule in your CSS:
#ukuran1 img {
width:100% !important;
height:100% !important;
}
#ukuran1 {
margin: 10px;
width: 250px;
height: 250px;
background: red;
float: left;
display: block;
line-height: 250px;
text-align: center;
}
#ukuran1 img {
vertical-align: middle;
max-width: 250px;
}
Try This
I'm trying to let a label and an input field fill the whole width of a from. Here is my attempt. This is the HTML
<form>
<p>
<label>Username:</label>
<input/>
</p>
</form>
and CSS
form {
widht: 400px height: 500px;
background-color: lightgrey;
}
label {
float: left;
}
input {
width: 100%;
box-sizing: border-box;
}
When I put a with: 100% in the input field it moves below the label and without the width it is too small. Any suggestions ?
Use a wrapper element around your input and set overflow: hidden; (Make sure you use a block level element, if you are using span than declare display: block; in your CSS)
Demo
<label>Blah Blah</label>
<div><input type="text" /></div>
label {
float: left;
}
div {
overflow: hidden;
}
input[type=text] {
width: 100%;
}
you have to set width attribute properly.
Live Demo
label {
float: left;
width: 15%;
}
input {
width: 83%;
box-sizing: border-box;
}
If you firebug it, you will know that Your border is actually putting some padding to the container p. So, if you just put border to none then you will be good to do.
If you want to use border and dont want the input to go outside the form, then you need to either shorten the width of the input a little and apply border or you give some padding to your form.
Try This CSS
form {
background-color: #D3D3D3;
height: 500px;
width: 400px;
}
form p{
float: left;
position: relative;
width: 100%;
}
label {
float: left;
position: relative;
width: 100%;
}
input {
border:0;
float: left;
height: 20px;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
Here is the DEMO
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}
I have problem with css. How to add text My option under every image?
Here is jsfiddle DEMO: http://jsfiddle.net/Leq3R/
My css code is here:
.product_des1 {
width: 375px;
float: left;
height: auto;
overflow: hidden;
font-size: 13px;
line-height: 22px;
margin-bottom: 72px;
margin-left: 100px;
}
.product_des1:nth-child(2n+1) {
margin-right: 0;
}
.product_des1 img {
float: left;
margin-right: 10px;
}
.product_des1 span {
color: #44a6e0;
}
#all {
width: 1034px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
If I understand correctly, you need to add the same text under every image. You can achieve this only with css by using the following code:
.product_des1:after {
content: "My option";
display: block;
clear: both;
}
Here's the updated fiddle http://jsfiddle.net/Leq3R/4/
So i'm practically adding some text after the container, witch will be displayed bellow the image.
Like this:
Change:
.product_des1 img {
float: left;
margin-right: 10px;
}
To:
.product_des1 img {
display:block;
}
You can use :before/:after pseudo selector to solve your problem.
I added the following css code to your code.
#all>div:before {
content:"myOption";
position:absolute; /* to show the content on the image */
top:0; /* pinning the content to top of this container */
left:0; /* keeping the content to left at the place of image */
}
#all>div {
position:relative;
}
Working Fiddle