I am trying to center my H1 and nav by using text-align: center; although when I do this my nav is not reaching the center and is not under my h1 as I want it to be. Currently my nav does not reach under my H1 and is too far to the left, what do I need to add to my nav to be able to center it correctly under my H1.
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #ededed;
font-family: sans-serif;
}
.main-h1 {
font-weight: 900;
text-align: center;
font-size: 70px;
padding-top: 20px;
}
.mobile-nav>ul {
list-style: none;
text-align: center;
}
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
}
.mobile-nav>ul>li>a {
text-decoration: none;
color: black;
font-weight: lighter;
}
.mobile-nav>ul>li>a:hover {
opacity: .5;
transition: .3s;
}
<h1 class="main-h1">Main</h1>
<nav class="mobile-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
problem is that your h1 and nav are correctly centred in the page.
Your design are not, so if you want the same result as your design, you gonna need to add a margin, for example :
.mobile-nav>ul>li:first-child {
margin-left: 22px;
}
but i don't really recommend it
I recommend you to set width for the li elements
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
**width: 100px;**
}
so text-align: center is inherited from ul
here is the code
http://plnkr.co/edit/88Dy8v9AzB5uMSpiiVfR?p=preview
Related
I am a beginner, and I am trying to get this to work.
How do I position the link to the right side of the connect text?
I want the text links to be inline but to the right.
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 100px;
margin-right: 100px;
height: 700px;
}
.footer-text {
padding: 200px 100px;
font-family: "Khula", sans-serif;
font-size: 80px;
color: #222222;
}
.footer-contact {
font-family: "Khula", sans-serif;
font-size: 35px;
color: #222222;
letter-spacing: -1px;
text-decoration: none;
padding: 100px 60px;
}
ul {
list-style-type: none;
text-decoration: none;
}
<div class="footer-text">Contact</div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>Instagram</li>
</ul>
You can add this to the .footer-text:
display:flex;
justify-content: right;
Note that this will apply to all childs of the .footer-text div.
Please update this two class properties as like the following code:
.footer-text {
padding: 200px 100px;
font-family: "Khula", sans-serif;
font-size: 80px;
color: #222222;
display: inline-block;
}
ul {
list-style-type: none;
text-decoration: none;
display: inline-block;
}
This can be solved easily by using a wrapper div. like so,
.wrapper {
overflow: auto;
}
.footer-text {
float: left;
}
.ul {
float: right;
}
<div class="wrapper">
<div class="footer-text">Contact</div>
<ul class="ul">
<li>Email</li>
<li>LinkedIn</li>
<li>Instagram</li>
</ul>
</div>
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 :)
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
I've tried adding a nav bar, but as soon as I add the nav bar it instantly moves my H1 element over to the right, or left, depending on where I place my nav bar in the DOM tree. If I add padding to the H1 to fix the centring issue, it then breaks all my responsive design as the browser get's smaller. Surely their's a fix?
<body>
<div id="menu">
<div id="name">
<h2 class="myname">Lee Howard</h2>
</div>
</div>
<header id="header">
<nav class="main-nav">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
<h1 class="title">Front end developer.
<br>
<span>WORKING HARD TO BECOME GREAT</span>
</h1>
</header>
#header {
display: table;
top: 0;
left: 0;
height: 960px;
width: 100%;
background: url(../img/header.jpg)
no-repeat center;
background-size: cover;
box-shadow: 0px 5px 0px 0px;
}
#header h1 {
font-family: 'Raleway', sans-serif, font-weight: 400;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 700;
line-height: 0.8em;
font-size: 4.25em;
}
#header h1 span {
font-family: 'Raleway', sans-serif;
font-weight: 800;
color: #363636;
font-size: 0.30em;
}
#name {
position: absolute;
text-align: center;
margin-right: -80px;
right: 51%;
}
/****************************
NAVIGATION
******************************/
.main-nav {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav ul {
margin: 0;
}
.main-nav li {
float: left;
padding: 0 20px;
}
That's happening because your header has
display:table
and h1 has
display:table-cell
You have position:absolute on your #name that removes the width of the element as well.
I've made a few amends and if works here.
https://jsfiddle.net/t3s2ht8n/
I'm trying to make a navigation bar with 100% width, that distributes equally within a header that also has a width of 100%. Also each a element has two words each, that are perfectlly center aligned under each other.
The HTML I'm working with is below:
<div class="nav">
<ul>
<li><span style="font-family:sacramento; text-align: center;">Our</span><br> HOME</li>
<li><span style="font-family:sacramento;text-align: center;">About</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Client</span><br> WORKS</li>
<li><span style="font-family:sacramento;text-align: center;">Contact</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> VISION</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> BIOS</li>
</ul>
</div><!--end of nav-->
CSS I'm working with
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 25px 80px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 20px;
width: 10px;
}
The example I'm trying to make looks like this below :
UPDATE
When I try the code in IE9, I get this image :
Please how can i solve this.
To distribute all items equally set a percentage width on the list items. You have six items so add width: 16%; to the .nav li rule.
To center align the text change:
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}
to (removed explicit width and added display: block):
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
display: block;
}
Lastly remove display: inline-block from the .nav li rule and add float: left. You should also add a <div style="clear: both"></div> element below the list (the tag) to "fix" the page flow.
Check this JSfiddle : JSfiddle working
See the result here Result of navigation
Use this css
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 5px 20px;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 2px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}