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>
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'm creating a footer for my web document and I'm trying to achieve the following i drafted in word:
Home, Legal, Location and Contact are hyperlinks as seen in many website footers, and they are evenly spaced out vertically.
I'm having issue getting them to evenly space out in my html document. I tried using "margin-top" property but the Home hyperlink would then have uneven spacing at the top.
Would appreciate some help on this.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
}
<!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="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>
This would be totally even spacing implementation for your use-case :-
(Currently I had to make width and height to be 100% since you have an explicit border on them and it wouldn't look good but without border, you can just use height:100% and it should work the same )
Also you can use space-around as well for justify-content which will decrease the top and bottom margin for your links.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
width:100%;
height:100%;
align-items:center;
justify-content:space-evenly;
}
<!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="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>
I have an HTML page where I have a div called container, I'm trying to use bootstrap here. Inside the container, I have a div called row. When I try to apply a background color to the div the color is applied only to the div content and spans only the width and not the height. I'm trying to apply the background to the hellow world to cover the whole page.
Here is the code.
.container {
padding: 10px;
}
.row {
background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/homePage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"> Hello World! </div>
</div>
</body>
</html>
Try this:
1st: The html element has a default margin that you have to deal with every time you write a page.
2nd:You may not want use jsfiddle to test code when using bootstrap css (or any other library for that sake). As the JSFiddle code is run before the bootstrap code.
3rd: Try this:
body,html{
margin:0;
width:100%;
}
html{
background-color: gray;
}
.container {
padding: 1em;
max-width:750px;
min-height:100vh;
width:90%;
margin: auto;
box-sizing:border-box;
background-color:aquamarine;
}
.row {
margin:0;
padding-left:20px;
}
<html>
<body>
<div class="container">
<div class="row"> Hello World! </div>
<div class="row"> Hello , I am World! </div>
</div>
</body>
</html>
Just apply it to the body.
body{
background-color: red;
}
Maybe this is what you need.
.container {
margin-left:-20px;
padding-left:30px;
margin-right:-20px;
background-color: darkgray;
}
.row {
background-color: darkgray;
}
body{
background-color: red;
}
<div class="container">
<div class="row"> Hello World! </div>
</div>
You can make the container to cover from top to bottom and set the gaps that you need left and right:
.container {
position: absolute;
top: 0px;
left: 10px; /* Gap left */
right: 10px; /* Gap right */
bottom: 0px;
background-color: black;
}
May this one you need:
html,body {
padding: 0;
margin: 0;
background-color: red;
}
.row {
background-color: darkgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row"> Hello World! </div>
</div>
</body>
Seems nice to me:
html {
background-color: darkgray
}
.row {
background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/homePage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">Hello World! Here goes some content</div>
</div>
</body>
</html>
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}