I am trying to figure out why my background grows bigger when switching from one page to the next. They style is perfect one the home page. But when I switch to the portfolio or the contact page seems to me it adds padding to it.
header {
background-color: white;
display: inline-block;
top: 0;
width: 100%;
background-attachment: fixed;
}
header h1 {
float: left;
display: block;
}
header ul {
float: right;
display: block;
list-style: none;
}
header li {
display: inline-block;
padding: 10px;
}
<header>
<!--site title-->
<h1>
Clayton J. Batchelor
</h1>
<!--Navigation section-->
<ul>
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="portfolio.html">
Portfolio
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</header>
Related
This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.
I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.
Here is my code for the Nav Bar:
HTML:
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Ignore the "href", they will be sorted afterwards
the CSS:
*{
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav{
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul{
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;}
ul li a:hover {
color: red;
}
I did read some of the others answered questions but without any luck from them, hope you can help me once again!
Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:
* {
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul {
display: inline-block;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Try putting the nav in center tags.
Like this:
<center>
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
</center>
Sorry if this doesn't help. I couldn't fully understand your problem.
Try this. Don't use <center> tag, it's obsolete.
html:
<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>
css:
header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }
margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.
try this =)
* {
margin: 0;
padding: 0;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
display: block;
margin: auto;
border: 2px solid white;
}
ul {
display: inline-block;
text-align: center;
width: max-content;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin: auto;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 100%;
padding: 0px 10px;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
I am trying to follow a tutorial on YouTube to create a toolbar, but I am using Vuejs instead of regular HTML like on the video and the content of the views (.vue files) goes beside the toolbar instead of below it and another thing, I try to make center the toolbar.
<template>
<div id="app">
<div class="toolbar">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
<a href>Our Team</a>
</li>
<li>
<a href>Camp Sites</a>
</li>
<li>
<a href>Mission & Vision</a>
</li>
<li>
<a href>Resources</a>
</li>
</ul>
</li>
<li>
Things to do
<ul>
<li>
<a href>Activities</a>
</li>
<li>
<a href>Parks</a>
</li>
<li>
<a href>Shops</a>
</li>
<li>
<a href>Events</a>
</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<a href>Map</a>
</li>
<li>
<a href>Directions</a>
</li>
</ul>
</li>
<li>
News
</li>
</ul>
</div>
<div>
<router-view/>
</div>
</div>
</template>
#app {
margin: 0;
padding: 0;
}
body {
background-color: black;
background-size: none;
margin-left: 10%;
}
.toolbar ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.toolbar ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.toolbar ul li a {
text-decoration: none;
color: white;
display: block;
}
.toolbar ul li a:hover {
background-color: green;
}
.toolbar ul li ul li {
display: none;
}
.toolbar ul li:hover ul li {
display: block;
}
Whatever what I tried today, either the view was correctly below the toolbar but then the submenus were unclickable, or the views were below and centered but with a big margin-top to make the menu clickable or just beside the toolbar.
I am trying to replicate this kind of toolbar with the views right below it.
I guess the problem is 'float'. You will need a div with clear:both style after the toolbar and before the div containing router-view.
...
div class="toolbar"
...
/div
div style="clear:both"/
div
router-view
...
I would like to place an image to the left of the text and keep it like that depending on the resolution of the window.
Here's what it looks like without an image: http://prntscr.com/fmky4f
This is what I would like it to look like after placing it. https://prnt.sc/fmkk0a
This is my code:
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
Now I tried just simply putting in the image with the .logo class properties, but they don't seem to do the job as intended.
If you're going to use floats and widths for the logo, use that for the menu also.
.xd {
float: left;
width: 90%;
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<img class="logo" src="http://placehold.it/50x50">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
You could also use flexbox. Perhaps something like this:
header,
ul {
display: flex;
}
header img {
display: block;
max-width: 100%;
height: auto;
}
header ul {
flex-grow: 1;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
}
header a {
padding: 5px;
color: #080808;
}
<header>
<div>
<img src="http://placehold.it/50x50">
</div>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</header>
You can use position: absolute; and the default settings on the image as shown below. (You can use top and left settings to move it away from the border/corner if you want)
This keeps the menu items centered in relation to the container.
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
#image1 {
position: absolute;
}
<div class="container">
<img src="http://placehold.it/80x50/fb4" id="image1">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)
^^Using 1.666666666666666%
Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.
I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.
body {
margin:0px;
font-family:avenir, sans-serif;
}
.nav {
margin: 0px 0px 0px 0px;
overflow:hidden;
width:100%;
<!--box-shadow: 0px 0px 10px 0px #000000;-->
}
.link-header {
background-color:rgb(242,242,235);
}
.school-header {
background-color:rgb(40,110,123);
}
.nav-left {
display: inline-block;
float:left;
}
.nav-right {
display: inline-block;
float:right;
}<!--
.nav-center {
text-align: center;
}-->
a {
text-decoration: none;
}
.school-header a {
color:white;
}
.link-header a {
color:rgb(40,40,40);
}
.nav-li-outer {
padding-left:calc(1/60*100%);
padding-right:calc(1/60*100%);
display: inline-block;
margin-top: 0px;
vertical-align: top;
}
.school-header li {
line-height:80px;
}
.link-header li {
line-height:30px;
}
.link-header li:hover {
box-shadow:inset 0 -3px 0 rgb(40, 40, 40);
}
ul {
margin: 0;
list-style-type: none;
padding-left: calc(1/60*100%);
padding-right:calc(1/60*100%);
}
html:
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/
I didn't completely recreate what you're trying to do, but you can probably fill in the details.
Here's the HTML I used:
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>KAMSC</li>
<li>Staff</li>
<li>Adminssions</li>
<li>Curriculum</li>
<li>Sizzling Summer</li>
<li>KAMSC Connection</li>
<li>Alumni</li>
</ul>
</nav>
And the CSS:
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}
The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.
You'll need to add media queries to have this break properly, but that should be pretty straight-forward.
Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
Hi new to CSS here could anyone help me get the text to move down so it's aligned with my logo image? Also as an extension on that question does anyone know how I can make the text move across so the margins on either side match?
This is what it looks like now:
Here is the html:
<div id="header">
<div class="wrap">
<nav id="topnav"> <!-- This is the top nav bar-->
<ul id="topnavlist">
<li> <!-- Home logo-->
<div class="logo">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
</div>
</li>
<div class="navItems"><!-- Nav items-->
<ul>
<li>UK News</li>
<li>Smartphones</li>
<li>Reviews</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
And the CSS:
#header, #footer {
background-color:#115279;
float:left;
padding:15px 0;
min-width:100%;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color:#D9330F;
list-style-type: none;
float: left;
display:inline;
padding: 10px;
}
.navItems {
height: 20%;
display: inline;
margin-top:30px;
padding-top: 50px;
padding: 50px;
}
Your HTML is invalid, you can't have div inside li. Replace div with li and wrap their children(lis) in a ul.
To vertically center the lis, give .navItems a height: 50px same as the height of your logo and give it a line-height: 50px(height)
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
float: left;
display: inline;
padding: 10px;
}
.navItems {
display: inline;
height: 50px;
line-height: 50px;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<div class="logo">
<a href="index.html">
<img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
</a>
</div>
</li>
<li class="navItems">
<!-- Nav items-->
<ul>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
You can't have a div element as a child to a ul element. As for aligning all of your elements. By default, the img and a elements are considered inline elements in css. You can use the vertical-align property on inline elements. So your markup could be a bit more simple like
<nav id="topnav">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
UK News
Smartphones
Reviews
</nav>
and then the css
#topnav a {
vertical-align: middle;
}
Since I don't have the exact size of your image, this won't get you exactly what you're looking for, but it should get you on the right track. The main thing is to make sure you have valid HTML markup. This can cause many headaches and issues with your css if it's not.
As mentioned your current HTML is invalid. limust be children (and the only direct children) of a ul.
In fact there is no need to use divs at all.
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.NavItem {
color: white;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<a href="index.html">
<img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
</a>
</li>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</nav>
</div>
</div>