I'm struggling to get these buttons on the right and the heading on the left centered vertically on my navbar. I'm not using Bootstrap. I've tried a number of combinations of padding and margins and can't seem to make it work. Can anyone help please?
HTML:
<header>
<nav>
<h1>Jason</h1>
<div class="navbar-box">
<ul id="navbar-links">
<button>
<li>About</li>
</button>
<button>
<li>Portfolio</li>
</button>
<button>
<li>Contact</li>
</button>
</ul>
</div>
</nav>
</header>
CSS:
nav {
background-color: #061839;
color: white;
height: auto;
}
.navbar-box {
background-color: #061839;
color: white;
height: 25px;
}
h1 {
margin-top: 5px;
padding-top: 40px;
padding-left: 30px;
font-size: 40px;
}
ul {
list-style-type: none;
}
li a {
display: inline;
float:right;
}
button {
background-color: #4D638C;
border: none;
color: white;
margin-right: 20px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
float:right;
border-radius:12px;
}
try adding display:inline-block and vertical-align:middle both to heading (h1) and buttons container which is .navbar-box
Use margin auto
that should centralise them
Related
I'm having a very basic problem with the CSS in my React website, and I was looking for some help.
I have a very barebones header section set up
HTML:
<div className="nav">
<div className="menu">
Menu
</div>
<div className="logo">
<a className="title" href="/">Brand Name</a>
<a className="subtitle" href="/">Slogan</a>
</div>
<div className="lang">
<ul>
<li>FB</li>
<li>IG</li>
<li>TW</li>
</ul>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.nav{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: white;
text-decoration: none;
font-family: Visual;
letter-spacing: 1px;
width: 100%;
.menu{
a{
text-decoration: none;
color: white;
letter-spacing: 1.3px;
font-size: 1.2rem;
}
}
.logo{
.title{
font-size: 2rem;
}
.subtitle{
text-align: center;
margin-top: 5px;
}
a{
text-decoration: none;
color: white;
display: block;
}
}
.lang{
font-size: 1.2rem;
ul{
li{
display: inline;
margin-left: 10px
}
}
}
}
The flex seems to be working, but when I resize the window horizontally, the center element gets pushed off center and eventually out of the screen on one side.
Is this related to media queries?
add padding: 0; property to ul in your css
ul {
padding: 0;
li {
display: inline;
margin-left: 10px;
}
}
You can use border styling something like
border: 1px solid black;
when have problems with css. In this way, you can see which elements have unexpected properties like paddings or margins. When you use border styling for your ul, you will see it has padding. Make padding zero and your items will be centralized.
I've been trying to get all those elements on the same grey background but I don't know why the header and navigation bar are separated, and the logo not being on top of the grey background.
The code:
.header {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
margin:0;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navigation li a:hover {
background-color: #111;
}
<div>
<h2 class = "header" >Personal Portal</h2>
</div>
<div>
<div>
<nav>
<a> <img src="logo.png" alt="Logo" style="float:right; position:relative; "> </a>
<ul id = "navigation">
<li><a class="active" href="Home.htm">Home</a></li>
<li>Opened Tickets</li>
<li>FAQ</li>
<li>Stats</li>
</ul>
</nav>
</div>
<div>
<div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF"> Logged in as </div>
This is a very beginner-style question but I can't find the answers I want. Any help is appreciated thank you!
You could try something like this:
<div style="background-color: #666; height: 50px">
<nav style="clear: both">
<ul id = "navigation">
<li><a class="active" href="Home.htm">Home</a></li>
<li>Opened Tickets</li>
<li>FAQ</li>
<li>Stats</li>
</ul>
<h2 class = "header" >Personal Portal</h2>
<div class="rightInfo">
<div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF">
Logged in as
</div>
<a>
<img src="logo.png" alt="Logo" style="float:right; position:relative; ">
</a>
</div>
</nav>
.header {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
float: left;
display: inline-block;
margin-top: 0;
}
.rightInfo{
float: right;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666;
float: left;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navigation li a:hover {
background-color: #111;
}
Your three display elements should have a common parent, otherwise, they will not display as you want them to, except if you use position: absolute to position them (I would not recommend that)
To complete the previous answer (regarding the question why the title and nav bar are separated). You have placed those elements in separate divisions each with its own background color. You could correct the situation by removing the margin between them, but: if you want two (or more) things to be on a common background, it is best to set that background on a common parent.
Also, in any case when you're wondering why the browser rendered your code as it did: ask the browser. Press Ctrl-Shift-I (works on Chrome, Chromium and Firefox). It will show you all the applied styles (and exactly where they came from), plus the element size, padding, borders and margins.
I want to center <h1> or <div class="heading"> on the page. The only solution I have found is
body { text-align: center; }
but I can't figure it out why this code doesn't work. Display: inline-block is used because I want the border to wrap around my .
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
display: inline-block;
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
Add this:
.heading {
text-align: center;
}
...and delete display: inline-block from .heading. Instead, add this
.heading h1 {
display: inline-block;
}
.heading is the container of your h1. Both are by default 100% wide. This centers the inline-block h1 inside the full-width .heading
The secret you are looking for is to use a block-level element, and also set a margin: 0 auto. This tells the block to centralise, much like a standard text-align: center.
.header {
display: block;
margin: 0 auto;
}
By default, block-level elements occupy 100% of the width of their container, so you might also want to specify a width for the header. Alternatively, you can have the header automatically adjust to the size of the text by adding a container div that is set as in inline-block, and moving the border to there:
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: block;
margin: 0 auto;
text-align: center;
}
.heading-wrapper {
display: inline-block;
border: 2px solid black;
padding: 0 10px;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<div class="heading-wrapper">
<h1>heading</h1>
</div>
</div>
</header>
This way, the header will stay centralised, and have the border automatically expand correctly to accommodate the header, no matter how much text there is.
Hope this helps! :)
You can center it by using display: flex; justify-content; on the parent element. Here is a great resource on centering things https://www.w3.org/Style/Examples/007/center.en.html
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: flex;
justify-content: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
a div displays block by default, so it's definitely important to declare if you want to display it otherwise.
However, again, as in another post i saw earlier, you have no css for the containing parent, the header, which would greatly assist you. You should apply any margin to be inherited to this, and there should be no need to apply a small width to your div.
body {
margin: 0;
}
header{margin: 0 auto;}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
/*display: block; - even if you leave this out, it will display as block*/
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
See my website here http://1-dot-speaklikewater.appspot.com
and the code
<img style="vertical-align: middle;" src="speaklikewaterlogo.png" />
<a href='index.jsp' class='linkButton' >Home</a>
.linkButton:link, .linkButton:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.linkButton:hover, .linkButton:active {
background-color: green;
color: white;
}
This's ok, but the image quality is not good because when users magnify the page the image got blurred.
No, I don't want to use image as logo. I want to use Text like a logo.
Can you do the Exactly same thing like the above website but this time we use Text instead of image for logo. So it should look like this, but the middle of "Home" and the middle of the text logo should be on the same line?
SpeakLike
Water.com Home ...
Can we achieve that?
Can we achieve that?
Sure here is an example how to do this;
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
line-height: 44px;
vertical-align: middle;
}
li a {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: block;
line-height: 1;
font-weight: bold;
}
.logo-box {
margin-right: 10px;
}
.logo-line {
display: block;
line-height: 22px;
color: #D42424;
font-weight: bold;
}
<ul>
<li>
<div class="logo-box">
<span class="logo-line">SpeakLike</span>
<span class="logo-line">Water.com</span>
</div>
</li>
<li>Home</li>
<li>Online Users</li>
<li>Method</li>
<li>Lesson</li>
<li>Conversation</li>
<li>Register</li>
<li>Login</li>
</ul>
I'm going to assume you know how to display text and style it, if you need me to explain, just say so.
This leaves the problem of centering the logo with "Home". You have two options to do this
1) Margin
.logo {
margin-top: -20px;
}
This will shift the .logo up 20px. Adjust margin as needed to properly center.
2) Position
.logo {
position: relative;
top: -20px
}
This does the same thing, but uses positioning instead of margins. This option is better in terms of having less hacky CSS.
Yes, you can use an <h1> element and style the text accordingly (you can even use web fonts, if you wish). Something like:
h1 {
color: #cc0000;
font-family: "Times New Roman", serif;
width: 100px;
word-wrap: break-word;
font-size: 20px;
float: left;
}
ul {
list-style-type: none;
position: relative;
top: 30px;
}
ul li {
float: left;
margin: 0 10px;
}
<h1>SpeakLikeWater.com</h1>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
Ok, so this is what my site currently looks like. (I can't post an actual pic here apparently) http://imgur.com/Cqb2rf2
Is there a way to align that picture with the Home | About Me | Contact nav bar?
Also, as you can see, the borders to the right of Home and About Me are too close to the text. Can I center that between them somehow? I'm slowly building my first site as I teach myself, so i really appreciate your help!
Here's my code:
#firstpic {
margin: 0px;
padding: 0px;
}
#propic {
width: 15%;
}
#navigation {
border-bottom: 2px dotted #000000;
}
.bh {
border-right: 2px solid black;
}
.navbar {
font-size: 50px;
text-align: center;
font-family: Courier;
}
.navbar li {
display: inline;
}
<html>
<head>
<title>NAV test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="navigation">
<div id="firstpic"><img src="D:\Testnavbar\Images\Profile Pic.png" id="propic"/></div>
<ul class="navbar">
<li class="bh">Home</li>
<li class="bh">About Me</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
You can set the image div and the ul to display inline...
See this demo
#firstpic {
margin: 0px;
padding: 0px;
display: inline;
}
.navbar {
font-size: 50px;
text-align: center;
font-family: Courier;
display: inline;
}
Or this demo for inline-block
Set the divs to be inline-block and vertical-align:middle
#firstpic {
margin: 0px;
padding: 0px;
display: inline-block;
width: 15%;
vertical-align: middle;
background: red;
height: 50px;
}
#navigation {
border-bottom: 2px dotted #000000;
}
ul {
display: inline-block;
vertical-align: middle;
}
li {
border-right: 2px solid black;
padding-right: 1rem;
}
li:last-child {
border-right: none;
}
.navbar {
font-size: 20px; /* for demo purposes only */
text-align: center;
font-family: Courier;
}
.navbar li {
display: inline-block;
}
<div id="navigation">
<div id="firstpic">
<img src="D:\Testnavbar\Images\Profile Pic.png" id="propic" />
</div>
<ul class="navbar">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
Add padding-right to push the list text away from the border.
To move the separator over, try adding "padding-right: 20px;" to .navbar li:
.navbar li {
display: inline;
padding-right: 20px;
}
https://jsfiddle.net/lemoncurry/2xat53n8/
Make the picture one of the list item elements so it displays in-line with the other navigation links.
Give .navbar a fixed height.
Set it to vertical-align middle.
Give it a line-height equal to the .navbar height.
#firstpic {
margin: 0px;
padding: 0px;
height: 150px;
}
#navigation {
border-bottom: 2px dotted #000000;
text-align: center;
height: 100px;
vertical-align: middle;
line-height: 100px;
}
.bh {
border-right: 2px solid black;
}
ul {
margin: 0;
padding: 0;
}
.navbar {
font-size: 50px;
font-family: Courier;
}
.navbar li {
display: inline;
}
<body>
<div id="navigation">
<ul class="navbar">
<li id="firstpic"><img src="D:\Testnavbar\Images\Profile Pic.png" id="propic"/></li>
<li class="bh">Home</li>
<li class="bh">About Me</li>
<li>Contact</li>
</ul>
</div></body>