Can't apply margin-right:auto to an element with class item1 to maximize the margin of elements with item2 and item3 classes. Why doesn't it work, if the elements have the display:block and set the width property set?
I expected that the elements with the classes item2 and item3 would move all the way to the right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<header class="header">
<div class="container">
<nav class="nav">
<ul class="nav__inner">
<li class="nav-item">social</li>
<li class="nav-item">logo</li>
<li class="nav-item">about</li>
</ul>
</nav>
</div>
</header>
<style>
html{
font-size: 10px;
font-family: 'Montserrat', sans-serif;
background-color: #121212;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.container{
width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.nav__inner{
height: 11.5rem;
display: flex;
justify-content: space-between;
width: 1100px;
align-items: center;
}
.nav-link-item{
font-size: 2rem;
color: white;
display: block;
}
.item1{
margin-right: auto;
}
</style>
</body>
</html>
Add margin-left:auto on second child.
html {
font-size: 10px;
font-family: 'Montserrat', sans-serif;
background-color: #121212;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
ul>li:nth-child(2) {
margin-left: auto;
}
.container {
width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.nav__inner {
height: 11.5rem;
display: flex;
justify-content: space-between;
width: 1100px;
align-items: center;
}
.nav-link-item {
font-size: 2rem;
color: white;
display: block;
}
.item1 {
margin-right: auto;
}
<header class="header">
<div class="container">
<nav class="nav">
<ul class="nav__inner">
<li class="nav-item">social</li>
<li class="nav-item">logo</li>
<li class="nav-item">about</li>
</ul>
</nav>
</div>
</header>
Related
I would like my nav to go on row 1/3 and column 2/4 and be horizontal. It should be next to the header (left side) on the same row. For some reasons, it is on a different cell in vertical, and I cannot make it work. I would appreciate your help. Below is what I have. In the beginning of this and not working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="ud.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="header-nav">
<header>
<h1>DS</h1>
</header>
<nav>
<ul class="nav">
<li>Home</li>
<li>AT</li>
<li>Contact</li>
<li>Reservation</li>
</ul>
</nav>
</div>
<div id="photo">
</div>
</div>
Here is the CSS:
* {
box-sizing: border-box;
}
.nav
{
text-align: center;
display: inline-block;
height: 100%;
line-height: 4rem;
display: flex;
justify-content: center;
}
.header-nav
{
display: flex;
flex-direction: row;
}
h1
{
overflow: hidden;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li
{
float: left;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
border-radius: 15px;
font-family: "Google Sans",Roboto,Arial,sans-serif;
}
body
{
font-family: "Google Sans",Roboto,Arial,sans-serif;
}
li a
{
color: black;
display: block;
padding: 8px;
background-color: white;
text-decoration: none;
border-radius: 25px;
}
#wrapper
{
display: grid;
grid-template:
"title nav nav"
"future future future"
width: 90%;
margin: auto;
grid-template-columns: 100px 1000px 80px;
grid-template-rows: 70px 1000px 1fr;
box-shadow: 3px 3px 3px darkblue;
}
h1
{ grid-area: title;
grid-row: 1/2 ; grid-column: 1/1
}
nav
{ grid-area: nav;
grid-row: 1/2; grid-column: 2/3;
}
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 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);
}
Im trying to make a navbar but I am having trouble with the a:hover. only the content box changes color, but I want it to be the content box and the padded area around it. What is happening?
I have tried everything, but for some reason only the content box changes, which looks awful. I am trying to get a full box to change color. I feel like an idiot, can someone look through this and tell me what I am doing wrong?
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
padding: 20px 20px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360)679-4444</li>
</ul>
</nav>
I've moved the padding from li to a
See working code:
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
padding: 20px;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360)679-4444</li>
</ul>
</nav>
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>