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;
}
Related
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>
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:
How to horizontally align ul to center of div?
(5 answers)
Vertically centering a UL inside a DIV
(4 answers)
How can I center <ul> <li> into a div?
(16 answers)
Closed 4 years ago.
Below is my code, It's a navigation bar, All i want to do is center my inline list items vertically inside the nav bar.
<header class="header_wrapper">
<div class="logo_container">
<img src="./logo.png" alt="">
</div>
<div class="nav_container">
<div class="helper">
<div class="content">
<ul class="nav_menu">
<li>Home</li>
<li>News</li>
<li>Events</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="search_container">
</div>
</header>
This is my css
.header_wrapper{
background:#d8d0d01a;
display: flex;
}
.logo_container{
width:20%;
}
.nav_container{
width:50%:
}
.search_container{
width:30%;
}
any idea on this ? Thanks
You can try using flexbox's align-items property:
.nav_menu
{
display: flex;
align-items: center;
}
Note that this will only work properly if .nav_menu has flex-direction: row;, which is the default.
Also, this isn't related to your question, but conventionally, classes in CSS use hyphens instead of underscores (nav-menu instead of nav_menu).
Add the following css to the class .nav_menu
.nav_menu{
display: flex;
justify-content:space-around;
align-items:center;
}
.header_wrapper{
background:#d8d0d01a;
}
.logo_container{
width:20%;
}
.nav_container{
width:50%:
}
.search_container{
width:30%;
}
.nav_menu{
display: flex;
justify-content:space-around;
align-items:center;
}
<header class="header_wrapper">
<div class="logo_container">
<img src="./logo.png" alt="">
</div>
<div class="nav_container">
<div class="helper">
<div class="content">
<ul class="nav_menu">
<li>Home</li>
<li>News</li>
<li>Events</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="search_container">
</div>
</header>
It is already vertically aligned, no?
.header_wrapper {
background: #d8d0d01a;
display: flex;
}
.logo_container {
width: 20%;
}
.nav_container {
width: 50%;
border: 1px solid blue; /* Added for test */
}
.search_container {
width: 30%;
}
.nav_menu{
border: 1px solid red; /* Added for test */
}
.nav_menu li{
display: inline; /* Added */
border: 1px solid green; /* Added for test */
}
<header class="header_wrapper">
<div class="logo_container">
<img src="./logo.png" alt="">
</div>
<div class="nav_container">
<div class="helper">
<div class="content">
<ul class="nav_menu">
<li>Home</li>
<li>News</li>
<li>Events</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="search_container">
</div>
</header>
I only added the inline for the lis.
I don't get why still need to put class="container" under class="nav"? the class="nav" has already separate the whole element... why still need to put class="container"?
<div class="nav">
<div class="container">
<ul>
<li>Airbnb logo</li>
<li>Browse</li>
</ul>
<ul>
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
</div>
</div>
Why?
Because, in the absence of any other information, you might wish to restrict the width of the .container class but not that of the .nav class.
Perhaps you want the .nav to be 100% wide (which it would be by default) but the container to be 80% wide and centered.
That is just one reason...
Example Below:
* {
margin: 0;
padding: 0;
}
.nav {
background: lightblue
}
.container {
width: 80%;
margin: 0 auto;
background: green;
height: 150px;
}
<div class="nav">
<div class="container">
</div>
</div>
What I have:
I have a header section and a body section (class="header" class="body" respectively) and inside the header section I have a logo section and a menu section. I am trying to put the logo and the menu on the same line.
What I tried:
Floating one left and the other right. Results in background disappearing for the header section. changed the width of logo to 20% and menu to 80% and them floating them left and right. Same results as the above. Tried display:inline which results is a big mess.
Is it possible to get the two sections next to each other without messing up something else?
Also can someone explain what is wrong ans why is it?
JSfiddle: http://jsfiddle.net/eZaWK/1/
Relevant html
<body>
<section class="header">
<section class="logo">
<img src="logo.png" height="50px"/>
</section>
<section class="menu">
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
</ul>
</section>
</section>
<hr>
<section class="body">
<h1>Hello World</h1>
<p>Hello world</p>
</section>
</body>
Relevant CSS
body{
margin: auto;
background-color: #46a7bb;
}
.header{
width:100%;
}
hr{
border-color:black;
border-bottom-width:5px;
margin:0 0 0 0;
}
h1{
margin: 0 0 0 0;
}
.body{
width:75%;
margin:auto;
background:white;
text-align: center;
}
.logo{
margin:0;
background: #313145;
}
Thank you!
add the following rule:
.header, .logo, .menu{
float: left;
}
http://jsfiddle.net/4v2nZ/