CSS image stuck at the bottom - css

I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img

We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;

Related

How to make menu button in middle and center

I'm trying to make this text align with the border. However, as of now what I have found are just mismatches.
Defect menu-button img
.subscribe-now {
position: absolute;
display: table-cell;
text-align: center;
background-color: #eb5e28;
line-height: 1em;
border-radius: 25px;
padding: 0.5rem 1rem;
vertical-align: center !important;
width: 200px !important;
height: 40px !important; // If I change this to auto then the size is so big and I need minus padding :(
padding-top: 0px;
padding-bottom: 0px;
border-image:
margin-left: 20px !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
You can try this approach. See if this works for you. Let me know
.subscribe-now {
text-align: center;
background-color: #eb5e28;
border-radius: 25px;
vertical-align: middle;
width: 200px;
height: 40px ;
color: white;
font-weight: bold;
border: 0px solid #eb5e28;
}
<button class="subscribe-now">Langganan Sekarang</button>

Color and background color not changing while hovered

I have a div block with an image, a heading and a paragraph. I want to change the background-color and the text color of that div when i hover on it but only the background-color changes, the color tag is simply ignored. How can I fix this?
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
color: #24252a;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
NOTE: I am still very new to programming with css, and I am doing this for a school project.
PS: some of the names are written in german, as it is my native language.
Have a great rest of your day!
Lucien
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}

CSS after selector as clamp effect over image

I've try to made in CSS a "clamp effect".
See image:
https://s27.postimg.org/j6m72z5kj/h_transylvania.png
I do not know exactly how this effect is named, so I called him "clamp effect".
Can someone tell me why ::after does not working?(to can have that "clamp effect" - see link with the image).
My code:
h2 {
margin-top: 40px;
}
.container {
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}
<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>
An absolute element will relate to it's parent only if it's in non static, default, position, therefore I've added position: relative to the container, in the example.
I've also fixed the required definitions to match the provided example image.
Here is the fixed CSS:
h2 {
margin-top: 40px;
}
.container {
position: relative;
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}
Or have yourself a fiddle example
Hope it helps

How to reduce minimum top-padding?

I'm trying to copy the Facebook's notification's blobs by using CSS3 ::before pseudo-element. I added a maximum height value and everything I tried isn't enough to reduce the space between the number and the beginning of the box. Any ideas on how to reduce/eliminate it?
Code:
HTML: <li notificaciones="3">[...]
SCSS:
*[notificaciones]:not([notificaciones="0"]){
&::before{
content: attr(notificaciones);
position: absolute;
color: $color-cajas-notificaciones-texto;
background-color: $color-cajas-notificaciones-fondo;
max-width: 25px;
font-size: 16px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: 800;
height: 20px;
float: left;
z-index: 999;
width: 20px;
text-align: center;
vertical-align: top;
top: 0px;
padding: 0 1px;
color: white;
text-shadow: 0px 0px 1px;
background-color: #f03d25;
border: 1px solid #d83722;
border-bottom: 1px solid #c0311e;
border-top: 1px solid #e23923;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 39, 121, 0.77);
display: block;
}
I didn't understand question well, but maybe you want like this
http://jsfiddle.net/zxshz/36/
<ul>
<li data="3"></li>
<li data="7"></li>
<li data="15"></li>
</ul>
/* css */
ul{
width: 250px;
}
li{
list-style: none;
float: left;
margin-right: 8px;
width: 18px;
height: 18px;
background: #9c0;
position: relative;
}
li:after{
content:attr(data);
padding: 1px 2px 2px 3px;
position: absolute;
background: red;
right: -3px;
top: -5px;
font-weight: bold;
text-align: center;
font-size: 9px;
border-radius:2px ;
color: #fff;
}
li:nth-child(1){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 0 no-repeat;
}
li:nth-child(2){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -58px no-repeat;
}
li:nth-child(3){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -29px no-repeat;
}
I can't understand what is your problem, put your code please
It's was just a matter of referring to the official documentantion on Line Height Calculations
line-height: /*same as height property*/
vertical-align: top;

How can i make this div go to the left and not the right?

Look at this picture of it...
http://www.flickr.com/photos/91733140#N06/8329388242/in/photostream
How can i make this div go to the left and not the right?
it keeps messing up and i really need it to be fixed any ideas how i can make it work?
<style type="text/css">
#body {
height: 100%;
margin: 0;
padding: 0;
}
#html, body {
height: 100%;
margin: 0;
padding: 0;
background: #E0E0E0;
}
#header {
background: #FFFFFF;
height: 33px;
width: 100%;
padding: 5px 30px 5px 30px;
font-family: arial;
font-size: 30px;
border-bottom: 1px #737373 solid;
position: fixed;
top: 0;
}
#container {
width: 1205px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#box {
width: 228px;
height: auto;
background: #FFFFFF;
border: 1px #5E5E5E solid;
margin: 5px;
float: left;
font-family: arial;
}
#box_title {
width: 218px;
height: auto;
padding: 5px;
background: #5E5E5E;
color: white;
border-bottom: 1px #FFFFFF solid;
float: left;
font-family: arial;
}
#box_img {
width: 210px;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
#box_options {
width: 228px;
height: 40px;
background: #FFFFFF;
color: #000000;
border-top: 1px #5E5E5E solid;
float: left;
font-family: arial;
Not to judge you by your open tabs but you seem to want a "Pinterestish" wall. This is not easy via vanilla css, may I suggest looking into jquery masonry?
http://masonry.desandro.com/
It does all the heavy lifting for you

Resources