So I have some CSS generating this.
The HTML code as follows.
<div class="menu">
<ul>
<li><a href='index.html'>Home</a></li>
<div class="menutab"></div>
<li><a href='about_us.html'>About Us</a></li>
<div class="menutab"></div>
<li><a href='#'>Order Online</a></li>
<div class="menutab"></div>
<li><a href='gallery.html'>Gallery</a></li>
<div class="menutab"></div>
<li><a href='#'>Contact Us</a></li>
<div class="menutab"></div>
</ul>
</div>
And the CSS
.menu {
width: 100%;
height: 220px;
float: left;
margin-left: -20px;
position: relative;
text-align: center;
}
.menu li{
display: block;
list-style: none;
width: 100%;
background: #EBE5D9;
height: 50px;
margin-left: -40px;
margin-top: 5px;
line-height: 50px;
}
.menu li:hover {
background: #AEC32A;
}
.menu li a{
text-decoration: none;
font-size: 20px;
color: #000000;
font-family: fantasy;
}
.menutab {
width: 30px;
position: relative;
margin-top: -3px;
margin-left: -71px;
border-right: 21px solid #EBE5D9;
border-bottom: 21px solid transparent;
}
Basically what I am wanting is for the hover effect to turn the whole thing green, currently .menu li:hover turns the block the colour #AEC32A but I also want it to turn the .menutab border the same colour, anyway of doing this? preferably without using Javascript.
Thanks in advance for your help :-)
Try the adjacent selector.
.menu li:hover+.menutab {
border-right-color: #AEC32A;
}
JS Bin Demo
This is no problem with the adjacent sibling combinator.
Simply add this to your css:
.menu li:hover + .menutab{
border-right-color: #AEC32A;
}
This selects the immediately preceeding element (.menutab) of the first element (.menu li:hover).
see the live demo
Browser-support is 100% if you don't care for old IEs <(=) 8;)
Related
I am trying to get a left menu and a right banner and have them stay fixed in place when the centre panel scrolls text - the banner will have to be on top of the centre panel due to size - the colour scheme is white text on black background except for the menu which is an <ul> with its own colour scheme
I am rather new to css so may have already made a prat of myself - I have tried but currently the top right banner does stay fixed when scrolling but the text overlays it and the top left menu shoots off the screen
JS Fiddle
<head>
<style>
#container {
width:90%;
height 100%;
background-color:Black;
margin: 0 auto;
text- align: left;
}
#banner {
float: right;
background-color:black;
width:40%;
top:1;
right:1;
position:fixed
}
#sidebarmenu {
float: left;
width: 10%;
background-color:Black;
padding: 15px 10px 15px 20px;
top:1;
left:1;
position:fixed
}
#mainContent {
background-color: Black;
color:White;
position: absolute;
left: 120px;
width: 50%;
top:220;
margin: 0 0 0 15%;
}
body {
color: white;
background-color: black;
}
.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px;
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
display: block;
overflow: auto;
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
color: white;
}
.sidebarmenu ul li a:hover {
background-color: black;
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Home</li>
<li>Info</li>
<li>Contact Us</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
</div>
</body>
any help /comments / guidance on what I should be learning /looking at is appreciated
Phew! Where to start? lol Your code needed to be fixed pretty much on every line. I have a reworked demo here but basically, you must pay attention to site architecture when you are positioning elements. Organization is everything is front end development.
See DEMO
First of all, once you start using position: absolute; or position: fixed;, using float and margin becomes irrelevant.
Also, when using top: x;, left: x;, right: x;, or bottom: x; always make sure to add a size unit to your value, i.e. top:1; should be top: 1px;
If I understood correctly from the css you posted, something that'll get you closer to what you want to achieve is this:
html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;}
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }
Take a look at this jsfiddle I made to see what this css does: http://jsfiddle.net/beYuC/
NOTE: You might have noticed I made the html and body have a height of 100%. This is because unless you set a height for the html and body, any other element on the page you want to make 100% will simply be flattened out.
NOTE 2: Be sure to check out this website and its CSS for an example of a well done content container and sidebar menu with 100% height: http://www.jlescure.com/
Firefox messes up the span tag inside li.
Chrome, Opera and IE do a good job of displaying the formatting correctly.
How can i fix it.
Here is my Code :
<div class="navcontainer">
<div class="nav">
<ul>
<li>Dropdown
<ul>
<li>One<span class="bubble-info">32</span>
</li>
<li>Two<span class="bubble-warning">32</span>
</li>
<li>Three<span class="bubble-danger">32</span>
</li>
<li>Four<span class="bubble-success">32</span>
</li>
<li>Five<span class="bubble-default">32</span>
</li>
</ul>
</li>
</ul>
</div>
Here is my fiddle http://jsfiddle.net/TgD65/1/
It's actually pretty simple. When you set an element to be floating, you need to put it BEFORE the other element.
The browser first places the floating elements, then the rest.
So in your li if you have:
<span class="bubble-info">32</span>One
it will work in all browsers.
http://jsfiddle.net/TgD65/5/
Try using white-space:normal for .nav ul ul a
Demo Fiddle
Change the CSS of
.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning {
To:
.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning {
width: 20px;
height: 20px;
display:inline-block;
position:absolute;
right:0;
text-align: center;
color: #000000;
font-weight: bold;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #000;
}
And add position:relative; to .nav ul ul li li {
What this does is replace the relative positioning of the bubbles with absolute positioning and give them block level characteristics so they can be given right:0; to be right aligned. It also removed the floating so you escape any related issues with not clearing it between items.
#Madi,
you have to define position:absolute; in Bubbles classes Here is the Demo.
.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning {
width: 20px;
height: 20px;
float: right;
text-align: center;
color: #000000;
font-weight: bold;
position:absolute; right:0; top:0; /*Added this line*/
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #000;
}
.nav ul a {
display:inline-block;
position:relative; /*Added this line*/
padding:10px;
}
I'm working on a header with a transition. But something is not working.
I made the ul 120px and li 60px.
And I gave the li:hover a translateY(-60px). So that it pops up when you hover over the li.
I want to hide the content that is overflowing until you hover over it. But it doesn't seem to work. It does hover hide the border of the li that is overflowing.
Does anybody know why?
thank you in advance!
<header>
<ul>
<li>
<a id="p1" href="#">Vibe</a>
<a id="p2" href="#">Vibe</a>
</li>
<li>
<a id="p1" href="#">Creations</a>
<a id="p2" href="#">Creations</a>
</li>
<li>
<a id="p1" href="#">Vision</a>
<a id="p2" href="#">Vision</a>
</li>
<li>
<a id="p1" href="#">Just tell us</a>
<a id="p2" href="#">Just tell us</a>
</li>
</ul>
</header>
And this is the css
header {
height: 60px;
width: 100%;
background-color: #34495e;
}
header ul {
margin-right: 20px;
float: right;
height: 60px;
overflow: hidden;
}
header ul li {
display: inline-block;
height: 120px;
padding-left: 40px;
padding-right: 40px;
overflow: hidden;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
overflow: hidden;
border-left: 1px solid #2c3e50;
}
header ul li a {
text-decoration: none;
line-height: 60px;
font-size: 14px;
font-family: "lato", sans-serif;
font-weight: 700;
color: #e74c3c;
text-transform: uppercase;
-webkit-transform: rotate(10deg);
}
#p2 {
position: absolute;
text-align: center;
color: #c0392b;
line-height: 60px;
}
header ul li:hover {
-webkit-transform: translateY(-60px);
}
Add
position: relative;
To your ul class
Here is the jsfiddle http://jsfiddle.net/2jabu/
Here is one solution that may work for you:
Example Fiddle
First id's should be reserved for single uses. Your #p1 & #p2 would be better written as classes. To solve your problem you only need overflow:hidden; on the highest level container, in this case the header. Also since you've given #p2 absolute position, you also need to give the header position:relative;.
CSS:
header {
// existing styles
position: relative;
overflow: hidden;
}
I am working on a website that has a menu which behaves correctly on FF but not on IE (as usuall).
On IE it floats to the right while it should float to the left, however if float is set to none it behaves almost correctly, attaching the onto the top of the container.
Here's a live example.
Here's the css:
/* Navigation */
.navigation
{
float: left;
overflow: hidden;
width: 650px;
}
.navigation ul
{
list-style: none;
margin: 8px 0 0 15px;
overflow: hidden;
}
.navigation ul li
{
border-right: 1px solid white;
float: left;
padding: 0 12px 0 12px;
}
.navigation ul li.last
{
border: none;
}
.navigation ul li a
{
color: white;
font-size: 14px;
text-decoration: none;
}
.navigation ul li a:hover
{
text-decoration: underline;
}
.navigation ul li a.active
{
font-weight: bold;
}
.btn_login
{
float: right;
margin: 4px 4px 0 0;
display: inline;
width: 200px;
}
And here's the html:
<div id="navigation_wrap">
<div class="navigation">
<ul>
<li><a class="active" href="default.asp">Home Page</a></li>
<li><a class="" href="faq.asp">FAQ</a></li><li><a class="" href="articles.asp">Articles</a></li>
<li><a class="" href="products.asp">Packages & Pricing</a></li>
<li><a class="" href="gp.asp?gpid=15">test1</a></li>
<li><a class=" last" href="gp.asp?gpid=17">test asher</a></li>
</ul>
</div>
<div class="btn_login">
...
</div>
</div>
I hope anyone would have an idea.
Thanks,
Omer.
EDIT:
Setting the width for both elements kinda helped but it's still not positioned correctly.
See updated css above.
Can you try reducing the height of your logo class. It is overhanging the menu.
<-span class=""top_nav_separator""> is in your code, this might be the thing that bothers IE
I had the same problem in IE some time ago. It doesn't like list items in a floating div. Adding the following fixed it for me:
display: list-item;
list-style-position: inside;
I am doing an horizontal dropdown menu. It looks like this :
[menu1][menu2][menu3][menu4]
But when I resize (less wide) my browser, the menu appears like :
[menu1][menu2]
[menu3][menu4]
I want it to remain in line all the time!
EDIT: my CSS file
/* General */
#cssdropdown, #cssdropdown ul {
list-style: none;
position: relative;
visibility: visible;
z-index: 1;
overflow: hidden;
}
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink {
width: 11.911em;
float: left;
margin-left: -1px;
border: 1px black solid;
background-color: #e9e9e9;
text-align: center;
}
#cssdropdown li.headlink a { display: block; padding: 10px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;}
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; }
/* Pretty styling */
body {
font-family: verdana, arial, sans-serif;
font-size: 0.7em;
position: static;
}
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: #FFF50A; }
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
/*headermenu*/
#headerMenu {
position: relative;
float: left;
color: #DDD;
z-index: 1;
height: 34px;
right: 10px;
width: auto;
}
<div align="left" class="thrColElsHdr" id="headerMenu">
<ul id="cssdropdown" name="cssdropdown">
<li class="headlink"> Ecole
<ul>
<li>Histoire</li>
<li>Philosophie</li>
<li>Méthode</li>
<li>Equipe</li>
<li>Qualité</li>
<li>Services</li>
<li>Emplois</li>
</ul>
</li>
<li class="headlink"> Cours
<ul>
<li>Individuel</li>
<li>Semi-privé</li>
<li>Mini-groupe</li>
<li>Intensif</li>
<li>Entreprises</li>
<li>A distance</li>
<li>Par téléphone</li>
<li>Coaching</li>
<li>Soutien scolaire</li>
<li>Diplômes officiels</li>
</ul>
</li>
<li class="headlink"> Inscription
<ul>
<li>Auto-évaluation</li>
<li>Conditions</li>
<li>Tarifs</li>
<li>Formulaires</li>
</ul>
</li>
<li class="headlink"> Contact
<ul>
<li>Ecole</li>
<li>Lien externe</li>
</ul>
</li>
</ul>
</div><br/>
You should set min-width on the element containing the menu.
you want to use the css
white-space:nowrap;
this should be applied to the parent of your menus
if you provide some of the actual html, I can be more specific
for example
<div class='menuContainer'>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
and css like
.menuContainer {
white-space:nowrap;
}
see http://www.w3schools.com/css/pr_text_white-space.asp
Edit in response to op question modifications
I assume #cssdropdown is the id your container around all the menus. please let me know the html for this if it's not correct.
Anyways, in this case, you should add to your css
#cssdropdown {
white-space:nowrap;
}
One other note, I see the width of your mens is set to 11.911em. When I see that I can only assume that you set it to be exactly the right width for whatever font you have. keep in mind your users may have slightly different fonts and suddenly your pixel perfect sizing is meaningless. design with a little more flexibility in mind.
Sounds like your width property isn't being set in either the HTML or the CSS.
Can you provide some sample code?