I am learning html/css and have the following issue when aligning the "navigation menu" to the left. There's a small gap (see the pic below with a question mark)
can someone tell me how to remove the gap on the left side?
Here is my html/css code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 200px;
width: 800px;
background-color: #CCC;
}
#navi {
height: 50px;
background-color: #036;
width: 800px;
margin: 0px;
padding: 0px;
}
ul {
}
#content-area {
height: 400px;
width: 800px;
background-color: #FFC;
}
#footer {
height: 100px;
width: 800px;
background-color: #000;
}
h2 {
color: #FFF;
text-align: center;
margin: 0px;
padding-top: 50px;
}
h3 {
color: #FFF;
text-align: center;
padding-top: 10px;
margin: 0px;
}
p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
padding: 10px;
margin: 0px;
}
ul {
list-style-type: none;
margin: 0px;
}
li {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
display: block;
font-size: 12px;
margin-top: 10px;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h2>This is the header</h2></div><!--header end-->
<div id="navi">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkdIn</li>
<li>Google Plus</li>
</ul>
</div><!--navi end-->
<div id="content-area"><p>Isn't saw evening shall open them had behold thing said evening i herb. Yielding kind second night image. Grass void green. Make Man given replenish brought. Spirit them seed fifth for living said his. Man abundantly.<br /><br />
Sixth yielding saying. Make female said they're night from fourth you'll make signs be. Our. Earth from. Replenish form living grass tree creepeth own. Had rule land from living, replenish appear the their days shall bearing waters moving seas living you, forth fourth.<br /><br />
Sixth whose stars i a. Creeping sea second above beast living signs created had first, face male dry our a his.</p></div>
<!--content area end-->
<div id="footer"><h3>This is the Footer</h3></div><!--footer end-->
</div><!--wrapper end-->
</body>
</html>
Apply padding:0; for your ul style.
ul {
list-style-type: none;
margin: 0px;
padding:0;
}
The space is being applied from the default user agent style sheet.
You can remove it by explicitly setting padding, margin of <ul> to 0.
It's a common practice to override it throughout the document like
*{
margin:0;
padding:0;
}
Demo
Please check this
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
Add
ul{
padding:0;
}
This will solve this issue. In general, you can use the following at the top of your CSS file:
*{
padding:0;
margin:0;
}
If you use this snippet at the top of your CSS, these problems won't occur and default padding etc. vary from browser-to-browser. So this will make it more consistent.
I can't see where you are using CSS position property? This is quite helpful. Also you can use these resources:
CSS Box model
CSS Padding
CSS Margin
CSS Positioning
more CSS Positioning
You can use the 'Try it yourself' option to see it in real action. It's helpful and a good practice to set to zero all paddings and margins at the beginning at your code, like this:
body{
padding:0;
margin:0;
}
I would suggest you to avoid floating and use:
display: inline-block;
also you should give your ul id and apply the css settings to that #ulid >li this way you avoiding the rest of your li to get the menu rules.
Also I will recommend using some reset code as suggested in other answers so your CSS wont include the default browser CSS rules.
here are my modifications:
#ulmenu > li {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 12px;
display: inline-block;
line-height: 50px;
padding-left: 10px;
padding-right: 0px;
margin: 0px;
}
#ulmenu{
margin:0px;
padding:0px;
list-style-type: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h2>This is the header</h2></div><!--header end-->
<div id="navi">
<ul id="ulmenu">
<li>Facebook</li>
<li>Twitter</li>
<li>LinkdIn</li>
<li>Google Plus</li>
</ul>
I just ran into the same issue and all the paddings and margins were zero already, after much trawling through the inspector, I noticed there was text-indent on the li
li{
margin:0;
padding:0;
text-indent:0;
}
Fixed my issue.
Related
html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}
.nav li {
display: inline-block;
}
.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}
.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}
.nav li.active a{
border: 1px solid white;
}
.banner-image {
width: 100%;
}
<DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul class="nav">
<li class="active">Home</li>
<li>World Cup</li>
<li>Sports</li>
<li>Schedule</li>
<li>About</li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
I want to fix up my navigation bar but do not know how to do it.
Improvement I want to make are:
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
How do I make the link spaced out?
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
How do I make the title "Grass World Sport News" bigger?
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
The problem is your selector, should be ul.nav li a and not .nav ul li a
How do I make the link spaced out?
Just add to link element a left margin (since you want it to float right):
ul.nav li {
margin-left: 1rem // for example
}
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
The float is working correctly but you have a max width on parent container so it gets only to the far right of the container. If you want it to the right of the window remove max-width.
div.container{
margin: 0;
padding: 0 30px;
}
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
Same problem as number 1. Just set the selector to be ul.nav li a
How do I make the title "Grass World Sport News" bigger?
If you mean a bigger font just set a higher font-size.
header h1 {
// for example
font-size: 30px;
}
This is very broad, and looking at the code it appears much was either copy/pasted from another site expecting the same results which is not how coding works.
Here's a pen: https://codepen.io/codespent/pen/BVXyWO
To answer your questions:
To change font color, you use color: #fff in the parent rule.
Spacing can be done in multiple ways, but just learn box model before you start playing with anything so you know why you're using paddings or margin.
Moving the links to the right is also contextual, there's many ways you can do so, but you need to understand why you're doing it this way. text-align:right; may work, but Flexbox is recommended.
font is an outdated property. You may use font-size:20px; to change the font size.
This is also a broad question as there are many ways that are contextual to how you feel is best.
To understand these fundamentals, I highly recommend taking freeCodeCamp's Basic CSS courses and as well, you should see StackOverflow's "How to Ask" knowledge object to grasp how you should be presenting your questions when coming here for help.
I am trying to clone google's home page.I Started from the footer of the page and got stuck at the alignment of the links in the footer.
my html code:
<div class="footer">
<hr >
<footer >
Advertising
Business
About
Privacy
Terms
Settings
</footer>
</div>
my css code :
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer{
background-color: #F4F6F7;
height: 45px;
}
hr{
border-color: #CCD1D1;
margin-bottom: 0px;
}
.advertising, .business, .about, .privacy, .terms, .settings{
color: #909497;
font-size: 1.2em;
margin-top: 11px; //THIS LINE.
}
.advertising, .business, .about{
margin-left: 40px;
}
.privacy, .terms, .settings{
margin-right: 40px;
float: right;
}
can anyone tell me, why the line "margin-top : 11px" is not applied to the first 3 links in the footer(advertising,business,about). Screenshot of footer:
Although the above answer will work, a better solution is this:
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer {
background-color: #F4F6F7;
height: 45px;
}
hr {
border-color: #CCD1D1;
margin-bottom: 0px;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.footer-links {
list-style-type: none;
}
.footer-links li {
display: inline;
}
.footer-links li a {
color: #909497;
font-size: 1.2em;
margin: 11px 20px 0px;
}
<div class="footer">
<hr/>
<footer>
<ul class="footer-links align-left">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul class="footer-links align-right">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</footer>
</div>
By putting the links into separate menus, it allows you to very quickly add and remove links in the future without messing around with CSS classes.
This fixes any margin errors you are having as well, as we're declaring that every anchor tag has a margin-top of 11px. You'll also notice instead of having 40px margin-left and margin-right, I've set each side to 20px which will give the same effect.
You can also use the .align-left and .align-right classes elsewhere in your HTML instead of declaring it in CSS for every class.
There's no need to give each link it's own class when they all have the same style. But if you wanted to highlight a particular link you'd naturally just add a .highlight class onto one of the anchor tags and specify the styling in CSS.
This method also gives full browser support. Flexbox is a little temperamental on IE as I write this.
Hope this helps!
You need to add float:left to your first three links, as you have applied float:right on the last three.
.advertising, .business, .about{
margin-left: 40px;
float:left;
}
I ran it through codepen,it worked when I applied the margin 11px to all elements using the footer as a selector
I also would recommend using flexbox, its alot easier to use, here is an example
`http://codepen.io/HTMLanto/pen/gmNedQ`
Cheers !
I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.
Ok so obviously I'm doing something wrong. Basically I'm trying to create a vertical navigation bar at the top of my page, to the right of a picture.
It should look like this:
Home Resume Contact Me
Somehow it keeps ending up like this:
Home Resume
Contact Me
Can you guys take a look and help me out? This is my first website. Thanks!
Here's my code:
HTML
html {
background-color: #ffffff;
}
img {
width: 20%;
float: left;
}
#menu {
width: 550px;
height: 35px;
font-size: 55px;
font-family: Courier, Serif;
text-align: center;
float: right;
margin-right: 300px;
margin-top: 50px;
}
#menu ul {
height: auto;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color: #000000;
}
#menu a:hover {
color: #224466;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Tyler Tilton</title>
</head>
<body>
<div id="menu">
<ul>
<li>Home
</li>
<li>Bio
</li>
<li>Contact Me
</li>
</ul>
</div>
<img src="C:\Users\Tyler\Desktop\Personal Website\Images\Profile Pic.png" />
</body>
</html>
Your code is a bit messy. The issue lies mostly in your #menu class. Your width is too small, you're text is too big, you have unnecessary margins and floats added. Remove all of that or adjust it and your list will align horizontally:
#menu {
/*width: 550px;*/ //too small for text size
height: 35px;
/*font-size: 55px;*/ //to big for width size
font-family: Courier, Serif;
text-align: center;
/*float: right;*/ //not necessary, at least in your demo, pushing text off screen
/*margin-right: 300px;*/ //not necessary, at least in your demo
}
FIDDLE
I think it is the font-size in #menu. Try reducing the font-size to 40px in #menu. It should bring them in one line.
Hope it helps!
I have placed a menu using <ul> <li> format in the div tag. inside the div i have one <ul> tag and the four <li> tags. Among the all <li>'s in one ![<li>][1] i have placed the search text box. The issue here is the menu works fine in firefox but in other browsers like chrome, IE, Safari etc the text box comes below the menu. My code as follows...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#cfnavbar {
background-image: url("images/menu_bg.png");
background-repeat: no-repeat;
height: 40px;
width: 990px;
}
#cfnavbar {
margin: 0;
padding: 0;
}
#cfnavbar:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#cfnavbar ul{
padding: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
font-size:18px;
}
#cfnavbar ul li{
display: inline;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 8px 13px 5px 6px;
text-decoration: none;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#cfnavbar ul li span{
padding-left: 0px;
}
#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
}
#cfnavbar ul li a#rightcorner{
padding-right: 10px;
}
#cfnavbar ul li a:hover{
text-decoration: none;
color:#FFFFFF;
}
.wrapper {
width:990px;
background-color:#c6c6c6;
margin:0 auto;
overflow:hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="cfnavbar">
<ul>
<li><span>Home Page | </span></li>
<li>Top Rated Games | </li>
<li>Top Played Games</li>
<li>
<div class="searchform">
<form action="#" method="get" onsubmit="#">
<input name="task" type="hidden" value="search" />
<input name="q" type="text" size="20" id="search_textbox" value="<?php echo $search_val;?>" onclick="clickclear(this, '#" onblur="clickrecall(this,'#')" class="search_box"/>
<input id="box" type="image" name="submit" src="images/search.png" class="search_button" />
</form>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Instead of using display: inline on your <li>s, try floating them, like this:
#cfnavbar ul li { float: left; }
You shouldn't nest block-level elements (like your search form div) within inline elements, as it can cause unexpected effects (and isn't valid), and floating each <li> will still keep them all horizontally in the same "row," which is the effect you were probably looking for.
This fixed the issue for me in Chrome. You may have to adjust a couple other things to account for the float effect, but overall it should be an improvement.
Try inserting this css: .searchform{float:right;}
In fact .searchform{float:left;} is good too
From what I can tell by going to the actual site, there are two things amiss. How and why, I do not know. First, you need to add width:100% to the containing <ul>. This will enlarge it enough to hold the search box. Second, you need to change the padding attribute of the .searchform from padding: 0 210px; to padding: 0 0 0 210px;.
Those two fixes should fix it.