On my wordpress site I use List category post plugin.
This is html code:
[catlist name=Ostatné numberposts=50 name_class=velkost
catlist thumbnail=yes force_thumbnail=yes catlist thumbnail_size=200,150 thumbnail_class=lcp_catlist
excerpt=yes excerpt_size=10 excerpt_class=moj_excerpt]
And this is CSS code:
.shrtthumbsd{
margin-bottom: 50px;
}
.shrtthumb {
float: left;
margin-left: 50px;
padding: 55px 15px;
display: inline;
width: 100%;
}
ul.lcp_catlist {
font-size: 22px;
}
.moj_excerpt{
font-size: 18px;
}
And it looks like this: https://www.akosizarobitpeniaze.sk/vsetky-clanky
I would like to align picture to the right side and have title of article (without bullet/dot) and excerpt under title.
Add this CSS to your site.
.lcp_catlist li { list-style: none !imporant; }
.lcp_catlist li img { margin-right: 0 !important; }
Related
Problem:
Do you see the gutter spacing between them? I'd like to get rid of that and add custom ones to match the margin at the bottom.
Here's the page's code:
#posts
.row
- #posts.each do |post|
.col-xs-12.col-sm-6.col-md-4.col-lg-3
.post
.post_content
.title
%h2
= link_to truncate((post.title), length: 25), post
%p
$
= post.price
.post_image
= link_to image_tag(post.image.url), post
.data.clearfix
%p.username
Listing by
= post.user.name
%p.buttons
%span
%i.fa.fa-comments-o
= post.inquiries.count
%span
%i.fa.fa-thumbs-o-up
= post.get_likes.size
And of course, the CSS:
#posts {
.post {
margin: .5rem;
border: 1px solid #9B9B9B;
&:hover {
border: 1px solid white;
};
.post_image {
height: 20rem;
overflow: hidden;
img {
width: 100%;
border-radius: .3rem .3rem 0 0;
}
}
.post_content {
margin: 1rem;
h2 {
margin: 0;
font-weight: 100;
padding: 1rem;
border-bottom: 1px solid #E4E4E4;
font-size: 1.5rem;
a {
text-decoration: none;
/*color: #333233;*/
&:hover {
color: #6E58E0;
}
}
}
.data {
/*padding: .75rem 5%;*/
color: #969696;
.username, .buttons {
margin: 0;
font-size: 1rem;
}
.username {
float: left;
}
.buttons {
float: right;
span {
margin-left: .5rem;
}
}
}
}
}
}
Ideally, you should show me how to style it so that the individual posts are squares with even margin between them.
Simply add this (the other answer had the same idea but you don't need the commas since you're using HAML):
.col-xs-12.col-sm-6.col-md-4.col-lg-3 {
padding-right: 0;
padding-left: 0;
}
The reason is that Boostrap's row comes preloaded with paddings (not margins) of 35px and 15px. Therefore you need to reset it or set your own.
In the Sass version of Bootstrap, find the _variables.scss file. Search for "$grid-gutter-width". You can adjust this value to whatever you want to affect the gutter width.
The default gutter width is this:
$grid-gutter-width: 30px !default;
Change that to something smaller to see if that works.
If you're working in the already compiled version of Bootstrap, you'll have to adjust this crazy set of code:
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px
}
Adjust the padding-left and padding-right here, or override them in your own css.
You shouldn't override default css, like in most answers.
To keep the default bootstrap css you could use this:
<div class="customdiv">
<div class="col-xs-12.col-sm-6.col-md-4.col-lg-3">
content here
</div>
</div>
You can than add the styling to customdiv.
.customdiv{
boder:2px red;//or something
}
When you override the bootstrap css you dont have the padding anymore at spots where you do want the padding.
When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The problem: on hover background color covers image
Markup:
<div id="col2-middle" class="three-cols-middle three-cols">
<a href="About.php#how-we-work- projects">
<h1 class="h-big-font">Specific Projects</h1>
<img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
<p class="p-on-white">
XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br/>
<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</a>
</div>
css:
div.three-cols {
float: left;
width: 29.33%;
position: relative;
left: 70.67%;
overflow: auto;
padding: 1% 1% 1% 1%;
min-width: 200px;
z-index:-1;
}
.three-cols a {
position: relative;
text-decoration: none;
color: #000;
}
.three-cols a p:hover {
background-color: #ecebeb;
}
.col-img {
float: left;
padding: 4%;
z-index: 1;
}
.three-cols h1 {
margin-bottom: 2%;
text-align: center;
}
.three-cols p {
padding: 0.5% 0 3% 0;
z-index: -1;
}
p {
word-wrap: break-word;
color: #000;
margin: 0;
padding: 10px 20px;
font-size: 16px;
}
Here is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.
<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
display: block;
position: relative;
text-decoration: none;
color: #000;
}
http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.
Anything you use a z-index with has to also have a position attribute.
I hope this helps!
You can get rid of the z-indexes, and then change
.three-cols a p:hover {
background-color: #ecebeb;
}
to
.three-cols:hover {
background-color: #ecebeb;
}
Updated fiddle: http://jsfiddle.net/pxD33/1/
updated fiddle: Fiddle
just change anchor's display to block:
.three-cols a {
display:block;
position: relative;
text-decoration: none;
color: #000;
}
and give hover class to a not p:
.three-cols a:hover {
background-color: #ecebeb;
}
As #Terry said, setting display: block on your three-cols a element should do the trick.
If you want to have a "free hanging" picture on the left of your text, you could also use a media object.
Simply add the following rules
display: block;
overflow: hidden;
to col-img and three-cols p.
You can read more about the media object here.
I have this two snapshot: http://snag.gy/uq7on.jpg (desktop) and http://snag.gy/8rg6n.jpg (iPhone 5). I don't know what to do to have the same structure on both, as you can see the paragraph "En ovra afrontamos ..." goes down..
Here is the site: http://www.ovra.es
This is the code of the paragraph:
p {
line-height: 21px;
font-size: 15px;
font-style: normal;
padding-right: 45px;
}
I believe there are many answers to your question. Here's mine:
Add the following CSS for the .der element:
body main section.razones .der {
float: right;
width: 50%;
}
Then remove the margin-left property from the .izq and add it to the .bocadillo and the ul:
body main section.razones .izq {
float: left;
width: 50%;
}
body main section.razones .izq .bocadillo, body main section.razones .izq ul {
margin-right: 40px;
}
I can't seem to get the image sprite to display. Can someone look at the code and tell me if I have it correct? I have checked the code and can't seem to figure out what's wrong.
CSS
#nav-footer
{ background:url(./_img//Footersprite.png) repeat-y;
width: 490px;
height: 40px;
margin: 0;
padding: 0;
}
#nav-footer li, #nav-footer a {
height: 40px;
display: block;
}
#nav-footer li {
float: left;
list-style: none;
display: inline;
}
#whyroofrepair a:hover { background:url("/_img/Footersprite.png") 0px -40px no-repeat; }
#savings a:hover { background:url("/_img/Footersprite.png") -98px -40px no-repeat; }
#enviromental a:hover { background:url("/_img/Footersprite.png") -229px -40px no-repeat; }
#advantage a:hover { background:url("/_img/Footersprite.png") -352px -40px no-repeat; }
#whyroofrepair { width: 55px; }
#savings { width: 55px; }
#enviromental { width: 55px; }
#advantage { width: 55px; }
HTML
<ul id="nav-footer">
<li id="whyroofrepair">Why Repair</li>
<li id="savings">Savings</li>
<li id="environmental">Environmental Benefits</li>
<li id="advantage">Roof Rx Advantage</li>
Blockquote
http://jsfiddle.net/LQCm2/2/
I tested this using Js fiddle.
can some one take a look?
First, change ./_img//Footersprite.png to ../_img/Footersprite.png
If that doesn't solve the problem then proceed below:
If your _img folder, containing the sprite:
Live next to your css file, then your image path should be like
_img/foo.jpg
Live just outside your css file's parent folder, then your image
path should be like ../_img/foo.jpg
Live in the root of your project, then your image path should be
like /_img/foo.jpg
EmileKumfa - I added additional info. Please see original post
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.