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>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.
I cant seem to get the following result with the code below:
|red|-------|green|------------|
I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.
HTML:
<body>
<div class="red-color"></div>
<div class="green-color"></div>
</body>
CSS:
.red-color {
background-color: red;
padding: 100px;
display: inline-block;
}
.green-color {
background-color: green;
padding: 100px;
display: inline-block;
}
Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.
And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.
<!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>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
}
.green-color {
background-color: green;
width: 30%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.
<!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">`enter code here`
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
margin-right: 5%;
}
.green-color {
background-color: green;
width: 30%;
margin-left: 10%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
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.
any content that I add inside a overrides the css reset and adds a 1em margin on the right side on the website (the bottom bar doesn't show but if you click with the mouse wheel you can slide it to the side).
/*Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
width: 100vw;
}
p {
margin:0;
margin-block-end: 0;
margin-block-start: 0;
}
header{
background-color: blueviolet;
}
section.sec1{
display: block;
background-image: url('assets/bg1.avif');
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
section.sec2{
background-color: cornflowerblue;
}
section.sec3{
background-color: green;
}
section.sec4{
background-color: gold;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>html page</title>
</head>
<body>
<header>
<p>header</p>
</header>
<section class="sec1">
<p>sec1</p>
</section>
<section class="sec2">
<p>sec2</p>
</section>
<section class="sec3">
<p>sec3</p>
</section>
<section class="sec4">
<p>sec4</p>
</section>
</body>
</html>
How can i solve this issue? Thank you.
PS: the "bg1.avif" is 2158 x 1798px, but even without it you can see the problem.
You don't have to use width:100vw on html, body and section elements.
But if you want to, use 'width:100%;' instead of 'width:100vw;'
I have this code:
<pre><code>
<!-- some code -->
</code></pre>
and I'm center it with flexbox. But when the screen is small the code tag go outside the pre-tag. Here is my code:
pre {
width: 100%;
border: 1px solid black;
display: flex;
justify-content: center;
min-width: 100%;
box-sizing: border-box;
}
code {
display: inline-block;
}
https://codepen.io/jcubic/pen/zYEOovQ
How can I make the pre tag, to always be the same as code, not 100% max?
I've tried to use float: left on the flexbox element but I think that float is ignored when using flexbox.
This is probably a common problem, but I was not able to find the question on SO.
EDIT: I don't want text wrapping, I want my container to actually contain all the content that is inside.
Hey so you can use overflow auto, which adds an extra scroolbar and the text doesnt go outside: I have edited the codepen, but here's the code anyways:
<style>
pre {
width: 100%;
border: 1px solid black;
float: left;
justify-content: center;
min-width: 100%;
box-sizing: border-box;
overflow: auto;
}
code {
display: inline-block;
}
</style>
<pre><code>
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>To jest paragraf</p>
</body>
</html>
</code></pre>
You can use border-collapse: separate;
pre {
width=100%;
border: 1px solid black;
display: table;
border-collapse: separate;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<pre><code>
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>To jest paragraf</p>
</body>
</html>
</code></pre>
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!