Ferdaous Ben Salha
Reputation: 13
Html, Css , padding-top is not working
The padding-top in nav a doesn't fit I want to have this
but I actually get this
here is my html and css code
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
}
.mainHeader nav ul li{
float : left;
display:inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<header class="mainHeader">
<img src="img/css.jpg" />
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>Why is it so?
Upvotes: 0
Views: 744
Answers (5)
Michael
Reputation: 44150
Change your .mainHeader nav ul li to display: block. You also had a typo in your child anchor tags which should have read display: inline-block;. I've added comments of what I've changed.
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{}
a:hover, a:active{}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
}
.mainHeader nav ul li{
float : left;
display: block; /* I CHANGED THIS */
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inline-block; /* I CHANGED THIS */
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<header class="mainHeader">
<img src="img/css.jpg" />
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>Upvotes: 1
Sooraj
Reputation: 10567
You need to add padding to ul element.
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
display:inline-block;
margin:0 auto;
padding-top:12px;
}
.mainHeader nav ul li{
display:inline-block;
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML And CSS Responsive</title>
<meta charset="utf-8"/>
<link rel ="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article title="top content">
<header>
<h2><a href="#" title="first post"> First post</a></h2>
</header>
<footer>
<p class="post-info">This text is written by christian</p>
</footer>
<content>
<p>This course is built to teach beginners how to start making applications in Android,
as well as for advanced devs to learn some of the advanced features available in Mobile Application Development.</p>
<p>It's a simple code along tutorial series where students can code while learning, which is found to be the most efficient way of learning these days.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyrigt © 2016<a href="#" title="ferdaous.com">Ferdaous.com</a></p>
</footer>
</body>
</html>Upvotes: 0
Phiter
Reputation: 14992
A simple solution is to add line-height to the li the same height as the nav div.
.mainHeader nav ul li{
float : left;
display:inline;
line-height: 40px;
}
a{
text-decoration:none;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
}
.mainHeader nav ul li{
float : left;
display:inline;
line-height: 40px;
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>Upvotes: 0
silviagreen
Reputation: 1729
Here is a working solution: avoid using float, and use display:table-cell
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
height: 40px;
display: table-cell; /*ADD THIS*/
vertical-align: middle; /*ADD THIS*/
}
.mainHeader nav ul li{
display: inline-block; /*ADD THIS*/
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML And CSS Responsive</title>
<meta charset="utf-8"/>
<link rel ="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article title="top content">
<header>
<h2><a href="#" title="first post"> First post</a></h2>
</header>
<footer>
<p class="post-info">This text is written by christian</p>
</footer>
<content>
<p>This course is built to teach beginners how to start making applications in Android,
as well as for advanced devs to learn some of the advanced features available in Mobile Application Development.</p>
<p>It's a simple code along tutorial series where students can code while learning, which is found to be the most efficient way of learning these days.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyrigt © 2016<a href="#" title="ferdaous.com">Ferdaous.com</a></p>
</footer>
</body>
</html>body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
height: 40px; /*fix height*/
display: table-cell; /*display as table-cell*/
vertical-align: middle; /*center vertically*/
}
.mainHeader nav ul li{
display:inline-block; /*CHANGE To display-inline*/
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML And CSS Responsive</title>
<meta charset="utf-8"/>
<link rel ="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article title="top content">
<header>
<h2><a href="#" title="first post"> First post</a></h2>
</header>
<footer>
<p class="post-info">This text is written by christian</p>
</footer>
<content>
<p>This course is built to teach beginners how to start making applications in Android,
as well as for advanced devs to learn some of the advanced features available in Mobile Application Development.</p>
<p>It's a simple code along tutorial series where students can code while learning, which is found to be the most efficient way of learning these days.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyrigt © 2016<a href="#" title="ferdaous.com">Ferdaous.com</a></p>
</footer>
</body>
</html>Upvotes: 0
Nasser Ghiasi
Reputation: 372
You need to change ul css codes to this:
.mainHeader nav ul {
list-style: none;
display: inline-block;
margin: 12px auto 0;
}
Upvotes: 0
Related Questions
- Change an HTML input's placeholder color with CSS
- How can I transition height: 0; to height: auto; using CSS?
- Is there a CSS parent selector?
- How can I make a div not larger than its contents?
- What is the difference between margin and padding in CSS?
- How do I reduce the opacity of an element's background using CSS?
- Is it possible to apply CSS to half of a character?
- Set cellpadding and cellspacing in CSS?
- Why does HTML think “chucknorris” is a color?