I'm trying to align the elements of my header like on the first image below.
Unfortunately I'm not getting the expected result. The female sign and the image next to it stay stuck to the top of the page.
I've tried to apply a margin-top but the issue if I do that is that it pushes everything else down.
Your help would be much appreciated.
I haven't been able to reproduce this on JSFfiddle, so here is the live link.
Many thanks,
This is what I want (female sign aligned just above the text):
This is what I have:
Try setting position to absolute and then top to 200px I guess.
use position: relative; and change top value. Replace this classes:
.female-sign {
position: relative;
top: 263px;
left: 65px;
}
and
.special-femmes {
position: relative;
top: 230px;
left: 65px;
}
Related
So I'm doing a course where I have to use the z-index to tuck an image behind the div below:
Here's what it is supposed to look like: example
And here is what Mine looks like, even after copying the exact same code, with some tweaks too after reading how other people in my similar situation managed to solve it My version.
Here is the code for the stuff I had to change for it to look like the example:
#features{
padding: 7% 15%;
background-color: white;
position: relative;
}
.iphone-img{
transform: rotate(25deg);
position: absolute;
}
Every time I tried to slightly tweak the up and bottom values, the image's positioning would change drastically. I managed to get the exact positioning I wanted when adjusting with google inspect element, but when actually adjusting in vsc I did not manage to get the same result
There is no z-index in your code.
You need to add it, such as:
.element-background {
position: relative;
}
.element-phone {
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
}
This code will position your phone image on top of the background, at the bottom and almost in the center.
i want to create an image inside a div (col-sm-4 three times).
i try to use vertical align bottom on the image but its doesnt work.
but its seem it didnt work.
the img still doest go to bottom
my css is like this.
.initiative-buttons-content-inner{
min-height: 180px;
position: relative;
}
img{
vertical-align: bottom;
}
here the link https://jsfiddle.net/2z4czqhu/
doesany one know why it didnt work?
Make like this
position: absolute;
bottom: 0;
https://jsfiddle.net/2z4czqhu/1/
Read this
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
I would like to have my social profile buttons scroll just like its done on 9gag. Their 2 ads on the right hand side stay in a fixed position once you scroll to a certain point. I would like to do the same. Can someone help me with this?
Thanks alot guys.
You could add position: fixed to the element once the scroll offset reached a certain point.
Define this CSS then add id="media_icons" to the element you want fixed. Change the style according to your needs.
#media_icons {
clear: both;
height: 34px;
margin-right: 33px;
margin-top: 32px;
position: fixed;
right: 0;
top: 0;
width: 148px;
}
I have a simple question, and want to know if you can solve it for me..
Anyway, the question is, how do i place a box in the right side of the page, that wont affect any of the appearence of the css that is currently on the page :)
Use position: absolute;. To define the position, you can use the top, left, right, bottom properties to specify the respective offsets. In your case, you probably want right:
.rightbar {
position: absolute;
top: 0px; /*how many pixels from top*/
right: 25px; /*how many pixels from right*/
width: 50px;
height: 150px;
}
If you want your div to stay visible even after you scroll, use position: fixed;.
Little demo: little link.