In my header, I'm having an issue where if I put regular text in, the lineheight is fine, but if I use a list, I get a good amount of padding on the top and the bottom.
Below is all relevant HTML and CSS as well as a fiddle
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
My line-height isn't bad at all!
</div>
</aside>
</div>
</header>
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
<ul>
<li>My line-height is huge!</li>
</ul>
</div>
</aside>
</div>
</header>
CSS
header
{
background-color: #eee;
}
.clearfix
{
overflow: auto;
}
header #title-container
{
font-size: .7em;
}
header aside .nav
{
padding-right: 4px;
float: right;
}
header aside .nav
{
background-color: red;
}
Reset the margin and padding on your ul and li.
http://jsfiddle.net/PSeFe/3/
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
Adding style="display: inline; padding: 0;" to your <ul>-tag fixes the problem. The second part of your html would look like this then:
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
<ul style="display: inline; padding: 0;">
<li>My line-height is huge!</li>
</ul>
</div>
</aside>
</div>
</header>
Related
I am designing a webpage with multiple divs. I need to stack div one over another. How can I do that?
Currently, one div is overlapping with navbar in the web site
Here is HTML code
<body>
<div class="main">
<div class="main-banner">
<!--- Nav Menu-->
<div class="nav-menu">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
<!-- First Banner-->
<div class="heading">
<div class="animation">
<h1>India's first startup<br> consultancy.</h1>
</div>
</div>
<div class="sub-head">
<h2>
For the startup.<br>
By the startup.<br>
Of the startup. <br>
</h2>
</div>
</div>
<!--Seccond Banner-->
<div class="about">
<h2>
Place holder text
</h2>
</div>
</div>
</body>
</html>
and my css code for stylesheet that contains the styling of the div is mentioned below:
*{
padding: 0;
margin: 0;
}
body{
background: White;
padding: none;
margin: none;
border: none;
}
.main-banner{
display: inline-block;
position: fixed;
background: #6ebdff;
color: white;
width: 100%;
height: 100%;
}
.about{
display: inline-block;
background: #6c00a6;
color: white;
width: 100%;
height: 100%;
}
I want to place "about" after the "main-banner" div
Trying to separate my header and navtab with a simple horizontal line. Nothing fancy.
Yet, it appears above the header for some reason. I know it has something to do with floating of twitter button and company logo. Before I did this the line appeared as it should. I'm stuck here.
.main_header {
background: #d0d0d0
}
.company_logo {
float: left;
text-align: left;
padding: 10px 0 10px 50px;
}
.twitter {
float: right;
margin-top: 10px;
margin-right: 10px;
}
<header class="main_header">
<div class="company_logo">
<img src="images/logo.png" width="20%">
</div>
<div class="twitter">
</div>
</header>
<hr>
<nav class="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfo</li>
<li>Servi</li>
<li>Contact</li>
</ul>
</div>
</nav>
You're right. Since the children of .main_header are floated, their parent has no height.
One solution is to clear the floats.
Below, I'm using group class and one of the clearfix methods.
For further reference, see What methods of ‘clearfix’ can I use?
.main_header {
background: #d0d0d0
}
.company_logo {
float: left;
text-align: left;
padding: 10px 0 10px 50px;
}
.twitter {
float: right;
margin-top: 10px;
margin-right: 10px;
}
.group::after {
content: "";
display: block;
clear: both;
}
<header class="main_header group">
<div class="company_logo">
<img src="images/logo.png" width="20%">
</div>
<div class="twitter">
</div>
</header>
<hr>
<nav class="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfo</li>
<li>Servi</li>
<li>Contact</li>
</ul>
</div>
</nav>
Try :
hr{
clear: both;
}
Should clear floating elements on either side.
I am having trouble making my list inline along with the Sign In to the right of it. I tried putting float for the tags since every part on my header is a link, but that isn't working. Can anyone help me put the logo float left, the list to the right, with the sign in being the farthest thing right (float right pretty much for the sign in). Thanks for any answers I get, I truly appreciate it.
html:
<header>
<nav id="header-flex">
<div>
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div>
<ul>
<li>Shop</li>
<li>Products</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
</div>
<div>
<p>Sign In</p>
</div>
</nav>
</header>
css:
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
It can be done by giving your div's a width and assigning 'float: left' to them, like this:
HTML:
<div class="left">
<img src="logo.jpg" alt="logo" width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li>Shop</li>
<li>Products</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>
CSS:
#header-flex {
display: flex;
position: fixed;
background: rgb(0, 191, 255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
.left, .mid, .right {
float: left;
width: 33%;
}
<div> has display: block; by default, no need to use div for img and ul.
Also, remove the default 8px margin from body:
body {
margin: 0;
}
A nav is better to use display: block; since you want it to take the whole width.
Now you can use float: left, float: right
body {
margin: 0;
}
#header-flex {
display: block;
position: fixed;
background: rgb(0, 191, 255);
height: 75px;
width: 100%;
}
img {
float: left;
}
#header-flex>ul {
float: left;
margin: 0;
}
.sign-in {
float: right;
margin: 25px;
}
<header>
<nav id="header-flex">
<img src="logo.jpg" alt=logo width="30px" height="30px">
<ul>
<li>Shop</li>
<li>Products</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
<div class="sign-in">
Sign In
</div>
</nav>
</header>
<header>
<div>
<h1>Title</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>foo</li>
</ul>
</nav>
</div>
</header>
<div id="main">
content!
</div>
I have the following page layout, where the title div renders across the top of the window, then div#nav renders below it, and div#main renders below it:
<body>
<header>
<div>
<h1>Title</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>foo</li>
</ul>
</nav>
</div>
</header>
<div id="main">
content!
</div>
</body>
Is it possible, using only CSS and without changing the DOM, to position the div#nav (or its child nav element) to the right side of div#main?
Yes you can do it like this, https://jsfiddle.net/Lddyn573/1/
header > div{width: 100%; background-color: lightblue}
header > #nav{float: right; width: 50%; background-color: lightgreen}
#main{float: right; width: 50%; background-color: lightpink}
you can do it with position:absolute
check this jsfiddle
code :
header {
position:relative;
float:left;
width:100%;
background:blue;
}
#nav {
position: absolute;
right: 0;
background: yellow;
top: 100%;
width: 50%;
}
#main {
background: red;
float: left;
width: 50%;
}
Hi new to CSS here could anyone help me get the text to move down so it's aligned with my logo image? Also as an extension on that question does anyone know how I can make the text move across so the margins on either side match?
This is what it looks like now:
Here is the html:
<div id="header">
<div class="wrap">
<nav id="topnav"> <!-- This is the top nav bar-->
<ul id="topnavlist">
<li> <!-- Home logo-->
<div class="logo">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
</div>
</li>
<div class="navItems"><!-- Nav items-->
<ul>
<li>UK News</li>
<li>Smartphones</li>
<li>Reviews</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
And the CSS:
#header, #footer {
background-color:#115279;
float:left;
padding:15px 0;
min-width:100%;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color:#D9330F;
list-style-type: none;
float: left;
display:inline;
padding: 10px;
}
.navItems {
height: 20%;
display: inline;
margin-top:30px;
padding-top: 50px;
padding: 50px;
}
Your HTML is invalid, you can't have div inside li. Replace div with li and wrap their children(lis) in a ul.
To vertically center the lis, give .navItems a height: 50px same as the height of your logo and give it a line-height: 50px(height)
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
float: left;
display: inline;
padding: 10px;
}
.navItems {
display: inline;
height: 50px;
line-height: 50px;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<div class="logo">
<a href="index.html">
<img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
</a>
</div>
</li>
<li class="navItems">
<!-- Nav items-->
<ul>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
You can't have a div element as a child to a ul element. As for aligning all of your elements. By default, the img and a elements are considered inline elements in css. You can use the vertical-align property on inline elements. So your markup could be a bit more simple like
<nav id="topnav">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
UK News
Smartphones
Reviews
</nav>
and then the css
#topnav a {
vertical-align: middle;
}
Since I don't have the exact size of your image, this won't get you exactly what you're looking for, but it should get you on the right track. The main thing is to make sure you have valid HTML markup. This can cause many headaches and issues with your css if it's not.
As mentioned your current HTML is invalid. limust be children (and the only direct children) of a ul.
In fact there is no need to use divs at all.
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.NavItem {
color: white;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<a href="index.html">
<img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
</a>
</li>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</nav>
</div>
</div>