I have a margin used to space some headings down away from an image, but despite this method working on other pages, it does not in this instance.
I know there are plenty of alternative solutions, but am curious as to what is wrong with this one. Can anyone help?
<div class="column" style="width: 237px">
<img src="img.jpg" alt="" title="img" width="237" height="300" class="alignnone size-full wp-image-84" />
<h1 style="margin-top: 40px">VAL</h1>
<span class="detailhead">Heading 1</span> <span class="detail">Detail 1</span><br />
<span class="detailhead">Heading 2</span> <span class="detail">Detail 2</span>
</div>
These are all the additional class declarations:
The image class has no associated style (class was inserted by Wordpress).
h1 {
font-size: 17px;
}
span.detailhead{
font-size: 13px;
color:#000000;
}
span.detail {
position: relative;
top: 1.5px;
font-size: 14px;
color:#000000;
}
.column {
display: block;
float: left;
}
Here is the offending style i overlooked:
img {
display: block;
float:left;
margin-right:10px;
margin-bottom:10px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
z-index: 2;
}
A more specific selector fixed the issue.
Thanks to all for helping me with this seriously schoolboy error!
Could you try adding a style="display:block" to the img tag?
If your using chrome or safari for testing: use the element inspector to check wether your inline setting is not overruled by an !important; declaration in one of the classes.
Edit: To quickly test this you can also add " !important;" to your inline css.
Related
I am working on a react project, and I list some operations ( objects ) in a Table, everything looks fine but the client for something I found very weird and hard, here is how it looks :
But that is not how he wanted the datatable dates looks, he wants something like this :
Is there a CSS property that can make that possible ?
Any help would be much appreciated.
there is too much code to write, but those parts are enough :
HTML :
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">04/07/2018</span>
</div>
SASS :
.co-operations-contrat {
&__date {
a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
+.co-operations-contrat__date-text {
margin-left: 0;
}
}
&-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
}
}
Like others have said monospace for the dates would be best. If you can't change the font are you able to wrap each part of the date?
If so what you could do is something like this;
https://jsfiddle.net/8mLwot25/3/
Basically, I've set a width on each span and aligned them with flex on the parent container. (You could also float each span). But by doing this would align the items in a better way.
It's not perfect but its a solution.
.container {
display: flex;
}
.container span {
text-align: center;
width: 20px;
}
.container span:last-child {
width: auto;
}
<div class="container">
<span>01</span>/
<span>04</span>/
<span>2019</span>
</div>
<div class="container">
<span>01</span>/
<span>05</span>/
<span>2018</span>
</div>
<div class="container">
<span>13</span>/
<span>04</span>/
<span>2019</span>
</div>
Maybe letter-spacing can help you with that. I'm not sure if you can achieve a pixel perfect result with that but this property may be usefull.
The issue is related to the Poppins font you are using for these dates. The font is not monospaced (it is sans-serif only).
If using a regular monospace font, the issue no longer appears
See demo below
.co-operations-contrat__date a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
}
.co-operations-contrat__date .co-operations-contrat__date-text {
margin-left: 0;
}
.co-operations-contrat__date-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
#no-poppins .co-operations-contrat__date-text {
margin-left: 25px;
font-family: monospace;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h1>Other workarounds include </h1>
<h2>Usign <TT></h2>
<div class="co-operations-contrat__date">
<tt>30/06/2018</tt><br/>
<tt>31/03/2018</tt><br/>
<tt>04/07/2018</tt><br/>
<tt>31/01/2011</tt><br/>
</div>
<h2>Using <PRE></h2>
<div class="co-operations-contrat__date">
<span>30/06/2018</pre>
<pre>31/03/2018</pre>
<pre>04/07/2018</pre>
<pre>31/01/2011</pre>
</div>
Of course, you can choose any monospaced font of your choosing, I just went the browser's defaults for the demo.
Here is the jsfiddle link please do take a look
http://jsfiddle.net/o9rf3thy/
There seems to be a problem with the html.
CSS
.taro{
display: inline;
margin-left: 200px;
}
I am still learning CSS so please do be patient with me.
I am trying to obtain this result
https://www.dropbox.com/s/lq80rkc4w5fqpki/Screenshot%202014-11-21%2017.36.51.png?dl=0
Items that have display:inline either by default or by setting are not affected by margins.
What I think you require is display:inline-block
JSfiddle Demo
This might be useful LearnLayout.com
Hope this is what you want http://jsfiddle.net/89f5o3jL/2/
CSS
.list-group {
list-style-type: none;
margin: 0;
padding: 0;
}
.list-group-item {
overflow: auto;
padding-top: 15px;
}
.img-circle {
float: left;
margin-right: 20px;
border-radius: 30px;
}
.info {
float: left;
width: 500px;
border-bottom: #ccc 1px solid;
padding: 0 0 15px 0;
}
.label {
background: #5390fc;
color: #fff;
border-radius: 4px;
display: inline-block;
padding: 2px 7px;
margin: 10px 0;
}
HTML
<ul class="list-group">
<li class="list-group-item">
<img src="http://placepic.me/profiles/60-60" width="60" height="60" class="img-circle">
<div class="info">
<strong>
Crondeau Viner, MD
<span>Nov 5th , 2014</span>
</strong>
<br />
<span class="label">Note</span>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p>
</div>
</li>
</ul>
Your html contains several invalid tags:
you should use a self closing tag for img i.e. end it with /> instead of >
you should use <br /> instead of <br>
I would also consider changing the nesting of your tags so the spans don't contain br tags as it makes it easier to follow and style correctly.
Finally, if you want to make all the text display to the right of the image change display: inline to display: inline-block (jsfiddle)
<ul class="list-group">
<li class="list-group-item">
<img src="http://placepic.me/profiles/80-80" width="40" height="40" class="img-circle" />
<p class="taro">
<strong>
<b>Crondeau Viner, MD</b>
<label>
Nov 5th , 2014
</label>
</strong>
<br />Note
<br />
<span>hello Dr Jacqueline test - nov 5 </span>
<br />
</p>
</li>
</ul>
And your CSS would become
.taro{
display: inline-block;
margin-left: 200px;
}
I can´t center this element. I believe it is because of display:inline; in the CSS block. Does anyone have an idea?
<p class="mr">Monatliche Rate </p>
<a class="info">
<div class="circle-text">
<div>?</div></div>
<span> Netto-Rate</span>
</a>
<p class="mr">:
<span id="results"></span> €</p>
CSS
.mr {
color: #1d6912;
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
margin-top:2px;
text-align:center;
**display:inline;**
}
You can place it in a wrapper, and add text-align:center to the wrapper.
<div class="mr-wrapper">
<p class="mr">Monatliche Rate</p>
</div>
.mr-wrapper {
text-align:center
}
.mr {
display: inline;
}
Demo
based on your question and the 1st answer I have prepared 3 examples for you to choose from:
http://jsfiddle.net/mofeenster/6V6Z7/1/
The simplest answer is this:
.mr {
margin: auto;
display: table;
}
I am having a problem with my css sprites. It looks like it is working (well, to me it looks like it should work). All the sprites just show the first icon but not the other ones.
Looked at many places and could not find an answer.
Thanks for helping me.
I put it up on a seperate page to save time.
[dead link]
And for those who aren't able to go to that page for any reason, here is the code:
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="iconFB linkIcon" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" class="iconFL linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
And the css is here (shortened):
.iconFB {background-position:0 -40px;}
.iconFL {background-position:0 -82px;}
.iconRSS {background-position:0 -164px;}
.iconY {background-position:0 -246px;}
.linkIcon {
width: 36px;
height: 36px;
background: url(iconSprite.png) no-repeat top left;
}
Thank you very much for helping!
You have a CSS specificity problem.
The CSS like this:
.iconFB {
background-position:0 -40px;
}
is being overridden by this:
.linkIcon {
..
background: url(iconSprite.png) no-repeat top left;
..
}
because background is shorthand for (amongst other things) background-position.
The easiest way to fix this is to swap around the two blocks of CSS, like this:
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align:middle;
background: url(iconSprite.png) no-repeat top left;
}
.iconFB {
background-position:0 0;
}
.iconFL {
background-position:0 -82px;
}
.iconRSS {
background-position:0 -164px;
}
.iconY {
background-position:0 -246px;
}
(I fixed the position of the Facebook icon, from 0 -40px to 0 0)
.linkIcon.iconFB and .linkIcon.iconFL and so on will solve this. Currently your linkIcon style overwrites the positions you set in .iconFB because it's further down in the CSS file.
Edit: (or just move the iconFB etc. styles below the .linkIcon styles)
The position of the background image is being overridden by the shorthand background in .linkIcon.
Either re-order the CSS, or use separate background-image and background-repeat declarations (and no background-position) in .linkIcon. I'd argue the latter is preferable.
Another way would be to use id's as these icons are probably unique and not reused on the same page. As it is used to "identify" a certain icon it makes sense to use an ID instead of a class.
<style>
#iconFB {
background-position: 0 0px;
}
#iconFL {
background-position: 0 -82px;
}
#iconRSS {
background-position: 0 -164px;
}
#iconY {
background-position: 0 -246px;
}
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align: middle;
background: url(iconSprite.png) no-repeat top left;
}
</style>
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="linkIcon" id="iconFB" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" id="iconFL" class="linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
<div class="iconDiv">
<a href="#" title="RSS Page">
<img src="./1px.png" id="iconRSS" class="linkIcon" alt=""/><span>RSS</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.youtube.com/" title="Youtube Page">
<img src="./1px.png" id="iconY" class="linkIcon" alt=""/><span>YouTube</span>
</a>
</div>
I have a strange bug when looking at my homepage in Chrome. The bug doesn't seem to appear when I try to edit it with CSSEdit:
I attached the pictures to show you what I mean. Those "points" next to the icons are linked as well.
What could be causing this error?
Thanks for the help!
EDIT sure here's the code (the page isn't online):
<div class="rss">
<p>
<a href="http://linkto">
<img src="/images/facebook.png" alt="Find me on facebook" />
</a>
<a href="http://linkto">
<img src="/images/twitter.png" alt="Follow me on twitter" />
</a>
<a href="http://linkto">
<img src="/images/rss.png" alt="Subscribe to RSS Feed" />
</a>
</p>
</div>
which is wrapped in a div class called footer. And the CSS
.site .footer {
font-size: 80%;
color: #666;
border-top: 4px solid #eee;
margin-top: 2em;
overflow: hidden;
}
.site .footer .rss {
margin-top: 0em;
margin-right: -.2em;
float: right;
}
.site .footer .rss img {
border: 0;
}
Sorry for the strange formatting.
Those "points" are the text-decoration:underline portion of your CSS being applied to <a> tags. The reason you only see part of it is because the image you are using is covering the majority of it.
Try putting this in your CSS:
.rss a { text-decoration:none }
.rss a img { border:none; outline:none }