Hello everyone I make some navbar just for practice, and what I want is to set the logo straight to the left but I does not know how to do that. Also navbar should be responsive.
Here is the code:
body {
font-family: Helvetica;
padding: 0;
margin: 0;
background-color: #f4f4f4;
font-size: 10px;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background: #28292b;
color: #ffffff;
min-height: 50px;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
margin-top: 5px;
}
header #branding h1 {
display: inline-block;
vertical-align: middle;
}
header nav {
display: flex;
justify-content: center;
margin-top: 20px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="branding">
<h1>LOGO</h1>
</div>
<nav>
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</nav>
</div>
</header>
When I resize to mobile phone width hamburger icon will appear and logo should be no more floated on the left. It should be on center.
I hope someone can help me. Thanks :)
Related
So for one of my school projects, we have to design a website using Html & CSS and I've encountered a problem where I don't know how to fit 2 logos (left & right) into the corners of my footer. I've tried to change the position, float, width etc and it doesn't seem to work, the logo always seems to not go in the place I want it to be. Sorry if this sounds amateur as I've only started doing Html & CSS a few weeks ago.
This is the current image where the logo is below my ul's and is in the incorrect position. -
This is what I want the footer to look like, it would be great to have the text on the left "Sponsored by HP omen gaming" to be a image as I may swap it out with another logo in the future. -
Thanks to anyone in advance who may be able to solve this problem for me, below would be my html & CSS code.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
<div class="footer">
<li>WBHS ESPORTS</li>
<ul>
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
<img src="hp-omen-logo.png" id="footer-right">
</div>
Try look into flexbox. Here's a quick template to do what you want.
.footer {
display: flex;
justify-content: space-between;
}
.center {
text-align: center;
}
<div class="footer">
<p>Left</p>
<div class="center">
<p>Some text</p>
<p>Your list</p>
</div>
<p>Right</p>
</div>
I think a solution can be the use of display:flex
And to be more clean try to use also the widgets, you can see in this example how it works.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
/*my-edit*/
#the-footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
height: auto;
margin: 0;
padding: 10px;
}
#the-footer .widget{
width: 30%;
}
#the-footer .widget.left{
text-align: left;
}
#the-footer .widget.right{
text-align: right;
}
#the-footer .widget.center{
text-align: center;
}
#the-footer .widget .title{
font-weight: bold;
letter-spacing: 2px;
}
#the-footer .widget .logo-link{
color:#fff;
display: inline-block;
text-decoration: none;
max-width:150px;
}
#the-footer .widget .logo-link:hover{
color:#000;
}
<div class="footer" id="the-footer">
<div class="widget left">
<a class="logo-link" href="#" target="_blank">Sponsored by HP omen gaming</a>
</div>
<div class="widget center">
<div class="title">WBHS ESPORTS</div>
<ul class="footer-nav">
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
</div>
<div class="widget right">
<a class="logo-link" href="#" target="_blank"><img class="logo-footer" src="https://via.placeholder.com/60" alt="logo"></a>
</div>
</div>
You can use the display: grid property so you can separate your footer into 3 parts
You can learn about the grid property here: https://www.w3schools.com/css/css_grid.asp
As far as I can tell my CSS is fine, but it just keeps appearing below the header. Any ideas? Sorry for the newb question.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
<header>
<div class "container">
<div id "branding">
<h1><span>Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
So did I go wrong in the HTML or the CSS, or both? I just can't for the life of me figure out why it's not going in the header, and it's literally driving me crazy.
This is because your header h1 element is display:block it will take the full width of its parent try adding this to your css code:
header h1
{
display:inline-block;
float:left
}
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 5 years ago.
Here is the HTML code (the white gap started appearing as soon as I added h3 to the last div):
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
I am fairly new to web development and stackoverflow. So I am sorry for any inconveniences. Any help is appreciated. Thank you.
Set margin: 0px; on h3 tag to resolve this issue. Check updated Snippet below..
body{
margin:0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container{
width: 80%;
margin : 0 auto;
}
header{
background: #343434;
}
header::after{
content: '';
display: table;
clear:both;
}
.logo{
float: left;
padding:10px;
}
nav{
float:right;
}
nav ul{
margin: 0;
padding: 0;
list-style-type: none;
}
nav li{
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a{
text-decoration: none;
color:white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover{
color:yellow;
}
.welcome{
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3{
text-align: center;
margin: 0px;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
Just remove the margin from h3 like
.welcome h3 {
text-align: center;
margin:0;
}
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin:0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
This is due to collapsing margins
Remove the margin on the h3. Replace it with padding if you want to create space between the header and maintain the background colour.
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin-top: 0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
You can try adding style="display: inline; margin:0px; padding:0px;" to your <h3> Tag.
Another way is to apply a rule of overflow: auto to the .welcome div... thus creating a new block formatting context and avoiding the collapsing margins.
Edit: Let's add a little more context. In the spec, you can read that adjoining margins will collapse under certain circumstances. In particular, the margins need to belong to block-level boxes participating in the same block formatting context.
Even though .welcome and h3 are block-level boxes in your example, neither automatically establishes a new block formatting context (meaning they participate in the same block formatting context, meaning their margins collapse). Looking at the spec again, we see that some of the ways to establish a new block formatting context is to have a float, an absolutely positioned element, or a block box with the property of overflow set to something else than visible.
That's why the suggestions regarding overflow: auto or floating one of the elements work. My understanding is that if we make .welcome establish a new block formatting context, the context it participates in is different from the one it establishes itself. Removing the margin (possibly replacing it with padding) is another way to get around the problem.
Either apply margin-top:0 for H3-Tag
or
apply a float:left for .welcome
Both will fix your issue
Question
I've looked over the code very carefully and can't see a reason at all whatsoever why the header nav float isn't working in the stylesheet. I'm including all the html code and css code down below. I want to move my
header nav to the right in my css code so that my links appear on the top right corner of my home page horizontally.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
You have two problems that become quite obvious if you look at the page in the browser inspector:
The first is that you have floated the branding div, and floating an element removes it from the regular flow and it isn't full width anymore, so the navigation that is inside is put below the heading.
You have mixed the opening and closing tags of <h1> and <span class="highlight"> and this caused that the block <h1> is being inside of the inline <span>, at least in Firefox.
Compare this screenshot of your example in the Firefox inspector:
With this other one of the adjusted code:
Remember, browser inspector is your friend.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
/*float: left;*/
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><h1><span class="highlight">James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I added class="nav" to the navigation unordered list and set position to absolute using a .nav selector.
.nav {
position:absolute;
top: 20px;
right:0px;
}
You can change the position by adjusting top and right values.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.nav {
position:absolute;
top: 20px;
right:0px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
}
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</h1></span>
<nav>
<ul class="nav">
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I think your #branding div being floated left is breaking it--and doesn't seem necessary since you want that left aligned anyway.
It works for me with:
#branding {
float: none
}
Also - in your html you need to move your floated .nav div before the .highlight span
My problem is that in mobile view which is 320px wide, everything looks okay, but when I start manually scaling up, the nav won't stay in center. It just stays on the left side of the screen, when the right side gets bigger. Title (h1) scales up normally. Navigation "buttons" should remain with the same width till break which is 768px wide.
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display: flex;
display: inline-block;
width: 280px;
margin-top: 5px;
text-align: center;
margin-left: -20px;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
see here : jsfiddle
you were using both display:flex and display:inline-block on li a . just use one display .
i suggest you don't use fixed width on the buttons, but instead use float:left with percentage
also you say that you want the buttons to remain the same width till 768px, but you set a width of width: 280px * 3 = 840px. so ofcourse the three buttons don't fit on 768px device width.
added also a media Q for below 768px
check also snippet
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
ul.main-nav {
padding:0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
float:left;
width: 32.66%;
margin-right:1%;
}
ul li:last-child { margin-right:0;}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display:block;
margin-top: 5px;
text-align: center;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.main-nav li { width:100%}
}
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
see here : jsfiddle
you were using both display:flex and display:inline-block on li a . just use one display .
i suggest you don't use fixed width on the buttons, but instead use float:left with percentage
also you say that you want the buttons to remain the same width till 768px, but you set a width of width: 280px * 3 = 840px. so ofcourse the three buttons don't fit on 768px device width.
added also a media Q for below 768px
check also snippet
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
ul.main-nav {
padding:0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
float:left;
width: 32.66%;
margin-right:1%;
}
ul li:last-child { margin-right:0;}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display:block;
margin-top: 5px;
text-align: center;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.main-nav li { width:100%;margin:0}
}
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>