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;
}
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.
i don't want to flood my visitors display with all news, so i want to use expanders for each news. But i want to support vistors with JavaScript disabled too.
My try:
#news > .panel > .panel-heading > .panel-title > .label{
float: right;
}
#news > .panel > .panel-body {
display: none;
}
#news > .panel > panel-heading > panel-title > a:visited < .panel-title < .panel-heading < .panel > .panel-body {
display: block;
}
<div id="news" class="tab-pane active">
{% for announcement in server.announcements.all %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ announcement.title }} <span class="label label-default">By {{ announcement.writer.get_username }} at {{ announcement.date_created }}</span></h3>
</div>
<div class="panel-body">
{{ announcement.content|safe_html }}
</div>
</div>
{% endfor %}
</div>
You need to make some changes
First, you will never (at current CSS3 capablity) be able to get what you desire using pure CSS using the :visited psuedo-class for two reasons: (1) the a element is not at the sibling level of the .panel-body, so it cannot control .panel-body through css, and (2) the :visited pseudo-class has severe restrictions on what it allows a designer to control (for privacy reasons).
So what can you do? Use :target instead.
But that will (1) limit you to allowing only one news item open at a time, and (2) requires you to set id properties on your .panel-body elements to match the href of the a tag controlling it. So you would need html structure like this:
<div id="news" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Title 1
<span class="label label-default">By writer name</span>
</h3>
</div>
<div class="panel-body" id="Item1">
Panel 1 body
</div>
</div>
</div>
Where each a has a unique href that is tied to the id of the .panel-body of the item. Then you can get the functionality similar to what you seek by this CSS for the display:
#news > .panel > .panel-body {
display: none;
}
#news > .panel > .panel-body:target {
display: block;
}
You can see how this works in this fiddle example, and to see how it would work with multiple news items, take a look at this fiddle example.
This solution is only CSS3 compatible, so older browsers with javascript disabled would not be able to see any news items (with javascript you can use that to expand)
Graceful degradation:
I would show all news in a container with internal scrollbar (constrained in height) as in : http://jsfiddle.net/Py2HU/1/
And when JS available would add a Show/Hide button, hide N last news and show/hide them after a click (or add Previous/Next buttons to allow scrolling news one by one)
CSS
.news-wrapper {
width: 300px;
max-height: 400px;
overflow: auto;
border: 1px solid #000;
}
HTML
<div class="news-wrapper">
<ul class="news">
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
</ul>
</div>
Compatibility: IE7+ and easily with IE6 (as simple as .ie6 .news-wrapper { height: 400px } if anyone cares)
This answer is for people who are looking for Single expander only with CSS3.
Bootstrap reference is given only to use Glyph-icons(Up/Down).
check Plunker
HTML
<div class="expandercheckbox">
<input id="e1" type="checkbox" checked="checked" />
<label for="e1" class="expanderheader">Click me to Expand/Collpase</label>
<div class="expandercontainer">
I am in container. I am visible. Click above to make be collpase.
</div>
</div>
CSS
body{
padding:50px;
background: #484848;
color:#fff;
}
.expandercheckbox input[type="checkbox"] {
display: none;
}
.expandercheckbox .expanderheader {
cursor: pointer;
}
.expandercheckbox input[type="checkbox"] + .expanderheader {
color: #fff;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
user-select:none;
-webkit-user-select:none;
}
.expandercheckbox input[type="checkbox"] + .expanderheader:before {
content: "\e113";
display: inline-block;
font: 14px/1em Glyphicons Halflings;
height: 20px;
width: 20px;
border-radius: 20px;
margin: -2px 0.25em 0 0;
padding: 1.5px 3.5px;
vertical-align: top;
background: #717171;
/* Old browsers */
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:before {
content: "\e114";
padding: 2.5px;
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:after {
font-weight: bold;
color:#000;
}
.expandercontainer{
background:#000;
padding:15px;
}
.expandercheckbox input[type="checkbox"]:checked ~ .expandercontainer {
display: block;
}
.expandercheckbox input[type="checkbox"]:not(:checked) ~ .expandercontainer {
display: none;
}
I have a pure CSS collapsable div which is based on someone else's code who uses the :target psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).
I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.
Here is my jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/
<div class="FAQ">
+
-
<div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
<div class="list">
<p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
</div>
</div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
.FAQ {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
height:auto;
margin:0;
float: left;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
/*style the (+) and (-) */
.hide, .show {
width: 30px;
height: 30px;
border-radius: 30px;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 0 #666;
text-align: center;
text-decoration: none;
box-shadow: 1px 1px 2px #000;
background: #cccbbb;
opacity: .95;
margin-right: 0;
float: left;
margin-bottom: 25px;
}
.hide:hover, .show:hover {
color: #eee;
text-shadow: 0 0 1px #666;
text-decoration: none;
box-shadow: 0 0 4px #222 inset;
opacity: 1;
margin-bottom: 25px;
}
.list p{
height:auto;
margin:0;
}
.question {
float: left;
height: auto;
width: 90%;
line-height: 20px;
padding-left: 20px;
margin-bottom: 25px;
font-style: italic;
}
Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary> and <detail> tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.
I've made an example here:
<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>
Browser support varies. Try in webkit for best results. Other browsers may default to showing all the solutions. You can perhaps fallback to the hide/show method described above.
Using <summary> and <details>
Using <summary> and <details> elements is the simplest but see browser support as current IE is not supporting it. You can polyfill though (most are jQuery-based). Do note that unsupported browser will simply show the expanded version of course, so that may be acceptable in some cases.
/* Optional styling */
summary::-webkit-details-marker {
color: blue;
}
summary:focus {
outline-style: none;
}
<details>
<summary>Summary, caption, or legend for the content</summary>
Content goes here.
</details>
See also how to style the <details> element (HTML5 Doctor) (little bit tricky).
Pure CSS3
The :target selector has a pretty good browser support, and it can be used to make a single collapsible element within the frame.
.details,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .details {
display: block;
}
<div>
<a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
<a id="show1" href="#show1" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
<div>
<a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
<a id="show2" href="#show2" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
#gbtimmon's answer is great, but way, way too complicated. I've simplified his code as much as I could.
#answer,
#show,
#hide:target {
display: none;
}
#hide:target + #show,
#hide:target ~ #answer {
display: inherit;
}
Show
Hide
<div id="answer"><p>Answer</p></div>
You just need to iterate the anchors in the two links.
+
-
See this jsfiddle http://jsfiddle.net/eJX8z/
I also added some margin to the FAQ call to improve the format.
Or a super simple version with barely any css :)
<style>
.faq ul li {
display:block;
float:left;
padding:5px;
}
.faq ul li div {
display:none;
}
.faq ul li div:target {
display:block;
}
</style>
<div class="faq">
<ul>
<li>Question 1
<div id="question1">Answer 1 </div>
</li>
<li>Question 2
<div id="question2">Answer 2 </div>
</li>
<li>Question 3
<div id="question3">Answer 3 </div>
</li>
<li>Question 4
<div id="question4">Answer 4 </div>
</li>
<li>Question 5
<div id="question5">Answer 5 </div>
</li>
<li>Question 6
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>
http://jsfiddle.net/ionko22/4sKD3/
I have a top nav that extends across the page
Within that top nav I have various elements
two that must align left
one that must align right
The nav is fluid the elements are fixed widths
Do not want the elements to wrap when the browser window is minimized
Needs to work in IE6 on up due to high Chinese audience.
See example here:
http://jsfiddle.net/4SUwg/
<div id="header">
<div id="headerContent">
<div class="search-list"> Search List </div>
<div class="social-buttons"> Social </div>
<div class="signin"> Login Drop Down </div>
</div>
</div>
I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE's.
Thanks all for your help in advance!!!
Use SPAN .. It's INLINE and not BLOCK ??
<div id="header">
<div id="headerContent">
<span class="search-list"> Search List </span>
<span class="social-buttons"> Social </span>
<span class="signin"> Login Drop Down </span>
</div>
</div>
And your CSS, remove floats
<style>
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:150px;
background:#039;
}
.social-buttons {
width:150px;
background:#060;
}
.signin {
width:200px;
background:#F00;
}
You want a fluid layout but the most important rule of a fluid layout is not to set a definite width of elements but you have set the width.
The CSS have a <style> tag, which is not required, probably you put it by mistake.
I have set the width of divs inside headerContent in percentage value. The CSS is
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:28%;
float:left;
background:#039;
}
.social-buttons {
width:28%;
float:left;
background:#060;
}
.signin {
width:28%;
float:right;
background:#F00;
}
Just changed the width value and on my browser it looked fine, better than the before version. Here's a fiddle http://jsfiddle.net/DeepakKamat/s52Hn/8/
I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.
<div id="header2">
<table id="headerContent2">
<tr>
<td id="left" valign="top">
<div id="leftWrapper">
<div class="search-list2">Search List</div>
<div class="social-buttons2">Social Buttons</div>
</div>
</td>
<td id="middle"> </td>
<td id="right" valign="top">
<div class="signin2">Login Drop Down</div>
</td>
</tr>
</table>
</div>
<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}
#headerContent2 {
width:100%;
}
#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}
.search-list2 {
width:150px;
float:left;
background:#039;
}
.social-buttons2 {
width:200px;
float:left;
background:#060;
}
.signin2 {
background:#F00;
float:right;
width:400px;
}
#leftWrapper {
width:400px;
}
#middle {
width:100%;
}
</style>
See Demo of it working here. Copy the code and try it out in all the IE's since JSfiddle does not work in all IE's.
http://jsfiddle.net/GtXKE/
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.