I am still an extreme beginner to web development and i am trying to create this navigation bar.
The issue i have come across is that the element i have floated to the right side is not on the same level as the other stuff.
This is probably due to something i have done with the css and i can't pin it.
Also what i actually want to do is to change the background of the right floated element to pink and have a padding around it to make it look like a button. I dont know if i have gone about to do so in the right way . I did try to find it out on my own but havent had any luck so far.
This is my html.
<html>
<head>
<title>WatchIT -Your one stop destination for all your movie tickets</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="navbar" class ="navbar-collapse">
<ul>
<li> <a class="active" href="" title="Home">HOME </a> </li>
<li> MOVIES </li>
<li> THEATERS </li>
<li> BUY TICKETS ONLINE </li>
<li style="float:right"><a class="btn btn-scope1 navbar-btn" href="">TEST YOUR KNOWLEDGE </a> </li>
</ul>
</div>
</body>
</html>
and this is my css.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00004d;
font-size:15px
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #000080;
}
a:active {
text-decoration: none;
color: #00abbd;
outline: none;
}
.btn-scope1 {
text-transform:uppercase;
padding:4px 15px;
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
min-width: 100px;
}
.btn-scope:hover {
color: #fff;
opacity: 0.9;
background-color: rgba(238, 12, 110, 0.8);
}
Please be kind enough to ignore my ignorance on certain things that i may have put on.What i honestly want is to have a padding in pink like the "Post your question button" on stackoverflow on the buytickets and test your knowledge button. Thank you in advance
The solution to your issue is twofold: One, using margins and two, using a background to style your button. The simplest change is as follows:
In your css, change:
.btn-scope1 {
text-transform:uppercase;
padding:10px 1px;
margin-right: 30px;
margin-top: 5px;
background: red;
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 10px;
min-width: 100px;
}
The background will give you the required button background effect. What's important to note is the margin you set. This will enable you to move around the concerned element with respect to the div it is placed in.
Here's a link. (Codepen to show desired result.)
Congrats on starting web development.
A simple fix for this issue is to give the elements you want to style an ID like Link Text and then style it with the ID-selector in CSS like #link1 { backgroundcolor: red; }, ideally you should give a class in the HTML selector, like Class and then style it with .link {backgroundcolor: red}.
Please check again whether this is what you need
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00004d;
font-size:15px
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #000080;
}
a:active {
text-decoration: none;
color: #00abbd;
outline: none;
}
.btn-scope1 {
text-transform:uppercase;
padding:4px 15px;
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
min-width: 100px;
}
.btn-scope:hover {
color: #fff;
opacity: 0.9;
background-color: rgba(238, 12, 110, 0.8); }
<html>
<head>
<title>WatchIT -Your one stop destination for all your movie tickets</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<div id="navbar" class ="navbar-collapse">
<ul>
<li> <a class="active" href="" title="Home">HOME </a> </li>
<li> MOVIES </li>
<li> THEATERS </li>
<li> BUY TICKETS ONLINE </li>
<li style="float:right;padding:15px;"><a class="btn btn-scope1 navbar-btn" href="" style="background-color:pink !important;">TEST YOUR KNOWLEDGE </a> </li>
</ul>
</div>
</body>
</html>
That is happening becuase you are providing separate padding values through btn-scope1. Remove that part, et voila!
Here's the css after removing that part.
.btn-scope1 {
text-transform:uppercase;
/*padding:4px 15px;*/
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
min-width: 100px;
}
Related
I'm having another issue. I can't figure where the issue is. I had added a border around my menu items. Everything was working fine until I added a logo. I believe the issue is with my .Main-Nav li a:hover. in my CSS. I'll post everything and see if you guys can figure it out. I would also like to know if I need to make a different file for every page on my website
* {
margin: 0PX;
padding: 0PX;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 200px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hello {
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1 {
color: white;
text-text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button {
margin-top: 30px;
margin-left: 440px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one {
background-color: darkorange;
font-family: "roboto", sans-serif;
}
.btn-two {
font-family: "roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<HTML>
<Head>
<title> Drew's Blog</title>
<link href="style.css" rel="stylesheet" type "text/css" </head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png">
</div>
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> GALLERY </li>
<li> NEWS </li>
<li> CONTACT </li>
<li> LESSONS </li>
</ul>
</div>
<div class="Hello">
<h1> Lets Get Started</h1>
<div class="button">
Get to Know Me
Check out my lessons
</div>
</header>
</body>
</html>
`
In
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
Add a:
border: 2px solid white;
This will put a border around your menu items that are put in the <li> tag
Look in the active class for the border:
.main-nav li.active a {
border: 2px solid white;
}
That's for the HOME button, because it's class is active (class="active">) and it already had a border
I changed the pixels so I can see the results, but the problem is exactly that: The pixels. If your hover pixels and li pixels are the same, you won't see any change
This should add a border to your menu items and change when you hover over them with the mouse.
Also, the
.main-nav li a:hover
does the exact opposite. When you define a border here and you HOVER OVER A MENU ITEM, a border will APPEAR, so basically try to balance the pixels out.
And I'm trying to figure out what exactly you want. Do you want borders to always be there and when you hover over them you want them to disappear or do you want borders to appear when you hover over them.
One of my assignments is to create a responsive webpage. I'm running into trouble when attempting to open it on mobiles. My 'li' elements touch and look awful.
How can I stop the 'box' around each li item from touching?
HTML -
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<body>
<center>
<div id="Menubar">
<ul>
<li id="active">Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</center>
CSS -
#Menubar ul {
padding: .05em 0;
margin: 0;
list-style-type: none;
background-color: #3A3734;
color: #FFF;
width: 100%;
font-family: Oswald;
font-size: 32pt;
font-weight: bold;
text-align: center;
border-top:solid #8E7861 4px;
border-bottom:solid #8E7861 4px;
}
#Menubar ul li { display: inline; }
li a {
text-decoration: none;
margin: 0 0 3px 0;
background-color: white;
color: #6AA0CC;
padding: .1em 1em;
border: 2px solid #6AA0CC;
}
li a:hover {
background-color: #6AA0CC;
color: #fff;
border: 2px solid white;
}
.listcenter{
width:250px;
margin:0 auto;
text-align:left;
}
JSFIDDLE
Add the following code to the li a selector apart from other styles that you have applied.
li a {display:inline-block;}
Check the updated JSFIDDLE
The important thing is that for responsive webpage you should use media queries as well.
I was messing around with an unordered list to make a semblance of a navigation page, and I've had a problem I can't fix. Each border around the words are very closed in, and I don't have any idea how to make the area inside the borders bigger meaning I want the border to be farther away from the word.
I know it looks horrible, but I'm really just focused on making it work properly rather than making it look good.
Here is my HTML:
<!doctype=html>
<html>
<head>
<meta charset="utf-8" />
<title> Test Title </title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div class="wrap">
<h1 class="test"> Blah Blah </h1>
<ul>
<li class="navigation"><a class="navitem" href="#"> Blog </a></li>
<li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
<li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
<li class="navigation"><a class="navitem" href="#"> About </a></li>
</ul>
</div>
</body>
</html>
And this is my CSS:
.wrap
{
width: 1000px;
height: 800px;
margin: auto;
background-color: black;
color: white;
font-family: sans-serif;
text-align: center;
}
.navigation
{
display: inline;
list-style: none;
padding-right: 50px;
}
.navitem
{
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
}
.navitem:hover
{
color: 339900;
border-color: 339900;
}
If you want to have some space between the words and the border, than you need to use padding property for that
.navitem {
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
padding: 5px;
}
Demo
Also, you can write the same thing as border: 1px solid green; which is nothing but the border shorthand.
Also, you told us that you are a fresher. Make sure you reset the default margin and padding which are applied by the browser by using
* {
margin: 0;
padding: 0;
}
Or by using CSS Reset Stylesheet so that your menu styles position stays consistent across the browsers.
Lastly, you do not need to call classes on each of your element, you can leave it up to CSS selectors to select them... So get rid of all the classes, and just assign a class to the parent element, and use the selectors below..
Am assigning class to ul which is main_navigation so now we will select all the first level li using
.main_navigation > li {
/* Target direct child to .main_navigation */
}
And to target direct a inside those li we will use
.main_navigation li a {
/* Target direct child to .main_navigation > li */
}
Refactored Demo
Just add padding in NavItem:
.navitem
{
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
padding: 5px 10px; // The first 5px is for Height, and the second 10px is for Width. Adjust it for your needs.
}
Add the following in your CSS content:
ul li a {
padding: 10px;
}
Add the following in your CSS:
ul li a
{
padding: 10px;
}
Or you can set your class as:
.navitem
{
width: 100px; /* Set width and height as you wish */
height: 100px;
color: white;
text-decoration: none;
border: 1px solid green;
}
Just add some padding to the list items:
.navitem {
padding: 5px;
}
Use:
.wrap
{
width: 1000px;
height: 800px;
margin: auto;
font-family: sans-serif;
text-align: center;
}
.navigation
{
display: inline;
list-style: none;
padding-right: 50px;
}
.navitem
{
padding: 5px;
}
In order to manipulate each list-item as a box, you need to put each <li> item into a <div>. A <div> works as a container, or as a box. You can then specify height, width, text alignment, borders, etc. for it. So, your HTML should look like this:
<html>
<head>
<meta charset="utf-8" />
<title> Test Title </title>
<!-- <link rel="stylesheet" href="../CSS/style.css" /> -->
</head>
<body>
<div class="wrap">
<h1 class="test"> Blah Blah </h1>
<ul>
<div class="box">
<li class="navigation"><a class="navitem" href="#"> Blog </a></li>
</div>
<div class="box">
<li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
</div>
<div class="box">
<li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
</div>
<div class="box">
<li class="navigation"><a class="navitem" href="#"> About </a></li>
</div>
</ul>
</div>
</body>
</html>
Whereas your CSS could be:
.wrap
{
width: 1000px;
height: 800px;
margin: auto;
background-color: black;
color: white;
font-family: sans-serif;
text-align: center;
}
.navigation
{
display: inline;
list-style: none;
}
li.navigation
{
text-align: center;
}
.navitem
{
color: white;
text-decoration: none;
}
.navitem:hover
{
color: 339900;
border-color: 339900;
}
div.box
{
height: 25px;
width: 100px;
border: 1px solid;
border-color: green;
display: inline-block;
padding: 20px;
margin: 20px;
}
Update the CSS content with
.navitem {
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
padding: 5px 10px;
/* It specified a padding of 5px to top and bottom and 10px to left and right */
}
You can also use padding-top, padding-left, padding-right, padding-bottom individually also as per your requirement.
Demo
Change anchor display to inline-block and add some padding
.navitem
{
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
display: inline-block;
padding: 7px 15px;
}
I have a Div bar with a white background in which my breadcrumb lives.
Here you can see a screenshot:
How can i align the text vertically?
Here is my CSS:
/* Breadcrumb */
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
}
#breadcrumb ul {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumb li {
float: left;
padding-left: 5px;
}
#breadcrumb a {
padding-right: 10px;
background: url(../images/div_breadcrumb.gif) no-repeat right center;
color: #526472;
margin-right: 5px;
}
And my HTML:
<div id="breadcrumb" class="clearfix">
<ul>
<li style="white-space: nowrap;">
<a style="white-space: nowrap;" href="">Home</a>
</li>
<li style="white-space: nowrap;">
Visual collaboration solutions
</li>
</ul>
<div id="shareThis" class="fl_right"> Share: </div>
</div>
Due to incomplete code, it's a bit hard to tell, but I'm guessing that you're either missing some markup, or that there are other styles messing with your breadcrumbs.
The following works just fine to display items in a horizontal row (your styles, my HTML).
<html>
<head>
<style>
#breadcrumb { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
#breadcrumb ul { margin: 0; padding: 0; list-style: none; }
#breadcrumb li { float: left; padding-left: 25px;}
#breadcrumb a { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
</style>
</head>
<body>
<div id="breadcrumb" class="clearfix">
<ul>
<li>Home Visual collaboration solutions</li>
<li>La</li>
<li>Ti</li>
<li>Da</li>
</ul>
</div>
</body>
</html>
If you are using ul and li tags properly, you might try using Firebug or the Chrome developer tools to detect whether or not other styles are being applied.
Try:
li{display: inline}
You could also use
li{display:inline-block}
That way your li elements wont lose their block properties
Here's the example :
http://jsfiddle.net/bFe35/1/
Try to edit your CSS file, by adding vertical-align:middle; to your #breadcrumb ID, like this:
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
vertical-align:middle;
}
For some strange reason, my text-align: center; isn't working. It's weird 'cause it's the most basic stuff to do for both HTML and developer, so I'm kind of embarrassed... I must doing something terrible wrong and don't see my mistake. The text-align option isn't even showing in Firebug.
Could anyone help me out here?
HTML:
<div id="main-menu">
<ul id="main-menu-links" class="links clearfix">
<li class="menu-286 first active">
<a class="active" title="" href="/dashboard">Dashboard</a>
</li>
<li class="menu-194">
Organisation
</li>
</ul>
</div>
CSS: (I have tried to place text-align: center in each selector, but with no result...)
div#main-menu {
background-color: #c4d82d;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div#main-menu ul {
padding: 0px;
}
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
}
div#main-menu li.last{
border: none;
}
div#main-menu a, div#main-menu a.active {
background: none;
text-shadow: none;
}
div#main-menu a:hover {
background: none;
font-style: italic;
}
It's working as intended, when I wrap the <ul>...</ul> elements in a <div id="main-menu">:
http://jsfiddle.net/6bBK5/
Make sure that you use the correct selectors. IDs are case-sensitive, spaces in the selector are significant.
<div>
<span>
<ul>
<li>Here is the centered Title!</li>
</ul>
</span>
</div>
CSS
ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}
So, is working:
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
text-align:center;
}