Fahim
Reputation: 77
html and css resposive website has abnormal styling
what is the problem? why the links is at not correct position?how can I keep the links in correct position after minimizing the browser also there is no separation between the links. why this happens?please rectify my css code. also how can I make it more resposive.
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.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: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
height: 20px;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->
<body class="body">
<header class="mainHeader">
<!--Main logo of the page!-->
<img src="img/images.jpeg" alt="logo here">
<!-- Main navigation bar!-->
<nav>
<ul>
<li class="active"><a href="#">Home</li>
<li><a href="#">About </li>
<li><a href="#">Portofolio </li>
<li><a href="#">Contact </li>
</ul>
</nav>
</header>
<!--Main content starts here!-->
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" title="First post">First post</a>
</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
<!--bottom content starts!-->
<article class="bottomcontent">
<header>
<h2><a href="#" title="Second post">Second post</a></h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
</div>
</div>
<!--This is the right side content!-->
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<!--This should be the foot of the webpage!-->
<footer class="mainFooter">
<p>Copyright © 2016 <a href="#" title="1stwebdesinger">1stwebdesinger.com</a>
</p>
</footer>
</body>
</html>Upvotes: 0
Views: 113
Answers (3)
Leo the lion
Reputation: 3065
You have some css and html issues in your code.
First close all <a href> tag and second remove float:left from .mainHeader nav ul li class and replace inline to inline-block so you won't need height to show background of nav.
After that you will see all menus are in one row but after resizing little bit more, menu will go down as no such space. For this issue you have to use Media query to solve or use bootstrap or navbar menu style.
You can read more about Media query or Bootstrap for responsiveness.
Check my Fiddle here.
* **Note : Whenever you are using float:left then try to use clear:both after that so there won't be any extra white gap/space however I have removed float from your code, so just side note. Hope it will help..
Upvotes: 1
Gautam Jha
Reputation: 1473
Two problem what i have noticed in your code you are not closing the <a> tags
2nd setting the height on hover are never a good practice. on hover links height increases that's why such things happening. see snippet
UPDATED CODE TRY MEDIA QUERY
@media all and (max-width: 768px) {
.mainHeader nav a:link, .mainHeader nav a:visited {
font-size:80%;
padding: 10px 15px;
}
/**MORE CODE FOR WIDTH 0 to 768px**/
}
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.mainHeader nav {
background-color: #666;
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: inline-block;
padding: 10px 25px;
}
.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;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
@media all and (max-width: 768px) {
.mainHeader nav a:link, .mainHeader nav a:visited {
font-size:80%;
padding: 10px 15px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->
<body class="body">
<header class="mainHeader">
<!--Main logo of the page!-->
<img src="img/images.jpeg" alt="logo here">
<!-- Main navigation bar!-->
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a> </li>
<li><a href="#">Portofolio </a></li>
<li><a href="#">Contact </li>
</ul>
</nav>
</header>
<!--Main content starts here!-->
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" title="First post">First post</a>
</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
<!--bottom content starts!-->
<article class="bottomcontent">
<header>
<h2><a href="#" title="Second post">Second post</a></h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
</div>
</div>
<!--This is the right side content!-->
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<!--This should be the foot of the webpage!-->
<footer class="mainFooter">
<p>Copyright © 2016 <a href="#" title="1stwebdesinger">1stwebdesinger.com</a>
</p>
</footer>
</body>
</html>Upvotes: 0
Anubhav pun
Reputation: 1323
Changes in your style and html may it helps you
1- close your "a" tag
2- for repsponsive use style in
<style>
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.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: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
height: 20px;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
/*css for responsive */
@media (max-width:767px)
{
.mainHeader nav
{
box-sizing:border-box;
overflow:hidden;
}
.mainHeader nav ul li{
width:100%;
display:block;
float:none;
}
.mainHeader nav, .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited{
height:100%;
}
.mainHeader nav ul{
padding:0px 0px;
}
.mainHeader nav a:link, .mainHeader nav a:visited
{
width:100%;
}
.mainHeader nav ul li a{
border-radius:0px 0px;
}
}
</style>
<!--html-->
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a> </li>
<li><a href="#">Portofolio </a></li>
<li><a href="#">Contact </li>
</ul>
</nav>
Upvotes: 0
Related Questions
- Change an HTML input's placeholder color with CSS
- How do you parse and process HTML/XML in PHP?
- What is the difference between margin and padding in CSS?
- Set cellpadding and cellspacing in CSS?
- Adding HTML entities using CSS content
- HTML tags in variable's printing by echo
- ckeditor getData() cuts the text after double "enter" with jquery
- How to put CSS card over background image
- Bootstrapvalidator doesn't work on select2.js
- Middle row height fit in twitter-bootstrap grid sytem