I'm a newbie to HTML and CSS, facing a problem where when I resize my page, the elements go berserk. I've tried everything from creating a main wrapper and adding max widths and heights, but all to no avail. Here is my code in CSS so that you can take a look.
body {
background-image: url(3eMAHaa.jpg)
}
div.header {
border: 1px solid black;
border-radius: 50px;
padding-top: 26%;
padding-bottom: 26%;
padding-left: 10%;
padding-right: 10%
}
h1 {
;
position: absolute;
top: 30%;
left: 40%;
color: #FF2B24;
font-family: helvetica
}
.someimage {
position: absolute;
top: 43%;
left: 32%
}
div.navbox {
border: 1px solid black;
border-radius: 50px;
padding-top: 70px;
padding-bottom: 70px;
padding-left: 500px;
padding-right: 500px;
position: absolute;
top: 1%;
right: 2%
}
img.about {
border: 1px solid gray;
position: absolute;
right: 80%;
top: 35%
}
}
img.location {
border: 1px solid gray;
position: absolute
}
img.contact {
border: 1px solid gray;
position: absolute;
right: 15%;
top: 35%
}
Remove your all padding code then it will not be resized
Never mind guys, figured it out. I had to set a a bigger DIV as a parent and then change all the other elements to relative positioning so they wouldn't move about. It was a hassle, but it worked! :). Also, try to use pixels instead of % as percentages aren't fixed values and will cause stuff to go crazy when you zoom.
Related
I have .
when I resize my window then it looks like
It is not responsive.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 36%;
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float:right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color:white;
position: absolute;
left: 9px;
top: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="pending"></div>
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
PS: The round div should be in the center of panel div as per the image
Can I do it without using media query?
Any help would be great.
Thank You.
As long as you have width defined it is fairly easy:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%; /*changed*/
top: 20px;
margin-left: -35px; /* added */
}
could you try to put :
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
margin-left: -35px;
top: 20px;
}
and tell us.
PD: this revision of cs is not tested
Change your css to this.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 0;
top: 20px;
right: 0;
margin: auto;
}
This will keep round div always center. Hope this helps you.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
/*position: absolute;*/
position:relative;
margin:auto ;
margin-top:-62px;
background: #FFFFFF;
/*left: 36%;*/
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
A good way to center an absolute positioned element is by using:
left: 50%;
transform: translateX(-50%);
This is a better version of the classic trick that uses a negative margin since you don't need to know the width of your centered element for this solution to work.
So, just add:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
top: 20px;
transform: translateX(-50%);
}
This is a JSFiddle. I think is perfectly centered...
If you want the white approved element to be in the center even if you resize the browser then you can use something like:
.class{
position:absolute;
left:50%;
margin-left: -100px; // if your white approved element width is 200px then set margin to -100
}
Good luck
I'm trying to get better at JS and CSS, so I'm making a fake iPhone and am trying the simulate the look of when a text bubble pops on and off screen.
This is what it looks like so far, and this is the HTML for the phone itself:
<div id="iPhone">
<div id="screen"></div>
<div id="me" class="bubble"></div>
<div id="homeButton" class="circle"></div>
</div>
As well as the style sheet:
#iPhone {
position: fixed;
width: 250px;
height: 500px;
background-color: black;
border-radius: 25px;
top: 50%;
right: 30%;
transform: translate(-50%, -50%);
-webkit-filter: blur(3px);
box-shadow: 0 0 40px 20px white;
border: solid 2px white;
}
#me {
background-color: #1D62F0;
margin-top: 130%;
margin-left: 25%;
}
#me::after{
content: "";
position: absolute;
right: 0em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1D62F0;
border-bottom-left-radius: 1em 0.5em;
}
#screen {
position: fixed;
width: 241px;
height: 370px;
background-color: white;
border-radius: 0px;
top: 8%;
left: 1%;
-webkit-filter: blur(3px);
border: solid 2px black;
}
Right now, there's no JS governing it. How do I make it naturally slide onto the "screen" div and then disappear off the top, just like a real text message?
Thanks!
You need to put the overflow: hidden property on the message container div, then simply push new message boxes beneath the already existing ones, so they disappear eventually.
My css transition doesn't work. I cannot figure out what the problem is. I am adding the class using JavaScript. The element is not changing display. Here is my code and the link to my codepen. I am trying to make a simple modal for a tic tac toe game. Thanks for any help!
.back {
margin-top: 200px;
}
.box {
display: inline-block;
vertical-align:top;
background: lightgray;
width: 120px;
height: 120px;
margin: 2px 0 2px 0;
border-radius: 20px;
}
h1 {
margin-top: 30px;
font-weight: bold;
font-size: 4em;
}
.popup {
font-family: 'Signika', 'sans-serif';
margin: 200px auto 0 auto;
width: 700px;
height: 270px;
background: skyblue;
border: 6px solid #8dadc3;
box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
border-radius: 40px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all 5s;
}
.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 3em;
left: 10%;
position: absolute;
}
.x {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 40%;
}
.o {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 50%;
}
.popup.hide {
opacity: 0;
visibility: hidden;
}
This is my JavaScript:
$(document).ready(function(){
var chosen;
$('.player').on("click", function(e){
if($(this).hasClass("x")){
console.log("X");
chosen = "X"
} else {
console.log("O");
chosen = "O";
}
$('.popup').addClass('hide');
});
});
link to codepen:
Direct link to code
The problem is you are using the CSS class hide and Bootstrap is set up to apply display: none !important; to that:
https://github.com/twbs/bootstrap/blob/v3.3.6/dist/css/bootstrap.css#L6528-L6530
Change the class name in both the CSS and JavaScript and it will work.
The only problem I've found in your example was typo in class name.
In your JavaScript your are adding .hiding class, but the class is called .hidi . After changing it to .hiding, everything seems to work.
I've been trying to draw a line down the middle of a series of circles however if I set a line (.Line1) to fit between the first and last element then it's drawn from the top left of the first element and not centralised. If i set a line (.Line2) to fit in the middle by changing the percentages it will look fine at 100% zoom however if you zoom in or out of the screen it moves around.
I know it is possible to do using pure javascript however I cannot figure out how to do it with css created elements.
<style>
.A,.B,.C,.D, .E {
position: absolute;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.A {
top: 10%;
left: 50%;
}
.B {
top: 25%;
left: 50%;
}
.C {
top: 40%;
left: 50%;
}
.D {
top: 55%;
left: 50%;
}
.E {
top: 70%;
left: 50%;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 4px;
background: black;
}
.Line2{
position: absolute;
left: 51.3%;
top: 15%;
height: 60%;
width: 4px;
background: black;
}
</style>
<body>
<div class = "A"></div>
<div class = "B"></div>
<div class = "C"></div>
<div class = "D"></div>
<div class = "E"></div>
<div class = "Line1"></div>
<div class = "Line2"></div>
</body>
http://codepen.io/anon/pen/ZWMbNe
You need to take border, width and height into account. you cannot draw half a pixel. For example this is a center line:
.A,.B,.C,.D, .E {
position: absolute;
width: 46px;
height: 46px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 2px;
background: black;
transform: translate(24px,23px);
}
give one of the lines a margin-left that will be equal to half of the circle's width.
that way the line will always stay in the middle no matter if you zoom in or out.
.Line1{
position: absolute;
left: 50%;
top: 15%;
height: 60%;
width: 4px;
margin-left:23px;
margin-top:0px;
background: black;
}
You need to wrap your circles into a parent Element. So that you can align the Black line according to the parent Div and not the window size.
Moreover you can use the pseudo selector :before or :after for the line.
HTML
<div class="cirCont">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
CSS
.A,.B,.C,.D, .E {
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.cirCont{
float:left;
position:relative;
top: 100px;
left: 50%;
}
.cirCont:after{
content:"";
position: absolute;
left: calc(50% - 2px);
top: 10%;
height: 80%;
width: 4px;
background: black;
z-index:10;
}
Checkout this pen
I would like to increase jQuery mobile slider's handle clickable area. As of now, the handle's clickable area is small. so, I am unable to tap and change the range of the handle everytime. I want to have the handle size to be the same but increase the clickable area. My custom CSS is as follows.
.ui-slider-track .ui-btn.ui-slider-handle {
width: 12px;
height: 12px;
margin: -10px 0 0 -10px;
background-color:#0096E2;
padding: 5px;
border-color: #0096E2;
}
div {
position: relative;
width: 100px;
height: 100px;
border: 1px dashed #eee;
cursor: pointer;
transition: background-color 1.5s;
}
div::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: rgb(188,20,20);
border-radius: 2px;
}
div:hover {
background-color: #FFFFDF;
}
<div></div>