I am trying to place a div underneath my header that contains my main content but for some reason, the image of my logo causes the div to appear shifted to the right. I'm no expert at HTML/CSS and I feel dumb for not being able to figure it out.
Here is a screenshot of what I'm seeing (Images substituted with flowers)
Code:
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
h2 {
color: #444;
font-size: 50px;
text-align: right;
line-height: 90%;
}
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: black;
font-size: 11px;
padding-bottom: 15px;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 960px;
}
/* Header */
header {
height: 120px;
padding-bottom: 15px;
}
header h1 {
float: left;
margin-top: 32px;
}
header nav {
float: right;
}
header nav ul li {
float: left;
display: inline-block;
margin-top: 70px;
}
header nav ul li a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
padding-top: 1px;
height: 500px;
margin-top: 1px;
position: relative;
}
<body>
<header>
<div class="wrapper">
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
</div>
</body>
It seems to work if I set my logo as the background of the header, but that sharply decreases its quality and I was hoping to later turn my logo into a link. I've searched far and wide for an answer here but nothing seems to be working. Any help is very very much appreciated.
As you are using floats to position your elements, you need to clear those floats in order for the content to appear where you want it to. In the below I have added a clear to the about div as a simple demonstration:
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
h2 {
color: #444;
font-size: 50px;
text-align: right;
line-height: 90%;
}
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: black;
font-size: 11px;
padding-bottom: 15px;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 960px;
}
/* Header */
header {
height: 120px;
padding-bottom: 15px;
}
header h1 {
float: left;
margin-top: 32px;
}
header nav {
float: right;
}
header nav ul li {
float: left;
display: inline-block;
margin-top: 70px;
}
header nav ul li a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
clear:both;
padding-top: 1px;
height: 500px;
margin-top: 1px;
position: relative;
}
<body>
<header>
<div class="wrapper">
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
</div>
</body>
There are many ways to clear floats - here are a couple of useful links about clearing floats:
The How and Why of Clearing Floats
The Clearfix: Force an Element To Self-Clear its Children
I would recommend though that you move on from floats as with css3, there are now better ways to do layout - for example with display:flex
You need to clear the floated elements in your <header> so the body of your page doesn't "snag" on it. You can use what is know as a clearfix to fix this.
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
h2 {
color: #444;
font-size: 50px;
text-align: right;
line-height: 90%;
}
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: black;
font-size: 11px;
padding-bottom: 15px;
}
/* Header */
header {
margin: 0 auto;
padding: 0 10px;
width: 960px;
height: 120px;
padding-bottom: 15px;
}
header h1 {
float: left;
margin-top: 32px;
}
header nav {
float: right;
}
header nav ul li {
float: left;
display: inline-block;
margin-top: 70px;
}
header nav ul li a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
padding-top: 1px;
height: 500px;
margin-top: 1px;
position: relative;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
<header>
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main class="cf" id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></main>
If this is a new site I would recommend using flexbox instead of floats.
align-items: center; will vertically center elements within <header>.
justify-content: space-between; will push the <h1> to the left and the <nav> to the right.
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding-bottom: 15px;
width: 960px;
}
header ul {
display: flex;
}
header ul,
header li {
margin: 0;
padding: 0;
list-style: none;
}
header nav a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
<header>
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main class="cf" id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></main>
CSS cleaned up and navigation items positioned.
I eliminated the floats because I believe they should be avoided if possible. Floats do not follow the natural document flow.
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
display: flex;
align-items: center;
}
.wrapper ul {
margin-left: auto;
}
.wrapper ul li {
display: inline-block;
list-style: none;
min-width: 70px;
}
/* Header */
header {
height: 120px;
width: 960px;
padding-bottom: 15px;
}
header ul li a {
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
padding: 1px 0 0 10px;
height: 500px;
margin-top: 1px;
position: relative;
}
<header>
<div class="wrapper">
<img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="100" vspace="20">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<div id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
</div>
Related
html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>
I'm not sure why my footer is not centered. The main header, menu, and social media links are all centered, but it's just the footer that is not. I've tried redoing the code from scratch, but I'm not sure if I missed something. I'm new to coding, so any help would be appreciated.
The problem is in your footer css declaration. You have the padding set to 20px and width at 100%, which is adding some space to the left of your footer and offsetting it, but since the width is 100%, it spans past the page width.
Just change the padding to only apply to the top and bottom
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px 0;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}
Your problem is with box-sizing box-sizing: content-box is the default setting, which means that the rendering engine measures the width (set here to 100%) before adding the padding. box-sizing: content-box will tell the rendering engine to add the padding into the measurement, so your width: 100% will include the 20px padding.
html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
box-sizing: border-box;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>
i have a project at school where im trying to make a flashgames website but im stuck with a problem.I want the picture be bigger than the gray box.The picture how i want it : https://prntscr.com/frvzyy
My html Code:
*{
margin: 0px;
background-color:darkred;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 30%;
padding-right: 30%;
overflow: hidden;
background-color: gray;
}
li {
float: left;
}
li a {
display: block;
font-family: Verdana, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: darkred;
}
#logo {
display: block;
font-family: Verdana, Helvetica, sans-serif;
background-color: black;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: black;
}
}
p{font-family:Tahoma;}
<!DOCTYPE html>
<html>
<head>
<title>Games</title>
<link rel="stylesheet" href="css/nav.css">
</head>
<ul>
<li>Games</li>
<li>1vs1 Games</li>
<li id="logo"><img src="src/flash%20games%20logo.png" style="width:250px;"></li>
<li>Categories</li>
<li>About us</li>
</ul>
<h1>Games</h1>
<p>content bla bla</p>
</html>
You need to make some changes to achieve this.
*{
margin: 0px;
background-color:darkred;
}
.nav{
height: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
/*padding-left: 30%;
padding-right: 30%;*/
/*overflow: hidden;*/
background-color: gray;
height: 48px;
}
li {
/*float: left;*/
display: inline-block;
vertical-align: top;
margin: 0 -2px;
}
li a {
display: block;
font-family: Verdana, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: darkred;
}
#logo {
/*display: block;*/
font-family: Verdana, Helvetica, sans-serif;
background-color: black;
text-align: center;
padding: 10px;
text-decoration: none;
}
#logo img{
display: block;
}
li a:hover {
background-color: black;
}
}
p{font-family:Tahoma;}
<div class="nav">
<ul>
<li>Games</li>
<li>1vs1 Games</li>
<li id="logo"><img src="https://s-media-cache-ak0.pinimg.com/originals/94/77/f9/9477f98e6d5154911c05467c4acb24c5.jpg" style="width:250px;"></li>
<li>Categories</li>
<li>About us</li>
</ul>
</div>
<h1>Games</h1>
<p>content bla bla</p>
I hope it will helps you :)
I would like a logo to appaear in the center of the navigation bar. At the moment i've made it really small just to ensure I can see it for now but will sort the size out afterwards.
Here is a photoshop design of how I want it to look:
https://gyazo.com/c1b0d25c4fe94a33edf3937576324229
Here is how it looks currently:
https://gyazo.com/4432c9c4874a082a9c4a4c5eb6d7af12
Any help would be greatly appreciated.
HTML:
<body id="chesters">
<header>
<nav>
<ul>
<li>Menu</li>
<li>Burritos</li>
<li><img class="header-image" src="assets/Headerlogo1.png"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="Page">
</div> <!-- Page -->
</body>
CSS:
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
/*width: 100px;
height: 400px;*/
align-content: center;
margin-top: -30px;
}
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav {
}
nav ul {
text-align: center;
display: table;
}
nav li {
display: table-cell;
vertical-align: middle;
/*display: inline;*/
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
}
Good morning!
Usually you want to control the nav ul and nav ul li elements appearance together without using floats and heavy padding. take a look at my revisions here. For the logo, you can just put it into an li element:
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 140px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
}
nav {
}
nav ul{
text-align: center;
display: table;
}
nav li {
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #FFF;
}
<body id="chesters">
<header>
<nav>
<ul>
<li>Menu</li>
<li>Burritos</li>
<li><img class="header-image" src="chesters.png"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="Page">
</div> <!-- Page -->
</body>
Try this revision.
Add this to your CSS:
nav ul {
text-align: center;
}
The li elements shouldn't be affected but the image will be centered.
Add container class before nav and set max-width and margin: 0 auto
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Menu</li>
<li>Takeaway Burritos</li>
<li><img class="header-image" src="assets/Headerlogo1.png"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div id="Page">
</div>
<!-- Page -->
</body>
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 140px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
}
.container {
max-width: 1282px;
margin: 0 auto;
}
nav {}
nav ul {
text-align: center;
display: table;
}
nav li {
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
padding-right: 20px;
}
nav li a:hover {
color: #FFF;
}
I have the following design:
Notice the signature on the bottom under the quotation. Its very nicely placed on the right aligned with the text.
Here is my html css version so far:
I'm having trouble figuring out the correct way to get the signature over to the right and aligned with the right of the quotation.
Here is my html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/top-logo.png" alt="ProvenWord Logo">
</div>
<ul class="nav">
<li>Home</li>
<li>Proofreading</li>
<li>Editing</li>
<li>About</li>
<li>How it works</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div> <!--close header -->
<div class="tagline">
<div class="section-container">
<h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
Free Quote
<p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
<img src="images/sudthida-signature.png" alt="Sudthida's Signature">
<p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
</div><!--close section-container-->
</div><!--close tagline-->
</body>
</html>
Here is my css:
html, body, h1, h2, h3, h4, p, ol, ul, li, a, div {
padding: 0px;
border: 0px;
margin: 0px;
font-size: 100%;
font: inherit;
}
/*----------------------------*/
/*----- Tag Declarations -----*/
/*--------------------------- */
body {
font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}
h1{
font-size: 36px;
font-weight: 400;
line-height: 1.2;
}
h2 {
font-size: 28px;
padding-bottom: 25px;
font-weight: 300;
line-height: 1.3;
letter-spacing: 1px;
}
h2 strong {
font-weight: 600;
}
p {
font-size: 15px;
line-height: 140%;
font-weight: 300;
letter-spacing: 1px;
}
.button {
display: inline-block;
line-height: 48px; /*setting this to the button height makes the text centered */
height: 48px;
width: 185px;
background: #ffd000;
border: 2px solid #b59400;
font-size: 18px;
font-weight: 100;x;
border-radius: 60px;
}
a.button {
text-decoration: none;
color: #000000;
}
a.button:hover {
background: #feef00;
}
li {
list-style: none;
margin-bottom: 0.5em;
text-indent: 1.5em;
background-image: url(images/check.png);
background-repeat: no-repeat;
letter-spacing: 1px;
font-weight: 200;
font-size: 12px;
}
.section-container {
width: 520px;
margin: 0 auto;
}
/*--------------------------*/
/*----- Header Section -----*/
/*--------------------------*/
.header {
padding: 25px 0px 32px 48px;
}
.logo img {
float: left;
padding-right: 130px;
}
.nav {
list-style-type: none;
padding-top: 32px;
}
.nav li {
display: inline;
padding-right: 10px;
font-size: 12px;
font-weight: 200;
}
/*---------------------------*/
/*----- Tagline Section -----*/
/*---------------------------*/
.tagline {
background: #abdfe8 url(images/bg-tagline.png) no-repeat;
height: 450px;
text-align: center;
}
.section-container h1 {
padding-top: 130px;
}
.section-container h1 span {
letter-spacing: 2px;
}
.section-container .button {
margin: 40px 0 40px 0;
}
.first-quote {
font-size: 13px;
line-height: 1.5;
color: white;
margin: 0 25px 10px 25px;
}
.section-container img {
display: block;
text-align: right;
}
.section-container .school {
font-size: 10px;
letter-spacing: 0.5px;
text-align: center;
}
I have used the margin property to move the image over but I thought margins were used to create space between block elements. I don't want to hack my way to the layout, I want to understand how this works and what is the correct way to use the different properties in css.
Any help much appreciated.
You can use float to align the image to the right, combined with margin to place it exactly where needed, then just clear the text below the image.
I've commented the changes in your CSS below.
html,
body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
li,
a,
div {
padding: 0px;
border: 0px;
margin: 0px;
font-size: 100%;
font: inherit;
}
/*----------------------------*/
/*----- Tag Declarations -----*/
/*--------------------------- */
body {
font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}
h1 {
font-size: 36px;
font-weight: 400;
line-height: 1.2;
}
h2 {
font-size: 28px;
padding-bottom: 25px;
font-weight: 300;
line-height: 1.3;
letter-spacing: 1px;
}
h2 strong {
font-weight: 600;
}
p {
font-size: 15px;
line-height: 140%;
font-weight: 300;
letter-spacing: 1px;
}
.button {
display: inline-block;
line-height: 48px;
/*setting this to the button height makes the text centered */
height: 48px;
width: 185px;
background: #ffd000;
border: 2px solid #b59400;
font-size: 18px;
font-weight: 100;
x;
border-radius: 60px;
}
a.button {
text-decoration: none;
color: #000000;
}
a.button:hover {
background: #feef00;
}
li {
list-style: none;
margin-bottom: 0.5em;
text-indent: 1.5em;
background-image: url(images/check.png);
background-repeat: no-repeat;
letter-spacing: 1px;
font-weight: 200;
font-size: 12px;
}
.section-container {
width: 520px;
margin: 0 auto;
}
/*--------------------------*/
/*----- Header Section -----*/
/*--------------------------*/
.header {
padding: 25px 0px 32px 48px;
}
.logo img {
float: left;
padding-right: 130px;
}
.nav {
list-style-type: none;
padding-top: 32px;
}
.nav li {
display: inline;
padding-right: 10px;
font-size: 12px;
font-weight: 200;
}
/*---------------------------*/
/*----- Tagline Section -----*/
/*---------------------------*/
.tagline {
background: #abdfe8 url(images/bg-tagline.png) no-repeat;
height: 450px;
text-align: center;
}
.section-container h1 {
padding-top: 130px;
}
.section-container h1 span {
letter-spacing: 2px;
}
.section-container .button {
margin: 40px 0 40px 0;
}
.first-quote {
font-size: 13px;
line-height: 1.5;
color: white;
margin: 0 25px 10px 25px;
}
.section-container img {
display: block;
float: right; /* USE FLOAT */
margin-right: 1.8em; /* WITH MARGIN TO GIVE THE CORRECT POSITION */
}
.section-container .school {
clear: both; /* CLEAR THE FLOATED IMAGE */
font-size: 10px;
letter-spacing: 0.5px;
text-align: center;
}
<div class="header">
<div class="logo">
<img src="images/top-logo.png" alt="ProvenWord Logo">
</div>
<ul class="nav">
<li>Home</li>
<li>Proofreading</li>
<li>Editing</li>
<li>About</li>
<li>How it works</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
<!--close header -->
<div class="tagline">
<div class="section-container">
<h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
Free Quote
<p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
<img src="images/sudthida-signature.png" alt="Sudthida's Signature">
<p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
</div>
<!--close section-container-->
</div>
<!--close tagline-->
I would like to add a line above and below my nav-bar that would fade out at the ends of it, like shown in the image below:
this is my HTML so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Portfolio - Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>About Me</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>Contact</li>
</ul>
</div>
<div id="content">
<div id="webInfo">
<p>Hi, my name is Alex Trotter and this is my portfolio website</p>
<p>below you will find some of work that I have created.</p>
<p>Above you can navigate to different pages to learn more about me.</p>
</div>
<div id="exampleWork1"></div>
<div id="exampleWork2"></div>
<div id="exampleWork3"></div>
</div>
</body>
And this is my CSS:
body {
display: block;
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
width: 1920px;
height: 200px;
display: inline-block;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
width: 100%;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
.circle {
padding-top: 25px;
}
Whenever I try to add a border to the nav-bar it goes across the entire screen, but if I make it so that the nav-bar border is only as big as it needs to be, the nav bar isn't in the center of the screen. What is the best way to solve this problem?
A couple of positioned pseudo-elements with a linear gradient background would be probably the simplest method.
Note: Your menu HTML is invalid, ul can only have li as direct children..not images, you can search SO for other options for menu dividers.
body {
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
height: 200px;
text-align: center;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
position: relative;
}
#nav::before,
#nav:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75) 50%, rgba(0, 0, 0, 0) 100%);
}
#nav::before {
top: 0;
}
#nav:after {
bottom: 0;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home
</li>
<li>About Me
</li>
<li>Contact
</li>
</ul>
</div>
in the CSS, add a hover:
#nav {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#nav.noHighlight {
background:transparent;
border-color:transparent;
}
then add a jQuery script, and put
setTimeout(function(){
$('#abc').fadeIn();
$('#abc').addClass('noHighlight');
},1000);