I'm trying to make button fixed using margin-bottom but it's not working if there is longer title.
My example: photo
<div class="post-detail-container-div">
<br />
<div class="post-content-div">
<h3 class="post-title entry-title">
<?php echo $p['naslov']; ?>
</h3>
<div class="spusti">
<ul class="list-unstyled list-inline post-metadata">
<li>
<i class="far fa-calendar"></i> Mon, 06-09-2018 |
</li>
<li>
<i class="far fa-comment"></i>
Comments(10)
</li>
</ul>
<p class="post-excerpt"> <?php echo $p['uvodni_tekst'];?> </p>
<hr>
<div class="view_detail">
Pročitaj više
</div>
</div>
If you check photo you can see that button's are not in same line because title is longer.
My CSS class view_detail:
.view_detail {
text-align: center;
margin-bottom: 30px;
}
I'm using bootstrap too, so every suggestion is welcome.
The simplest way:
add position: relative; to the main card container
add position: absolute; bottom: 0; to the button container
to avoid the overlap of the button set the margin-bottom of the text part as the height of the button container
Related
I'm developing an item list that is filled dinnamically with some data that is getting from a controller.
I had a problem when the data is shown because I need to show it into two columns (called "record_left_content" and "record_right_content"), but when the obtained text is too long, the two columns are merged into one.
Someone knows how to positionate the both colums in a fixed way regardless of the size of the text/content ?
Code:
<div class="col-lg-9" id="middle_column">
<div class="text-center text-muted" t-if="not education_timetable_ids">
<h1>No timetables found</h1>
</div>
<div class="text-center text-muted" t-else="">
<ul class="list-unstyled">
<li t-foreach="education_timetable_ids" t-as="timetable" t-attf-class="media">
<div itemscope="itemscope" class="media-body" itemtype="https://schema.org/learningResourceType" >
<h4>
<a t-attf-href="/" itemprop="url" onclick="return false"><span itemprop="schedule"><t t-esc="timetable.display_name" /> </span></a>
</h4>
<div id="record_left_content">
<div>
<span t-if="timetable.academic_year_id" class="badge badge-info">
<i class="fa fa-clock-o" role="img" aria-label="Academic year" title="Academic year"></i>
Academic year:
<t t-esc="timetable.academic_year_id.name" />
</span>
//more code
<div id="record_right_content">
//more code
</div>
.media {
padding: 10px;
background-color: #e9ecef;
border-radius: 0.25rem;
margin: 10px;
}
#record_left_content {
float: left;
margin-left: 20%;
}
#record_right_content {
float: right;
margin-right: 20%;
}
Thanks for reading!
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.
i'm having a hard time getting my Footer Navigation to show up properly now that I'm using some new CSS rules. In addition to this problem IE 9 shows my IMG with a border around the outside of it (much like the underline of a linked item).
Questions as follows:
Why is IE creating a border despite img a { text-decoration: none; } ?
What is up with the footer being all wonky? What am i missing?
Here is my jsfiddle: http://jsfiddle.net/misterizzo/fTe5Q/
<
body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Everything shows up nice in current FF and Chrome browser (as usual)
Thanks!
First question:
You should use a normalise.css to make browsers behave more consistent.
http://necolas.github.io/normalize.css/
This is the bit you need out of that file.
/**
* Remove border when inside a element in IE 8/9.
*/
img {
border: 0;
}
Second question:
Try to increase the width of your footer ul
#footer ul {
width: 530px;
}
Hope that helped.
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;">
I am having some css issues...
When you hover over a product from here, you can see 'show now'..
But when you hover over the product from here, you can see 'Addto Cart' and you also see some black background for 'Add To Cart' which I am not understanding..
May I know what still I have to add in CSS..?
here is my code that displays products:
<!-- Product List -->
<div class="pl">
[product.each]
<div class="t1 col3">
<ul class="products ribbon">
<li class="product">
<a href="[product.link]">
<div class="thumbnail">
<img width="150" height="150" src="[product.image direct='1' tag='0']" class="attachment-shop_catalog wp-post-image" alt="[product.name]" title="[product.name]">
<div class="thumb-shadow"></div>
<strong class="below-thumb">[product.name]</strong>
</div>
<span class="price">
<span class="amount">
<?php if ($product->saleprice > 0 && $product->saleprice < $product->price) { ?>
<div class="prc">
<small>
<span style="text-decoration: line-through; color:blue;">[product.currency mode='sign'][product.price]</span>  
<span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
</small>
</div>
<?php } else { ?>
<div class="prc">
<small>
<span style="font-weight: bold; color:blue;">[product.currency mode='sign'][product.price]</span>
</small>
</div>
<?php } ?>
</span>
</span>
</a>
<div class="buttons" style="opacity: 0; visibility: visible; overflow: hidden; height: 41px; ">
SHOP NOW
</div>
</li>
</ul>
</div> <!-- t1 col3 #end -->
[/product.each]
<div class="clearingdiv"> </div>
</div>
<!-- /Product List -->
so, please tell me what am I missing..? you can find CSS code in source code...
They have used a background image.
In your case you need to set a background to .buttons or the anchor in there.
BTW: please stop using inline-stylsheets; use a separate <style> block or an external CSS file instead. That way, your CSS is much easier to read and understand.