I have a problem when displaying my web page I'm using CSS border and margin in my code, but the output in my browser is very awkward this is my code and this is the output :
div {
width: 300px;
background-color: #DDD ;
padding: 10px;
border: 10px solid red;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>Product title</h1>
<p>This is a paragraph</p>
</div>
</body>
</html>
The output of my code in the browser
It looks like you have a second div element after the first one.
It might also be Tag soup, you could try to validate your HTML and see if you have any errors or warnings.
div {
width: 300px;
background-color: #DDD ;
padding: 10px;
border: 10px solid red;
margin: 10px;
}
<div>
<h1>Product title</h1>
<p>This is a paragraph</p>
</div><div>
There is a possibility that you have 2 div tags after I see the results of your code. For my solution, you can create a card attribute as a product container like this:
.card {
width: 300px;
background-color: #DDD ;
padding: 10px;
border: 10px solid red;
margin: 10px;
}
<div class="card">
<h1>Product title</h1>
<p>This is a paragraph</p>
</div>
Have You tried to run it on anyother browsers as your code is seems fine there is no problem in it.
Related
I want to create my navbar something like this
Navbar
And this is what I have created one side div container but the curves are not perfect of my div and i need to make this for both sides for both side I will use flex box but my main focus is to create that same curves.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<style>
.left {
border-radius: 0px 5px 100px 0px / 100px 30px 100px 0px;
border: 0px solid #800000;
background-color: red;
padding: 10px;
height: 100px;
width: 500px;
}
</style>
<div class="left">
s
</div>
</body>
</html>
Thank you.
This should work here you go :)
The website you gave uses .svg images to create this curve effect.
And with display: flex; makes them inline.
<body>
<style>
* {
padding: 0;
margin: 0;
background: black;
}
.navbar {
display: flex;
}
</style>
<div class="navbar">
<div class="left">
<img src="https://techfest.org/2021/home/Navbar/Logo.svg">
</div>
<div class="right">
<img src="https://techfest.org/2021/home/Navbar/TN.svg">
</div>
</div>
</body>
This will need Javascript, search for burger navbar CSS design using Javascript on YouTube.
I am trying a simple border box here that does not seems to work for the height of my box
* {
box-sizing: border-box;
}
.div1 {
width: 500px;
height: 200px;
border: 5px solid #E18728;
float: left;
}
.div2 {
width: 90%;
height: 90%;
padding: 20%;
border: 4px solid black;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div1">
<p>This is the parent! </p>
<div class="div2">
<p>This is the child</p>
</div>
</div>
</body>
</html>
What seems to be the problem ? Width is okay, inside the box however height is not. Why ?
I am completely new to CSS and hope your answers will help me and others: I have found no solutions on the web.
Thank you from France
its your p tag as well as your padding:
* {
box-sizing: border-box;
}
.div1 {
width: 500px;
height: 200px;
border: 5px solid #E18728;
float: left;
}
.div2 {
width: 90%;
height: 90%;
border: 4px solid black;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
The problem is on the padding of the second div...
As stated here: MDN Web Docs - Padding
if you put the padding as a percentage (20%) then it refers to the width of the containing block. So, in your code, the padding you are applying a padding of 200*20/100 = 100px and that's forcing your div2 to grow to accomodate the paragraph inside.
Remove the padding or express it in absolute units and you're done!
so I have a header and three spans inside of it home, search and logout what if I want to make the "home" button sticked to the left border and to make "search" beside the "home" with just a 5px margin and "logout" sticked to the right border and this is the code I have rn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<span class="first"> home </span>
<span class="second"> search </span>
<span class="third"> logout </span>
</header>
</body>
</html>
css:
body {
margin: 0;
}
header {
border: 5px solid green;
margin: 0;
display: flex;
}
span {
margin: 10px;
}
Without altering the HTML, you can use the margin-left: auto setting on the element you want to place to the right, keeping the flex setting as it currently is.
You will want to set margins to what you require as I'm not absolutely sure what you want.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body {
margin: 0;
}
header {
border: 5px solid green;
margin: 0;
display: flex;
}
.second {
margin-left: 5px;
}
.third {
margin-left: auto;
}
</style>
</head>
<body>
<header class="main">
<span class="first">
Home
</span>
<span class="second">
Search
</span>
<span class="third">
Logout
</span>
</header>
</body>
</html>
It does show background color and top div tag but background image is not visible up. I'm pretty new at html and css so kindly explain a little too.
here is my html and css code
body {
background-image: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
html{
}
body{
background: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
.top{
background-color: Black;
overflow: hidden;
color: White;
border: solid 5px Black;
border-radius: 0 0 25px 25px;
padding: 0 25px 0 25px
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
You can try using
background-size: cover;
which will stretch the image to cover the page, but since the resolution of the gif is rather different than the screens, it will look kinda weird.
Also, the no-repeat is the reason, it doesnt show at all. Without it, it will show, but several times next to each other.
So i have been trying to remove the space between my div elements and iframe to no success for an hour. Any help will be greatly appreciated. This is what I have done so far.
css:
h1 {
text-align: center;
color: white;
}
.d1 {
border-style: none;
background-color: blue;
}
iframe {
width: 50%;
height: 50%;
display: block;
margin: 0;
}
Here is my html: I am trying to to remove the white space between the the 2 divs elements on the top and bottom.
<!DOCTYPE html>
<!-- By Christian Soto -->
<html>
<head>
<meta charset="UTF-8">
<title>Event Driven JS</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="d1">
<h1>Using JavaScript to Change the HTML</h1>
</div>
<iframe id="section">
<!-- Will be loading different html pages into here -->
</iframe>
<div class="d1">
<h1>Christian Soto</h1>
</div>
</body>
</html>
You need to remove the default margin from the <h1> tag,
all HTML headings have a default margin style.
h1{
text-align: center;
color: white;
margin: 0;
}