I realise vertically centring is a topic which comes up often on here and other websites but I'm still new to HTML and even after reading up on this topic I'm still confused.
I've tried making a simple header element for a website which contains an h1 title and a nav ul for the navigation links. Here is the html:
<!doctype html>
<html>
<head>
<title>Sample website</title>
<link href="css/homepage.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Website Title Here</h1>
<ul>
| <li>Home</li> |
<li>About me</li> |
<li>Contact me</li> |
<li>My blog</li> |
<li>My portfolio</li> |
</ul>
</header>
<hr class="hrstyle" style="clear:both;"/>
</body>
</html>
And the respective CSS:
header{
max-width: 1000px;
margin:auto;
}
h1{
font-family: Helvetica;
float: left;
padding:0;
}
ul{
display: inline-block;
float: right;
padding:0;
}
li {
font-family: Helvetica;
font-variant: small-caps;
list-style-type: none;
display: inline;
}
.hrstyle{
max-width:1000px;
}
I'm trying to get the h1 title and nav list to line centre align to one another vertically. Currently it looks like this...
With the nav element appearing at the top of the header.
I've read numerous things but I'm hesitant to just blindly copy code from the internet without fully understanding it.
Try line-height. Add this to your ul in your CSS
ul {
...
line-height: 40px;
}
Tweak the number to your desire.
Here's a little tutorial for you on different vertical centering techniques. I'll keep adding to this. But it might illustrate for you how elements react to different styling.
Codpen example on padding and line-height
For your ul add this:
ul{
...
position:absolute;
top:25px;
right:0px;
}
Position absolute allows you to control the position of the element from the sides. So push it a certain amount from the top and 0 from the right. This will produce what you described.
Here is the fiddle:
http://jsfiddle.net/AnPkT/2/
Related
I'm confused in this specific part of code. If anyone could explain to me, it'd be greatly appreciated!!
I'm making a navbar and it looks like this:
This is part of the CSS I'm confused about:
img{
weight:100px;
height:100px;
border-radius: 100%;
}
body{
margin:0;
}
header{
background-color: lightblue;
}
/*don't really understand this part*/
header::after{
content:" ";
display:table;
clear:both;
}
.container{
width:80%;
margin:0 auto;
}
.logo{
float:left;
padding:5px 0;
}
nav{
float:right;
}
nav ul{
margin:0;
padding:0;
list-style: none; /*remove HTML bullets*/
}
nav li{
display:inline-block;
margin:0 25px;
padding-top:55px;
font-family: 'Montserrat', sans-serif;
}
nav a{
color:#444;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color:black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My logo</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--a navbar should be in header section becuase it's not the content-->
<header>
<div class="container">
<img class="logo" src="logo.jpg" alt="">
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Services</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header::after{content:" "; display:table; clear:both; }
So my question is the background color in the pic would disappear without this part of code and I don't understand why, esp the display:table and clear:both. I do have logo and the li part float on both sides and clear:both doesn't stop them from floating and the background color would still show. I'm confused as why it's there and how display and clear both would affect the background color. Thanks!!
It is because you have floated all the content of header. This is like giving them all an absolute position and removes them from the flow of their parent which means the parent container, with no other content, will act as if it is empty. You could also give the header a height to see the background color, however, that might make it harder to adjust based on the content wrapping.
The CSS in question adds some content via the ::after's content prop. Then you clear the floats to make the content be seen by header, which is technically it's parent. The display table could be display block as well. It just makes sure that the after acts like an element would if it were placed in the html. But instead you are faking it with CSS.
I have the following HTML Code:
body {
margin: 0;
}
header {
background: #999;
color: white;
padding: 15px 15px 0 15px;
}
header h1 {
margin: 0;
display: inline;
}
nav ul{
margin: 0px;
display: inline;
}
nav ul li{
background: black;
color: white;
display: inline-block;
list-style-type: none;
padding: 5px 15px;
margin: 0;
}
nav ul li a{
color:white;
}
<!doctype html>
<html>
<head>
<title>CSS Layouts</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>
</header>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
<footer>2016 My Site</footer>
</body>
</html>
My challenge is to make the "My Page" h1 in line, as stated in the CSS
header h1 {
margin:0;
display: inline;
}
In order to get the h1 header "My Page" to go inline with the unordered list, I need to move the h1 in the HTML to underneath of the <nav> opening tag (as opposed to where it is now underneath of the header opening tag), but I can't figure out why it will go inline when I do that but it won't when I leave it like it currently is.
It is my understanding that in CSS if you have the following:
header h1{
some styling here;
}
...that any h1's underneath of header will be affected, however, that is not happening in my code currently.
Your h1 does have the display inline, but the problem is that it is next to nav which is a block level element. Block elements take up as much width as they can, while inline elements only take up as much width as necessary (see w3schools). You'll need to change the display on the nav to inline or inline-block to stop it from taking up so much width.
As you make your ul and h1 inline, you don't do it with your nav, it still has display: block css property and takes full width.
As other told you, the element is style displayed as a block.
By the way, if you don't want "any h1's underneath of header to be affected" by that :
header h1{
some styling here;
}
You can write it this way :
header + h1 {
some styling here;
}
Selects all "h1" elements that are placed immediately after "header" elements
Source : http://www.w3schools.com/cssref/css_selectors.asp
This question already has answers here:
Horizontal Centered Menu in CSS?
(5 answers)
Closed 7 years ago.
I've been trying to learn css/html by editing a template of website I got from the internet (it uses bootstrap), but I've hit a roadblock.
I have a list of horizontal elements. I want these elements to be centered, but I have no idea how.
This is the code:
<div class="row">
<nav>
<ul>
<li>Over ons</li>
<li>Diensten</li>
<li>Projecten</li>
<li>Contact</li>
</ul>
</nav>
</div>
This results in the 4 elements to be horizontal, but they aren't centered and I have no idea how to center them.
I'm new to css/html, so if you need more information, please ask.
EDIT: I've looked a bit more in the css, and found this:
header ul { padding-top: 0px; text-align:center}
header ul li { list-style: none; float: left; text-transform: uppercase; letter-spacing: 2px; text-align: center;}
header ul li a { display: block; margin: 0 30px; color: #4d4959; text-align: center;}
I've added text-align:center; but this doesn't seem to work
Just add this CSS and the text will be centered:
li {
text-align:center;
}
<div class="row">
<nav>
<ul>
<li>Over ons</li>
<li>Diensten</li>
<li>Projecten</li>
<li>Contact</li>
</ul>
</nav>
</div>
use : text-align:center like so :
Demo
If the width is set on .row you can use
.row{ margin: auto;}
on your div will be centered. I asume that the li-elements are next to each other (horizontal & ".row") so that might work.
So I wanted to create the fixed nav bar on top of the page. Instead of creating nav bar with ordered list, I used the following approach:
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
Home
About
Team
Science
Need
Pipeline
Contact
</div>
</header>
CSS:
header .nav {
margin-top:100px;
width:100%;
height:10%;
text-align:center;
padding-top:2%;
margin:0 auto;
position:fixed;
top:0;
}
header .nav a {
font-size: 2em;
padding-left: 15px;
padding-right: 15px;
color:rgb(1, 1, 1);
text-decoration: none;
font-family: 'Bebas';
}
header .nav a:hover {
color:white;
background-color: #404040;
border-radius:5px;
padding:0 auto;
}
header .nav a:active{
background-color: #404040;
border-radius:5px;
text-decoration:overline;
}
header .nav img {
width:260px;
height:65px;
padding-right:4em;
}
The reason I used this approach is because I wanted to use logo image next to the nav bar so it would align properly in the same line. Now the problem is that I need to add sub-menus under Science and Pipeline heading. Since I didn't use UL or LI, how can I add sub-menus under those heading.
OR, can you tell me any other way to create a NAV bar that shows the logo as well.
so it would be LOGO and MENUS on the same line.
Great thanks in advance.
Use the normal ul li structure.
If you set the height and line-height of top level li tags to be equal to the height of the image it will align the text to the center of the image.
I can suggest you to use a tool.
CSSMENU where you can create a menu without writing the code.You can also change the code or add images as your wish if needed. There are some inbuilt images where you can use them too.
have a two column structure in your nav bar one column for the logo and other for the nav-bar options.
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
</div>
<div class="options">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Science</li>
<li>Need</li>
<li>Pipeline</li>
<li>Contact</li>
</ul>
</div>
</header>
and
with css give them appropriate width and align them using padding or margin properties
so I was beginning work on an html/css document and can't find out exactly why the text isn't positioned correctly in my menu bar. I've tried to put the text align: left; and margin: 0 auto and padding: 0 and none of these seem to work. I've also looked through a good amount of the questions and run my html/css through validator.w3.org. If anyone is able to help me out that would be great!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title!</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_title">
<h2><span>the problem</span></h2>
</div>
<div id="menu">
<ul>
<li>is </li>|
<li>that </li>|
<li>my </li>|
<li>text </li>|
<li>isn't centered</li>
</ul>
</div>
</body>
</html>
css:
body
{
font-family: "Arial", "Helvetica", "Avant-Garde";
font-size: 14px;
color:black;
text-align: left;
background-image: white;
margin: 50px 40px 20px 100px ;
}
div#site_title
{
font-size: 21px;
letter-spacing: 1.5px;
}
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
}
j fiddle so you can see!
EDIT: I should explain that the menu with the smaller text is the one I want to move a few spaces to the left so it doesn't look tabbed. I also fixed the title so it shows what the actual problem is.
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
* {
margin: 0;
padding: 0;
}
or
import
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.io/normalize.css/
You haven't set fixed width to your containers, so they are 100% width, you have set for display: inline for <li>, so you can simply center it using text-align:center to <ul>.
btw. as #putvande said in comment, you can't directly inside <ul> you can put only <li>. To avoid putting |, use this css:
div#menu li:after {
content:'|';
}
Have you tried add this?
div#menu ul {
text-align: center;
}
http://jsfiddle.net/XaQbr/6/
remove the margin on the body and padding on the ul to see it better centered http://jsfiddle.net/XaQbr/8/
Also the pipes outside of the li's, those are invalid
try this:
div#menu ul{padding:0;}
right-click the element in your browser and click "inspect element". there you can see dimension, margins and paddings in color. (for chrome at least...)
Your markup is invalid. You cannot have the | or any other tags or content in between the li. The separator should be done using border-left or right. You can control height of the separator using line height on the li and spacing using left/right padding on the a not using space.
<div id="menu">
<ul>
<li>is</li>
<li>that</li>
<li>my</li>
<li>text</li>
<li>now centered</li>
</ul>
</div>
CSS:
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
padding:0 10px;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
line-height:14px;
border-left:1px solid gray;
}
div#menu li:first-child{
border-left:none;
}
http://jsfiddle.net/XaQbr/10/