I want to display the text and image in same line but image display slight above from text.Demo
html img.del {
display: inline-block;
float: right;
cursor: pointer;
margin-right: 74%
}
.astext {
text-align: left;
margin-left: 10%;
}
<h4><span><a class="astext" href="'.$next.'" title="'.$next.'" target="_blank" download><p style="margin-left:1cm;">'.$next1.'</a></span>
<img src="image/delete1.png" class="del" alt="delete" style="width:10px;height:10px" title="Remove" onclick="myFunction('.$fet['f_id'].');"></h4>
first of all, you got some open tags in your code:
second: i updated your fiddle to work correctly:
img.del {
display: inline-block;
cursor: pointer;
margin-right: 74%;
position: relative;
}
.astext {
display: inline-block;
text-align: left;
margin-left: 10%;
}
this is how it should be displayed right?
float: right and display: inline-block do not work together since they sort of the same thing.
see this reference: http://www.ternstyle.us/blog/float-vs-inline-block
and here is your fiddle:
http://jsfiddle.net/1z9b9m9p/4/
Related
Thank you all for your time.
I am trying to do something simple but it turns out to be so complicated.
I need a link to send an email but there's some issue with the style. It shows the content fractured (see jsfiddle). But when I right click several times, everything is back to normal. Any idea?
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: inline-block;
}
#sendAll:hover {
background-color: #0164c6;
}
HTML:
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>
Here's the jsfiddle link
Thank you all !
Just provide display: block to #sendAll
The <b> tag provides a font-weight: bold property to the element, but the element is not a block level element by itself. So, you have to manually specify the same.
Refer code:
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: block;
}
#sendAll:hover {
background-color: #0164c6;
}
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>
Try this:
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: inline-block;
white-space:nowrap;
}
#sendAll:hover {
background-color: #0164c6;
}
Explain
Add a property white-space:nowrap in #sendAll id
update code link
if you want your text on only one line, add the following to your #sendAll class
white-space: nowrap;
I have a simple inner/outer div problem where it's probably easier to explain through pictures. Here is my issue:
The comment "This is a witty comment." is not breaking down underneath the other 2 labels. Here is my HTML:
<div class="commentOuter">
<div class="commentAuthor">someauthor</div>
<div class="commentDate">17 minutes ago</div>
<div class="commentText"><span>This is a witty comment.</span></div>
</div>
And here's the CSS:
.commentOuter
{
border-radius: 4px;
width: 100%;
height: 20px;
float: left;
background-color: black;
margin-top: 10px;
padding: 5px;
}
.commentAuthor
{
float: left;
font-size: smaller;
color: #68a5d9;
display: block;
height: 15px;
}
.commentDate
{
float: left;
font-size: smaller;
margin-left: 5px;
color: #AAA;
display: block;
height: 15px;
}
.commentText
{
display: block;
width: 100%;
}
I don't understand that when I highlight the element in the dev tools, the div is not showing to be underneath the labels, as seen in this pic:
Any help is much appreciated.
Because you floated the previous 2 elements. If you need to move it below. Use a clear:
.commentText
{
clear:both;
display: block;
width: 100%;
}
You also have to remove the specified height for the .outerComment element.
Just because it's not floated, doesn't mean it won't be next to other elements.
See more here: https://css-tricks.com/all-about-floats/
I have a panel. Which looks like this:
It's not best, but its a copy of things I have in a PSD. The problem is that when you check HTML <a> is before image display and it still make <a> as 0x0px, the problem is with all 3 images in that panel and I don't know how to fix it. Can somebody help me to make each <a> to be as big as that image and button are?
HTML:
<section class="panel">
<img src="images/right_banner.png">
<div class="panel_button"><span class="text">NAHLĂSIT CHEATERA</span></div>
<div class="panel_button"><span class="text">CW/TG REZERVACE</span></div>
</section>
CSS:
.panel {
width: 200px;
float: left;
margin-top: 13px;
}
.panel a {
width: 201px;
height: 200px;
display: inline-block;
}
.panel_button {
background-image: url("images/panel_blue_button.png");
background-repeat: repeat-x;
width: 198px;
height: 93px;
margin-top: 5px;
font-weight: 16px;
}
.panel_button span{
color: #ffffff;
text-align: center;
display: inline-block;
margin-top: 40px;
margin-left: 30px;
}
Live preview
The anchor element is currently an inline element. You could change it to either block or inline-block to achieve the desired results.
.panel > a {
display: block;
}
I got these share buttons from simplesharebuttons.com. I added a more button that will eventually be used to unhide less popular social media icons on smaller screens, but it's not lining up with the rest of the buttons and I can't figure out what the problem is.
http://jsfiddle.net/WLSqw/41/
#share-buttons img {
width: 35px;
padding-right: 5px;
display: inline;
}
#more {
width: 35px;
margin-right: 5px;
background: #ccc;
display: inline-block;
border-radius: 50%;
color: white;
font-size: 1em;
text-align: center;
line-height: 35px;
}
Actually, being an inline-block element, all you need for your #more is:
vertical-align: top;
DEMO
Add float:left; to the links and that button
JSFiddle
I have small problem with some design.
I have this very simple html:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This is just a small part of a bigger widget. To make thsi widget work, I need at least this css:
div {
position: relative;
width: 400px;
height: 200px;
}
ul {
z-index: 99;
}
li {
display: block;
float: left;
width: 16px;
height: 16px;
}
Now I want to put list down into the midst of div. There is no problem with putting it down, but it is impossible for me to put it into middle. List can have any number of items.
JSfiddle: http://jsfiddle.net/MBxNU/1/
So far, I tried for example:
ul {
width: 100%;
display: block;
text-align: center;
}
But it didnt work and I have no clue why.
If you could give me some help, I'd appreciate it.
Your code with text-align: center doesn't work because you have floated items inside ul. You can use display: inline-block instead of float:
li {
display: inline-block;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/
Here you are ;)
div {
position: relative;
left: 20px;
top: 20px;
background-color: #EEE;
width: 400px;
text-align: center;
height: 200px;
}
ul {
padding: 0;
display: inline-block;
z-index: 99;
list-style: none inside;
}
li {
float: left;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
So the main idea is to set text-align: center for parent div and display: inline-block for ul, that's it )