Does anyone in here knows how to make a div go to the center of the page (vertically) no matter the screen resolution or window size of the user? As an example, the login page of Instagram. If you make your window smaller, the div will keep floating at the center until it gets to the top. I made that, but the problem was that when the user kept making the window smaller, the div was actually going out of the user window (to the top).
Here is the Instagram login page for the example:
https://instagram.com/accounts/login/
And here is my page for the other example:
http://www.farespr.com
Would appreciate an answer =)
EDIT: This is my main div code:
#wrapper2{
width: 960px;
height: 530px;
top: 50%;
margin-top: -280px;
margin-right: auto;
margin-left: auto;
position: fixed;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #dcdcdc;
box-shadow: 0px 0px 5px 3px #f0f0f0;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#efefef));
background: -moz-linear-gradient(top, #fafafa, #efefef);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef');
}
This will work for any size div.
demo: http://jsfiddle.net/BxLhz/
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: #cc333;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
UPDATE:
demo: http://jsfiddle.net/Ha4PU/
CSS:
#wrapper {
width: 200px;
height: 200px;
background-color: #ccc333;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#media only screen and (max-height : 200px) {
#wrapper {
position: relative;
}
}
where max-height = height of .wrapper
Related
I'm looking to achieve a slanted edge on my div. The problem I'm coming across is the simple code I found to accomplish this is not cross-browser compatible. In fact, it only shows in Chrome.
Can anyone advise on how to do the following so it works in ALL browsers:
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
This effect would achieve:
Here's my entire CSS code:
.my-slanted-div {
position:absolute;
bottom:0;
left:0;
width:100px;
padding:10px 10px;
background-color:#eee;
font-size:20px;
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
Can anyone help me out?
You can also skew pseudo-element, like this:
.my-slanted-div {
position:absolute;
bottom:40px;
left:0;
width:80px;
padding:10px 10px;
background-color:red;
font-size:20px;
}
.my-slanted-div:after {
width:50px;
background:red;
position:absolute;
height:100%;
content:' ';
right:-22px;
top:0;
transform: skew(45deg);
}
<div class="my-slanted-div">
TEXT
</div>
p.s. change angle, play with values...to get desired result...
Edit: Demo in context -> https://jsfiddle.net/Lbwj40mg/2/
This should do the trick using borders.
<div id="container">
<p id="text">Hello</p>
<div id="slanted"></div>
</div>
#container {
position: relative;
height: 200px;
width: 200px;
background:url(http://placehold.it/200x200);
}
#text {
position: absolute;
bottom: 15px;
left: 10px;
z-index: 1;
margin: 0;
}
#slanted {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 0;
border-left: 75px solid #dedede;
border-right: 50px solid transparent;
border-bottom: 50px solid #dedede;
}
jsfiddle
I've made it work one way with :before and :after pseudos, you simply need to update the widths, heights and line-height to suit the size of tab you want; the rectangle must be the same height as the :before and :after bits for a clean look.
.box {
background: red;
width: 200px;
position: relative;
height: 100px;
line-height: 100px;
text-align: center;
margin-left: 50px;
color: white;
font-size: 21px;
font-family: arial, sans-serif;
}
.box:after {
position: absolute;
right: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.box:before {
position: absolute;
left: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="box">
Text in the box
</div>
Here's a way with transform: rotate just to add to the list. Quite annoying as you will have to play with pixels for alignment and make some entries into #media rules for different screen sizes. But it should be fairly cross browser friendly (but maybe not opera mini)
body {
background-color: #333;
}
.container {
position: absolute; /* needs a position, relative is fine. abolsute just for this example */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #ccc;
overflow: hidden; /* required */
}
.salutations {
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 0 15px;
background-color: #fcfcfc;
height: 50px;
line-height: 50px; /* match height to vertically center text */
font-size: 30px;
}
.salutations::before {
content: '';
position: absolute;
top: 21px; /* play with this for alignment */
right: -36px; /* play with this for alignment */
height: 40px; width: 70px; /* may need to adjust these depending on container size */
background-color: #fcfcfc;
transform: rotate(60deg); /* to adjust angle */
z-index: -1; /* puts the pseudo element ::before below .salutations */
}
<div class="container">
<div class="salutations">Hello</div>
</div>
P.S. May have to adjust a pixel or two, my eyes suck.
Browser Compatability
transform: rotate
pseudo elements (::before)
Fiddle
https://jsfiddle.net/Hastig/wy5bjxg3/
It is most likely it is an SVG scaled to always fit its text which is simple and quick way of doing it; if you must use CSS then you could always:
Set a gradient to the div from color to transparent so that it takes up most of the div and the transition of color is abrupt and not smooth like how a normal gradient looks.
create another div and using borders create a triangle to touch the other main rectangular div such as doing:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;
}
Using css you can generate an element that takes the shape of a triangle.
Css tricks has a post on that.
By making the .slanted class position itself relative, we can position the generated content on the right side of the slanted div using absolute positioning.
It'll take some fiddling to get the perfect result you want, but here's an example.
.slanted{
background: #007bff;
color: #fff;
position: relative;
display:inline-block;
font-size: 20px;
height: 25px;
padding: 2px 4px;
}
.slanted::after {
content: " ";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 29px 0 0 20px;
border-color: transparent transparent transparent #007bff;
position: absolute;
top: 0;
right: -20px;
}
<div class="slanted">Hello</div>
I am trying to create a custom shape in CSS3 but I am having problems with the position of the object at certain screen resolutions.
What I am trying to make:
CSS:
.foobar {
position: relative;
width: 100px;
background-color: #666733;
color: #ffffff;
border: none;
padding: 5px 0;
margin-left: 10px;
margin-bottom: 5px;
}
.foobar:before {
content: "";
position: absolute;
width: 110px;
height: 22px;
background: #666733;
padding-left: 0;
margin-left: -32px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
z-index: -100;
}
The issue I am having is with the foobar:before at different screen resolutions looks off:
iPhone:
iPad:
Desktop:
How can I properly code the shape with CSS so that it will work with all screen sizes? I have attempted to create #media with an adjustment of margin-left but I was curious to know if there is a better way?
When you use position: absolute;, it's better to use top, left, right and bottom position properties. You will have consistency that way irrespective of the device. Look at the DEMO and try for yourself.
HTML
<div class="foobar"></div>
CSS
.foobar {
position: relative;
width: 150px;
height: 50px;
background: #666733;
}
.foobar:before {
content: "";
position: absolute;
top: 13px;
left: -15px;
width: 180px;
height: 24px;
background: #666733;
border-radius: 15px;
}
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height
I tried a lot on oval shape which have cut in both sides but not able to do it please
I need code for oval shape with cut in both side..
Here's my code below:-
.demo{
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 178px;
border-radius: 694px / 208px;
z-index: 100;
position: relative;
}
Is this OK ?
HTML
<div id="oval_parent">
<div id="oval"></div>
</div>
CSS
#oval_parent{
background:black;
width:200px;
height:120px;
overflow:hidden;
}
#oval{
width: 220px;
height: 100px;
margin:10px 0 0 -10px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
DEMO.
Try this:
#oval-shape {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Notice the ratios in the corner values in relation to the height.
Demo - http://jsfiddle.net/XDLVx/
Change the values on css:
#demo {
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 50% / 250px;
-webkit-border-radius: 40% / 250px;
border-radius: 50% / 250px;
z-index: 100;
position: relative;
}
Put it inside another div which is high enough to show all the oval, not quite wide enough, and set overflow: hidden. If it's positioned at the centre the edges will be cut off, but you won't be able to side-scroll.
Here are two possible variants:
Method #01:
Use radial-gradient():
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
height: 100vh;
}
<div class="oval">
</div>
Method #02:
Create an overlay with :before or :after pseudo element.
Add border-radius.
Apply a large box-shadow with overflow: hidden on parent to hide undesired area.
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
position: relative;
overflow: hidden;
height: 100vh;
}
.oval:before {
box-shadow: 0 0 0 500px #000;
border-radius: 100%;
position: absolute;
content: '';
right: -10%;
left: -10%;
top: 10%;
bottom: 10%;
}
<div class="oval">
</div>
I wanna place a profile picture that has a width of 200px and an unknown height, inside a div container. The div is 150px x 150px. The img should be centered horizontal with the bleed hidden on each side. I cannot get this to work, the unknown height is messing it up, since the way the img width will appear is depending on the height. - A landscape img will get a higher width to fill out the height difference and keep the img in proportion. If it's a portrait image, the width should be 150px as the div...
Watch image: http://s18.postimage.org/52hfcc5h3/Sk_rmavbild_2012_06_26_kl_19_12_49.png
#profilePicture {
display: block;
float: left;
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#profilePicture img {
min-width: 150px;
min-height: 150px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
position:absolute;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Have you considered using background-images? It would make it much easier.
.img {
overflow: hidden;
background-image: url('/xyz.jpg');
background-size: cover;
background-position: center;
}
Here's The fiddle -> http://jsfiddle.net/haNj3/1/
I think what you want to do is this.
.main{
width:150px;
margin: 0 auto;
overflow:visible;
position: relative;
height: 200px;
outline: 1px solid blue;
}
img.absolute{
width: 200px;
left: 50%;
margin-left: -100px;
margin-top: 0;
position:relative;
outline: 1px solid red;
}
I think there is no need to use absolute positioning in this case.