How can I make img or element with image background same height, padding and margin as other links?
Here is my code
a {
display: inline-block;
padding: 1%;
border: 1px solid black;
color: black;
font-size: 15px;
}
a img {
height: 15px;
border: 1px solid red;
}
.backg {
display: inline-block;
padding: 1%;
border: 1px solid red;
color: black;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 100%;
}
here is codepen http://codepen.io/anon/pen/ZQRyOd?editors=1100
I am not sure that I understood the question but you can add vertical-align: middle; to .backg and a img
In my opinion if you don't care about older browser you should use flexbox
Here is a decent guide for doing so:
A Complete Guide to Flexbox
Related
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I want to code the below design in html and css
The result I got:
I want to center other content in the td elements, so it will be aligned with the product image. I tried to use display: list-item with the product image and it works in Chrome, like the below image:
CSS code:
table {
width: 100%;
thead {
border-bottom: 1px solid #eeeeee;
}
th {
text-align: left;
text-transform: uppercase;
color: #909090;
padding-bottom: 1em;
}
.thumb {
width: 100px;
height: 100px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
display: list-item;
}
tr:nth-child(even) {
background: #fafafa;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}
td,
tr {
padding: 1em 0;
span {
display: block;
}
}
}
Please check this fiddle
Thanks,
In that third image you have shown, that does not look “centered” (on the vertical axis), but aligned to the top instead. If that is what you want – then simply specify vertical-align for the table cells accordingly:
.cart table td {
vertical-align:top;
}
http://jsfiddle.net/ahpegfvj/3/
I can't figure it out without using float:right or using relative positioning. If I use either, it will move around when people zoom in and out. I'm trying to figure out how to make it stay exactly where I place it even when people zoom in and out.
http://htmlcss.netii.net/
HTML Structure:
<div class="staff-block">
<img class="staff-pics" />
<div class="staff-text">
<h3>
<p>
</div>
</div>
CSS:
.staff-block { /* Red */
border: 1px dashed red;
display: block;
}
.staff-pics { /* Orange */
border: 1px dashed orange;
display: ;
width:150px;
display: inline-block;
margin-bottom: 50px;
}
.staff-text { /* Yellow */
border: 1px dashed yellow;
width: 70%;
font-size: 15px;
color: #FFCC00;
display: inline-block;
}
.staff-text h3 { /* Green */
border: 1px dashed lime;
margin-bottom: 10px;
color: white;
}
.staff-text p { /* Blue */
border: 1px dashed aqua;
}
Since they are already inline-block elements, simply add vertical-align:top.
.staff-text {
vertical-align: top;
}
It works - I tested it via the dev tool in Chrome..
Updated CSS:
.staff-text {
border: 1px dashed lime;
width: 70%;
font-size: 15px;
color: #FFCC00;
display: inline-block;
vertical-align: top;
}
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.
the link: http://xanlz.com/test/test.html
the css:
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px;
padding: 1px;
}
the red part margin-top is larger in IE8 and ok under firefox,IE7. why? how to correct it?
Use css hacks:
IE7 and below can parse *property: value
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px; //for IE8
*margin-top: //another value for IE7;
padding: 1px;
}
EDIT:
These two links provide more hacks for IE6/7/8:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
http://www.webdevout.net/css-hacks#in_css