I need to put this little logo in the right side of the site.
This is how looks now:
And I need this:
I'm using this CSS code:
.term-151 .page-title.color-scheme-light .entry-title:after {
content: "";
display: inline-block;
background: url(logourl.jpg here) no-repeat;
width: 30px;
background-size: contain;
height: 30px;
position: absolute;
margin-left: 10px;
}
Any idea how to achieve that? Thank you.
Use float, and remove position: absolute from that.
float:right
But from what I see that part of the logo is inside background.
You need to include as standalone img tag and the use the float.
And use that on before selector not the:after
.term-151 .page-title.color-scheme-light .entry-title
Please try to do this, without the float: right.
.page-title {
position: absolute;
top: 0;
right: 0;
}
Related
I'm trying to figure out where the extra spacing on the right of my container comes from, i can't seem to find a element that goes outside the HTML tags using inspector.
Live Preview
Any help is appriciated,
Thanks in advance!
It is coming from this class
slider-title tk-futura-pt-bold
instead of using position and left on the above class.
Use the follwing to re-position your div (slider):
left: 10%;
top: 10%;
transform: translate(10%,10%);
I would set the slider-box to position: relative; and set the slider-title to position: absolute; this would solve your issue.
write this code at the end of your css and you will get the problem solved :)
.slider-description[_ngcontent-c3], .slider-title[_ngcontent-c3] {
width: calc(100% - 10%);
}
instead of left: 10%; use padding-left: 10%; in .slider-title tk-futura-pt-bold class
The elements with classes slider-description and slider-title have css styling left added to it.
You can fix this by using the following:
#slider{
.slider-box {
position: absolute;
left: 10%;
top: 170px;
}
.slider-description, .slider-title{
color: #fff;
}
.slider-title {
font-size: 24px;
}
.slider-description{
width: 500px;
}
}
Dont know what to call it but I want a border that doesnt follow the divs height:100%; but is centered between top and bottom of the parent div.
What is the best solution? creating another div that contains the border? or is there any options in css that I dont know off?
heres a codepen to my current footer with the divs im using:
http://codepen.io/Volcan3/pen/yVoNZB
You could use pseudo classes to mimic a border that doesn't cover "100%"...
http://codepen.io/anon/pen/yVoORm
.footer-item::after {
content: '';
display: block;
height: 80px;
width: 1px;
background-color: red;
position: absolute;
right: 0;
top: 50%;
margin-top: -40px;
}
and then don't forget to make the parent item relative and a block:
.footer-item {
display:block;
height: 100%;
position: relative;
}
What is the easiest way to make the following page header a fixed header? http://presentationtube.com/header.php
Should I move the Menu elements in the header?
#templatemo_header_wrapper {
top: 0px; position: fixed
}
fixed at top 0
the easiest way:
#templatemeo_header_wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
height: 70px;
}
CSS:
#templatemo_header_wrapper {
position:fixed;
}
If that is not correct you will need to elaborate on your question.
EDIT
I would like to expand on this. There is extra markup that is not needed.
The current css looks like this:
#templatemo_header_wrapper {
width: 100%;
height: 65px;
margin: 0 auto;
background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
}
As the body is already set at margin:0 and padding:0 you do not need to specify top and left coordinates for the #templatemo_header_wrapper. So to avoid writing additional css you can change the element to this:
#templatemo_header_wrapper {
width: 100%;
height: 65px;
background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
position: fixed;
}
I've removed the margin property as this does not apply here. You can also dispense with the height property. Sometimes it is useful to set height for a fixed position element. But as you have child elements that also have height specified (and/or padding margins) this will naturally add height to the parent container as needed.
So the final markup could look like this:
#templatemo_header_wrapper {
position: fixed;
width: 100%;
background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
}
I am fairly new to CSS and although I have found examples for centring a IMG within a DIV, because I have a float: right; on an outer DIV it doesn't work as I want. This basically makes the DIVs appear in the correct place, but the IMGs are not central.
Here is a CSSDesk link for an example of my scenario: http://www.cssdesk.com/2pgBf
I'm trying to get the green share icon to appear centered both vertically and horizontally within the outer red boxes (DIVs).
I'm sure there are lots of enhancements that can be made to my CSS, but please only answer with solutions to my problem (though feel free to comment on this post with tips for CSS).
Hope that makes sense....
You can do position: relative; on the parent and then:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
On the child, this will center it.
DEMO HERE
This will work just as well and no positioning needed.
JSFiddle Demo
.social-media-icon {
background: Red;
margin: 2px;
float: right;
display: inline;
position: relative;
}
.social-media-icon a {
display: block;
}
.social-media-icon a img {
width: 16px;
height: 16px;
display: block;
margin:5px;
}
When i need to do that kind of code i set the parent tag, in this case the DIV to position: relative and the image to position: absolute, top:50%, left: 50% and margin: half the dimension just do this in your code:
.social-media-icon{
position:relative;
}
.social-media-icon a img{
position:absolute;
top:50%;
left:50%;
margin: -8px 0 0 -8px;
}
I have this image that I want to display on top of my product images when you HOVER on them.
This is what i'm using:
.centerBoxContentsFeatured img:hover {
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
It does work but it's being display behind the product image instead of on top of it. I tried absolute positioning and z-index but nothing seems to work.
http://www.pazzle.co.uk - trying to apply on the images on the main page. <<
EDIT:
#featuredProducts.centerBoxWrapper {
position: relative;
}
#featuredProducts.centerBoxWrapper:hover:before {
content: '';
width: 187px;
height: 179px;;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
a {
display: block;
position: relative;
width: 100px;
height: 100px;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
Demo
Use a pseudo element.
It's doing exactly what it's supposed to do. It's a background, so it will appear behind the container's content.
What you have to do here is to overlay a div over the image you're hovering.
I think this is possible a with a pure CSS solution, but it might be easier with some JavaScript.
See this question: on hover overlay image in CSS