Total noob to HTML/CSS here. I'm having difficulty getting my website to look correctly when the window is resized. This is what happens:
Gross:
I set the body background blue. Then the white background is created with two divs (one called "body" the other called "body-text") containing all the body elements, styled as such:
.body {
margin: 35px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
padding-bottom: 50em;
padding-right: 15px;
}
.body-text {
margin: 15px;
padding-bottom: 10px;
}
So how can I get the images to stay inside the white div when I resize the screen? I'm sorry if this question has been asked before, I'm not exactly sure how to word this. Thank you very much for your help!
Here try this code it will make your DIV responsive
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
margin: auto;
width: 80%;
border: 3px solid #73AD21;
padding: 10px;
background-color:blue;
}
img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<div>
<img src="https://images.news18.com/ibnlive/uploads/2021/07/1627377451_nature-1600x900.jpg">
<p>Responsive DIV</p>
</div>
</body>
</html>
Let me know if this will work for you or you want something else.
You could try adding this to your CSS.
img {
display: block;
}
.body {
margin: 35px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
padding-bottom: 50em;
padding-right: 15px;
}
.body-text {
margin: 15px;
padding-bottom: 10px;
}
Related
I am trying to give a hover effect on two buttons. So, I put two buttons over a background image. The problem is I coded hover for those buttons but they are showing the change. But, when I hide the background image the hover effect is working perfectly. Please tell me what mistake I am doing?
simplified HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harry Fitness</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container top-container">
<div class="left">
<img src="logo.jpg" alt="">
</div>
<div class="mid">
<ul>
<li>Home</li>
<li>Products</li>
<li>Calender</li>
<li>About Us</li>
</ul>
</div>
<div class="right">
<button class="btn">Call Us Now</button>
<button class="btn">Email Us</button>
</div>
</div>
</body>
</html>
Here is my css coding:
*{
margin: 0px;
padding: 0px;
background-image: url(athletic-young-female-runner-jogger-stylish-sportswear-running-against-blank-
wall-having-concentrated-focused-look-going-win-sprint-endurance-race.jpg);
background-size: 2000px 1000px ;
background-repeat: no-repeat;
color: black
}
.left{
display: inline-block;
border: 2px solid red;
position: absolute;
}
.left img{
height: 100px;
width: 110px;
}
.mid{
margin-top: 20px;
border: 2px solid green;
display: inline-block;
width: 33%;
position: absolute;
margin-left: 600px;
font-size: 20px;
}
.mid li{
list-style: none;
float: left;
margin-left: 50px;
}
.mid li a:hover{
background-color: white;
}
.right{
margin-top: 20px;
display: inline-block;
position: absolute;
right: 34px;
top:22px
border: 2px solid yellow;
}
.btn{
margin: 0px 9px;
border-radius: 10px;
padding: 10px 10px;
background-color: blanchedalmond;
cursor: pointer;
font-size: 15px;
}
Here I used the hover effect below. but the background color is not changing. I tried in multiple browser but it's not working.
.btn:hover{
background-color: rgb(31, 30, 30);
}
Then I tried the hover effect hiding the background image. The code is below.
*{
margin: 0px;
padding: 0px;
/* background-image: url(athletic-young-female-runner-jogger-stylish-sportswear-running-against-blank-wall-having-concentrated-focused-look-going-win-sprint-endurance-race.jpg);
background-size: 2000px 1000px ; */
background-repeat: no-repeat;
color: black
}
.btn{
margin: 0px 9px;
border-radius: 10px;
padding: 10px 10px;
background-color: blanchedalmond;
cursor: pointer;
font-size: 15px;
}
.btn:hover{
background-color: rgb(31, 30, 30);
}
This time it worked. The hover effect is working. The background color of the buttons are changed.
But, I want both the background image visible and the hover effect still work. Please help me out through this problem.
The problem is that the buttons (as well as all other elements) are being given a background image due to the CSS having * {....}.
Background images take precedence over background-color so even when you hover the background-image carries on being shown (well, only a tiny part of it as the buttons are small).
Change the * for body (if that's where you want the background-image to be).
While we are looking at the code, I believe your unordered list children should be li elements, not a elements so they should look like this:
<li>Home</li>
this reordering should also mean that the CSS for hovering on those elements should also now work.
I was going to work with some JSON to fill in content as an exercise, but while putting together my initial HTML I ran into an issue simply trying to have a couple links on either side of the page. I have a main-container div, and inside I have the two links, and another div, which I was going to put the JSON content.
This question has nothing to do with the JSON content to be clear, I just got stuck on the css of trying to position the two tags right. I've got height: 100% for the html, body, main-container, and second div. The closest I've got is floating the two tags to the left and right, then using an overflow: auto on the main-container, but the problem is that when you shrink the page, the a tags overflow the descendant div, and also, regardless of the size, there is a weird bar at the bottom of the page, with a scrollbar.
Here is the jsfiddle:
https://jsfiddle.net/g8qeko98/
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkboxes from JSON</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
</body>
</html>
Here are my styles:
html, body {
height: 90%;
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100%;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 2%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
First of all, you don't need that height of 90% on html and body. I don't see any weird bars on bottom but my guess is you're referring to the result of setting that height.
Second, you just need to set your values a little more carefully to prevent items from overlapping.
html,
body {
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100vh;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 20px 5%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 60px 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
https://jsfiddle.net/eqpbkozr/
I am trying to center an h1 tag, but it doesn't work when I set it's width. When I don't set a specific width it works, but I would like to keep the width at 400. My code is below.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul {
margin: 0;
color: white;
background-color: black;
overflow: hidden;
-webkit-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
}
a {
color: white;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background-color: black;
transition: 1s;
border: solid 1px transparent;
}
li:hover, li:hover a {
background-color: #3f3f3f;
}
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<strong><li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li></strong>
</ul>
</div>
<strong><h1 class="header-text">DARK</h1></strong>
</body>
</html>
I don't think the other elements are the problem, but hey, it's a possibility.
The h1-element is a block-element. This means that the width is 100% by default. By using text-align: center you only center the text inside the element, not the h1 itself.
When you set the width to 400px the text is still centered inside the block, but the element itself no longer has a full-width.
The solution would be to center the element as a whole. This can be done by setting the horizontal margin to auto.
This should work for you:
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
margin: 0 auto;
}
<h1 class="header-text">DARK</h1>
For more information about centering with CSS, check out this guide: https://css-tricks.com/centering-css-complete-guide/
If you're trying to center the entire element, you can use the auto value for the left and right margin on the header:
.header-text {
margin: 0 auto;
}
I made a fixed header div to my site and added a shadow under it but it doesn't fit my browser (100% width) ??
here is my css:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px -5px #000000;
position: fixed;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
Here is a screen capture:
You have a negative spread radius; for it to be full width you want this:
box-shadow: 0 10px 17px 0px #000000;
Demo:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
margin-right: auto;
margin-left: auto;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
The most waterproof solution: make your element longer (either with the width or padding property) than the viewport, and set negative margins (note: the margins are only really required to make this work with non-fixed elements). Your new #head css:
#head {
width: 110%;
margin: 0px -5%;
height: 60px;
top: 0;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
}
As other answers have mentioned: it is advised to set the border-radius spread property to a non-negative value. Or you could use separate box-shadows for each side.
Give the fixed element a position using left top ``right```
header{
position:absolute;
left:0px;
top:0px;
right:0px;
height:60px;
background-color:#00f;
box-shadow:0px 0px 17px #000;
}
Added a fiddle: https://jsfiddle.net/hpdymvqg/
The issue is beause you have a negative value for your box-shadow. Changing it to the following fixes the issue:
box-shadow: 0 10px 17px 0px #000000;
Tested here
I have created a div with two child elements.
a paragraph
a input with type text.
I have provided same height to both of them but on browser I am not getting same height for them.
my html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="./StyleSheet.css">
</head>
<body>
<div class="textWbutton">
<p>Enter Name</p>
<input type="text" placeholder="I am placeholder" />
</div>
</body>
</html>
MY CSS
html,body
{
font-size: 0px;
}
.textWbutton
{
}
.textWbutton input[type='text']
{
margin: 0px;
padding-left: 10px;
padding-right: 10px;
height: 30px;
display: inline;
border-radius: 0px 5px 5px 0px;
border: 1px solid Black;
}
.textWbutton p
{
font-size: 15px;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid Black;
}
Here if the fiddle for the same. http://jsfiddle.net/apoorvasahay01/mByYC/1/
Please let me know what could have gone wrong here.
That is because you have not made a reset of their custom attributes. Like <p> and <input> by default have some padding and margin and when you add a height, it populates accordingly.
Use display: inline-block instead of inline.
demo
Or use display: table-cell and add display: table-row to .textWbutton
demo
Use padding to fit it same as input.
.textWbutton p {
font-size: 15px;
margin: 0px;
height: 30px;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid black;
padding: 8px;
}
When you display a block element like p as inline it gets the height from the line-height attribute which you haven't set. To get what you intent you should rather display it as inline-block or set the line-height.
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ has a nice explanation.