I'm using the Angular-slider
http://ngmodules.org/modules/angular-slider.
Everything works with one exception - I cannot get the slider bar to conform to the margins.
My goal is to have the slider in the center of the page padded on each side with about 20% white space on each side.
<div style="text-align: center;">
....
<div style="margin: 40px 0 60px 0; font-size: 10pt;">
<div style="width:20px">
<a style="text-align: left; margin-left: 20%;margin-right: 20%">
<slider floor="0" ceiling="500" step="50" precision="2" ng-model="cost"></slider>
</a>
</div>
</div>
</div>
Not sure if it helps, but you can try to set:
position: relative;
left: 20%;
right: 20%;
I don't know why are you trying to do that and styling the <a> element, but from the code in Angular's page you should use something like this:
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
so, to adapt to your case:
<div class="container">
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
</div>
Now, the CSS is as easy as this:
.container{text-align:center}
ul{width:60%; margin:20px auto} /* adjust vertical margins to your needs */
li{....}
Note that this example use a construction of UL and LI, but you can obviously replace it with DIV using the same logic. Not sure why you want an A, but try it out, maybe it works, I just don't understand teh need and probably need more information.
Related
I have the following markup for a div of content that's being dynamically pulled from a .json file:
<div class="subSection">
<div ng-repeat="content in subSection.content" class="subSection_content">
<div class="table_container">
<p ng-if="content.type =='table_p'" ng-bind-html="content.content" class="{{content.class}}"></p>
<ul ng-if="content.type == 'table_ul'" class="{{content.class}}">
<li ng-repeat="li in content.content track by $index" ng-bind-html="li.item"></li>
</ul>
</div>
</div>
</div>
And the following CSS that applies to this div:
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
}
div.table_container {
width: 50%;
float: left;
}
}
And here's what's it giving me instead of floating the divs to the left. It treats the elements within that div as individual divs. >.< Clearing anything at all doesn't help. Suggestions?
And here's the output code (HTML). Nothing odd going on in CSS.
<div class="subSection">
<div class="subSection_content ng-scope">
<p class="firstP">One way that toxicity can be measured is by its specific effect on an organ or organs. The kidneys and liver are most commonly associated with toxicity because of their primary roles in metabolism, detoxification, and excretion. However, all body organs can be affected including the skin, brain, heart, lungs, and gastrointestinal organs.</p>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Liver Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Jaundiced skin or eyes</li>
<li class="ng-binding ng-scope">Abdominal pain</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Discolored or bloody waste secretions</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
</ul>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Kidney Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Hypertension</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Edema</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
<li class="ng-binding ng-scope">Change in urine output</li>
<li class="ng-binding ng-scope">Chest pain and shortness of breath</li>
</ul>
</div>
</div>
What's wanted: on mobile it should be 1 column (two blue boxes one under the other), and on larger views it should be two columns (two blue boxes next to each other). I've done styling of this kind of thing many times before and never had such difficulty styling it. Just looking for suggestions on what is going on that it doesn't want to float on "1 line" next to each other.
NOTE: OP has updated question with visual example since this answer was provided.
You haven't given a clear definition of what you'd like to achieve but I'll take a stab at it.
I'm going to assume the following:
That the light blue DIV should be under the darker blue DIV.
That the darker blue DIV is the header for the light blue DIV.
That each dark blue DIV and light blue DIV will be treated is one item/gropu/etc.
That on smaller screens the Liver Damage group appears above the Kidney Damage group.
That on larger screens the Liver Damage group appears to the left of the Kidney Damage group.
If so, then the issue is the way you're conditionally outputting your content/markup. The template doesn't match the output markup you've provided. Each header is nested in the same set of DIVs as its associated content.
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul><!-- content --></ul>
</div>
</div>
I would expect to see something like this if my assumptions are correct:
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
<ul><!-- content --></ul>
</div>
</div>
Which match your template but not output markup. This would get you the results you are looking for with the supplied CSS, http://jsfiddle.net/kqwpheh9/. The jsFiddle doesn't include any spacing between the lists, you'll have to include that later.
It appears your .table_container and .subSection_content DIVs might be redundant, among other markup considerations.
Add `float:left' in css as follows
div.subSection_content {
width: 100%;
float:left;
}
complete code:-
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
float: left;
}
div.table_container {
width: 50%;
float: left;
}
}
I am using a child theme, on one page I want margin left 30 on the other not. But it will effect all pages how do I make it unique?
CSS:
.description.style-16 ol, ul {
margin-left: 30px;
}
.eo-events-shortcode ol, ul {
margin-left: 0; (this one will have no effect)
}
HTML:
<div class="one_third">
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
<ul class="eo-events eo-events-shortcode">
<li class="eo-event-cat-agenda eo-event-future">
<li class="eo-event-cat-agenda eo-event-future">
</ul>
<div id="homebox_tabs">
</div>
<div class="one_third">
<div class="description clearfix style-16">
<h3 class="highlight">Werken bij SVHW</h3>
<ul>
<li>
<li>
</ul>
</div>
adding the inline to this
[one_third]
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
[eo_events event_start_before='+1 week' event_category=party,birthday's no_events="no events." showpastevents=false numberposts='3'] %event_title% %start{D d/m}{, H:i}% till %end{H:i}{}% [/eo_events]
<div id="homebox_tabs">
<div class="homeboxtab">[button link="http://intranet/wordpress/?page_id=2418" size="small" color="blue"]Go to agenda[/button]</div>
</div>
</div>
[/one_third]
To differentiate the two either adding an ID or class will allow you to specifically target each element.
You need to create something that will uniquely identify the page you want it to apply to.
You can either have the CSS apply only if the <body> has a certain class; or you could use a second stylesheet, or inline styles for that page.
How can I make the following search bar and its button at left of a page and the pagination at right, at the same line, please ?
Here is the template that I'm working on : http://jsfiddle.net/ht97t/1/
<form role="search" method="get" action="/Accueil/Rechercher">
<div class="col-xs-8">
<input type="text" name="rech" class="form-control" placeholder="Rechercher">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button><br />
<label style="margin-left:20px;"><input type="radio" name="type" value="nomPoste" /> Nom du poste de travail</label><label style="margin-left:12px;"><input type="radio" name="type" value="nomAppMetier" checked /> Nom de l'application métier</label>
</form>
<ul class="pagination pagination-sm" style="float:right;">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
I've tried this, but, this haven't work : http://jsfiddle.net/ht97t/2/
Note : I'm using bootstrap.
Thanks a lot !
From the the bootstrap CSS;
.pagination {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0;
}
You will need to override that margin, for now just set an inline style on your UL to confirm;
<ul class="pagination pagination-sm" style="float:right; margin: 0!important;">
Edit
You should use the Bootstrap grid as documented (http://getbootstrap.com/css/), that is to define a row and then to specify the placement of content within that row by setting div classes.
For example if you wanted to have a search box top left and a pagination control top right of a row then try this:
<div class="row">
<div class="col-xs-8"><!--search here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>
If you want to leave some space between the left and right content then use the offset class:
<div class="row">
<div class="col-xs-6"><!--search here --></div>
<div class="col-xs-4 col-xs-offset-2"><!--pagination here --></div>
</div>
In your original example you had a Search Box left, Radio buttons middle and Pagination right, so you might just be best to go with a 4 4 4 grid:
<div class="row">
<div class="col-xs-4"><!--search here --></div>
<div class="col-xs-4"><!--radio buttons here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>
One possible solution for this is to make the .pagination absolute and move it accordingly.
Example Fiddle
CSS:
body {position: relative;}
.pagination {
position: absolute;
right: 0px;
top: 0px;
margin: 5px 0;
}
In this case I set the body to have position:relative; but you probably would want to switch that to the closest containing element.
You have several options to do this.
The quickest fix would be just to do a margin top of like 18px
<form role="search" method="get" action="/Accueil/Rechercher">
<span style="float:left; margin:18px 0 0 10px;">
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
<ol type="1">
<div style="margin: 1em 0; margin-left: 45px;">
<li>
<div style="margin-top: 5px;">
Div Both before and after Li..... voima
</div>
</li>
</div>
<div style="margin: 1em 0; margin-left: 45px;">
<li>
<div style="margin-top: 5px;">
rohkeus
</div>
</li>
</div>
<div style="margin: 1em 0; margin-left: 45px;">
<li>
<div style="margin-top: 5px;">
uskomus
</div>
</li>
</div>
</ol>
If the above ol(ordered list) is displayed in IE8 then we obtain a list with a non incrementing list numbers ........ how can i get the correct list numbers without removing the div tags
Does anyone have an idea and suggest an alternate way of doing it.
Note: the List correct numbering if we make tick compatibility View and is also working find in IE6 and IE7 and Mozilla firefox 3.6 and the problem is only in non Compatibility View In IE8
Are you looking to add numbers to each list item?
Like:
Example 1
Example 2
Example 3
If so, make sure your ol has this css:
ol { list-style: decimal; }