I just want the logo to get centered, and every time when i apply the 'align-items: center;' it does not take effect, where's the problem guys ?
#logo {
flex: 1 1 40rem;
align-items: center;
}
<header class="head_main">
<nav>
<h1 id="logo">travelly</h1>
<ul>
<li>locations</li>
<li>benefits</li>
<li>contact</li>
</ul>
</nav>
</header>
I'm not sure what the significance of the 40rem in the flex setting is, but if it is saying 'allocate the h1 40rem' then one way of specifying this is to set its width to 40rem and use the 'old fashioned' margin auto to center the div.
#logo {
margin: 0 auto;
width: 40rem;
text-align: center;
}
<header class="head_main">
<nav>
<h1 id="logo">travelly</h1>
<ul>
<li>locations</li>
<li>benefits</li>
<li>contact</li>
</ul>
</nav>
</header>
Related
I'm very, very new to HTML and CSS, so sorry for my ignorance! I'm trying to add an image to my header, to go to the left and above the navigation. Any help anyone can give would be amazing!!
I have tried two ways of adding the image, the first using , but it did not show (I could see the image 'content' highlighted in blue on the page when i was in the console, but i couldn't see the image. The second way I used a , then the css below:
body {
background-color:#4A4849;
margin: 0 auto;
font-family:Arial, helvetica, sans-serif;
}
.Logo {
display: inline;
float:left;
width: 100%;
height: 100%;
background-image: url('../Images/Logo.png');
}
header {
text-align: center;
width: 100%;
height: 15%;
background-color: white;
margin: 0;
}
My full CSS includes the below...i feel like the problem is to do with the , as in the console the dimensions show as 1304x0 (but I am able to see the navigation) I therefore tried adjusting the header, which is why it duplicates with the .topnav.(see below) :)
.topnav {
font-weight: bold;
background-color: white;
overflow: hidden;
position: fixed;
top: 0;
left 0;
width:100%;
height:15%;
}
.topnav ul {
list-style-type:none;
overflow: hidden;
margin:0;
padding: 0;
}
.topnav li {
display:inline;
padding: 0px;
margin: 0px;
}
.topnav a {
float: right;
color: #4A4849;
text-align: center;
padding: 20px 10px;
text-decoration:none;
width:10%;
}
It would be great if anyone could help, as I've tried different things based on resources i've found online!
*HTML, in case you need it:
<body>
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
There are a few things that can be changed with how you are setting things up:
I would recommend not making your logo the background-image on a div, when an <img> tag will work better in your case (<img src="path/to/your/logo.png">).
If you do use it as a background-image on a div, you have to remember that background images do not affect the height of an element.
Setting a % height on the .Logo div will also not work, since a percentage height needs to be relative to a containing element and you also set it to an inline element (height will not apply). Since, its parent (header) has as height of 15%, but that element also has no reference to 15% - e.g. 15% of what? The body tag would need to have a height set to 100%.
Only for your logo, I would simply do this:
<header>
<img src="your logo link">
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
If you absolutely want to make it a background-image:
.Logo {
height: whatever your logo height is;
display: block;
background-image: url( ../Images/logo.png );
background-repeat: no-repeat;
}
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 3 years ago.
I'm having issues with excess space to the left of my header.
I had the same problem with my footer as well using <nav> and <ul>, but edited this to only using <a> elements instead, and this seemed to do the trick. I would, however, like to keep the <nav> in the header, and preferably without using negative margin-left.
https://jsfiddle.net/thereseel/d75jurzy/6/
<header>
<nav>
<ul class="mainnav">
<li>Home</li>
<li>Menu</li>
<li>Logo</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
you are facing excess space to the left of your header because of ul
browsers have default CSS values for many elements and ul is one of them.
from your current code just remove the padding
example:
.mainnav {
/* add this to override default padding left of ul*/
padding-left: 0;
}
Here is Reference of default CSS values used by browser : w3schools link
Try with this code.
HTML code:
<header>
<nav>
<ul class="mainnav">
<li>Home</li>
<li>Menu</li>
<li>Logo</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
<div class="main-body">
</div>
<footer >
<section class="footnav">
Home
About
Order
Jobs
Contact
</section>
</footer>
CSS code:
.main-body{
min-height:500px;
}
.mainnav {
max-width: 800px;
margin-left: 0;
margin-bottom: 5px;
text-align: center;
display: flex;
justify-content: space-evenly;
padding-left:0px;
}
.mainnav li {
display: inline-block;
}
.footnav {
width: 100%;
text-align: center;
display: flex;
justify-content: space-evenly;
}
footer{
position: fixed;
left:0;
right:0;
bottom:0;
}
.footnav a {
display: inline-block;
padding: 10px;
}
Hope it working.
I am using Apple's navigation toolbar as my design aesthetic/goal as everything is center justified and the logo included as part of that justification.
Here's how I have it setup currently...
<body>
<header>
<div class="logo"><img src="Images/Logo.png" alt="DIVINITAL"width="35" height="35"></div>
<nav>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>User</li>
</ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</header>
</body>
This, however, proves difficult for me to properly edit the logo alongside the ul items on the navbar. For some reason when I begin to style them accordingly, both widths have to be set to 100% for the alignment to workout but that obviously isn't allowed as they just move to two separate lines (the logo and the ul items on the nav bar...
So is there a better way to handle this? Thank you!
Welcome to StackOverflow.
You can easily do it using flex. There's a good tutorial that explains how to use flex..
Look at the following example, and see for yourself how flex can easily achieve what you're looking for:
header {
background-color: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
height: 44px;
}
.logo > img {
width: 35px;
height: 35px;
margin: auto 20px;
}
nav {
flex: 1
}
nav > ul {
color: white;
display: flex;
padding: 0;
list-style: none;
justify-content: space-between;
margin: auto 20px;
}
nav > ul > li {
}
nav a {
color: inherit
}
<header>
<div class="logo">
<img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" alt="DIVINITAL">
</div>
<nav>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>User</li>
</ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</header>
The most important rules I used here were (flex rules):
display: flex
justify-content
align-items
I'm trying to make a very simple page, but I'm pulling my hair off trying to find a solution for the layout.
What I want to achieve is a simple header and below, some content ( I don't know the actual height of it, but won't probably cover the full height of the viewport) with a full background cover image that covers the remaining height.
I tried using 100vh on the container that's going to hold the content, but as you can see in the codepen: http://codepen.io/renttless/pen/vGvzRj , it creates a scrollbar apparently the size of the previous sibling, which will be the header.
Here's the code:
<body>
<div class="containerTest">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sectionTest">
<div class="backgroundTest">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</section>
</div>
CSS:
html,body{
height: 100%;
}
.sectionTest .backgroundTest{
background-color:red;
height:100vh;
}
If you add a background to your header and move the 100vh to the html element it will solve your problem
html{
background-color:red;
height:100vh;
}
header{
background: white;
}
body, header ul{
margin: 0;
}
<body>
<div class="containerTest">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sectionTest">
<div class="backgroundTest">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</section>
</div>
This is a pain to do. Maybe try using the flexbox approach. Here's an example.
<div class="box">
<div class="row header">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div class="row content">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</div>
CSS:
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
flex: 0 1 30px;
}
.box .row.header {
flex: 0 1 auto;
background-color: red;
}
.box .row.content {
flex: 1 1 auto;
background-color: green;
}
I am trying to equally place my 8 nav links across my nav bar.
Here is my nav HTML:
<nav>
<ul class="nav">
<li>Home</li>
<li>Destinations</li>
<li>Culture</li>
<li>Attractions</li>
<li>History</li>
<li>Media</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>
I am using a basic grid and am trying to place each of the 8 links equally into 1/8 of the nav.
My css for the grid :
.col-1-8 {
width:12.5% }
I am applying this class to each of the 8 li, but can't seem to get them all centered equally.
If someone could help me out here, i'd be very happy!
thanks
Tim
This code does exactly what you want to obtain, I think that you didn't apply box-sizing border-box or text-align center.
http://codepen.io/anon/pen/WQVQGr
HTML:
<nav>
<ul>
<li>Home</li>
<li>Destinations</li>
<li>Culture</li>
<li>Attractions</li>
<li>History</li>
<li>Media</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>
CSS:
*{
box-sizing: border-box;
}
nav ul {
background-color:yellow;
overflow:auto;
list-style:none;
padding: 0;
margin: 0;
width: 800px;
}
nav ul>li {
float:left;
width: 12.5%;
text-align: center
}
You can use flex for this.
.nav {
display: flex;
justify-content: space-around;
/* justify-content: space-between; */
background: yellow;
margin: 0;
padding: 0;
list-style: none;
}
<nav>
<ul class="nav">
<li>Home</li>
<li>Destinations</li>
<li>Culture</li>
<li>Attractions</li>
<li>History</li>
<li>Media</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>