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);
}
Related
I have an H2 (id=cover) which I'd like to stay centered and higher up in a background image, but as the page size shrinks it eventually drops to the bottom of the image, then falls off of it on my mobile android phone. Any help would be appreciated. Here is the code
<!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">
<title>Johnson Landscaping</title>
<link rel="stylesheet" href="style.css">
</head>
<div id="container">
<header>
<h1>Johnson Landscaping</h1>
<nav>
<ul class="menu">
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</header>
<div>
<div class="image">
<img src="images/background-backlight-blur-color-262713.jpg" alt="" />
<h2 id="cover"><span>Quality Garden Care on the North Shore</span></h2>
</div>
<h2>Services</h2>
<div class="Services">
<h4>Garden Maintenance</h4>
<img src="images/person-holding-a-green-plant-1072824.jpg" alt="person holding green
plant">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Garden Design</h4>
<img src="images/blade-of-grass-depth-of-field-environment-garden-580900.jpg" alt="blades of
grass">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Tree and Shrub Pruning</h4>
<img src="images/apple-tree-6035.jpg" alt="apple tree">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Pressure Washing</h4>
<img src="images/photography-of-bricks-covered-with-moss-1089280.jpg" alt="bricks
covered in moss">
<p>Enter Details</p>
</div>
</main>
</div>
<footer>
<nav>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</footer>
</body>
</html>
and css to go with it
html {
background: #f7f7f7;
color: #7cae49;
font-family: 'garamond', sans-serif;
}
body {
background: white;
margin: 0 auto;
font-family: 'garamond', sans-serif;
color: rgb(49, 46, 46);
text-align: center;
}
h1 {
float: none;
display: inline-block;
color: #5c7e3a;
width: 100%;
font-size: 50px;
text-align: center;
}
nav, li {
display: inline-block;
}
header, footer {
background: #DAF7A6;
color: #7cae49;
border-radius: 10px;
}
footer {
text-align: center;
padding: 30px 20px;
}
li {
list-style: none;
line-height: 20px;
font-size: 40px;
padding-right: 20px;
padding-top: 5px;
}
.image {
position: relative;
height: 60;
width: 100%;
margin: 0 auto;
border-radius: 10px;
}
#cover {
position: absolute;
top: 200px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #0e69e9;
}
h2 {
color: #7cae49;
text-align: center;
font-size: 30px;
}
.Services {
box-sizing: border-box;
width: 90%;
margin: 5px;
padding: 5px;
vertical-align: top;
text-align: center;
display: inline-block;
color: #7cae49;
}
img {
max-height: 60%;
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
Thanks for looking. Cheers!
Try this.
inside your style.css in #cover, change the top value to 0px;
#cover {
position: absolute;
top: 0px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}
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 want to remove the extra border after the "what's new" and the "meal ideas", I tried selecting the first child in the <ul> instead of the <li> and it didn't even work.
html {
background-color: white ;
}
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
}
header li :first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
<!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
Use this:
.Left ul li:last-child a,.Right ul li:last-child a {
border: none;
}
html {
background-color: white ;
}
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
}
header li :first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
.Left ul li:last-child a,.Right ul li:last-child a {
border: none;
}
<!DOCTYPE <!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
Here you go:
CSS:
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 5px;
margin: 5px;
font-size: 16px;
}
ul li:first-child {
border-right: 1px solid #373535;
padding-right: 10px;
width: 9%;
}
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.
Hi I'm trying to make my maintenance page for my site however when I try and put the main content div in the middle by using margin: auto; however it seems to stay at the top and the only way to pull it down is by using <br /> but i'd prefer not to use that as it looks messy so I was wondering if you has any ideas what's wrong
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>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div class="topBarcontainer">
<img class="logo" src="images/logo.png" alt="Chattrd home">
</div>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
<div id="mainContent"></div>
</body>
</html>
CSS:
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
white-space: nowrap
}
.topBar {
background: #06C;
height: 40px;
}
#navigationBar {
background: #1f1f1f;
height: 28px;
color: white;
font-family: 'Open Sans';
}
.topBarcontainer{
margin: auto;
width: 1000px;
}
.logo {
padding: 7px;
height: 24px;
width: 98px;
}
#navigationBar ul {
margin: 0;
padding: 3px;
list-style-type: none;
text-align: center;
}
#navigationBar ul li {
display: inline;
}
#navigationBar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
}
#navigationBar ul li a:hover {
color: #FFF;
background-color: #06C;
}
#mainContent {
margin: auto;
width: 500px;
height: 200px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Vertical centering will not work because there is nothing to center - the body will, like all HTML elements by default, be just the height needed to accomodate its contents.
Since your main content is of a fixed size you could simply solve it with absolute positioning:
#mainContent {
width: 500px;
height: 200px;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -250px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Fiddled for your pleasure.