I am trying to add border to a bottom of the text, however whenever the text has two lines, the border keeps under the first sentence. It should take the second sentence and move 15 px from it. How can I fix this?
The second red line should be under word dawdwada
.box {
width: 200px;
border: 1px solid black;
height: 200px;
}
.link {
position: relative;
margin-bottom: 20px;
}
.link a::after {
position: absolute;
content: "";
top: 15px;
left: 0;
height: 2px;
background: red;
width: 100%;
}
<div class="box">
<div class="title">
<div class="link">
<a>waddwaudwahidauidwa</a>
</div>
<div class="link">
<a>waddwaudwahidauidwa dawdwada </a>
</div>
</div>
</div>
instead of using ::after, you can just use border-bottom on link
Use text-decorations instead of borders
<a style="text-decoration: underline;">waddwaudwahidauidwa dawdwada </a>
go to :enter link description here
Related
.container {
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}
<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>
I know That this Design is stupid and can be made easily,
But I want to learn using it How I can I make the .letter position same as the First Letter using position: absolute; left:0; top: 0;,
I just want to place it in middle-left with no-padding or spacing or marging at all.
Something like vertical-align: middle; text-align: left; But with the effect of Absolute position of no spacing at all.
But it keeps moving all the letters to left of page above itself instead of the parent element itself after adding left: 0;
How can I do that?
you can add position:relative to .container
.container {
position: relative;
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}
<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>
Having some trouble getting the desired effect on an image overlay with responsive image. What I want is upon hovering over the image, the colour block and text to appear as shown, but for the text to be in the vertical centre of the div. I have tried vertical-middle but it doesn't seem to be working. Can't make the width and height set value as need to collapse and expand. If anyone can help i'd appreciate it. Thanks
Code, CSS below
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay p {
color: #ffffff;
text-align: center;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
img{
max-width: 100%;
height: auto;
}
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
You need to wrap the overlay with another div(since tables seem to ignore their height and width when they're absolute) and add position:absolute to it. Then add dislpay:table and dislpay:table-cell; vertical-align:middle for the child divs.
Check out this fiddle: https://jsfiddle.net/65cvzcev/
How to make two elements aligned so they will be at same distance from line in center which should be in center of wrapper. Also wrapper width is not fixed and may change.
http://jsfiddle.net/x2b2ax37/2/
<div id="block">
<div id="wrapper">
<span id="div1">2222</span>
<span id="div2">2 %</span>
</div>
<div id="wrapper">
<span id="div1">11</span>
<span id="div2">100 %</span>
</div>
<div id="wrapper">
<span id="div1">21</span>
<span id="div2">0 %</span>
</div>
</div>
1 - Initial 2 - What I expect
You could achieve it like this:
(Updated with .classes instead of #IDs)
JSFiddle - DEMO
.wrapper {
position: relative;
}
.div1 {
border: 1px solid #F00;
right: 50%;
position: absolute;
}
.div2 {
border: 1px solid #000;
position: relative;
left: 50%;
display: inline-block;
}
.block {
border: 1px solid green;
width: 200px;
}
<div class="block">
<div class="wrapper">
<span class="div1">2222</span>
<span class="div2">2 %</span>
</div>
<div class="wrapper">
<span class="div1">11</span>
<span class="div2">100 %</span>
</div>
<div class="wrapper">
<span class="div1">21</span>
<span class="div2">0 %</span>
</div>
</div>
The trick as shown earlier by Mary Melody is to use a combination of absolute and relative positioning on the child span elements, .div1 and .div2.
To make sure that the top and bottom border edges line up exactly, apply display: inline-block
to the span child elements.
The trick is to keep .div2 in the flow with a 50% left margin, which provides space for .div1,
which will be absolutely positioned using right: 50%.
To control the spacing between the two span's, add a 1px right-margin to .div1 and to preserve
symmetry, use left: 1px on .div2.
.wrapper {
position: relative;
border: 1px dashed blue;
margin-bottom: 10px;
}
.div1, .div2 {
border: 1px dotted blue;
display: inline-block;
}
.div1 {
position: absolute;
right: 50%;
margin-right: 1px;
}
.div2 {
position: relative;
margin-left: 50%;
left: 1px;
}
<div class="block">
<div class="wrapper">
<span class="div1">2222</span>
<span class="div2">2 %</span>
</div>
<div class="wrapper">
<span class="div1">11</span>
<span class="div2">100 %</span>
</div>
<div class="wrapper">
<span class="div1">21</span>
<span class="div2">0 %</span>
</div>
</div>
i do not advise to use id, u can use classes because u can not repeat the same ids each time, below is the code updated and as well a live demo.
.wrapper_block{
text-align: center;
}
.wrapper_container span{
display: inline-block;
vertical-align: top;
}
.wrapper_container span span{
display: block;
}
.wrapper_left{
text-align: right;
}
.wrapper_right{
text-align: left;
}
.wrapper_left span{
border: 1px solid red;
margin-bottom: -1px;
}
.wrapper_right span{
border: 1px solid black;
margin-bottom: -1px;
}
<div class="wrapper_block">
<div class="wrapper_container">
<span class="wrapper_left">
<span>2222</span>
<span>11</span>
<span>21</span>
</span>
<span class="wrapper_right">
<span>2 %</span>
<span>100 %</span>
<span>0 %</span>
</span>
</div>
</div>
Just need to make the div1 and div2 to inline blocks and set a width for them and also text-align to the different alignments.
Simple example
#div1 {
border: 1px solid red;
display:inline-block;
width: 50px;
text-align:right;
}
How to display the image as vertical align in div container?
The image "setting.png" placed in last column in the code i attached. please advice solution please.
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add (space before a link)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution:
add this to css:
img {
margin-top:10px;
}
Here, this should work:
Add this to your div which contains the image that should be centered.
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains.
You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
Add class tableColSettings to the <a> around the settings image. Then add CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/
Hope this helps!
Css is having a tag name
"vertical-align" may be you will get your solution
I am using a table and table cell in my website. The left most column needs to start from the top. Instead it goes to the bottom. Below is a link to that issue where the grey div starts from the very bottom.
http://jsfiddle.net/HtAJw/9/
It's not clear what end result you're looking to achieve. However, by adding a pixel width to every element, where it adds up to something less than or equal to the container width, will prevent the wrapping you see.
http://jsfiddle.net/HtAJw/10/
HTML:
<div class="parent">
<div class="child">
<fieldset>
a
</fieldset>
</div>
<div class="child" >
<div class= "newChildLeft">
a <br/> b<br/> b<br/> b<br/>
</div>
<div class= "newChildRight">
b<br/> b<br/> b
</div>
</div>
</div>
CSS:
.parent {
width: 100px;
display: table;
border: 1px solid green;
height: 100%
}
.child {
background: blue;
display: table-cell;
height: inherit;
width: 50px;
}
.newChildLeft {
float: left;
width: 25px;
}
.newChildRight {
float: right
width: 25px;
}
.child + .child {
background: red;
width: 50px;
}
fieldset {
height: 100%;
background-color: #666;
width: 50px;
}