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/
Related
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.
I can't seem to remove the first nav menu separator (small-black-heart-md.png) from the navigation. All the images are showing up in the right place except the first one. It's showing up before the first list item, "Our Story". I've tried using the pseudo element nav li:first-child:before {display:none;} but I did not get any results. Help is greatly appreciated. This issue has me perplexed and I can't seem to find a clear answer on the web. Thanks for helping out a noob! :)
Here is my CSS:
.banner {
background-image: url("images/navimages/topimage.jpg");
padding: 108px 200px;
}
* {
padding:0;
margin:0;
}
body {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #C4EDFF;
font-family: 'Tangerine', serif;
text-align: center;
}
p {
font-family: Arial;
font-size: 14px;
text-shadow: 1px 1px 1px #aaa;
text-align: left;
}
nav li {
text-shadow: 5px 5px 5px #aaa;
background-image: url(images/navimages/small-black-heart-md.png);
background-repeat: no-repeat;
padding-left: 40;
padding-right: 40;
font-size: 40px;
font-weight: bold;
display: inline;
}
li a {
color: gray;
text-decoration: none;
}
audio {
width: 640px;
}
a:hover {
color: black;
}
Here is my HTML:
<head>
<head>
<title>The Big Day</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<body>
<header class="banner"></header>
<nav>
<ul>
<li>Our Story</li>
<li>Photos</li>
<li>Details</li>
<li>Wish List</li>
<li>Home</li>
</ul>
</nav>
<BR><BR><BR>
<div style="
padding: 60px;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 620px;
border: 10px double;
text-align: left;
box-shadow: 10px 10px 5px #888888;">
<p>Content here...</p></div>
</body>
</head>
</html>
Just use:
nav li:first-child{
background:none;
}
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>
The left sidebar won't position itself on the left side of the main area. It seems to get stuck on the navigation link. It should be placed "below" the navigation links and the "buttons" should overlap the sidebar just as they overlap the header. Then I want the text to wrap around the sidebar (works in the code I posted here).
I have tried using z-index on the navigation and sidebar. I have also tried using position:relative; and float:left; on the sidebar without result. The text should also wrap around the sidebar as it is in the example below. I managed to move the sidebar to the left using position:relative; but then the text won't wrap it.
HTML:
<html lang="sv">
<head>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbanner">
<h1>TopBanner</h1>
</div>
<div class="header">
<h1>Header</h1>
<h2>underrubrik</h2>
</div>
<div class="navigation">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div id="main">
<div class="leftsidebar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div class="content">
<p>Content text here</p>
</div>
</body>
</html>
CSS
body {
margin: 0;
background: #fff;
}
/* BANNER */
.topbanner {
width: 980px;
height: 80px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
/* HEADER */
.header {
width: 980px;
height: 100px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
.header h1 {
margin: 0;
}
.header h2 {
margin: 0;
}
/* NAVIGATION LINKS */
.navigation {
width: 980px;
margin: auto;
}
.navigation a {
text-decoration: none;
color: #000;
}
.navigation ul {
float: left;
margin: -10px 0 0 0;
list-style: none;
}
.navigation ul li {
display: inline;
padding: 0 10px 0 10px;
border: 1px solid;
background: #fff;
}
.navigation ul li:first-child {
border-radius: 10px 0 0 10px;
}
.navigation ul li:last-child {
border-radius: 0 10px 10px 0;
}
/* CONTENT */
#main {
width: 980px;
margin: 0 auto;
border: 1px solid;
}
.leftsidebar {
width: 20%;
position: relative;
}
.leftsidebar ul {
margin: 0;
border: 1px solid;
list-style: none;
}
.leftsidebar ul li {
}
.content {
}
.content p {
font-family: sans-serif;
}
Set the following for .navigation ul styles
margin: -10px 0 -10px 0;
position: relative;
z-index: 2;
list-style: none;
Add float: left; to .leftsidebar to allow text to wrap around that, and add padding-top: 20px 30px; (adjust to your liking) to .leftsidebar ul to compensate for the overlap.
http://jsfiddle.net/ocfjsqpp/3/
Try putting padding-left:0 in your ul container.
Here have a look at what I did here with you code, also you haven't ended one of you h2 tags at the start.
Visit http://jsfiddle.net/4p6gdka9/ enter code here
I have two problems with my menu bar. What I want to achieve is to center the links on the header (including the logo picture) and have exactly the same height for the header as the menu. When I add the links it creates a margin on top and on bottom (so the header will extend) and I have no idea why. The margin size depends on the font size and if I want to remove it I have to add a -something px margin and have to try pixel by pixel what the number should be. I'm pretty sure there's an easier solution to that... My other problem is that I can't center the whole menu bar within the header unless I specify a specific width. Obviously I don't know how wide my menu bar will be (and even if I measure it somehow, what if I change the links later?) I'm fairly new to HTML and CSS so I've probably made a bunch of mistakes, I just keep changing the codes until I get what I want but since I'm trying to learn it better I'm aiming for more understanding than random coding so feel free to correct anything. Here's the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li id="right">English</li>
</ul>
</div>
</div>
</body>
</html>
And the CSS:
#charset "utf-8";
body {
background-color: #efe8df;
}
#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}
#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}
#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}
Thanks in advance!
Header is extending because for ul and li all browser have there margin and padding standards.
You should use reset.css and normalize.css to remove default css property of some common elements.
so if you want just for list use
ul,li{margin:0; padding:0} or how much you want.
To center align you can give following css properties
to header
display: table
to menu
display : table-cell;
text-align:center
to ul
display:inline-block
to li
float:left
Check fiddle
http://jsfiddle.net/gJFy8/1/
try adding this in your css, change the width to whatever you want according to your need
#menu {
width: 900px;
add width to the #menu div
menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}