I have been working on a grid system for a practice website for about two weeks now and I still can't figure it out. I have been watching youtube videos and reading articles left and right with no luck. This is what I have come up with thus far:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2A2A2A;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
li {
float: right;
text-color: white;
border-left: 1px solid white;
font-family: "Comic Sans MS";
}
li:hover {
background-color: #1D1D1D;
}
li a {
display: block;
padding: 8px;
color: white;
margin: 7px 5px 7px 5px;
}
li a:hover {
background-color: #1D1D1D;
color: white;
text-decoration: none;
}
li:first-child {
background-color: #00E006;
border: none
}
li:first-child:hover {
background-color: #05aa0a;
}
li:first-child a:hover {
background-color: #05aa0a;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.background {
background-color: grey;
}
p {
color: black;
font-family: "Trebuchet MS";
font-size: 16px;
margin: 10px;
}
a:hover {
text-decoration: none;
}
.bigger-text {
font-size: 20px;
}
.profile-img-border {
border: 1px solid black;
border-radius: 50%;
}
.img-border {
border: 3px solid black;
border-radius: 100%;
margin: 5px
}
div.img {
margin: 0 auto;
border: 1px solid #ccc;
float: left;
width: 280px;
display: block;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
background-color: white;
}
.container {
width: 1460px;
margin-right: auto;
margin-left:auto
}
five:first-child, four:first-child, three:first-child, two:first-child, one:first-child, six:first-child {
margin-left: 0;
}
.six {
width: 100%;
display: block;
}
.five {
width: 80%;
display: block;
float: left;
margin-left: 2%;
}
.four {
width: 66%;
display: block;
float: left;
margin-left: 2%;
}
.three {
width: 49%;
display: block;
float: left;
margin-left: 2%;
}
.two {
width: 32%;
display: block;
float: left;
margin-left: 2%;
}
.one {
width: 15%;
display: block;
float: left;
margin-left: 2%;
}
.row {
width: 100%;
clear: both;
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<Title>Personal Portfolio FCC</Title>
<link rel="stylesheet" href="Hello%20World.css">
</head>
<body class="background">
<div class="container">
<div class="row">
<div class="top-bar-box align-middle-v" align="right">
<ul>
<li style="float:left">
<a class="active">Home</a>
</li>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</div><!--Row 1 closer-->
<div class="row"><!--Row 2 opener-->
<div class="four">
<p>"text text text"</p>
</div>
<div class="two">
<img src="#" alt="A picture of a verry handsome
fellow(me)" class="profile-img-border"></img>
</div>
</div><!--Row 2 closer-->
</div>
</body>
</html>
you could start by moving this to the end
five:first-child,
four:first-child,
three:first-child,
two:first-child,
one:first-child,
six:first-child {
margin-left: 0;
}
and replacing it with
.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
margin-left: 0;
}
Related
Hi, I need to know the exact width of the inner text in CSS. As you can see in the image, I want those menu items to have a proper width respectively, not including paddings or margins, so that I can give them a hover effect like "Posts" item. Is there any method I can use to get the width of the inner text?
/* Basic settings */
#import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all .3s;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
li {
list-style-type: none;
}
img {
border: 0;
}
html, body {
height: 100%;
}
body {
font-family: "Roboto", Helvetica, sans-serif;
}
/* Main */
body {
background-color: whitesmoke;
}
header {
border-bottom: 1px solid #EEE;
height: 70px;
overflow: hidden;
background-color: white;
}
header > div {
vertical-align: middle;
}
header > #logo {
width: 15%;
padding: 20px;
border-right: 1px solid #EEE;
text-align: right;
display: inline-block;
}
header > #logo img {
width: 30px;
height: auto;
}
header > #search {
border-right: 1px solid #EEE;
width: 200px;
display: inline-block;
padding: 20px;
}
header > #search input {
border: 0;
outline: 0;
display: inline-block;
width: 80%;
vertical-align: middle;
padding-left: 10px;
}
header > #search a {
font-size: 1.2rem;
display: inline-block;
vertical-align: middle;
width: 20%;
}
header > #search > #search-box {
border: 1px solid #CCC;
border-radius: 100px;
overflow: hidden;
}
header > #gnb {
height: 70px;
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
}
header > #gnb ul {
margin: 0 30px;
line-height: 70px;
}
header > #gnb li {
display: inline-block;
}
header > #gnb li:not(:last-child) {
margin-right: 20px;
}
header > #gnb a {
display: inline-block;
font-weight: lighter;
}
header > #gnb a:hover {
transform: translateY(-5px);
}
.premium {
color: orangered;
}
#social-media-icons {
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
height: 70px;
}
#social-media-icons ul {
padding: 0 20px;
line-height: 70px;
}
#social-media-icons li {
display: inline-block;
}
#social-media-icons li:not(:last-child) {
margin-right: 15px;
}
#social-media-icons li a {
font-size: 2rem;
display: inline-block;
}
#social-media-icons li a:hover {
transform: translateY(-5px);
}
#profile {
display: inline-block;
vertical-align: middle;
}
#profile a {
margin-left: 20px;
}
#profile a img {
width: 50px;
height: 50px;
border-radius: 50%;
}
#sub-header {
border-bottom: 1px solid #EEE;
height: 50px;
background-color: white;
}
#sub-header ul {
width: 800px;
margin: 0 auto;
}
#sub-header li {
line-height: 47px;
display: inline-block;
border-bottom: 3px solid transparent;
padding: 0 20px;
}
#sub-header li:hover {
border-bottom: 3px solid cornflowerblue !important;
}
#sub-header a {
text-align: center;
display: inline-block;
width: 100%;
}
.selected {
border-bottom: 3px solid cornflowerblue !important;
}
main {
width: 1000px;
margin: 30px auto;
}
aside {
width: 200px;
background-color: white;
}
#bill-gates {
padding: 20px;
border-bottom: 1px solid #EEE;
}
#bill-gates-image {
margin-bottom: 20px;
}
#bill-gates-image > img {
margin: 0 auto;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
#bill-gates-bio {
text-align: center;
margin-bottom: 30px;
}
#bill-gates-bio > h2 {
margin-bottom: 5px;
}
#bill-gates-bio > p {
font-weight: lighter;
margin-bottom: 3px;
}
#bill-gates-bio > p:last-child {
color: #CCC;
}
#bill-gates-follow-button {
text-align: center;
margin-bottom: 10px;
}
#bill-gates-follow-button > a {
display: inline-block;
line-height: 20px;
padding: 10px 50px;
background-color: cornflowerblue;
color: white;
border-radius: 30px;
border: 1px solid transparent;
}
#bill-gates-follow-button > a:hover {
background-color: rgb(70, 134, 253);
}
#bill-gates-connect-button {
text-align: center;
}
#bill-gates-connect-button > a {
line-height: 20px;
display: inline-block;
padding: 10px 40px;
background-color: white;
color: cornflowerblue;
border: 1px solid cornflowerblue;
border-radius: 30px;
}
#bill-gates-connect-button > a:hover {
background-color: #EEE;
}
#aside-middle {
overflow: hidden;
border-bottom: 1px solid #EEE;
height: 80px;
}
#connections {
text-align: center;
float: left;
width: 50%;
height: 100%;
border-right: 1px solid #EEE;
}
#followers {
text-align: center;
float: right;
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Bill Gates</title>
</head>
<body>
<header>
<div id="logo">
<a href="#">
<img src="./img/logo.png" alt="LinkedIn logo">
</a>
</div><!--
--><div id="search">
<div id="search-box">
<input type="search" name="search" placeholder="Search"><!--
-->🔍
</div>
</div><!--
--><div id="gnb">
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Connections
</li>
<li>
Interest
</li>
<li class="premium">
Try Premium
</li>
</ul>
</div><!--
--><div id="social-media-icons">
<ul>
<li>
🗣
</li>
<li>
🔔
</li>
<li>
➕
</li>
</ul>
</div><!--
--><div id="profile">
<a href="#">
<img src="./img/avatar.jpg" alt="Profile image">
</a>
</div>
</header>
<div id="sub-header">
<ul>
<li class="selected">
Posts
</li><li>
Background
</li><li>
Recommendations
</li><li>
Following
</li>
</ul>
</div>
<main>
<aside>
<div id="bill-gates">
<div id="bill-gates-image">
<img src="./img/bill-gates-avatar.png" alt="Bill Gates Profile image">
</div>
<div id="bill-gates-bio">
<h2>Bill Gates</h2>
<p>Microsoft Founder</p>
<p>Greater Seattle Area</p>
</div>
<div id="bill-gates-follow-button">
Follow
</div>
<div id="bill-gates-connect-button">
Connect ↓
</div>
</div>
<div id="aside-middle">
<div id="connections">
<h3>200</h3>
<p>connections</p>
</div>
<div id="followers">
<h3>1.9M</h3>
<p>followers</p>
</div>
</div>
</aside>
</main>
</body>
</html>
Use the width property of an element, which gets the width of the content area excluding any paddings, borders or margins.
.bg-tag {
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
}
.bg-tag:focus {
padding-bottom: 2px;
border-bottom: 2px solid #000; #change colour as you like
width: 100%;
}
Background
I have this list:
How can I make the list be in line with the top bar, ie. the total width of the list will be 960px just like the top bar?
I don't understand why it isn't working. The size of each of the squares is 159px + 1px for margin, and yet they make a profit from the right that I didn't define.
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2TheGames</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header>
<div id="logo_bg">2Tg</div>
</header>
<article id="games">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
</ul>
</article>
</div>
</body>
</html>
Try this
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
margin-left: 0;
padding-left: 0;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
I am working on web page layouts. I created this one.
https://codepen.io/iamgonge/pen/paOxxb
I dont understand why the .container .left-side and .right-side elements start at the top of the browser and not below the header. Shouldn't the layout out be header->section(hero)->section(one)? I would think that the top of any of those three divs would be underneath the header but they are not. What amy I not understanding here?
body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}
header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}
.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
.main-links a:hover {
color: #00843d;
}
.main-links a:active {
color: red;
}
.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}
nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}
nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}
nav li:hover {
background: rgba(255, 255, 255, 0.25);
}
nav li:active {
border-bottom: 2px solid red;
color: red;
}
.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}
.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}
.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}
.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}
.nav-right p a:hover {
color: #00843d;
}
.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}
.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}
.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}
.rss-title,
.rss-date {
margin: 0px!important;
}
.rss-feed {
margin: 10px 5px 20px 0px;
}
.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}
.hero,
.one {
position: relative;
height: 100%;
}
.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}
.success:hover {
font-size: 71px;
}
#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}
#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}
#media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>
<nav>
<ul class="main-nav">
<li class="main-links">home</li>
<li class="main-links">about</li>
<li class="main-links">projects</li>
<li class="main-links">portal</li>
<li class="main-links">links</li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>
The reason is that you have applied position: fixed; to your <header> tag. When you do this you must account for the height of the header and push down other elements to restore the layout.
I am making a small 'news' tab for my website, i however want to have a border line until the end of the div, even if this means it goes past the text i have put, this would happen for every news line, currently i have tried this
.news {
width: 50%;
height: 40%;
background-color: #FFF;
float: right;
margin-top: 50px;
margin-right: 60px;
}
.news a {
text-decoration: none;
color: #000;
font-size: 21px;
}
.news p a {
content: "";
padding-bottom: 1%;
border-bottom: 2px solid #000;
}
.news image {
/* Nothing */
}
the border-bottom that i have defined should go until the end of the div but i haven't been able to find away to accomplish this, so i was wondering if this was possible to do or not
* {
margin: 0;
padding: 0;
min-width: 1px;
min-height: 1px;
}
html,
body {
width: 100%;
height: 115%;
overflow-x: hidden;
background-image: url('../img/bg.jpg');
}
header {
margin-top: 2%;
background-color: #FF0000;
margin-left: 12.1%;
width: 75%;
height: 180px;
}
header p {
font-size: 64px;
margin-left: 40%;
padding-top: 4.5%;
}
#nav {
margin-left: 12.1%;
width: 75%;
height: 50px;
background-color: #FF0000;
border-bottom: 1px solid #FFFFFF;
}
#nav ul li a {
display: inline-block;
text-align: center;
padding: 11px 14px;
text-decoration: none;
font-size: 24px;
}
#content {
margin-left: 12.1%;
width: 75%;
height: 73.9%;
background-color: #FF0000;
}
.news {
width: 50%;
height: 40%;
background-color: #FFF;
float: right;
margin-top: 50px;
margin-right: 60px;
}
.news a {
text-decoration: none;
color: #000;
font-size: 21px;
}
.news p a {
content: "";
padding-bottom: 1%;
border-bottom: 2px solid #000;
}
.news image {
/* I am not sure what to do here just yet */
}
#form {
padding-top: 10%;
width: 100%;
text-align: center;
display: block;
}
#form label {
font-size: 25px;
border: none;
}
#form input {
width: 30%;
height: 30px;
margin-bottom: 2%;
}
#form input[type=text],
input[type=password] {
border: 1px solid #FFFFFF;
border-radius: 2%;
}
#form input[type=text],
input[type=password] {
outline: none;
}
#form input[type=submit] {
background-color: #006099;
border: 1px solid #006099;
}
#form input[type=submit]:focus {
background-color: #005099;
outline: none;
}
#form label p {
color: #11FF00;
}
.downloadable {
text-align: center;
padding-top: 80px;
}
.downloadable a {} .downloadable a img {
width: 40%;
}
.downloadable a img:hover {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
footer {
text-align: center;
background-color: #FF9900;
width: 75%;
margin-left: 12.1%;
}
#nav #right {
float: right;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #FFFFFF;
}
#nav ul li {
float: left;
}
#nav ul a:hover {
transition: 0.5s;
background-color: #FFFF0F;
}
#login {
display: none;
float: right;
margin-top: 2%;
margin-right: 5%;
width: 25%;
height: 20%;
border: 1px solid #444444;
background-color: #FFFFFF;
}
#login form {
margin-left: 15%;
margin-top: 8%;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<header>
<p>Lost Story</p>
</header>
<div id="nav">
<ul>
<li>Home
</li>
<?php if(!isset($_COOKIE[ 'LoggedIn'])) { echo "<li>Register</li>"; } ?>
<li>Downloads
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Vote
</li>
<div id="right">
<?php if(isset($_COOKIE[ 'LoggedIn']) && !empty($_COOKIE[ 'LoggedIn'])) { echo "<li>Log Out</li>"; } else { echo "<li>Log in</li>"; } ?>
</div>
</ul>
</div>
<div id="content">
<div class="news">
<p>This is a test
</p>
</div>
</div>
<footer>Website made by Lucas Ouwens</footer>
</body>
</html>
Change your .news p a section to be this instead:
.news p a {
content: "";
padding-bottom: 1%;
border-bottom: 2px solid #000;
display: block;
width: 100%;
}
Inline elements like <a> will only be as wide as their contents. By changing your <a> to display: block;, you can then change its width to your liking. In this case, I believe you want width: 100%;.
The border-bottom does not go till the end as the a element to which you apply it has inline display (default display) and takes the width of the content.
Add display: block to .news p a and it will extend to the whole width.
Cheers!
Snippet below:
* {
margin: 0;
padding: 0;
min-width: 1px;
min-height: 1px;
}
html,
body {
width: 100%;
height: 115%;
overflow-x: hidden;
background-image: url('../img/bg.jpg');
}
header {
margin-top: 2%;
background-color: #FF0000;
margin-left: 12.1%;
width: 75%;
height: 180px;
}
header p {
font-size: 64px;
margin-left: 40%;
padding-top: 4.5%;
}
#nav {
margin-left: 12.1%;
width: 75%;
height: 50px;
background-color: #FF0000;
border-bottom: 1px solid #FFFFFF;
}
#nav ul li a {
display: inline-block;
text-align: center;
padding: 11px 14px;
text-decoration: none;
font-size: 24px;
}
#content {
margin-left: 12.1%;
width: 75%;
height: 73.9%;
background-color: #FF0000;
}
.news {
width: 50%;
height: 40%;
background-color: #FFF;
float: right;
margin-top: 50px;
margin-right: 60px;
}
.news a {
text-decoration: none;
color: #000;
font-size: 21px;
}
.news p a {
content: "";
padding-bottom: 1%;
border-bottom: 2px solid #000;
display: block;
}
.news image {
/* I am not sure what to do here just yet */
}
#form {
padding-top: 10%;
width: 100%;
text-align: center;
display: block;
}
#form label {
font-size: 25px;
border: none;
}
#form input {
width: 30%;
height: 30px;
margin-bottom: 2%;
}
#form input[type=text],
input[type=password] {
border: 1px solid #FFFFFF;
border-radius: 2%;
}
#form input[type=text],
input[type=password] {
outline: none;
}
#form input[type=submit] {
background-color: #006099;
border: 1px solid #006099;
}
#form input[type=submit]:focus {
background-color: #005099;
outline: none;
}
#form label p {
color: #11FF00;
}
.downloadable {
text-align: center;
padding-top: 80px;
}
.downloadable a {} .downloadable a img {
width: 40%;
}
.downloadable a img:hover {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
footer {
text-align: center;
background-color: #FF9900;
width: 75%;
margin-left: 12.1%;
}
#nav #right {
float: right;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #FFFFFF;
}
#nav ul li {
float: left;
}
#nav ul a:hover {
transition: 0.5s;
background-color: #FFFF0F;
}
#login {
display: none;
float: right;
margin-top: 2%;
margin-right: 5%;
width: 25%;
height: 20%;
border: 1px solid #444444;
background-color: #FFFFFF;
}
#login form {
margin-left: 15%;
margin-top: 8%;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<header>
<p>Lost Story</p>
</header>
<div id="nav">
<ul>
<li>Home
</li>
<?php if(!isset($_COOKIE[ 'LoggedIn'])) { echo "<li>Register</li>"; } ?>
<li>Downloads
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Vote
</li>
<div id="right">
<?php if(isset($_COOKIE[ 'LoggedIn']) && !empty($_COOKIE[ 'LoggedIn'])) { echo "<li>Log Out</li>"; } else { echo "<li>Log in</li>"; } ?>
</div>
</ul>
</div>
<div id="content">
<div class="news">
<p>This is a test
</p>
</div>
</div>
<footer>Website made by Lucas Ouwens</footer>
</body>
</html>
Perhaps you can use hr tag for it and style it? See below (line in red), this line:
<hr style="border-top: 2px solid; background-color: #ff0000; color:#ff0000">
* {
margin: 0;
padding: 0;
min-width: 1px;
min-height: 1px;
}
html,body {
width: 100%;
height: 115%;
overflow-x: hidden;
background-image: url('../img/bg.jpg');
}
header {
margin-top: 2%;
background-color: #FF0000;
margin-left: 12.1%;
width: 75%;
height: 180px;
}
header p {
font-size: 64px;
margin-left: 40%;
padding-top: 4.5%;
}
#nav {
margin-left: 12.1%;
width: 75%;
height: 50px;
background-color: #FF0000;
border-bottom: 1px solid #FFFFFF;
}
#nav ul li a {
display: inline-block;
text-align: center;
padding: 11px 14px;
text-decoration: none;
font-size: 24px;
}
#content {
margin-left: 12.1%;
width: 75%;
height: 73.9%;
background-color: #FF0000;
}
.news {
width: 50%;
height: 40%;
background-color: #FFF;
float: right;
margin-top: 50px;
margin-right: 60px;
}
.news a {
text-decoration: none;
color: #000;
font-size: 21px;
}
.news p a {
content: "";
padding-bottom: 1%;
border-bottom: 2px solid #000;
}
.news image {
/* I am not sure what to do here just yet */
}
#form {
padding-top: 10%;
width: 100%;
text-align: center;
display: block;
}
#form label {
font-size: 25px;
border: none;
}
#form input {
width: 30%;
height: 30px;
margin-bottom: 2%;
}
#form input[type=text], input[type=password] {
border: 1px solid #FFFFFF;
border-radius: 2%;
}
#form input[type=text], input[type=password] {
outline: none;
}
#form input[type=submit] {
background-color: #006099;
border: 1px solid #006099;
}
#form input[type=submit]:focus {
background-color: #005099;
outline: none;
}
#form label p {
color: #11FF00;
}
.downloadable {
text-align: center;
padding-top: 80px;
}
.downloadable a {
}
.downloadable a img {
width: 40%;
}
.downloadable a img:hover {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
footer {
text-align: center;
background-color: #FF9900;
width: 75%;
margin-left: 12.1%;
}
#nav #right {
float: right;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #FFFFFF;
}
#nav ul li {
float: left;
}
#nav ul a:hover {
transition: 0.5s;
background-color: #FFFF0F;
}
#login {
display: none;
float: right;
margin-top: 2%;
margin-right: 5%;
width: 25%;
height: 20%;
border: 1px solid #444444;
background-color: #FFFFFF;
}
#login form {
margin-left: 15%;
margin-top: 8%;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<header><p> Lost Story </p></header>
<div id="nav">
<ul>
<li>Home</li>
<?php
if(!isset($_COOKIE['LoggedIn'])) {
echo "<li>Register</li>";
}
?>
<li>Downloads</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<div id="right">
<?php
if(isset($_COOKIE['LoggedIn']) && !empty($_COOKIE['LoggedIn'])) {
echo "<li>Log Out</li>";
} else {
echo "<li>Log in</li>";
}
?>
</div>
</ul>
</div>
<div id="content">
<div class="news">
<p>
This is a test
<hr style="border-top: 2px solid; background-color: #ff0000; color: #ff0000">
</p>
</div>
</div>
<footer> Website made by Lucas Ouwens </footer>
</body>
</html>
I was playing around with the display:table/display:table-cell for nav menus and I've run into a problem. Essentially I am wanting each of the items to be spaced evenly across the given length of the UL.
I'm not sure what I'm missing but it seems to be giving the majority of the space to the first list element.
What am I missing?
HTML:
<div id="container">
<div id="fixedWidth">
<div id="logoAndLinks">
<div id="tapMatesLogo">
<p>Tapemates.</p>
</div>
<ul>
<li>Work</li>
<li>Story</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div><!-- logo and links -->
</div>
</div><!--end container -->
CSS:
*
{
margin: 0;
padding: 0;
}
#container
{
height: 1100px;
width: 100%;
display: block;
background: white;
border: 1px solid black;
}
#fixedWidth
{
height: 1100px;
width: 1100px;
display: block;
margin-top: 103px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
}
#logoAndLinks
{
border: 1px solid black;
display: block;
width: 1060px;
height: 60px;
margin-left: 20px;
}
#tapMatesLogo
{
display: block;
float: left;
height: 56px;
width: 220px;
line-height:58px;
//border: 1px solid #ccc;
}
#tapMatesLogo p
{
color: #7933AE;
font-family: CenturyGothic, AppleGothic, sans-serif;
font-size: 43px;
}
ul
{
display: table;
//float: right;
list-style: none;
height: 32px;
width: 357px;
border: 1px solid black;
}
ul li
{
border: 1px solid black;
//float: left;
display: table-cell;
//padding-right:30px;
width: 100%;
font-size: 22px;
line-height: 30px;
font-family: CenturyGothic, AppleGothic, sans-serif;
}
Give the width of li 25%
*
{
margin: 0;
padding: 0;
}
#container
{
height: 1100px;
width: 100%;
display: block;
background: white;
border: 1px solid black;
}
#fixedWidth
{
height: 1100px;
width: 1100px;
display: block;
margin-top: 103px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
}
#logoAndLinks
{
border: 1px solid black;
display: block;
width: 1060px;
height: 60px;
margin-left: 20px;
}
#tapMatesLogo
{
display: block;
float: left;
height: 56px;
width: 220px;
line-height:58px;
//border: 1px solid #ccc;
}
#tapMatesLogo p
{
color: #7933AE;
font-family: CenturyGothic, AppleGothic, sans-serif;
font-size: 43px;
}
ul
{
display: table;
//float: right;
list-style: none;
height: 32px;
width: 357px;
border: 1px solid black;
}
ul li
{
border: 1px solid black;
//float: left;
display: table-cell;
//padding-right:30px;
width: 25%;
font-size: 22px;
line-height: 30px;
font-family: CenturyGothic, AppleGothic, sans-serif;
}
<div id="container">
<div id="fixedWidth">
<div id="logoAndLinks">
<div id="tapMatesLogo">
<p>Tapemates.</p>
</div>
<ul>
<li>Work</li>
<li>Story</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div><!-- logo and links -->
</div>
</div><!--end container -->
Try adding table-layout: fixed to the ul element
https://jsfiddle.net/2ewov2qu/