I need the grey vertical line to be underneath "latest work" work. When I set the z-index to negative though it disappears, I assume under the body? Hoping this is a simple solution. I attached an image of my mockup to show what it should look like. I have a div with a background of #212121 so the copy "latest work" has padding above and below and makes it look like the line goes underneath.
body {
font-size: 16px;
background: #f9f9f9;
}
.container {
max-width: 1600px;
}
#dt-lpStatic {
height:60px;
width: 100%;
padding:6px 0;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
text-transform: uppercase;
}
#dt-lpStatic ul {
float: left;
margin-top: 3px;
}
#dt-lpStatic ul li {
display: inline;
color:#545454;
margin-left:40px;
}
#dt-lpStatic ul li:nth-child(1) {
margin-left:0;
}
.subscribe-btn-muted {
padding:12px 50px;
border:2px solid #555;
border-radius: 13%/50%;
-webkit-border-radius: 13%/50%;
-moz-border-radius: 13%/50%;
float:right;
color:#555;
}
#hero {
width:100%;
background: #212121;
height:100vh;
}
#hero-content {
margin:30vh auto;
text-align: center;
}
#hero .secTitle-bg-dark {
width:200px;
padding: 15px 0;
font-family: 'Open Sans', sans-serif;
font-style: italic;
color: #555;
font-size: 1.5em;
font-weight: 300;
margin:30vh auto;
background: #212121;
}
.secTitle-bg-dark:after {
content:"";
position: absolute;
z-index: 0;
top: 65vh;
bottom: 0;
left: 50%;
border-left: 2px solid #313131;
}
<body>
<section id="hero">
<header id="dt-lpStatic">
<div class="container">
<ul>
<li><img src="imgs/logo-muted.png" alt="RH logo"></li>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Get In Touch</li>
</ul>
<div class="subscribe-btn-muted">Subscribe</div>
</div>
</header>
<div id="hero-content">
<img src="imgs/logo-full-big.png" alt="RH Visual Design logo">
<div class="secTitle-bg-dark">latest work</div>
</div>
</section>
</body>
This is actually a really great candidate for flexbox. You can simplify the code a lot just by doing this:
Edit: Just a friendly tip: Psuedo-elements should be prefixed with ::, like ::before and ::after. Psuedo-selectors only have one colon, like a:hover and input:focus.
body {
background-color: #333;
}
.latest-work {
color: #999;
display: flex;
flex-direction: column;
align-items: center;
}
.latest-work span {
display: block;
padding: 10px 0;
}
.latest-work::before,
.latest-work::after {
width: 1px;
height: 100px;
content: '';
background-color: #999;
}
<div class="latest-work">
<span>latest work</span>
</div>
Add display: block; to the :after element - pseudo elements require this for block layout.
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 5 years ago.
Here is the HTML code (the white gap started appearing as soon as I added h3 to the last div):
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
I am fairly new to web development and stackoverflow. So I am sorry for any inconveniences. Any help is appreciated. Thank you.
Set margin: 0px; on h3 tag to resolve this issue. Check updated Snippet below..
body{
margin:0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container{
width: 80%;
margin : 0 auto;
}
header{
background: #343434;
}
header::after{
content: '';
display: table;
clear:both;
}
.logo{
float: left;
padding:10px;
}
nav{
float:right;
}
nav ul{
margin: 0;
padding: 0;
list-style-type: none;
}
nav li{
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a{
text-decoration: none;
color:white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover{
color:yellow;
}
.welcome{
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3{
text-align: center;
margin: 0px;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
Just remove the margin from h3 like
.welcome h3 {
text-align: center;
margin:0;
}
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin:0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
This is due to collapsing margins
Remove the margin on the h3. Replace it with padding if you want to create space between the header and maintain the background colour.
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin-top: 0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
You can try adding style="display: inline; margin:0px; padding:0px;" to your <h3> Tag.
Another way is to apply a rule of overflow: auto to the .welcome div... thus creating a new block formatting context and avoiding the collapsing margins.
Edit: Let's add a little more context. In the spec, you can read that adjoining margins will collapse under certain circumstances. In particular, the margins need to belong to block-level boxes participating in the same block formatting context.
Even though .welcome and h3 are block-level boxes in your example, neither automatically establishes a new block formatting context (meaning they participate in the same block formatting context, meaning their margins collapse). Looking at the spec again, we see that some of the ways to establish a new block formatting context is to have a float, an absolutely positioned element, or a block box with the property of overflow set to something else than visible.
That's why the suggestions regarding overflow: auto or floating one of the elements work. My understanding is that if we make .welcome establish a new block formatting context, the context it participates in is different from the one it establishes itself. Removing the margin (possibly replacing it with padding) is another way to get around the problem.
Either apply margin-top:0 for H3-Tag
or
apply a float:left for .welcome
Both will fix your issue
For some reason my navbar is bigger than it's supposed to be. Or atleast I think it's my navbar. Whenever I remove #rect It goes away. What's the problem here?
#tagline {
font-style: italic;
padding-right: 150px;
padding-left: 10px;
}
nav {
background-color: white;
display:flex;
align-items:center;
overflow: hidden;
}
#logo {
padding-top: 8px;
padding-left: 30px;
vertical-align: middle;
}
li, li>a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
padding: 5px 10px 5px 10px;
}
li>a:hover {
background-color: #7bcc1d;
color: white;
}
.active {
background-color: #7bcc1d;
color: white;
}
#main-bg {
background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
background-size: 100% 100%;
height: 500px;
margin: 0;
}
#rect {
background-color: white;
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 400px;
text-align: center;
}
h2 {
padding-top: 15px;
margin-bottom: 0;
}
span {
margin: 0;
}
#enroll_button {
text-decoration: none;
padding: 10px 20px 10px 20px;
background-color: #7bcc1d;
color: white;
}
<nav>
<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<div id="main-bg">
<div id="rect">
<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
Enroll in Your Course
</div>
</div>
You haven't set #rect as a block element and the h2 margin is pulling the whole thing down.
#rect h2{margin-top:0;}
That's because of margins which set in user agent stylesheet from the browser. You can link the reset.css and set your desire margins in your own css.
Well I have a navigation with a fixed position with a list inside, which I want to change color on a hover. But this doesn't work because of the fixed position of the navigation. Is there a way to get around this?
Here is my example
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li:hover { cursor: pointer;}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1">Link1</li>
<li data-menu="Link2">Link2</li>
<li data-menu="Link3">Link3</li>
<li data-menu="Link4">Link3</li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
Thanks in advance!
Well after trying and trying I added a z-index in the .nav css and it worked... finally! I have no clear explanation for why it worked, but it worked for me.
There is no way currently in CSS alone to select a parent of a child.
The best way I can think of to do this, or at least the simplest would require a little JS.
Simple add a data attribute to your list items, and a JS event that on hover passes the value of the data attribute as a class to the fixed navigation. That class would control color.
Have a go yourself, if you struggle post some code and we can fix it.
Seems to work fine for me with your code (all I did was actually put the <a> tags inside the <li> elements, since that was what your code was targeting.)
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li a:hover {
cursor: pointer;
color: red;
}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1"> <a href=#>Link1</a> </li>
<li data-menu="Link2"><a href=#>Link2</a></li>
<li data-menu="Link3"><a href=#>Link3</a></li>
<li data-menu="Link4"><a href=#>Link4</a></li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
well, you code works fine for me
js fiddle linke
I saw your code and if you don't want to use <a> tag you have to add
.nav-menu li:hover{
color:#fff;
}
simple code
nav { width: 100px; height: 80px; position: fixed; }
nav li { display: inline-block; }
nav li:hover { color: white; }
<nav>
<ul>
<li>dhh</li>
<li>fs</li>
<li>ss</li>
</ul>
</nav>
The simplest way I've tried is putting a filler element inside the first element, and target styling hover for that inner element.
I am semi-new to web development and am currently working on a webpage with a fixed top navbar. I have my logo in the center of a list and my links outside it. I would like the links to be vertically centered. I will include a screenshot and the code. Maybe you can help me? Thanks a lot! I appreciate your time.
Screenshot of Navbar
HTML:
<div class="header">
<div class="table">
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="photos/logo.png"> </li>
<li>Portfolio</li>
<li>Facebook</li>
<li> <script src="js/email.js"></script>
</ul>
</div>
</div>
</div>
CSS:
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209,202,178);
}
.header {
background: rgb(175,166,135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102,102,102);
}
.table {
display: table;
float: left;
left: 50%;
width: 1150px;
height: 100px;
line-height: 100px;
overflow: auto;
position: absolute;
}
.logo img {
z-index: 4;
position: relative;
left: 50%;
}
.navbar {
float: left;
right: 48.5%;
position: relative;
}
.navbar li {
display: inline;
padding: 0px;
margin: 0 auto;
width: 100%;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
overflow: auto;
}
.navbar a {
text-decoration: none;
color: rgb(255,255,255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255,255,255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135,127,99);
}
I would look to use line-height to achieve this. Set the height on the parent container .navbar to 100px then set a line-height of 100px on the .navbar li.
This will mean the link text is always in the centre of the navbar. To ensure the logo was in the centre I would add vertical align middle.
As a bonus I would look to implement box-sizing it greatly helps with layouts that use padding.
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209, 202, 178);
}
.header {
background: rgb(175, 166, 135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102, 102, 102);
}
.navbar {
margin: 0;
padding: 0;
text-align: center;
}
.navbar ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
padding: 0px;
margin-right: 40px;
text-shadow: 1px 1px rgb(115, 109, 88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
line-height: 100px;
vertical-align: middle;
}
.navbar img {
vertical-align: middle;
}
.navbar a {
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255, 255, 255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135, 127, 99);
}
<div class="header">
<div class="navbar">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Before & After
</li>
<li>
<img src="http://placehold.it/50x50">
</li>
<li>Portfolio
</li>
<li>Facebook
</li>
<li>
<script src="js/email.js"></script>
</ul>
</div>
</div>
I edit your base code as you used a lot of needed positioning techniques. Please compare with your code.
try adding this to your css
.navbar ul
{
display:inline;
vertical-align:middle;
}
Let the ul padding:20px 0px; direct the center vertically and text-align:center direct your center horizontally. Also use inline-block so that you can give your entire li focus for menu linking purposes
here is your problem solved FIDDLE
p.s. Your main problem is you are using way too much css. This is not supposed to be such a hard implementation and you definitely do not need absolute positioning, but fixed positioning. The rest is just colors.
If you need to give more padding to the top so they look closer to the bottom, use the padding property to distribute the padding as needed (i.e. padding: 40px 0px 5px) etc.
Here is a common saying we have...Use "absolute" only when "absolutely" necessary ;)
heres how i did it.
core change on css:
.navbar {
display:table;
margin: 15px auto;
}
.navbar li {
line-height:70px;
display: block;
padding: 0px;
float:left;
margin: 0 auto;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
}
simplified html:
<div class="header">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="http://img1.wikia.nocookie.net/__cb20120630091052/farmville2/images/0/0f/Google-Logo.png" height=70px /></li>
<li>Portfolio</li>
<li>Facebook</li>
</ul>
<script src="js/email.js"></script>
</div>
http://jsfiddle.net/4a8dkz3n/
i messed around a bit on jsfiddle so it might be a bit different,
but basically i gave display:table to so that i can give "margin:0 auto;" to it
and used 'line-height' to vertical alignment of the list menu.
also simplified the code a bit.
I've never seen anything stupid like that, or may be it's 2:30 am and I am hallucinating. I've made simple anchor links within the header and I am completely unable to click on them. They are just plain text and are completely non-clickable.
I'll be thankful if you can give me a hint as what/where I am not obeying the HTML/CSS daemon.
HTML
<header>
<div class="confine">
<div class="complete-head-content">
<div class="left-width-less logo-width">
<img src="./imgs/twit-logo.png" />
</div>
<div class="right-width-less">
<div class="top-header-content">
<h1 class="pres-title">Defining Twisted Strategy</h1>
</div>
<div class="lower-header-content">
<div id="navcontainer">
<ul>
<li>Meet the Hobos</li>
<li>Why me?</li>
<li>Our Work in Oblivion</li>
<li>Our Perspective</li>
<li>Our Approach</li>
</ul>
</div>
</div>
</div>
<div class="c"> </div>
</div>
</div>
</header>
<div id="contend">
... ... ...
CSS
a {
color: #EA2E49;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #EA2E49;
cursor: pointer;
}
header {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 1;
}
.complete-head-content {
width: 100%;
background-color: #a0c654;
height: 130px;
}
.left-width-less {
float: left;
background-color: #fff;
width: 15%;
text-align: center;
height: 130px;
vertical-align: middle;
}
.left-width-less img {
width : 76px;
height: 100px;
margin-top: 10px;
}
.right-width-less {
float: right;
width: 85%;
}
.top-header-content {
width: 100%;
height: 70px;
background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}
.lower-header-content {
width: 100%;
height: 70px;
}
.logo {
cursor: pointer;
}
/* Navigation */
#navcontainer {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
text-transform: uppercase;
margin-top: 19px;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1.7em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
EDIT
Thanks to Nikhil, the had a Z-index:1 which when removed fixed the bug.
Thanks.
Unless you left something out. it is working for me with and without css.
Tested in IE 8
How did you include the CSS btw?
The <div id="contend"> right next to tag had a z-index:1. This made every link in <header> tag non-clickable.
The solution was to remove the z-index property.
Hope it helps someone.