I recently started developing my own website and I require some help from people who are more advanced in CSS and HTML. I am struggling with navbar alignment. I want my middle part as in "beginning" "about me" and "statistics" to be exactly in the middle. "Objectives" and "contact" to the right, logo to the left. Main problem is that I can't figure out how to perfectly align everything so the distance between left and right remains the same, as well as the middle part of the navbar. And yes, I am trying to make the website responsive so it looks good on every device. My end goal is to make an awesome portfolio site that also showcases my skill a little. I also haven't used bootstrap but I included it in my code. Sorry for a long text, I am very new to this so it's hard for me to describe the problem. My code is also very messy so if anyone has time to correct/give feedback, I would really really appreciate that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Live like legends</title>
<link rel="stylesheet" href="./css/style.css">
<script src="javakood.js"></script>
</head>
<body>
<nav class="navbar">
<!-- <input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars"></i>
</label>
-->
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<ul class="menu">
<li>Beginning</li>
<li>About me</li>
<li>Statistics</li>
</ul>
<ul class="menu2">
<li>Objectives</li>
<li><a class="special" href="#">Contact</a></li>
</ul>
</nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
<section class="home">
<div class="rida">
<div class="tekstall">
<h1>Tere tulemast minu lehele!</h1>
<p>siia tuleb veel midagi lahedat veel ei tea</p>
</div>
<div class="piltnext">
<img src="./12345.jpg" width="500" height="300">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<section class="about">
<div class="tekstabout">
<h1><mark>Veidi</mark> minust</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background: #cbcca3;
position: fixed;
width: 100%;
padding: 15px 0;
display: flex;
}
.home{
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
float: left;
line-height: 70px;
margin-left: 30px;
margin-right: 20px;
}
.menu{
text-align: center;
padding: 0;
margin: 0;
justify-content: space-between;
}
.menu2{
padding: 0;
margin: 0px 30px 0px 0px;
list-style-type: none;
text-align: center;
}
.navbar .menu li{
display: inline-block;
list-style-type: none;
margin: 0px 20px 0px 20px;
}
.navbar .menu li a{
font-size: 17px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.navbar .menu2 li{
display: inline-block;
margin: 0px 20px 0px 20px;
}
.navbar .menu2 li a{
font-size: 17px;
text-transform: uppercase;
line-height: 70px;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
a.special,a:hover{
background-color: paleturquoise;
transition: .5s;
}
p{
color: floralwhite;
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
.tekstall{
flex-basis: auto;
min-width: 300px;
margin-left: 20px;
padding-left: 30px;
}
.piltnext{
max-width: 100%;
padding: 20px;
height: auto;
margin-top: 0px;
}
Currently I'm working in laptop so my screen isn't big. But, I made some adjustments to your code and I think it's what you want.
You just need to define the width values for everything and make sure it all works in mobile to.
Regards
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background: #cbcca3;
position: fixed;
width: 100%;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.home {
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
line-height: 70px;
margin-left: 30px;
margin-right: 20px;
max-width: 20px;
}
.menu {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
}
.menu a {
margin: 0 5px;
font-size: 17px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
}
.menu2 a {
margin: 0 5px;
font-size: 17px;
text-transform: uppercase;
line-height: 70px;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
}
a.special,a:hover{
background-color: paleturquoise;
transition: .5s;
}
p{
color: floralwhite;
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
<nav class="navbar">
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<div class="menu">
<div>Beginning</div>
<div>About me</div>
<div>Statistics</div>
</div>
<div class="menu2">
<div>Objectives</div>
<div><a class="special" href="#">Contact</a></div>
</div>
</nav>
Welcome to stackoverflow. Your css needs some tweaking. try this (note vertical-align and line-height):
.navbar .menu li a{
font-size: 17px;
line-height: 56px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
vertical-align: middle;
}
I am not entirely clear what you asking for but to create a truly centered Navbar, with variable-length left and right-aligned items, CSS Flexbox can be used. My Codepen implementation (of the original idea from Keep the middle item centered when side items have different widths) could be modified for a Navbar: https://codepen.io/sam-miller-the-flexboxer/pen/OJQoGGq?editors=1100
The centerline class and div add a central divider to check the alignment of the center div in this example.
CSS:
.centerline {
position: fixed;
top: 0;
left: 50%;
width: 10px;
height: 100%;
background: black;
transform: translateX(-50%);
opacity: 0.5;
z-index: 1
}
.parent {
display: flex;
}
.left,
.right {
background-color: red;
flex: 1 1 0%;
overflow: auto;
}
.right {
text-align: right;
}
.center {
background-color: green;
}
Html:
<div class="centerline"></div>
<div class="parent">
<div class="left">
short text.
</div>
<div class="center">
I'm in the center.
</div>
<div class="right">
Very loooooooong text.
</div>
</div>
For more ideas regarding Bootstrap see:
https://github.com/twbs/bootstrap/discussions/36486
https://github.com/twbs/bootstrap/pull/36523/commits/fca49e8ee6b4d768d0ec144fb3b73ac2c5ff3cc0
Bootstrap Navbar 4 code examples (some of the classes would have to be updated for Boostrap 5):
https://codepen.io/yesiamrocks/pen/MVOWXZ
Related
I have put the image inside of the paragraph tag itself and floated it right, however it moves it to the right but underlaps the container edge.
I have taken it out of the paragraph section as well and it still does the same. I have created containers as well for them. I want the image in the container with the paragraph. I have attached an image of the issue I am having as well as my css.
body {
background-image: url(../images/keyboard.jpeg);
background-repeat: no-repeat;
background-size: cover;
font-family: cursive;
}
/* GOOGLE FONTS*/
#import url('https://fonts.googleapis.com/css2?family=Cookie&family=Fuzzy+Bubbles&family=Jost:wght#700&display=swap');
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Cookie';
font-weight: 700;
}
/*ID Classes*/
#mainTitle {
color: #FFF;
font-size: 5em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
#container {
border: 10px solid #FFF;
margin: auto;
margin-top: 10px;
padding: auto;
width: 50%;
}
#footer {
color: #FFF;
text-align: center;
border: 2px;
border-style: solid;
}
/* REUSABLE CLASSES*/
.navbar {
background-color: #0a861d;
border-radius: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
list-style: none;
margin: 13px 20px;
text-align: center;
}
.navbar ul {
overflow: auto;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: white;
}
.search {
float: right;
color: white;
padding: 12px 75px;
}
.navbar input {
border: 2px solid black;
border-radius: 14px;
padding: 3px 17px;
width: 129px;
}
/*SERVICES PAGE LIST*/
.servicelist ul {
line-height: 1.5em;
margin: 5px 0 15px;
padding: 0;
}
.servicelist li {
font-size: 50px;
font-weight: 500;
background-image: linear-gradient(to left, rgba(60, 154, 118, 0.91), #15c723);
color: transparent;
text-align: center;
background-clip: text;
-webkit-background-clip: text;
}
.center {
text-align: center;
}
.margin {
margin-top: 10px;
}
.scontainer {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
color: #ccc;
text-align: center;
height: 50%;
font-size: 50vmin;
font-family: helvetica;
}
/* SINGLE CLASSES*/
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}
h2 {
color: #FFF;
font-size: 2em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
p {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.service_styling {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.imgcontainer {
width: auto;
height: auto;
border: 2px solid red;
float: inline-end;
}
.realImgContainer {
width: auto;
height: auto;
border: 2px solid red;
float: right;
}
img {
/* max-width: 50%; */
/* max-height: 50%; */
/* border: 5px solid #FFF; */
/* margin: auto; */
/* margin-top: 10px; */
/* padding: auto; */
/* width: 50%; */
}
/*
.imgHardware{
float: right;
}
.imgSoftware{
float: right;
}
.imgApp{
float: right;
}
.imgCabling{
float: right;
}
*/
<!-- NAV BAR-->
<nav class="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>Locations</li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
</ul>
</nav>
<h1 id="mainTitle"> Services</h1>
<!-- MAIN SECTION-->
<section id="container">
<h2> Things We Do </h2>
<div class="servicelist margin">
<h2>Hardware</h2>
<div class="service_styling">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div><img class="realImgContainer" src="images/cpusocket.jpeg" alt="computer socket"></div>
</span>
</div>
<div style="clear:both"></div>
<h2>Software</h2>
<p> We provide the latest software for all kinds of fields. We work directly with vendors to get the best rate - we provide competitive rates and offer affordable and simple subscription solutions - we also carry full version software that is subscription-free.
<img class="imgSoftware" src="images/code.jpeg" alt="computer code"></p>
<h2>Application development</h2>
<p> We can create and deploy custom software for whatever task you need completed. Our seasoned developers specialize in C, C++ and Java. Allowing us to create versailte and flexible software. Our team will with work with you hand in hand to ensure you
get exactly what you need. We will also provide 24/7 maintenance as well as upgrades on all of our in house software.
<img class="imgApp" src="images/codedeveloper.jpeg" alt="someone coding"></p>
<h2>Enterprise cabling</h2>
<p> We have over 30 years of infrastructure cabling experience. We have in house techncians who can terminate and pull ethernet and fiber optic cabling. We use our own equipment and do all of our work in house - without the use of a third party. So we
can give you a fair price as well as a clean and concise debriefing of the exact work we will be doing and its core benefits.
<img class="imgCabling" src="images/switchandcable.jpeg" alt="switch and cable">
</p>
</ul>
</section>
<!-- SUB SECTION-->
<section>
</section>
<!-- FOOTER-->
<div id="footer">© 2050</div>
Long story short: Is it possible to make the hover effect appear inside the animation box without going out of border? Right now it's because of the .menu li having a display: flex. Without it, animation breaks. I am pretty sure I'm doing something wrong but I haven't been able to figure it out. I'm a newbie so any help is appreciated. Code attached. Thanks in advance!
I have this --->>>
Looking to get this without breaking the animation ---->>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Live like legends</title>
<link rel="stylesheet" href="./css/style.css">
<script src="javakood.js"></script>
</head>
<body>
<nav class="navbar">
<input type="checkbox" id="check">
<label for="check" class="menubtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<ul class="menu">
<li>Beginning</li>
<li>About me</li>
<li>Statistics</li>
</ul>
<ul class="menu2">
<li><a class="speciall" href="#">Objectives</a></li> <! -- this is not a class typo, they need to be separated -->
<li><a class="special" href="#">Contact</a></li>
</ul>
</nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
<section class="home">
<div class="rida">
<div class="tekstall">
<h1>Tere tulemast minu lehele!</h1>
<p>siia tuleb veel midagi lahedat veel ei tea</p>
</div>
<div class="piltnext">
<img src="./12345.jpg" width="500" height="300">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<section class="about">
<div class="tekstabout">
<h1><mark>Veidi</mark> minust</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background: #cbcca3;
position: fixed;
width: 100%;
padding: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
margin-bottom: 0;
}
.home{
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
float: left;
line-height: 70px;
margin-left: 30px;
margin-right: 50px;
}
.menu{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
margin-right: 30px;
}
.menu li:after,
.menu li:before {
content: "";
position: absolute;
display: block;
border: 0px solid transparent;
}
.menu li:after {
width: 0%;
height: 80%;
border-top: 2px solid #8a2be2;
border-bottom: 2px solid #8a2be2;
transition: all 0.6s ease;
}
.menu li:before {
width: 120%;
height: 0%;
border-left: 2px solid #8a2be2;
border-right: 2px solid #8a2be2;
transition: all 0.5s ease;
}
.menu li:hover::before {
height: 75%;
}
.menu li:hover::after {
width: 110%;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu2 {text-align: right;}
.menu a {
margin: 0 5px;
font-size: 20px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.menu2 a {
margin: 0 5px;
font-size: 20px;
text-transform: uppercase;
line-height: 70px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
letter-spacing: 2px;
}
a.special,a:hover{
background-color: ghostwhite;
transition: .5s;
}
p{
color: floralwhite;
}
.menubtn {
color: blueviolet;
font-size: 25px;
float: right;
display: none;
cursor: pointer;
}
#check{
display: none;
}
#media (max-width: 933px){
.menubtn{
display: block;
}
.menu li, .menu2 li{
position: fixed;
width: auto;
height: auto;
background: white;
text-align: center;
top: 70px;
left: 0;
}
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
.tekstall{
flex-basis: auto;
min-width: 300px;
margin-left: 20px;
padding-left: 30px;
}
.piltnext{
max-width: 100%;
padding: 20px;
height: auto;
margin-top: 0px;
}
I'm really struggling here trying to figure out what is going on. I have an HTML with a header, a sidebar, and a central content page.
The sidebar and central content are in the same div, which also acts as their clearfix. I floated the sidebar to the left and the content to the right, but instead of aligning themselves to each other neatly, the content div falls down.
HTML
<body>
<header>
<img src="./img/Logo_Color.png" alt="Logo">
<h1>Batch Documentation</h1>
</header>
<div class="clearfix">
<div class="sidebar">
<nav>
<ul>
<li>Overview</li>
<li>Fl Overview</li>
<li>PF2 Overview</li>
<li>Inputs</li>
<li>Outputs</li>
<li>Appendix A</li>
<li>Appendix B</li>
</ul>
</nav>
</div>
<main>
<div class="centerContent">
<h2>Overview</h2>
<p>
Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem. Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt.
Saepe non, Fervore 2000 galliae nibh eu ea ut:
</p>
<code>Hello</code>
</div>
</main>
</div>
</body>
CSS
* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
width: 1265px;
background-color: #eae0ff;
}
main {
display: inline-block
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
margin: 5px 0px 10px 10px;
padding-right: 20px;
float: left;
background-color: #ccccff;
}
.centerContent {
width: 75%;
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
float: right;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
width: 90%;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}
I am especially concerned because the box sizing is set to border box, and the display is inline block. The sidebar has 25% width whereas the main content has 75%, yet it seems that the margins and padding are being added to their dimensions rather than being included in the % calculation.
I Dont know why you using floats now, i attached a same with small flexbox layout. hope it helps.
* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
background-color: #eae0ff;
}
main {
display: inline-block
}
.clearfix{
display:flex;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
margin: 0px 0px 10px 10px;
padding-right: 20px;
background-color: #ccccff;
flex: 0 0 auto;
}
.centerContent {
width: 75%;
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
width: 90%;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}
<body>
<header>
<img src="./img/Logo_Color.png" alt="Logo">
<h1>Batch Documentation</h1>
</header>
<div class="clearfix">
<div class="sidebar">
<nav>
<ul>
<li>Overview</li>
<li>Fl Overview</li>
<li>PF2 Overview</li>
<li>Inputs</li>
<li>Outputs</li>
<li>Appendix A</li>
<li>Appendix B</li>
</ul>
</nav>
</div>
<main>
<div class="centerContent">
<h2>Overview</h2>
<p>
Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem. Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt. Saepe non, Fervore 2000 galliae nibh eu ea ut:
</p>
<code>Hello</code>
</div>
</main>
</div>
</body>
Better to use flex layout, it is going to be responsive and never creates problems.
CSS:
* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
width: 96vw;
background-color: #eae0ff;
}
main {
width: 70%;
margin: auto;
}
.clearfix {
display: flex;
justify-content: space-between;
flex-direction: row;
margin: 0 20px;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
background-color: #ccccff;
}
.centerContent {
border: 3px solid #73ad21;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}
I think you have just started learning HTML , CSS.
So whenever you give margins and padding (especially left and right) count each pixels else you'll face such problems like you are facing now.
In future you will learn grid and flexbox in css.
When you use both (grid & flexbox) then I bet you will never use float property.
As you are beginner, you can easily understand my solution -
So in your css you have to remove -
main{
display:inline-block;
}
and add this -
.centerContent {
display: inline-block;
width: 70%; // play by changing the width.
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
float: right; // float : left; will also work
}
The margin are not included in the width for the box-sizing: border-box butpaddings and borders are included.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
So the margin remains external to side bar and the second content is moving down. You can remove margin to move the content back.
I am trying to create a fixed nav. For the most part, it works. But I want to center the h1 for responsive design. I could just push it away from the burger menu but then it wouldn't be responsive and bang in the middle.
Also I would like to push the .intro paragraph down away from the top. But every time I do a margin gap appears at the top, and I can't for the life of me remember how to get rid of this.
Thank you to anyone who takes a look. Means a lot! Hopefully one day I can repay the favor!
Below is my HTML and CSS. I also used a standard normalize.css, and some Js but I don't think you will need that. If you do, let me know:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Code Review</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
</head>
<body>
<header>
<!-- Introduction -->
<div class="background">
<nav class="navbar">
<span class="open-slide" onclick="openSideMenu()">
<!-- <a href="#" onclick="openSideMenu()">-->
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="4"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="4"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="4"/>
</svg>
<!-- </a>-->
</span>
<div id="main">
<h1>Luke Bennett</h1>
</div>
<!--
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
-->
</nav>
<!-- Side Navigation Bar -->
<div id="side-menu" class="side-nav">
<span class="btn-close exit" onclick="closeSideMenu()">×</span>
Home
<a onclick="closeSideMenu()" href="#about">About</a>
<a onclick="closeSideMenu()" href="#portfolio-link">Portfolio</a>
<a onclick="closeSideMenu()" href="#resume-link">Resume</a>
<a onclick="closeSideMenu()" href="#contact">Contact</a>
</div>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</header>
<main>
<!-- About Me -->
<div class="about-me"><a id="about"></a>
<h2>About Me</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<!-- Portfolio -->
<div class="portfolio"><a id="portfolio-link"></a>
<h2>Portfolio</h2>
<!-- Front Page -->
<img src="img/well-being/well-being.png" alt="Donjas-Well-Being-For-Kids"/>
</div>
<!-- Resume -->
<div class="resume">
Download Resume
</div>
<!-- Contact Form -->
<div class="contact-form"><a id="contact"></a>
<form>
<fieldset>
<legend>Contact Form</legend>
<ul>
<li>
<label for="name">Name</label>
<input required type="text" id="name" name="full_name" placeholder="Required">
</li>
<li>
<label for="email">Email</label>
<input required type="text" id="email" name="email_address" placeholder="Required">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" name="other_topics"></textarea>
</li>
<button type="submit">Hello!</button>
</ul>
</fieldset>
</form>
</div>
</main>
<footer>
<p>My name is Luke Bennett and I am a Human - Luke Bennett</p>
</footer>
<script src="javascript/menu.js"></script>
*,
input,
textarea,
button {
font-family: 'Lato', sans-serif;
}
h1 {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 3px;
}
h2 {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 2px;
}
p {
letter-spacing: 1px;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
/************************************************************
HEADER
*************************************************************/
.navbar {
display: flex;
position: fixed;
overflow: hidden;
height: 40px;
padding: 16px 16px;
align-items: center;
}
#main {
margin: 0 auto;
}
#main a {
color: black;
}
.background {
background: linear-gradient(0deg, #fff, transparent 40%),
#333333 url('../img/sophie.jpg') no-repeat center;
background-size: cover;
padding-bottom: 50%;
margin-bottom: 30px;
}
.intro {
background: white;
opacity: 0.65;
line-height: 40px;
letter-spacing: 4px;
padding: 20px;
margin: 0 15% 15%;
}
/************************************************************
SIDE NAV
*************************************************************/
svg {
padding-top: 3px;
transition: 1s;
/*
border: 1px solid black;
border-radius: 50%;
*/
}
svg:hover {
opacity: 0.3;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #333333;
opacity: 0.9;
overflow-x: hidden;
text-align: center;
transition: 0.5s;
padding-top: 90px;
}
.side-nav a,
.btn-close {
display: block;
font-weight: 400;
color: white;
padding: 15px;
transition: 1s;
}
.side-nav a:hover,
.btn-close:hover {
background: white;
color: black;
font-weight: 400;
cursor: pointer;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
/************************************************************
MAIN
*************************************************************/
main {
margin-bottom: 0
}
.about-me {
margin-bottom: 40px;
}
.about-me h2 {
margin-bottom: 30px;
}
.about-me h2,
.about-me p {
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.about-me p {
font-weight: 300;
margin-bottom: 0px;
}
/************************************************************
PORTFOLIO
*************************************************************/
.portfolio {
background: #DCEAF5;
text-align: center;
padding: 20px 20px 50px;
}
.portfolio h2 {
color: black;
margin-bottom: 40px;
}
.portfolio img {
width: 80%;
padding: 3px;
transition: 1s;
margin-bottom: 10px;
border: 2px solid grey;
}
.portfolio img:hover {
opacity: 0.6;
}
/************************************************************
RESUME
*************************************************************/
/* #DCEAF5 #659EB8 */
.resume {
display: flex;
background: #969DA3;
padding: 10%;
}
.resume a {
display: block;
background: #DCEAF5;
color: black;
font-size: 1.2rem;
text-align: center;
margin: auto;
padding: 7%;
border-radius: 5px;
transition: 0.5s;
}
.resume a:hover {
opacity: 0.6;
}
/************************************************************
CONTACT
*************************************************************/
.contact-form {
background: #cc8c33;
height: 500px;
padding: 20% 10%;
}
fieldset {
border: 0;
}
legend {
font-size: 1.5rem;
font-weight: 400;
text-align: center;
color: white;
}
label {
display: block;
color: white;
margin-bottom: 10px;
}
input,
textarea {
box-sizing: border-box;
border-radius: 5px;
padding: 10px;
}
input:focus,
textarea:focus {
border: 2px solid #969DA3;
outline: none;
}
input {
border-style: none;
width: 100%;
border: 2px solid #cc8c33;
margin-bottom: 10px;
transition: 0.5s;
}
::placeholder {
text-align: right;
font-style: italic;
font-size: 0.7rem;
padding-right: 1px;
}
/* Textarea styling */
textarea {
height: 110px;
resize: none;
width: 100%;
margin-bottom: 30px;
border: 2px solid #cc8c33;
}
/* Button styling */
button {
border: none;
background: lightblue;
color: white;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 1px;
width: 100%;
border-radius: 5px;
padding: 20px;
transition: 0.5s;
}
button:hover {
background: #DCEAF5;
color: black;
}
/************************************************************
SOCIAL
*************************************************************/
footer {
background: lightblue;
height: 500px;
}
I'm making a page layout and I can't apply styles only to the footer for some reason, I've reviewed the code and did find anything wrong (But i'm sure there bc its not working -_-) I've tried rewriting the code and still not working.
//*GENERAL*//
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
border: 1px solid black;
}
.logo img {
width: 100px;
margin: 50px auto 10px;
display: block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
//*NAVIGATION*//
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
padding: 10px;
text-align: center;
margin: 5px;
}
nav ul li a {
color: black;
}
//*HERO*//
.wrap {
height: 400px;
padding: 1px
}
.head-content {
height: 505px;
background: url(../img/hero.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 40% 50%;
padding: 10px;
text-align: center;
}
.head-content h1, a {
color: white;
}
.head-content h1 {
margin-top: 130px;
font-size: 3em;
}
.head-content .btn {
padding: 15px 20px;
margin: 10px auto;
background: #FF0080;
border-radius: 3px;
display: inline-block;
border-radius: 5px;
}
.btn:hover {
color: #FF0080;
background: white;
font-weight: bold;
transition: .25s;
}
//*LEARN MORE*//
.wrap-services {
height: 1400px;
padding: 1px;
margin: 1px;
}
.headline {
color: rgba(0,0,0, .8);
text-align: center;
padding: 10px;
height: 100px;
margin: 70px 0 0 0;
}
.headline h2 {
font-size: 1.5em;
padding: 0;
margin: 0;
}
.headline h3 {
color: rgba(0,0,0, .4);
font-weight: lighter;
font-size: 1em;
}
.ser-1,
.ser-2,
.ser-3 {
height: 400px;
padding: 10px;
margin: 0 2.5%;
text-align: center;
/*border: 1px solid black;*/
}
.ser-1 h3,
.ser-2 h3,
.ser-3 h3 {
border-bottom: 2px solid #FF0080;
padding: 10px;
margin: 5px 5px 30px;
font-size: 1em;
}
.ser-1 p,
.ser-2 p,
.ser-3 p {
color: rgba(0,0,0, .5);
font-size: .9em;
line-height: 2em;
}
//*REVIEWS*//
.wrap-review {
height: 770px;
}
.content-review {
text-align: center;
height: 770px;
background: #FF0080;
color: white;
padding: 1px;
}
.content-review h3 {
margin-top: 80px;
font-size: 1.7em;
}
.review {
background: white;
color: #FF0080;
margin: 20px 2.5%;
border-radius: 2px;
height: 200px;
display: block;
}
.review-content {
text-align: center;
padding: 40px 20px 20px;
}
.review-name {
font-style: italic;
font-weight: bold;
}
.review-name-img {
display: none;
}
//*FORM*//
.wrap-form {
height: 770px;
padding: 1px;
}
.wrap-form-contect {
text-align: center;
height: 770px;
padding: 1px;
margin: 70px 10px 10px;
border: 5px solid black;
}
.wrap-form-contect p {
text-transform: capitalize;
line-height: 1.5em;
font-size: .95em;
}
input,
textarea {
border: none;
background: #eee;
margin: 10px;
padding: 20px;
}
textarea {
padding: 30px;
}
button {
display: block;
margin: 10px auto;
background: #FF0080;
color: white;
border: none;
padding: 20px;
width: 75%;
font: bold 1.4em/1 sans-serif;
}
button:hover {
cursor: pointer;
background: yellow;
color: black;
transition: .5s;
}
//*FOOTER*//
footer {
background: black;
height: 500px;
margin: 500px;
padding: 500px;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>FSA Doc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/nor.css">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/black.png" alt="FSA Doc.">
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>REVIEWS</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<div class="head-content">
<h1>FSA Doc.</h1>
<a class="bth" href="#">CALL (866) 210-1337</a>
<a class="bth" href="#">LEARN MORE</a>
</div>
<div class="headline">
<h2>LEARN MORE</h2>
<h3>about how we help</h3>
</div>
<div class="ser-1">
<h3>SATISFACTION GUARANTEED</h3>
<p>Document Prep Express has a stellar success rate and we strive to provide services will get you the best results possible!</p>
</div>
<div class="ser-2">
<h3>NO UPFRONT FEES</h3>
<p>Period.</p>
</div>
<div class="ser-3">
<h3>WE’RE HERE TO HELP</h3>
<p>Confused? Don’t know where to turn? Our experts will answer all your questions.</p>
</div>
<div class="review">
<h3 class="head-review">what people say</h3>
<div class="review-contienr">
<p class="review">“FSA Doc. saved me from losing my car and apartment! I could not thank Document Prep Express enough.”</p>
<h3 class="reivew-name">Lindsay Anderson</h3>
</div>
<div class="review-contienr">
<p class="review">“Experts in their field! They told me everything to look out for and acted quickly”</p>
<h3 class="reivew-name">Ashley Guthrie</h3>
</div>
</div>
<div class="wrap-form">
<h3>get started</h3>
<p>let us know what can we do for you</p>
<form>
<input value="Your Name" type="text">
<input value="Email" type="text">
<textarea>Your Message</textarea>
<button type="submit">Send</button>
</form>
</div>
<footer>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</footer>
</body>
</html>
Remove the double back slashes from your css comments. Proper css comment syntax looks like this:
/* comment */