When I tried to create a button on which I have a link embedded with the functionality of you clicking the button even if it's outside of the exact string on navigation bar using HTML5 and CSS3, I can't create what I hoped. What am I missing on the following code?
HTML file
<nav>
<ul id='main_menu'>
<li><a href='/'>Home</a></li>
<li><a href='/l1'>Link1</a></li>
<li><a href='/l2'>Link2</a></li>
<li><a href='/l3'>Link3</a></li>
</ul>
</nav>
and, CSS file
ul#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}
When I opened my browser and accessed to it, the result is a crappy button, with no functionality of clicking outside of the string. How can it be feasible?
Thanks.
please try the following css
ul#main_menu li {
display:block;
list-style:none;
float:left;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 2px solid;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: #ff0000;
border: 3px solid;
}
Here is my solution.
HTML
<nav>
<ul id='main_menu'>
<li><a href='/'>Home</a></li>
<li><a href='/l1'>Link1</a></li>
<li><a href='/l2'>Link2</a></li>
<li><a href='/l3'>Link3</a></li>
</ul>
</nav>
CSS
ul#main_menu {
list-style:none;
}
ul#main_menu li {
display:inline-block;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 1px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: rgb(150,150,150);
}
Code it self is bit wrong, here is what you have to use.
place it in your css sheet
#main_menu ul{
list-style: none;
}
#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}
a{
text-decoration:none;
}
#main_menu li:hover{
background-color: green;
}
To create a button link it is very easy in html. The following code will give you html to make a button link very easily. You will also add a bit of css.
HTML
<body>
<nav>
<button onclick="window.location.href='https://example.com'">Example</button>
</nav>
</body>
CSS
body {
background-color: black;
}
nav {
background-color: white;
}
nav button {
background-color: red;
height: 30px;
}
nav button:hover {
cursor: pointer;
background-color: blue;
}
Related
I want to have the entire tab menu to be clickable. In order to do that, I need the "a href" to fill the entire tab but doing so I lose the exact size and shape I want. I'm trying to accomplish by adding the :not(#sub_menu ul il) to the main ul, il{} css styles but it throws the portions out of whack.
So how can I accomplish this in HTML & CSS? Also, the bottom border is still viewable, so how can I fix this as well? Thank you
Adding :not(#sub_menu ul li) to the main p, il settings.
Then increasing the padding by 5px to "10px 20px" in #sub_nav ul li #selected.
Home Page
<body>
<main>
<h3>Home</h3>
<nav id="sub_nav">
<ul>
<li id="selected">Home</li>
<li>Away</li>
</ul>
</nav>
</body>
Away Page
<body>
<main>
<h3>Away</h3>
<nav id="sub_nav">
<ul>
<li>Home</li>
<li id="selected">Away</li>
</ul>
</nav>
</body>
CSS
#sub_nav {
float: left;
width: 100%;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid;
}
#sub_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#sub_nav ul li {
display: inline;
border: 1px solid black;
}
#sub_nav ul li a {
padding: 5px 15px;
color: inherit;
text-decoration: none;
border-width: 1px 1px 0px 1px;
}
#sub_nav ul li#selected {
border-bottom: 1px solid white;
}
main {
margin-bottom: 1px;
padding: 1px;
height: 4000px;
width: 80%;
border: 1px solid black;
float: left;
}
main ul {
margin: 10px;
padding: 10px;
}
main p, li {
margin: 5px;
padding: 5px;
}
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.
Im trying to make a drop down menu, i cant edit my html and i must style it completely in css.
Im working with css3
i have it already styled i just need it to actually drop down.
the share 'li' will be the only thing seen on top of the page, when you hover over this the rest of the list items will drop down. Therefore the share li will now be at the bottom of the drop down. So the order from the top it will be in once you hover over the share li is - Twitter, facebook, google, linkedin and share.
heres my html for the dropdown:
<ul id = "dropdown">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Linkedin</li>
<li>Share</li>
</ul>
so far this is what i have in my css
#dropdown ul {
float: left;
}
#dropdown li {
background: white;
padding: 10px;
width: 120px;
list-style-type: none;
font-family: arial;
font-size: 20px;
text-align: center;
}
#dropdown :nth-child(1) {
background-color: gray;
color: white;
border: 6px solid white;
}
#dropdown :nth-child(2) {
border: 6px solid white;
}
#dropdown :nth-child(3) {
background-color: gray;
color: white;
border: 6px solid white;
}
#dropdown :nth-child(4) {
border: 6px solid white;
}
#dropdown :nth-child(5) {border: 6px solid white;
border-top: 1px solid black;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
font-weight: bold;}
if anyone could help me out on how to style this to drop down the way i need it too it would be great,
thanks
When you hover over an LI element, you are also hovering over it's container, in this case the ul#dropdown element, so adding the following to the end of your styles should work fine:
#dropdown li {
display: none;
}
#dropdown li:last-child {
display: block;
}
#dropdown:hover li {
display: block;
}
You need to add some code. I've added some code for you. DEMO here
Using HTML5 nav element and nesting SASS properties. None of the properties are being applied to the html. Not sure where the issue is.
Here is my sass:
nav{height:4em;width:100%;position:relative;padding:10px;z-index:1000;
ul{list-style:none;}
li{display:inline;font-size:130%;"
a{color:#333;text-decoration:none; padding:5px;
&:hover{border-bottom:#f8a593 2px solid;}
&:active{border-bottom:#fd5d39 2px solid;}
}
And here is my html:
<nav>
<ul>
<li><a class="active-link" href="index.html">Home</a></li>
<li>Work</li>
<li>Le Me</li>
</ul>
</nav>
Isn't it because on that line:
li{display:inline;font-size:130%;"
the latest character should be }, not ". Once I changed it, your code is compiled to:
nav {
height: 4em;
width: 100%;
position: relative;
padding: 10px;
z-index: 1000; }
nav ul {
list-style: none; }
nav li {
display: inline;
font-size: 130%; }
nav li a {
color: #333;
text-decoration: none;
padding: 5px; }
nav:hover {
border-bottom: #f8a593 2px solid; }
nav:active {
border-bottom: #fd5d39 2px solid; }
Is that what you want to achieve?
I'm trying to hide part of my menu. When I call display:none The entire menu disappears. I have id's to separate them so I don't get why this happens. Here's the code:
HTML:
<ul id="menu">
<li>Categories 1
<ul id="cat1">
<li>temp1</li>
<li>temp2</li>
<li>temp3</li>
</ul>
</li>
</ul>
CSS:
#menu {
background-color: #0000FF;
height: 20px;
padding: 15px 0 10px;
margin-bottom: 20px;
font: 12px 'DroidSansBold', Tahoma,sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 3px 2px 3px #000;
border-radius: 5px;
text-align: center;
}
#menu li{
display: inline-block;
}
#menu li a {
color: #fff;
text-decoration: none;
margin: 0 120px;
}
#cat1 li{
display: block;
padding: 10px;
}
#cat1 li a{
background-color: #0000FF;
padding: 10px;
border-radius: 5px;
}
Somewhat working demo: http://jsfiddle.net/ZfN7t/
When you're dealing with ul inside ul, it's usually easier to style if you give them different classes:
<ul id="menu">
<li class="menu-item">Categories 1
<ul id="cat1">
<li class="cat1-item">temp1</li>
<li class="cat1-item">temp2</li>
<li class="cat1-item">temp3</li>
</ul>
</li>
</ul>
Hide the temp1, temp2, temp3 like this:
.menu-item #cat1{
display:none;
}
To display on hover:
.menu-item:hover #cat1{
display:block;
}