hello guys I'm new to programming and I can't seem to find any related search about what I am trying to do.
Here's an image
can someone please help me.
My code is like this in my li and ul
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
Essentially you are only needing to add a border, and then a border-radius in CSS to curve the edges.
Here's a basic example, based on what you have:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float:right; /* Float the main list element instead */
}
li {
display:inline-block; /* Don't float your list items, float the list itself */
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px;
text-decoration: none;
margin:0 10px; */ I've changed the padding and margin of the list items to help them display more like the image*/
}
/* You need a border and border-radius to curve it */
li:first-child {
border:2px solid #fff;
border-radius:15px;
}
https://jsfiddle.net/leecollingsco/sj2utx7c/
If you want circle in all li elements on selection than use:
ul li {
border:2px solid #fff;
border-radius:15px;
}
Related
I need to clarify that I have close to no understanding of pragramming so my apology if my question sounds dumb.
So the question is that I would like to make the navigation bar of my website bigger (vertically) as it looks too small right now.
Below is the code that probably should affect the change. If you need more information then I will do my best to provide that! Thanks all!
#nav-wrap {
position: fixed;
top: 0;
left: 0;
border-top: 3px solid #000B5C; /* #ActiveSectionColor; this one controls the top border old #199ad0; old nav color */
background: rgb(29,62,143); /* #MenuBarColor; Hex code: #1d3e8f */
background: rgba(29,62,143,1); /* #MenuBarColor; This line controls opacity. #1d3e8f, */
z-index: 999;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}
#nav-wrap .container ul {
list-style: none;
overflow: hidden;
float: right;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
margin-right: 17px;
text-transform: uppercase;
}
#nav-wrap .container ul span:last-child li,
#nav-wrap .container ul > li:last-child {
background: none;
}
#nav-wrap .container ul li a {
float: left;
display: block;
font-family: 'Lato', sans-serif;
color: #fff;
padding: 14px 12px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 13px;
font-weight: bold;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff; /* April 2017 */
background: #000B5C; /* #ActiveSectionColor; this one controls the rest. old #199ad0; */
border: 0;
}
make css class and use these properties and call this class on your navbar tags or div tags which you are using
.sizing{
padding-top: 50px;
padding-bottom : 50px;
}
if you want sizing to vise versa then insted of top and bottom just use right and left
Well, I had a perfect menu with this code, just about right with this code in my css file
ul.Menu {
list-style-type: none;
margin: 10px;
overflow: hidden;
background-color: #ffffff;
border-style: solid;
border-color: #e9055c;
border-width: 2px;
font-weight: bold;
font-family: arial, sans-serif;
text-align: center;
margin: 0 auto;
}
ul.Menu li{
border-right: 1px solid #e9055c;
display: inline-block;
}
ul.Menu li a {
display:block;
color: #e9055c;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.Menu li a:hover {
background-color: #f6b0ce;
}
ul.Menu li:last-child {
border-right: none;
}
but then I added this to my CSS-code to create a responsive banner via divs at the top of my website:
.wrapper {
width: 100%;
overflow: hidden;
}
.container {
width: 100%;
margin: 0 auto;
}
.banner-img {
width: 100%;
}
and now my menu looks like this- totally crappy with too much space above the menu items...
I already found out, that it changes, when I'm changing the padding settings on the ul.Menu li a, but I can't get it right with just those...
Can you please help me? :)
You've written the margin property twice. Delete the margin : 0px style from ul.Menu, it is causing the problem.
I'm trying to create a site navigation bar that uses sub-menus.
Using whatever I can gather from the internet I've done my best and have got one working with one small issue.
When you hover the mouse over the sub-menu, the main menu text colour does not stay white like I'd like it to.
Can anyone get this to work?
.header nav.site_nav {
float: right;
}
.header ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.header ul a {
display: block;
font-weight: bold;
color: #2C395D;
font-size: 14px;
text-decoration: none;
padding: 8px 8px 8px 8px;
}
.header ul a:hover {
color: white;
}
.header ul li {
float: left;
position: relative;
margin: 0 2px 0 2px;
}
.header ul li:hover {
background: #2C395D;
}
.header ul ul {
display: none;
position: absolute;
text-align: right;
top: 100%;
right: 0;
}
.header ul ul li {
float: none;
width: 150px;
background: #BFC8E1;
margin: 0;
}
.header ul li:hover > ul {
display: block;
}
jsfiddle code
I wasn't able to do this easily without adding more information to your html. I added a class to all top level menu items, then added a small amount of css to make them white on hover.
Updated Fiddle
Add this class to your top level menu items in html:
<a class="topLevel" href="#">Courses ▾</a>
Add this to your CSS:
.header ul li:hover a.topLevel {
color: white;
}
I recently built my first website (with much trial and error) and was quite pleased until I noticed that when you scroll down the page a little it creates a gap in the navigation so you can't click on the dropdowns. I'm going crazy trying to fix it. Can anyone please help? The site is at: http://lamplighters.org/education/smw.html
it appears to be an position issue that is set witht the element on the css. It would help to see your html and css code.
I can tell you that it has to do with the fact you used position: fixed. You have a series of other problems with your CSS as well.
I inspeceted the page and found a lot of things that didn't come together well for the navigation. Good housekeeping is not in order.
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul*/
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: center;
}
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul. This is redundant and should be consolodated into a single #nav, #nav ul, if you are going to use these assigned attributes. */
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
ul {/*By doing this you are only targeting any ul on the page*/
list-style: none outside;
}
ul, ol {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
margin-bottom: 20px;
}
ol, ul {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
list-style: none;
}
#nav li {
float: left;
width: 137px;
text-transform: capitalize;
display: inherit;
position: relative;
}
li {
line-height: 18px;
margin-bottom: 12px;
}
You may want to wipe your nav css clean and start from scratch.
I pulled a css file and put it below. hope this helps. Good luck with your sytle sheets in the future.
#menu{
width: 960px;
margin: 50px 0 0 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 60px;
text-decoration: none;
}
/*Text Color for the anchors*/
#menu li:hover > a{
color: #FFFFFF;
}
*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0 35px;
padding: 0 15px;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
/*add a background position*/
background-position: left top;
}
#menu ul li:first-child a{
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
}
#menu ul li:first-child a:hover:after{
/*add color scheme*/
}
#menu ul li:last-child a{
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
I just dont get why the background is on top of the text..
I'd really appreciate ANY help..
THX
html
<body>
...
<img...>
<div>
<div>
drop down list
<div>
<div>
body>img{
heres the background options, wanted it to adjust in height and width
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#wrap{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-flex: 1;
padding-top: 30px;
}
/* link styles und so */
a:hover{
cursor:pointer;
}
a{
text-decoration: none;
font-family: 'Sintony', sans-serif;
color:black;
}
/* drop down list */
.clear{
clear:both;
}
ul#nav{
list-style-type: none;
padding: 0;
margin-top:60px;
}
ul#nav li{
background-color: white;
float:left;
}
ul#nav li a{
display:block;
padding: 5px 10px;
color:#000;
text-decoration: none;
border-bottom: 1px solid #ccc;
list-style-type: none;
}
ul#nav li a:hover{
background-color: #aaa;
}
ul#nav li ul li{
float: none;
list-style-type: none;
}
ul#nav li ul{
position: absolute;
display:none;
}
ul#nav li:hover ul{
display: block;
}
Set the background using CSS
body
{
background-image:url('yourfilepath');
background-color:#cccccc;
}
If you don't want to use background-image element, and you want to use the img element, then you should work with the z-index property. Here you can play with it.
Here the example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex