I know I am hitting the padding for my header and that is why my nav_bar class is not letting my border-top stretch across my page. Anyone know how to fix this short of removing the 20px padding on my header? I play more in the architect world so my HTML and CSS is rusty, but I thought a border would extend past padding according to the box model?
Here is a link to the site.
http://www.dsu-class.com/zito82/lab03/
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Zito - Lab 3</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<img src="images/SAS.png" alt="Solution Architect Scenarios">
<hgroup id="headerGroup">
<h1>Solution Architect Scenarios</h1>
<h2>Elite Training for Elite Architects</h2>
</hgroup>
<nav id="nav_bar">
<ul>
<li>Home</li>
<li>About Phil</li>
<li>Premium Content</li>
<li>Contact Me </li>
</ul>
</nav>
</header>
<aside>
<ul>
<li>Blog Articles</li>
<li> Training videos</li>
<li> My Portfolio</li>
<li> Sites I Like</li>
</ul>
</aside>
<section>
<h2> Welcome to the Site</h2>
<p>On a daily basis I deal with hundreds of different technologies. These technologies span the stack from
Layer 1 to Layer 7. It was this Jack of All Trades (JOAT), experience that I saw so rarely in the business world
that would lead me to creating this site. As architects, we need to consider all the factors that influence our
design. Often time's we design in a background. This site seeks to open up those other areas in which you may not
dwell. The end goal is for you to be able to grow in your awareness of technologies and abilities as an architect.</p>
<h3> Consulting </h3>
<p> I offer my skills around technology to help enterprises and business owners with <strong>ALL</strong> aspects
of their business. I like to tell people that I cover all the way from Layer 1 to Layer 7. I can assist you in your
design and architecture needs. I have a focus on large scale enterprise design and cyber-security.</p>
</section>
<footer>
<p>© Copyright 2015 Phil Zito</p>
</footer>
</body>
</html>
CSS:
article, aside, figure, footer, header, nav, section {
display: block;
}
body {
font-family: sans-serif;
width: 960px;
background-color: white;
border-color: black;
-moz-box-shadow: 0 0 0 20px black;
-webkit-box-shadow: 0 0 0 20px black;
box-shadow: 0 0 0 20px black;
margin: 1em auto;
}
header , section , footer {
padding: 20px;
}
header {
background-color: white;
border-bottom: black solid 5px ;
}
img {
float: left;
margin: 1em;
}
aside {
float: left;
width: 170px;
padding: 20px;
}
section {
float: right;
width: 690px;
}
footer {
clear: both;
font-size: .9em;
text-align: center;
background-color: white;
border-top: black solid 5px;
}
header h1 {
text-indent: 20px;
}
header h2 {
text-indent: 20px;
}
section h2:first-child:first-letter { font-size: 2em;}
aside a:link,aside a:visited {font-weight: bold; color: black;}
aside a:hover, aside a:focus {color: green;}
aside li {
list-style: none;
}
aside a {
display: block;
width: 100%;
height: 100%;
line-height: 1.5em;
border: 3px solid black;
margin: 5px 0 5px 0;
text-decoration: none;
background-color: grey;
font-size: 1.1em;
padding-left: 5px;
}
section.h2 {
margin-top: 0;
}
#nav_bar {
border-top: 2px solid black;
padding: 5px 0 5px 0;
}
#nav_bar ul {
text-align: center;
}
#nav_bar li {
display: inline;
}
#nav_bar a {
padding: 0 1em 1em 0;
color: black;
font-weight: bold;
text-decoration: none;
}
#nav_bar a:hover, #nav_bar a:focus {
text-decoration: underline;
}
#nav_bar a.current {
color: green;
}
Solution
If you move the <nav id="nav_bar"> div outside and under the <header> tag, and then move the border-bottom property from header to #nav_bar, you'll be all set.
.css
header {
background-color: white;
}
#nav_bar {
border-bottom: 5px solid black;
border-top: 2px solid black;
padding: 5px 0;
}
.html
<header>
<img alt="Solution Architect Scenarios" src="images/SAS.png">
<hgroup id="headerGroup">
<h1>Solution Architect Scenarios</h1>
<h2>Elite Training for Elite Architects</h2>
</hgroup>
</header>
<nav id="nav_bar">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>About Phil</li>
<li>Premium Content</li>
<li>Contact Me </li>
</ul>
</nav>
Related
I tried putting it on the same line by using the float: left element on the h1 and float: right on the nav, but it keeps putting the h1 below or above the nav. I am trying to set up a website so that the top line can read the name of the company and the links to the different pages through the navigation bar. Is there something to do with it? Here is some of my code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Virginia Delights</title>
<meta charset="utf-8">
<link href="Delights.css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<nav>
Home
About
Mission
Staff
Donate
Contact
</nav>
<h1>Virginia Delights</h1>
</header>
<img class="rounding" src="Virginia Delights Logo.jpg" alt="Logo" height="200" width="200">
<footer>
Copyright © 2020 Virginia Delight
</footer>
</div>
</body>
</html>
nav { text-align:right;
float: right;
margin: 0;
font-size:1.3em;
text-shadow:3px 3px 3px gray;}
header {width: 100%;}
nav a {text-decoration: none;
color: white;
}
h1 {float: left;
height: 100px;
width: 700px;
font-size: 2em;
padding-left:150px;
padding-right:150px;
border-radius:20px;
padding-top:0.5px;
margin-left:auto;
margin-right:auto;
text-shadow:3px 3px 3px gray;
color:white;}
It's not clear where you want your logo image, but all in all you can use display: flex; on the container (header) and add justify-content: space-between, plus the settings used below.
Note: I changed some of your width settings to fit everything in to one line in the snippet here, I erased the float settings, and I changed the order of elements in the HTML code because that really didn't seem logical in your code, considering the way you want it to appear.
header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: baseline;
}
nav {
margin: 0;
font-size: 1.3em;
text-shadow: 3px 3px 3px gray;
}
nav a {
text-decoration: none;
color: white;
}
h1 {
height: 100px;
font-size: 2em;
border-radius: 20px;
padding-top: 0.5px;
text-shadow: 3px 3px 3px gray;
color: white;
}
<div id="container">
<header>
<img class="rounding" src="Virginia Delights Logo.jpg" alt="Logo" height="100" width="100">
<h1>Virginia Delights</h1>
<nav>
Home
About
Mission
Staff
Donate
Contact
</nav>
</header>
<footer>
Copyright © 2020 Virginia Delight
</footer>
</div>
We can't really tell until you show us your css, otherwise here is some good old fashion css and html I would do with your html.
Remember you want to make everything semantic so I would recommend making your navbar like this
<header>
<div class="container">
<h1 id="logo">Virginia Delight</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Staff</li>
<li>Mission</li>
<li>Staff</li>
<li>Donate</li>
</li>Contact</li>
</ul>
</nav>
</div>
</header>
As for the CSS you just need to float the id="logo" to the left and the nav to the right
header {
background-color: <Whatever color>;
min-height: 100px;
color: <Whatever color>;
}
header #logo {
float: left;
margin-top: 30px;
}
header nav {
float: right;
margin-top: 40px;
}
header li {
list-style-type: none;
display: inline;
margin-left:30px;
}
header a {
text-decoration: none;
color: <Whatever color>;
}
I'm creating a website as i'm trying to learn HTML.
I have created a few very basic websites, so I am no master.
My horizontal(top) navigation bar is underneath my header, however I cant center the tabs for some reason.
How do I get the tabs text to be centered with the nav bar?
<!--Header-->
<header>
<img id="pumpkin" src="pumpkin.gif" alt="Pumpkin">
<h2 id="halloween">The Halloween Store</h2>
<h3 id="goblin">For the little Goblin in all of us!</h3>
</header>
<!--Main Body With Drop Down Navigation-->
<body>
<nav class="topNav">
<ul id="topNav">
<li>Home</li>
<li>Product List</li>
<li>Personal</li>
<li>Decorating Ideas</li>
<li>Join Email</li>
</ul>
</nav>
</body>
CSS
#topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
#topNav li {
display: inline-block;}
#topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
#topNav a:hover {
background-color: lightgray}
#body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;}
In your CSS file you should do like that:
.topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
.topNav li {
display: inline-block;}
.topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
.topNav a:hover {
background-color: lightgray}
body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;
}
also <header> should go inside <body> tag.
If you are trying to center the tabs(li) aligned inside the Nav(ul), Add the FLOAT: LEFT; CSS to "#topNav a" element in your CSS file.
#topNav a{float:left;padding: 9px 30px 9px 30px !important;}
Refer to the below URL.
https://jsfiddle.net/rajeevRF/m1bu4fnr/1/
I start learning css and have a trouble with adding color to blocks, which stay in the same line. As you can see, in My website on the first line the color is out of the border of each block. What I want to do is make it looks like in the example (the 3 green blocks). Can anybody help me fix it?
ps: sorry, my English is not so good :/
both are my css and html codes:
body
{
font-family: inherit;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#menu1 {
float: left;
padding-left: 50px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
position: relative;
top: -5px;
padding: 9px 0px 50px 0px;
background-color: aliceblue;
margin-bottom: 0px;
}
.nav ul, li {
display: inline-block
border: 1px black solid;
background-color: orange;
}
.nav ul,li,a {
display: inline-block;
}
.titel {
background-color: antiquewhite;
position: relative;
top: -9px;
padding: 75px 0px 75px 0px;
}
.titel h1,h4 {
text-align: center;
color: skyblue;
text-shadow: 2px 1px grey;
}
.hometext {
margin: 0px 25px 0px 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel ="stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- <h1 class="blue">Titel 1</h1>
<h1 id= "heading">Heading</h1>
<p class = "blue">Welcome to my website, my name is Unknow and it's a pleasure for me to see you guys!!!!</p>-->
<div class="nav">
<ul id="menu1">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul id="menu2">
<li>Sign up</li>
<li>Log in</li>
<li>Help</li>
</ul>
</div>
<div class="titel">
<h1>---MY WEBSITE---</h1>
<h4>Welcome to my first website</h4>
</div>
<div class="hometext">
<h2>Homepage</h2>
</div>
</body>
</html>
Before you start with the CSS, you are going to have to think about the markup. Your list of 'boxes' looks like a 'list' of something... in this case navigation links. This is how I would suggest writing the markup.
<nav class='site-navigation'>
<ul class='item-list'>
<li class='item'>
<a href='#'>Item name</a>
</li>
<li class='item'>
<a href='#'>Item name</a>
</li>
<li class='item'>
<a href='#'>Item name</a>
</li>
</ul>
</nav>
from there... you'll style it.
ul {
/* reset the annoying defaults of lists */
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: inherit; /* inherit from parent color */
}
.site-navigation .item-list .item {
display: inline-block;
}
.site-navigation .item-list a {
display: block; /* make sure these links (inline by default) are block */
padding: 10px 20px;
background: lightgreen;
color: white;
}
https://jsfiddle.net/sheriffderek/cm5kbxx3/
The question 'how do I color these boxes' should tell you that it's time for some studying. It's only going to get about 100x more difficult. Find a good class or mentor. frontendmasters or codementor are good ways to level up quickly. Be sure and post some code next time - along with what you've tried so far. : )
I am trying to do a simple website for training purposes, in order to get into some more advanced CSS. However, I am running into an issue, as none of the url() images do show up.
Here is the HTML Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" />
<head>
<title>Mark in Japan</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>
<div id="wrap">
<header>
<h1>Mark in Japan</h1>
</header>
<nav>
<ul>
<li> <a class="active" title="home" href="#">Home</a></li>
<li><a title="reisenotizen" href="#">Reisenotizen</a></li>
<li><a title="essen" href="#">Essen</a></li>
<li><a title="medien" href="#">Medien</a></li>
<li><a title="japan" href="#">Über Japan</a></li>
</ul>
</nav>
<section>
<article>
<h2>Blog-Überschrift</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
</section>
<aside>
<h3>Überschrift Seitenleiste</h3>
<ul>
<li>List Content</li>
<li>List Content</li>
<li>List Content</li>
</ul>
</aside>
<footer>
<p>Copyright ©2016 Mark in Japan, alle Rechte vorbehalten.</p>
</footer>
</div>
</body>
</html>
And here follows the CSS:
body {
margin: 0;
padding: 0;
background: #026dc0 url('../bilder/bg.gif') repeat-x top;
font-family: Helvetica, sans-serif;
line-height: 1.4em;
}
h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
p, h2, h3 {
margin: 0 0 10px 0;
}
ul {
list-style-type: none;
}
#wrap {
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
padding: 10px;
width: 780px;
background: #fff;
border: 10px solid #044375;
}
header {
background: url('../bilder/insel.jpg') no-repeat;
height: 250px;
}
header h1 {
padding: 30px 0 30px 30px;
color: #fff;
background: url('../bilder/dot.png') no-repeat 10px 50%;
font-weight: normal;
letter-spacing: -1px;
}
nav {
margin: 10px 0 0 0;
padding: 10px;
background: #044375;
border-top: 5px solid #033761;
}
nav ul li {
display: inline;
margin: 0 10px 0 10px;
}
nav a {
color: #fff;
}
section {
margin: 10px 0 0 0;
padding: 10px;
float: left;
width: 505px;
}
aside {
margin: 10px 0 0 0;
padding: 10px;
float: right;
width: 225px;
}
aside ul {
margin: 0 0 40px 0;
}
aside h3 {
padding: 5px;
background: #eee;
border-bottom: 2px solid #ddd;
font-weight: normal;
}
footer {
clear: both;
background: #eee;
border-bottom: 2px solid #ddd;
}
I have done all code exactly, as provided in the excercise given to me. I have also ran the code through both CSS and HTML validation. They pass with no error at all, yet the images don't show up.
I have changed the <header> element to a <div> one, assigned an ID and tried moving the images from the folder to the page root, to see if that makes any difference, yet it was without avail.
If you have any suggestions, ideas, etc. I would be very happy.
Thanks in advance.
Adding as an answer with respect to the comment by the OP.
Adding a height and width for empty elements might fix this. Try it out.
Without Dimensions
The elements like <div> and <header> do not take up space, since they are empty and you are using background-image as CSS.
div {background: url("//placehold.it/500x100?text=Hello") center center no-repeat;}
header {background: url("//placehold.it/500x100?text=Hello") center center no-repeat;}
<div></div>
<header></header>
With Dimensions
The elements like <div> and <header> just need a height, as by default, they take up the full width.
div {background: url("//placehold.it/500x100?text=Hello") center center no-repeat; height: 100px;}
header {background: url("//placehold.it/500x100?text=Hello") center center no-repeat; height: 100px;}
<div></div>
<header></header>
This is the same issue that caused your problem.
So I have to make a web page for school using HTML and CSS. Everything appears to be 100% fine when I view it in my code preview but once I put it on my server the navigation bar is no longer aligned with my main body
Here is my CSS
body {
background-color:#2AA890
}
nav {
margin: auto;
width: 1000px;
}
ul {
padding: 0px;
margin: 45px;
list-style: none;
}
li a:link, li a:visited, li.selected {
float: left;
width: 110px;
line-height: 3em;
background-color: #e9e9e9;
color: #000000;
font-size: 16px;
text-align: center;
text-transform:capitalize;
text-decoration: none;
border-right: 3px #ba0000 solid;
}
li:last-child a {
width: 110px;
border-right: 0px #6e2525 solid;
}
.head {
text-align: left;
padding: 10px 10px 10px 10px
}
.box {
margin-left: 185;
width: 882;
height: 450;
background-color: #acacac;
text-align: left;
padding: 30px 10px 10px 10px
}
.pic1 {
width:900px;
}
.pic1 img {
float:right;
}
.pic1 p {
text-indent: 40px;
line-height: 1.5em;
font-family: sans-serif;
font-size: 17px;
margin-right:400px;
}
.head {
padding: 25px 0px 0px 45px
}
.pic1 p {
padding: 0px 5px 10px 8px
}
.pic1 img{
padding: 30px 20px 20px 10px;
}
and here is my HTML
<! DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Supplies</li>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
</ul>
</nav>
<div class="box">
<div class="pic1">
<img src="drew_brophy.jpg" alt="Art" title="Drew Brophy" width="480" height="374">
<div class="head">
<h2>How to Paint a Surfboard</h2>
</div>
<p>The surfboard, one of the most fun toys around. There is just one problem with it. The majority of them are plane white. There is no color and adding some stickers isn't a true way to express yourself! With a little time and some common items from your garage or hardware, you can make it so much better. You don't have to be a great artist or have lots of money to truly make that board your own. This site is a simple guide with some tips and tricks for painting your surfboard. When the waves aren't breaking and your looking at that board in the corner of your room, take some time and change it up! </p>
</div>
</div>
</body>
</html>
In your CSS, please add 'px' for height, width, height for 'box' class.
For Nav UL, remove the margin.
Sample:
http://jsfiddle.net/mrUqK/
margin-left: 185px
width: 882px
height: 450px
Hi please review the margin in your ul and in the .box class set an equal margin-left.
ul {
margin:45px 0px;
}
.box {
margin-left:0px;
}
Check it here http://jsfiddle.net/