I'm making a simple website with html and CSS, and I have made a div circle. When I resize the browser, it's stretched more in one direction than the other. Is it possible to make it stay a perfect circle? If so, how?
Right now, this is the code for the circle:
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
width: 60%;
height: 60%;
max-width: 70%;
max-height: 70%;
min-width: 30%;
min-height: 30%;
display: block;
position: fixed;
text-align: center;
}
Try this complete example:
<html>
<head>
<style>
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
height: 60%;
max-height: 70%;
min-height: 30%;
display: block;
position: fixed;
text-align: center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(
function(){
$('#circle').width($('#circle').height());
}
);
$(window).resize();
});
</script>
</head>
<body>
<div id="circle"></div>
</body>
</html>
You can manually set the height and width of the div like:
<html>
<style>
.circle {
height: 20px;
width: 20px;
background: red;
border-radius: 100%;
}
</style>
<body><div class="circle"></div></body>
</html>
Related
I'm practicing with web development and I have a very weird problem with HTML and CSS.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<!--<div id="friendRequests"></div>-->
<div id="friendRequests"></div>
<div id="chatScreen"></div>
</body>
</html>
As you can see, #friendsList and #friendRequests are exactly the same. Note the line after the div that has been commented out, it has the id friendRequests. When I load the page, the div doesn't show up. But here is where I get confused. If I change the id of that div to friendsList, it does show up, but those two identities have exactly the same properties (I did this just to debug, friendRequests will have other properties). I even commented the friendsList out in CSS and I even removed it, it still doesn't change. Can someone explain to me why this apparently only depends on the name of the id? Thanks!
Big Update:
Apparently the script works perfectly fine in Microsoft Edge, so the problem lies in Chrome. Using Element Inspector, I discovered that the #friendRequests is actually never loaded in Chrome!! What might be the issue here?
Both divs #friendsList and #friendRequest are set with position: absolute; and float: left;.
This means both will be aligned to the left side of the screen regardless of other elements. As a consequence, both divs are on top of each other and only one is visible (specifically the one which is defined later in html).
You should remove the position: absolute from the divs. Or make them relative, so they are aligned next to each other, depending on the order in the html.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
text-align: center;
height: 50px;
width: 60%;
background-color: blue;
position: relative;
}
#friendRequests {
float: left;
height: 100%;
width: 20%;
background-color: red;
position: relative;
}
#friendsList {
float: left;
height: 20%;
width: 20%;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests"></div>
<div id="friendsList"></div>
<div id="chatScreen"></div>
</body>
</html>
The reason for this is both the div are having same css when you use the same id because of which the divs are overlapping on each other.
The id should be unique.
To understand the difference, I have shifted "friendRequests 2" block a bit left.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
.left_block{
left: 21%;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests">friendRequests 1</div>
<div id="friendRequests" class="left_block">friendRequests 2</div>
<div id="chatScreen"></div>
</body>
</html>
Thank you for answering, I found the solution. The problem wasn't the script, it was my browser apparently. Like I commented a few times, loading the page in Edge worked perfectly fine. I discovered using the debugger tool that the CSS file wasn't loaded completely for one or another reason. Thus I suspect this might be a bug in Chrome.
I have a div with position: fixed but when I scroll the window at the bottom the div overlaps with the footer. I dont want the div to overlap with the footer.
What changes should I make in css to overcome that.
a.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div class="contain">
<div class="data1"></div>
<div class="data"></div>
</div>
<div class="footer"></div>
</body>
</html>
a.css
.contain {
margin-bottom: 35rem;
}
.data {
background-color: red;
width: 30%;
margin-top: -33%;
position: fixed;
height: 600px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
Just replace fixed with sticky. Please modify the code like below and see that works for you:
.contain {
/* margin-bottom: 35rem; */
}
.data {
background-color: red;
border: 4px solid black;
width: 30%;
bottom: 30%;
position: sticky;
height: 300px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 350px;
bottom: 0;
}
I'm doing an exercise and although I've centered vertically previously, in this case, I'm not being able to center it.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Add a height to the html element:
html { height: 100%; }
and it will work - the body needs space to occupy, so giving html a 100%, the body can then occupy the full 100% height.
Remove position:relative from body and it would be in center
Here is updated code
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
/*position: relative;*/
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Declare body position with 'absolute'.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position : absolute;
height: 100%;
width: 100%;
}
.search-init{
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
position : absolute;
top : 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Make it easy. Use div instead of html and boy. HTML will like this.
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/250x150/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
CSS
.box-table{
display: table;
height: 500px;
margin-left: auto;/* If you want to center this box */
margin-right: auto;/* If you want to center this box */
text-align: center;
width: 500px;
}
.box-table{ /* This CSS for full window */
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
body{
background-color: #ff0000;
margin: 0;
padding: 0;
}
.box-table{
background-color: rgba(0, 0, 0, 0.85);
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-right: 17px;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/600x350/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
Try this
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body,html {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Having a problem with the size of containers outside of a max-width image and the image itself is not taking up to 60% scale. I Can't show the image scaling issue due to not having a dynamic parent. Remove width/height from #container to see the issue. (Please note I am viewing this on a mobile device)
#container {
width: 320px;
height: 480px;
background: white;
border: 1px solid blue;
}
#img-container {
position: relative;
}
#img-container img {
position: absolute;
max-height: 60%;
}
#leftover {
background: yellow;
width: 100%;
height: 100%;
color: white;
}
<html>
<head>
<title>Stackoverflow example</title>
<body>
<div id="container">
<div id="img-container">
<img src="http://placehold.it/1024x1024.png" width="100%">
</div>
<div id="leftover">
<h1>Should only have 40% leftover after the img-container takes up 60%.</h1>
</div>
</div>
</body>
</head>
</html>
Use id="img-container" instead of class="img-container"
Check your CSS.
#img-container = id="img-container"
.img-container = class="img-container"
<div id="img-container">
<image src="http://placehold.it/1024x1024.png" width="100%">
</div>
you can try tweaking the css a little bit as follows:
html,body{
height: 100%
}
.container{
height: 100%;
background: white;
border: 1px solid blue;
}
#img-container{
position: relative;
height: 60%;
}
img{
max-height: 100%
}
#left-over{
background: yellow;
width: 100%;
height: 40%;
color: white;
}
h1{
margin: 0;
}
You could try
#img-container img {
position: absolute;
max-height: 60%;
}
What i want to do is to scroll my web page in two direction that is leftPanel in left to right direction while rightPanel in right to left direction but the header remain fixed in its postion. But i am stuck some where.
here is my code:
HTML File-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='leftPanel'></div>
<div id='rightPanel'></div>
</div>
</body>
</html>
CSS File-
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
display: inline;
overflow-y: scroll;
}
#leftPanel{
float: left;
margin-left: -200px;
display: inline;
position: relative;
width:100 %;
height: 100%;
background: red;
}
#rightPanel{
display: inline-block;
position: relative;
width:100%;
height: 100%;
background: black;
}
please look at the image for further explaination:
at the page load scroll will be at center and the two divs positioned accordingly, when i scroll up the leftPanel scrolls from left to right and when i scroll down its rightPanel move from right to left.
What should i do ??
What you are doing is quite awkward to achieve because the scrollable divs must have a known width otherwise it is really difficult to control the line-wrap to act in your favour, but if you have a fairly static design to aim for it can work quite well.
You have quite a few strange things in your code that don't seem to be doing anything useful but it could be due to me misunderstanding what you are aiming for, also, some javascript might be essential for this, at least to get the left panel to start scrolled all the way to the right.
Here is my working css for something like what you are trying to do:
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
}
#leftPanel{
float: left;
width:50%;
height: 100%;
background: red;
overflow-x: auto;
}
#rightPanel{
float: left;
color: red;
width:50%;
height: 100%;
background: black;
overflow-x: auto;
}
.horizScroll{
width: 800px;
}
#leftPanel .horizScroll{
direction: rtl;
}
And a jsfiddle
I have done some research and i had achieved it by adding a little jquery.
My code is :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
<script src="./jQuery.1.10.0.js"></script>
<script>
$(document).ready(function(){
$("#mainPanel").scrollLeft(document.body.clientWidth*0.25);
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
}
else {
}
});
});
</script>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='panelOne' class='panel'></div>
<div id='panelTwo' class='panel'></div>
</div>
</body>
</html>
CSS file
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
position: fixed;
}
#mainPanel{
top:10%;
position: relative;
width:100%;
height: 90%;
overflow-x:scroll;
display: block;
background: yellow;
}
#panelOne{
position: absolute;
display: inline;
width: 1000px;
height: 100%;
background: red;
}
#panelTwo{
position: absolute;
display: inline;
margin-left: 1000px;
width: 1000px;
height: 100%;
background: aqua;
}
and here its fiddle:
JSFiddle