When I refresh browser then the NAVIGATION bar changes place.
Why is this happening? Where is the error?
I cannot detect the problem. I think, I have written many extra CSS style. Is it? Please help to fix this.
HTML
<body>
<header>
<div class="con_header">
<h1> SITE NAME</h1>
<nav>
<ul>
<li class="chosen">HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
</header>
</body>
CSS:
header {
background-color: #202628;
height: 80px;
color: #e7e7e7;
font-family: 'Roboto Condensed', sans-serif;
}
.con_header{
width:1170px;
margin: 0 auto;
}
.con_header h1{
float: left;
}
.con_header nav{
float: right;
}
.con_header::after{
content:'';
display:block;
clear: both;
}
.con_header ul{
margin-top:26px;
}
.con_header li{
display: inline;
}
.con_header li a{
color: #e7e7e7;
text-align: center;
text-decoration: none;
padding: 33px 10px 33px 10px;
margin: -4px;
}
.con_header li a:hover{
color: #e7e7e7;
background-color: #e84c3d;
text-align: center;
text-decoration: none;
padding: 33px 10px 33px 10px;
margin: -4px;
}
.chosen{
color: #e7e7e7;
background-color: #e84c3d;
text-align: center;
text-decoration: none;
padding: 33px 15px 33px 15px;
margin: -4px;
}
Fiddle: http://jsfiddle.net/jo45sdob/
try commenting out the space between the li tags like this:
<ul>
<li class="chosen">HOME</li><!--
--><li>ABOUT</li><!--
--><li>SERVICES</li><!--
--><li>PORTFOLIO</li><!--
--><li>CONTACTS</li>
</ul>
thats if I understood what the problem was..
Related
I'm creating a website as i'm trying to learn HTML.
I have created a few very basic websites, so I am no master.
My horizontal(top) navigation bar is underneath my header, however I cant center the tabs for some reason.
How do I get the tabs text to be centered with the nav bar?
<!--Header-->
<header>
<img id="pumpkin" src="pumpkin.gif" alt="Pumpkin">
<h2 id="halloween">The Halloween Store</h2>
<h3 id="goblin">For the little Goblin in all of us!</h3>
</header>
<!--Main Body With Drop Down Navigation-->
<body>
<nav class="topNav">
<ul id="topNav">
<li>Home</li>
<li>Product List</li>
<li>Personal</li>
<li>Decorating Ideas</li>
<li>Join Email</li>
</ul>
</nav>
</body>
CSS
#topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
#topNav li {
display: inline-block;}
#topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
#topNav a:hover {
background-color: lightgray}
#body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;}
In your CSS file you should do like that:
.topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
.topNav li {
display: inline-block;}
.topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
.topNav a:hover {
background-color: lightgray}
body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;
}
also <header> should go inside <body> tag.
If you are trying to center the tabs(li) aligned inside the Nav(ul), Add the FLOAT: LEFT; CSS to "#topNav a" element in your CSS file.
#topNav a{float:left;padding: 9px 30px 9px 30px !important;}
Refer to the below URL.
https://jsfiddle.net/rajeevRF/m1bu4fnr/1/
I tried to eliminate the white space according to the answered questions that I found. But not of them is working on my side.
I tried to remove the padding in div's footer, but still the white space still there.
How to fix this?
CSS:
footer #bottom-footer{ background: url(/files/bg-testimonials.jpg) no-repeat; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.52); color: #000; text-align: left; padding: 50px 0 50px 0; font-size: 0.8125em; font-family: 'Open Sans', sans-serif; font-weight: 600; letter-spacing: normal; position: relative; left: 0; bottom: 0; height: auto; width: 100%; }
.footer-wrap a{ color: #000; }
.footer-wrap a:hover{ color: #d31716; }
.footer-logo a{ margin-bottom: 6px; display: block; }
.footer-socials{ float: none; line-height: 0; text-align: center; padding: 1em 0 2em;}
.footer-socials a{ border-radius: 100%; border: 3px solid #FFF; color: #FFF; display: inline-block; font-size: 1.25em; line-height: 2.50em; margin-left: 0.1em; text-align: center; vertical-align: middle; width: 2.50em; height: 2.50em; }
.footer-socials .social-icons span{ cursor: pointer; display: inline-block; }
.footer-socials .socials i{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.tagcloud a{ font-size: 13px !important; background: rgba(0,0,0,0.4); padding: 8px 10px; margin: 0 2px 4px 0; display: inline-block; line-height: 1; }
.sidebar .tagcloud a{ background: #23A38F; color: #FFF; }
.bottom-menu{ float: right; margin: 1em 4em 0 0; }
.bottom-menu ul{ list-style-type: none; font-size: 1.1125em; }
.bottom-menu ul li{ display: inline-block; font-family: 'Open Sans', sans-serif; font-weight: normal; line-height: 1.8; border-radius: 5px; border: 1px solid #CCC; box-shadow: 0 0 2px rgba(0,0,0,0.3); padding: 1em; margin: 0 0.10em 0 0; background: #FFF; color: #3e3e3e; }
.footerimg{ width:6em; }
.copyright{ margin: 2em 0 0 4em; }
.copyrighttext{ font-size: 1.08em; font-weight: 600; color: #B3B3B3; margin: 0 0 0 0.50em; }
#imgv ul{ list-style-type: none; letter-spacing: 1px; margin-top: -20px; font-size: 0.75em; }
#imgv ul li{ display: inline; }
.social-footer-mobile{ display: none; }
.footer-vertical-line{ border-top: 1px solid #8c8b8b;width: 9em; vertical-align: middle; position: relative; }
.left{ left: 32.50em; top: 1.65em; }
.right{ right: 32.50em; top: -1.45em; float: right; }
HTML:
<div id="bottom-footer" class="footer-menu">
<div class="ak-container">
<div class="footer-wrap clearfix">
<div class="footer-socials clearfix">
<div class="footer-vertical-line left"></div>
<div class="socials">
<span class="font-icon-social-facebook"></span>
<span class="font-icon-social-twitter"></span>
<span class="font-icon-social-youtube"></span>
<span class="font-icon-social-linkedin"></span>
</div>
<div class="footer-vertical-line right"></div>
</div>
<div class="footer-columns-4">
<ul>
<li>Products</li>
<li>All products</li>
<li>Standard loan</li>
<li>Promo loans</li>
<li>Insurance for loans</li>
</ul>
<ul>
<li>About Loans</li>
<li>How to apply</li>
<li>Our partner stores</li>
<li>Terms & Conditions</li>
<li>Safety guarantee</li>
</ul>
<ul>
<li>For Customers</li>
<li>Financial literacy</li>
<li>Payments & Guidelines</li>
<li>Menu</li>
<li>FAQ</li>
</ul>
<ul>
<li>Title</li>
<li>About us</li>
<li>News</li>
<li>Careers</li>
<li>Contacts</li>
</ul>
</div>
<nav role="navigation">
<div class="bottom-menu">
<ul class="footer-desktop-version">
<li><span class="footer-icon-cs icon-icon-support"></span>Customer Service: <strong>11111111</strong></li>
<li><span class="footer-icon-cs icon-icon-collection"></span>Collections <strong>1111111</strong></li>
</ul>
</div>
</nav>
<div class="copyright">
<img src="/files/footer.jpg" class="footerimg"><span class="copyrighttext"> All Rights Reserved ® 2017
Company Name</span>
</div><!-- .copyright -->
</div><!-- .footer-wrap -->
</div>
</div>
Your code shows nothing, perhaps you can't reveal your web address no problem.
You need to check something in your html any div or content area have minus value like top:-100px if you set something like this you need to change like margin-top:-100px
first you have to right click on the footer and click inspect
then you will see all the css applied to that particular element, select the parent element
check if bottom padding is applied to body or footer element
if you dont find bottom padding for footer or body element or other parent class of footer specify bottom padding in negative. (eg -5px)
note: you dont need to modify the css directly for testing purpose you can change and check the effect in debugging tool itself (f12 shortcut for debugging tool)
it should be something like:
(element name) { padding-bottom:-30px); }
also check for bottom margin if padding does not work.
I'm just learning CSS and HTML and decided to have a go at making a mock up website. I'm having trouble with the border not meeting the end of the top bar. Other times I've had it go over.
https://jsfiddle.net/9gonuvu7/
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
You can see this in the above link. If you could explain to me why this is happening and how I can avoid it in future I would be very grateful.
Remove the padding from the parent.
That's preventing it from reaching top.
#topbar {
background-color: #2A4F6E;
width: 100%;
height: 50px;
padding: 0px 0 0px 0;
margin: 0;
}
Okay, because you said you just started with HTML and CSS I changed a bit more in your code.
At the moment your fixedwith div has no impact on the code (maybe you use it in your full website).
You applied the background on the whole topbar, that HTML-wise also contains your menu points, assuming you only want your headline to have that blue background I swapped that property to the h1-tag.
With this change the borderlines are overlapped b the headline, which should do the job.
new JSFiddle
* {
margin:0;
padding:0;
}
body {
margin: 0;
font-family: arial, helvetica, sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
#topbar {
float:left;
width:100%;
height:100%;
overflow:hidden;
}
#topbar h1 {
display: block;
width:100%;
height:100%;
background-color: #2A4F6E;
padding: 7px 50px 7px 40px;
margin: 0;
color: white;
float: left;
border-right: solid #3E6F87 1px;
}
#topnav {
float:left;
width:100%;
height:50px;
background:#ccc;
}
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
}
#topnav ul {
margin: 0;
padding: 0;
}
#topnav a:hover{
color: #A97437;
}
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<h1>Neil's Tech Reviews</h1>
<div id="topnav">
<ul>
<li> Home</li>
<li> Reviews</li>
<li> Forum</li>
<li> Partners</li>
<li> About</li>
</ul>
</div>
</div>
</div>
</div>
</body>
I have a question about positioning my website. As you can see in the IMG below, there is a gap between two of my images for some odd reason: http://puu.sh/6SWgu.png
I am trying to get rid of that gap, but I can't figure out why.
EDIT
(I don't know who deleted the other comment someone left, but I tried that one with a little bit of configuration and it worked.)
(Question is, will this new code hurt any process as I continue coding in my website?)
Here is the NEW content:
HTML:
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div vertical-align: top; ><img src="images/mainbody.png" /></div>
<div id="footer">
<p>©2014 Rythmn Designs<p>
</div>
CSS:
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 0.1px;
list-style: none;
padding-left: 0.1px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
}
For this you can set the navigation margin-bottom in negative or the main body image margin top as negative if your 0 margin or padding isn't working
I want to center (automatically) the navbar on this site. Also, I need to have a 1px border-top and 1px border-bottom that extends roughly 70% of the nav area.
It should look like this mockup once it's done:
Remove the floats on your li tags, and on your #navigation, add text-align: center;. Your floats are making your parent have a height of 0, which will in turn not allow you to have your borders. This fixes both those issues. From there, just add border-top: 1px solid white; border-bottom: 1px solid white; to your ul to get your lines.
Take a look at this fiddle http://jsfiddle.net/qZTAt/
The key there is this piece of code:
nav {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin: 0 15%;
text-align: center;
}
Try using margin:0 auto; padding:0;
Right I'm going to come in late to this party (with an already answered question!) just to add what I would have done. It's based on this technique here
http://jsfiddle.net/rabmcnab/GSSQx/
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<style> body {
font-family: 'Poiret One', cursive;
font-weight: bold;
font-size: 20px;
}
.font {
font-family: 'Poiret One', cursive;
}
header {
background-color: aqua;
padding: 40px 0px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
padding: 0 40px;
margin: 0 auto;
text-align: center;
}
nav {
border-top: thin solid white;
border-bottom: thin solid white;
width: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: -10px;
color: white;
font: 40px/0 arial;
padding: 40px 0;
}
li:hover {
color: #fff;
cursor: pointer;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>
</header>
</body>
</html>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>