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>
Related
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 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.
How do I vertically align the element in this picture?
<html lang="en-us">
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
text-decoration: none;
padding: 0px; margin: 0px;
list-style: none;
}
#headercontainer {
background-color:gray;
}
#headercontainer ul li {
display: inline-block;
}
nav {
margin: 0px 10%;
padding: 10px 0px;
}
#floatedright {
float: right;
}
#floatedright a {
color: darkgreen;
font-size: 20px;
margin: 10px;
}
#floatedright > li {
float: left;
}
#piercarla {
font-size: 48px;
color: white;
font-family: cursive;
}
</style>
<body>
<section id="headercontainer">
<nav>
<ul>
<li>Piercarla</li>
<section id="floatedright">
<li>Home</li>
<li>Events</li>
<li>Contact</li>
</section>
</ul>
</nav>
</section>
you can resolve your problem using this.
I think vertical-align: middle; is suitable for your question.
Just give some class to the three list items Home,Events,Contact class="m", and then style them to give margin-left margin-right to vertically align them accordingly.
How can i decrease the size of the header in the logo class? My logo contains the name " PIED PIEPR". But the background image is quite big in the header. I tried decreasing with height attribute but didnt work.
Style Sheet:
body{
margin: 100%;
margin: 0;
}
.container{
position: relative;
height: 50px;
width: 1100px;
}
.masthead{
background: #4fc3f7;
width: 100%;
top: 0;
position: fixed;
color: white;
}
.logo{
position: relative;
float: left;
left: 90px;
font-family: Josefin Slab;
font-size: 21px;
}
a:link {color: white; text-decoration: none; }
a:visited {color: white; text-decoration: none; }
a:hover {color: white; text-decoration: none; }
a:active {color: white; text-decoration: none; }
li{
position: relative;
left: 155px;
list-style: none;
font-family: Raleway;
float: left;
margin-left: 21px;
padding-top: 20px;
font-size: 20px;
}
.navigation{
float: right;
}
Markup"
<!DOCTYPE html>
<html>
<head>
<title> Home Page</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="mainpage.css">
</head>
<body>
<div class="masthead">
<div class="container">
<div class="logo"><h1>CRUX</h1>
</div>
<div class="navigation">
<ul>
<li>Overview</li>
<li>Courses</li>
<li>Institution</li>
<li>|| Sign In</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</div>
<div class="container">
</div>
<div class="content">
<p> </p>
</div>
</body>
</html>
So your h1 will hold a default margin value all you have to make them 0. Just add the following style to your css
h1{
margin:0;
}
OR
*{
margin:0;
}
NOTE: You will still find little space on top and bottom thats because of the line-height property you can also reduce them to fit your logo exactly to your background-color
DEMO