I am trying to use css on an <ul> but for some reason I can't figure out why it won't apply. I am trying to style the list into a menu bar for practice but am unable to get it to register. Can anyone see what I'm missing?
I have tried #menu ul{} #menu ul li{} but neither of those work either.
#container {
width: 1050px;
border: 1px solid grey;
margin: 0 auto;
}
#header {
height: 100px;
padding: 10px 0;
}
#brand {
float: left;
}
h1 a{
font-size: 40px;
font-weight: 100;
text-decoration: none;
color: #861BFF;
}
#searchBox {
float: right;
background: linear-gradient(#E4F2B9, #B7E953);
width: 400px;
height: 50px;
padding: 20px 20px 0 20px;
}
.text {
float: left;
width: 200px;
padding: 5px;
font-size: 15px;
color: #E36A0C;
background: white url(./images/search22px.png) right center no-repeat;
}
.submit {
float: right;
font-weight: bold;
padding: 5px;
color: white;
background: #A751D6;
font-size: 15px;
}
ul {
list-style: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Maths Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="maths.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="brand">
<h1>Maths the Fun Way</h1>
</div>
<div id="searchBox">
<form method="get">
<input type="text" class="text" name="searchBox">
<input type="submit" class="submit" value="Search a Topic">
</form>
</div>
<div class="clear">
</div>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Online Tutorials</li>
<li>Get a Private tutor</li>
<li>Sign Up</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
The above is the full code. I have tried in both firefox and chromium and the problem is present in both.
Your code works perfectly fine as Adam mentioned.
See https://jsfiddle.net/kabsw9gr/
#menu ul {
margin: 0 0 10px 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(#E4F2B9, #B7E953);
}
I currently have a heading 1 and logo on the same line of the header, and now I want to have a background colour for the header. I would ideally want this to come down below the nav bar as well.
The issue I'm having is that the colour doesnt fill the top part of the page as I thought it would. It only covers the heading and it also covers the logo on the same line.
How would I stop the colour from going over the image and how would I make the colour spread from the top of the page to below the nav bar.
HTML:
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
EDIT: This is what I mean about the background colour covering the logo:
I swapped the HTML header tag to be within the body. Your body tag is where it will house all your html minus the head tag that has your title. Not a big deal since it renders fine, just a best practice. I also changed the css for your header img to have a z-index which places the image on top of the h1 tag and your h1 tag to have a z-index of -100 to always fall to the back.
Hope this helps.
.header img {
float: left;
background: #555;
z-index: 100; /* added */
width: 100px; /* added */
}
.header h1 {
z-index: -1; /* added */
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
<header>
<div class="header">
<img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg"
alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
</body>
</html>
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header style=" background-color:#D3D3D3;">
<div class="header" >
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
Is this what you are expecting ?
you are seeing gap between header and navbar -- this is beacause the h1 inside the header had default margin, remove that, give padding instead. Also remover brs after header.
Change your .header h1 css to
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
What do you mean by stop the colour from going over the image ?
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
.headerContainer {
background-color:#D3D3D3;
padding-bottom: 10px;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="headerContainer">
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</div>
</header>
<body>
</body>
</html>
I faced with issue using property "float" in CSS.
On the top of the page occurs 10px margin.
How to fix it?
PS.Adding empty div to parent div with id="background1" doesn't work
Also I read this article https://css-tricks.com/all-about-floats/ but don't get how to apply those Techniques for Clearing Floats
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
#background1 {
background: #F6F7FB;
width: 100%;
height: 527px;
padding:0;
position: relative;
}
/*Header menu*/
#background1 li {
list-style-type: none;
display:inline;
}
#background1 li a {
font-family: HalisGR-Medium;
font-size: 20px;
color: #3B3B3B;
text-decoration: none;
float: right;
margin-left: 52px;
margin-top: 24px;
}
#navmenu {
margin-right: 72px;
}
/*Header menu ends*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Header menu-->
<div id="background1" style="clear: both">
<div style="clear: both;"></div>
<section id="navmenu">
<ul>
<li>Projects</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</section>
</div>
</body>
</html>
It isn't because of the floated children. Just apply margin:0; to the ul. The margin-top is what's collapsing and showing outside of the parent.
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
#background1 {
background: #F6F7FB;
width: 100%;
height: 527px;
padding:0;
position: relative;
}
/*Header menu*/
#background1 li {
list-style-type: none;
display:inline;
}
#background1 li a {
font-family: HalisGR-Medium;
font-size: 20px;
color: #3B3B3B;
text-decoration: none;
float: right;
margin-left: 52px;
margin-top: 24px;
}
#navmenu {
margin-right: 72px;
}
#navmenu ul {
margin: 0;
}
/*Header menu ends*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Header menu-->
<div id="background1" style="clear: both">
<div style="clear: both;"></div>
<section id="navmenu">
<ul>
<li>Projects</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</section>
</div>
</body>
</html>
I put a link to the homepage on my header image but that link is coming up on all the buttons and headings and paragraphs that I have on my webpage. What gives? Please see my css and html, probably very easy.
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>Заголовок страницы</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<a href src="index.html"><img src="images/logo.png" alt="Logo"/></a>
</div>
<div id="menu">
<ul>
<li><a class="current" href src="#">Home</li>
<li><a href src="#">About</li>
<li><a href src="#">Contact</li>
<li class="phone">Call Us: <span>416-514-0370</span></li>
</ul>
</div>
</div>
<div id="content">
<h1>We are coming soon..</h1>
</div>
</div>
</body>
</html>
CSS:
#import url(reset.css);
body {
background: url(../images/background.png) repeat;
}
#wrapper{
width: 960px;
margin: 0 auto;
}
#logo{
width: 204px;
height: 136px;
float: left;
}
#menu{
width: 960px;
height: 70px;
background: url(../images/menu-bg.png) no-repeat;
}
#menu ul {
padding-left: 40px;
padding-top: 15px;
overflow: hidden;
}
#menu ul li{
float: left;
font: bold 18px Arial;
color: #FFFFFF;
margin-right: 70px;
margin-top: 10px;
}
#menu ul li a {
color: #FFFFFF;
text-decoration: none;
}
#menu ul li span {
color: #F51111;
}
#menu .current, #menu ul li a:hover {
text-decoration: underline;
cursor: pointer;
}
#menu .phone{
float: right;
margin-right: 30px;
}
#content h1 {
font: bold 55px Arial;
}
you missed </a>
<li><a href src="#">About</a></li>
I was missing a bunch of closing tags.
I've been following this tutorial: http://ruby.railstutorial.org/chapters/filling-in-the-layout#top and for some reason when I first run the app locally the div with the "home" "help" and "sign up" links appears further down on the page from where it should. However, when I refresh the page, the div returns back to the correct spot. How can I fix this?
UPDATE:
It seems that the problem is only with Chrome. Here's the URL: http://justinsapp.heroku.com/
Test it out.
Here's the html:
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="Uo4YKU6Vu+F9vdWzOFBS0YcDbiVoXf/xmiZpThwhwh4="/>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="/stylesheets/blueprint/screen.css?1298679396" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blueprint/print.css?1298679396" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link href="/stylesheets/blueprint/ie.css?1298679396" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<link href="/stylesheets/custom.css?1298689435" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<header>
<img alt="Sample App" class="round" src="/images/logo.png?1298689435" />
<nav class="round">
<ul>
<li>Home</li>
<li>Help</li>
<li>Sign in</li>
</ul>
</nav>
</header>
<section class="round">
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</p>
Sign up now!
</section>
<footer>
<nav class="round">
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Rails Tutorial</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Here's the CSS:
.container {
width: 710px;
}
body {
background: #cff;
}
header {
padding-top: 20px;
}
header img {
padding: 1em;
background: #fff;
}
section {
margin-top: 1em;
font-size: 120%;
padding: 20px;
background: #fff;
}
section h1 {
font-size: 200%;
}
/* Links */
a {
color: #09c;
text-decoration: none;
}
a:hover {
color: #069;
text-decoration: underline;
}
a:visited {
color: #069;
}
/* Navigation */
nav {
float: right;
}
nav {
background-color: white;
padding: 0 0.7em;
white-space: nowrap;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 0.2em 0;
}
nav ul li a {
padding: 0 5px;
font-weight: bold;
}
nav ul li a:visited {
color: #09c;
}
nav ul li a:hover {
text-decoration: underline;
}
a.signup_button {
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
width: 190px;
color: #fff;
background: #006400;
font-size: 150%;
font-weight: bold;
padding: 20px;
}
.round {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
footer {
text-align: center;
margin-top: 10px;
width: 710px;
margin-left: auto;
margin-right: auto;
}
footer nav {
float: none;
}