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;
}
}
Related
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;
}
I'm having issues centring a menu, I need it to be fixed bottom centre, 20px from bottom. I've tried loads of different solutions I've found online but can't seem to get it quite right.
Here's where I'm at now http://ahdecor8.co.uk/menu/
Thank you in advance for your help! :)
Apply left:0 and right:0 on your CSS.
#bottom_nav {
width: 1080px;
position: fixed;
bottom: 20px;
text-align: center;
z-index: 9999;
left: 0;
right: 0;
}
Since you have the menu at fixed position, try adding:
left: 50%;
transform: translateX(-50%);
To #bottom_nav
I suggest you to apply next css to your <menu id="bottom_nav">:
*** Though without padding: 0; it wouldn't be at the actual center.
margin-left: -540px;
left: 50%;
Use css for menu:
#bottom_nav {
left: 50%;
margin-left: -540px;
padding-left: 0px;
}
First, you have to set the padding to 0. Try adding this:
#bottom_nav {
padding: 0;
position: fixed;
bottom: 20px;
left: calc(50% - 540px);
}
Hi all I seem to be having serious trouble getting my div to go exactly where I need it to. Here is a link to the website.
As you can see my slideshow is supposed to be in the frame, but in now way shape or form am I able to make it do so.
here is the link to the style sheet that Im working with.
Some help would be much appreciated, I've googled page upon page and can't seem to find any solution so I can to the place that I've found help from before.
#slideshow {
position: relative;
left: auto;
right: auto;
top: 119px;}
This CSS looks horrible (width of #content, left:auto; margin-top: auto...)
My suggestion is to make a fresh start and get rid of all those autos.
Have you tried removing the "margin-top: auto;"?
#content {
height: 374px;
width: 524;
margin-right: auto;
margin-left: auto;
margin-top: auto;
}
A quick fix would be to add
.ws_images{
margin-top: 122px;
}
This'll fix what ails you:
#contentbox {
position: relative;
}
#content {
position: absolute;
left: 100px;
top: 100px;
}
Personal preference:
#wowslider-container1 {
border: none;
}
Hey all i have a wonderful CSS problem here.
I am trying to use an APDIV that has a style of:
#name {
position: absolute;
width: 356px;
height: 25px;
z-index: 1;
left: 43px;
top: 1000px;
}
#donation_form {
margin-left:auto;
margin-right:auto;
width:785px;
height:520px;
background-image:url(../img/formBG_ChattClub.gif);
}
And that looks great in dreamweaver in design view:
BUT when i go to view it in the browser it shows like so:
The HTML code for the name is:
donation_container does not have a style associated with it.
What am i missing so that it lines up with the boxes just fine without any problem??
Thanks!
#donation_form {
position: relative;
}
#name {
top: 3px;
left: 5px;
}
Beside what you have written already
Hi just looking to see if anyone can help me out with a small problem.
I'm trying to layer images using the z-index in css but for some reason even though i have given the div that i want on top the higher index value the layer I want beneath keeps pushing it down or covering the layer I want on top:
#work-img {
background: url(../images/blots2.png) no-repeat scroll left top transparent;
width: 960px;
height: 601px;
position: absolute;
top: 610px;
left: 0;
visibility: visible;
z-index: 6;
display:block;
}
#work {
background: url(../images/my-work.png) no-repeat scroll 0 0 transparent;
position: absolute;
width:337px;
height: 35px;
left: 35px;
top: 660px;
visibility: visible;
z-index: 700;
display:block;
}
Not sure what im doing wrong so any input anyone can give me would be really great thanks!
I don't see a problem with your css. I did a quick example here and worked fine using the same properties as you.
Aren't these divs inheriting some property of another element? You can see that using firebug.