I have an issue floating an ul next to some text.
Here is the image:
I'm thinking maybe I have to use the relative position attribute to display it the way I want it to? But, I know for a fact that the float property should be used, but it's not working for me. I've tried using another div(logoAndMainMenu-Wrapper) to create a wrapper for the text and ul, but the float property still isn't working....
Here's my HTML:
<div id="topbar">
<div class="fixedWidth1">
<div class="logoAndMainMenu-Wrapper">
<p>The Official Website of<br />
<span id="AndrewVuText">Andrew Vu</span></p>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>COLLABORATE</li>
<li>CONTACT</li>
</ul>
</div> <!-- Logo & Main Menu Wrapper DIV -->
</div> <!-- Fixed Width 1 DIV -->
</div> <!-- Top Bar DIV -->
And here's my CSS:
#AndrewText {
font-size: 2em;
}
.fixedWidth1 {
margin: 0 auto;
width: 1000px;
height: 150px;
background-color: green;
border: 2px solid black;
}
.logoAndMainMenu-Wrapper {
border: 2px solid yellow;
}
.fixedWidth1 ul {
list-style-type: none;
text-align: center;
margin: 0;
background-color: green;
border: 2px solid orange;
}
.fixedWidth1 ul li {
display: inline; /* LI are horizontal */
padding: 5px;
border-right: 2px solid yellow;
}
.fixedWidth1 ul li a {
text-decoration: none; /* No UNDERLINE */
}
/* Normal, unvisited link */
.fixedWidth1 ul li a:link {
color: #FFFFFF;
}
/* Visited link */
.fixedWidth1 ul li a:visited {
color: #FFFFFF;
}
/* Mouse over link */
.fixedWidth1 ul li a:hover {
color: yellow;
}
/* Selected link */
.fixedWidth1 ul li a:active {
color: #FFFFFF;
}
Any help will do. Thanks!!!
Hi now define your p tag float left .logoAndMainMenu-Wrapper define this overflow hidden and as like this
.logoAndMainMenu-Wrapper>p{
float:left;
}
.logoAndMainMenu-Wrapper{overflow:hidden;}
Demo
Related
I am a beginner to web development, and I am trying to make a dropdown menu.
The problem is when I hover on particular element, it consumes more than the expected space.
I want it to appear below the "shop" element. I do not understand where I am going wrong.
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Set position: relative on shop-link and position: absolute on dropdown. Then align dropdown with top, left, bottom, transform what would you like.
With transform it would look like this:
.link {
position: relative;
}
.dropdown {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%)
}
I think the issue is with the way you organized these elements. Personally, when I make drop down menus, I use <button> for each root of the drop down menu. It makes styling everything much easier.
Then, what I do is I put the main text in an <h2> or <h3>, and style that how I want the main part of the drop down to look. Everything inside of the drop down can be styled using the <button> class' settings. Here's how I modified your code to get what I assumed your looking for.
CSS Styling:
.nav2 a {
color: #000000;
text-decoration: none;
display: block;
}
.nav2 button {
margin: 20px 40px;
padding: 0 10px 0 10px;
border: 0px;
/* change this to the color you want the background of your website to be */
background-color: white;
border: 2px solid gold;
font-size: 0px;
}
.nav2 button:hover {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
background-color: white;
border: 2px solid greenyellow;
/* change this to the color you want the background of your website to be */
background-color: white;
font-size: 16px;
}
h2 {
color: #000000;
text-decoration: none;
font-size: 16px;
font-weight: normal;
}
And then the HTML body:
<div class="nav2">
<button>
<h2>Home</h2>
</button>
<button>
<h2>Shop</h2>
<br>Products
<br>Membership
</button>
<button>
<h2>Blog</h2>
</button>
<button>
<h2>News</h2>
</button>
<button>
<h2>Activity</h2>
</button>
<button>
<h2>Contact Us</h2>
</button>
</div>
The end result looked like this
I hope my response was helpful!!
Your CSS is a bit messy, but to get it working add the following:
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
position: absolute "removes" the element from the container so it is not contained in your parent's border. This will allow us to use the left, right, bottom, top CSS properties to position the sub-nav.
margin-top is used here to remove the intersection of shop and the sub-nav. However, you should be careful increasing this value greater than 1-2px since it will create empty space and hovering on the elements is required for your sub-nav to show.
Here is the working snippet:
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Position docs for a better explanation of absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here You have:
.nav{
position: relative;
display: flex;
justify-content: flex-end;
}
.nav ul{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li{
background-color: gold;
border: 1px solid gold;
color: #FFF;
}
.nav ul li:hover{
background-color: #FFF;
color: gold;
}
.nav ul li a{
padding: 1rem 2rem;
color: inherit;
text-decoration: none;
font-family: Verdana;
}
.nav ul li ul {
/* navigation sub-options disappear when not hovered */
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul {
/* navigation options appear when hover on elements */
display: flex;
opacity: 1;
visibility: visible;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact US</li>
</ul>
</div>
I'm using CSS to style some of my link on my website I'm making for school, but I've ran into a problem. One bit is styled with CSS so its can be used as navigation menu. The other links are regular links with some styling.
The navigation menu has to be in the div tag for the regular link styling too, otherwise the background will not cover the whole page.
The problem is, since the div of the nav menu is placed within the styling of the other links, the effect of both styles get applied to the navigation menu.
Is there a way to give the styling of the navigation menu a higher priority than those of the other links, so that only the styling of the navigation menu will be applied?
Here's the CSS of the navigation menu:
/* styling voor navigation menu */
.nav ul {
list-style: none;
background-color: #525252;
text-align: center;
padding: 0;
margin-left: 400;
margin-right: 400;
border-radius: 10px;
border: 1px solid black ;
color: #fff;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 30px;
height: 30px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #404040;
}
.nav a.active {
background-color: #404040;
color: #fff;
cursor: default;
}
.nav li {
width: 110px;
height: 40px;
line-height: 40px;
font-size: 1.2em;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
/* extra class voor meescrollen menubalk */
.main-nav-scrolled {
position: fixed;
top: 0;
z-index: 9;
text-align: center;
width: 41%;
background: #858585
}
here's the CSS of the other links:
/* links voor onderste gedeelte pagina */
.bottom a:link {
text-decoration: none;
color: inherit;
}
.bottom a:visited {
text-decoration: none;
color: inherit;
}
.bottom a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s;
}
.bottom a:hover {
color: inherit;
border-color: inherit;
}
And here is the important bit of HTML:
<div class="bottom">
<!-- navigation balk bovenin pagina -->
<div class="nav">
<ul>
<li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
<li class="Types">Types</li>
<li class="Abilities">Abilities</li>
<li class="Natures">Natures</li>
<li class="Stats">Stats</li>
</ul>
</div>
<?php
echo " <span style='color:$color'><a href='SQLdetailtypendb.php?id=" . $data['type_id'] . "'>" . $type1 . '</span></a>';
?>
</div>
Thanks in advance!
-Gijs
if you add styles to .bottom a that are not given to .bottom .nav a like background: green it will become a style to .bottom .nav a also. All styles need to be overwritten if you want custom styles only for .bottom .nav a
because .nav a is a descendant of .bottom , even if you write a very specific path eg .bottom .nav ul li a , it will inherit from .bottom a
the styles that are 'unique'
for example
snippet not good for you ( .nav li a inheriting background: green style from .bottom a because it doesn't have a background style for its self )
.bottom .nav a:hover { color:red;}
.bottom a:hover { color:yellow;background:green}
<div class="bottom">
<!-- navigation balk bovenin pagina -->
<div class="nav">
<ul>
<li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
<li class="Types">Types</li>
<li class="Abilities">Abilities</li>
<li class="Natures">Natures</li>
<li class="Stats">Stats</li>
</ul>
</div>
</div>
snippet good ( disable background:green from .bottom a by adding background:none or background: anythinghere image or color etc. for .bottom .nav li a )
.bottom .nav a:hover { color:red;background:black}
.bottom a:hover { color:yellow;background:green}
<div class="bottom">
<!-- navigation balk bovenin pagina -->
<div class="nav">
<ul>
<li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
<li class="Types">Types</li>
<li class="Abilities">Abilities</li>
<li class="Natures">Natures</li>
<li class="Stats">Stats</li>
</ul>
</div>
</div>
So what you're going to want to do first is add a new class to all the links in your nav, for example:
<li class="Types"><a class="new-class-here" href="Over ons.html">Types</a></li>
Then in your css for the nav you will use .nav a.new-class-here instead of .nav a, .nav a.new-class-here:hover instead of .nav a:hover, and so forth.
Then in your css for the other regular links you will want to use .bottom a:not(.new-class-here) instead of .bottom a. What this does is selects all the links in .bottom that do not have that new class we created. So now your nav styles will only apply to your nav links and your regular styles will only apply to the non-nav links.
You can learn more about :not() here if you want: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
I am trying to develop a website which contains dropdown menu and in the next division below menu there is a slider division but when mouse is hover on menu the submenu displays and the slider division is shifts down.
So can anyone suggest how I can accomplish the task
The code is as follows
<html>
<head>
<style type="text/css">
#header{
height: 90px;
}
#navigation{
height: 30px;
background-color: #0099FF;
border: 1px solid #0099FF;
border-radius: 10px;
z-index:1000;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
padding-right: 40px;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
}
ul li a:hover {
background: #00CCFF;
}
li:hover ul {
display: block;
z-index: 1000;
}
li:hover li {
float: none;
}
li:hover a {
background: #00CCFF;
}
li:hover li a:hover {
background: #D2F5FF;
}
#drop-nav li ul li {
border-top: 0px;
}
#clearmenu{
clear: left;
}
#sliderandnews{
height: 300px;
}
#slidermain{
height: 300px;
width: 65%;
float: left;
}
#news{
height: 300px;
width: 33%;
border: 2px solid #F0FFFF;
border-radius: 20px;
float: right;
background-color: #F0FFFF;
}
.clear{
height: 40px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="navigation">
<ul id="drop-nav">
<li>Home</li>
<li>About Us</li>
<li>Academic Programs
<ul>
<li>BBA</li>
<li>BCA</li>
<li>BE</li>
</ul>
</li>
<li>Faculties</li>
<li>Admission</li>
<li>Downloads</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="sliderandnews">
<div id="slidermain">
This section is changes its position on mousehover
</div>
<div id="news">
</div>
</div>
</body>
</html>
The problem is that your elements are relative positioned. So, when the submenu appears, all elements below are shifted down. You can add absolute positioning to navigation bar, and determine its displacement from top using the top property in CSS. This allows you to eliminate #header (which has only the role to give a top margin).
#navigation{
position:absolute;
top:90px;
}
Similarly you can do with the #sliderandnews block. Since you've given an absolute positioning to navigation menu, navigation is removed from HTML elements flow inside the page. To compensate this, you have to add a proper top margin to this element.
#sliderandnews{
height: 300px;
margin-top:190px;
}
And here's the final fiddle.
Been trying to learn about CSS and the use of hover psuedo classes over elements. Whenever I select a tab in the navigation bar, the background colour changes colour ( which is what I want). However, when I move off the anchor text the text changes back to white.
Ideally what I'm wanting is for the navigation tab to turn the background colour white, and the text black together simultaneously when the mouse hovers over. Here's the code:
<head>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="container">
<div id="title">
<h1>Record Store</h1>
</div>
<div id="navigation">
<ul class="navbar">
<li>Home
</li>
<li>Vinyl Stock
</li>
<li>Online Offers
</li>
<li>Collectors News
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
and CSS code:
* {
border: 0;
padding: 0;
margin:0;
}
#container {
margin: auto;
width: 800px;
border: 1px solid black;
min-height: 600px;
z-index: -9;
}
#title {
margin:auto;
/*border: 1px solid black;*/
height: 30%;
}
#navigation {
border-top: 1px solid black;
border-bottom: 1px solid black;
height: auto;
overflow: auto;
}
.navbar {
}
.navbar ul {
}
.navbar li {
font: bold 12px/1.2em Arial, Verdana, Helvetica;
height: auto;
list-style: none;
text-align: center;
width: 20%;
float:left;
background-color: blue;
padding: 1% 0px;
}
.navbar a {
border-right: 1px solid #1F5065;
color: white;
display: block;
text-decoration: none;
}
.navbar a:hover {
color: black;
}
.navbar li:hover {
background-color: white;
}
Can someone have a look and point out where I'm going wrong?
You just have to be more conscientious about defining your selectors. You're doing one thing when somebody hover over an li and something else when they hover over the a. What you want is to change both elements when hovering over a common element.
To solve the problem, remove:
.navbar a:hover {
color: black;
}
And replace it with:
.navbar li:hover a {
color: black;
}
jsFiddle
The first selector says "Get all a:hover's that are children in .navbar," The second selector says "Get all a's that are children in li:hover's that are children of .navbar."
I'm using an HTML/CSS menu from the article SuckerFish Dropdowns. My particular menu has a grey background. I am trying to get the menu's background to have a fixed width. I tried adding a width parameter to the #navbar section in the CSS but that didn't seem to do anything. How do I get this fixed width behavior?
HTML
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li>System Set-Up & Status
</li>
<li>NMEA Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li></ul>
</li>
<li>UDP Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li><li></li></ul>
</li>
<li>Baro / PoE
</li>
<li>Advanced
</li>
<li>MOB
</li>
</ul>
CSS
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc;
color: #000000;
text-decoration: none; }
#navbar li a:hover {
background-color: #999999; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #c0c0c0;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #999999; }
The CSS snippet is here and the HTML snippet is here
jsfiddle of question:
The #navbar is taking the appropriate width, but it does not have a background-color set so by default it is transparent.
Remove background-color from #navbar li a and add it to #navbar instead. You will also have to remove the height and clear your floats for it to work properly:
#navbar {
background-color: #cccccc;
margin: 0;
padding: 0;
overflow: hidden; /*clear floats */
}
Working example: http://jsfiddle.net/UfuG2/
Since you're floating your menu list items, you'll want to put a clearfix on the unordered list. Then you can set the width and background-color on the ul. Check out http://jsfiddle.net/qT7xs/.