Hello I'm trying to make a menu and make 2 rows of 4 buttons. My problem is that the list item in each row is taller then all the rest. I've tried searching to find an answer but I'm not exactly sure on how to word it to find the answer I'm looking for.
I've tried specifying the dimensions in the #menu li# a { part of the css for each one but it didn't visibly have an affect. Any input is appreciated.
My code is as follows.
<html>
<head>
<title>xxxxxxxx</title>
<style type="text/css">
body {
background-color: black;
margin: 0;
}
#menu {
width: 850px;
list-style: none;
margin: 0;
padding: 0;
}
#menu2 {
width: 850px;
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
border: 2px solid yellow;
text-indent: -9999px;
overflow: hidden;
}
#menu2 li {
float: left;
border: 2px solid yellow;
text-indent: -9999px;
overflow: hidden;
}
#menu li a {
display: block;
width: 200px;
height: 50px;
}
#menu2 li a {
display: block;
width: 200px;
height: 50px;
}
#menu li#homepage a {
background: url(New_Homepage.JPG) no-repeat;
}
#menu2 li#newsletter a {
background: url(New_Newsletter.JPG) no-repeat;
}
#menu li#homepage a:hover {
background: url(New_Homepage_knife.JPG) no-repeat;
}
#menu2 li#newsletter a:hover {
background: url(New_Newsletter_knife.JPG) no-repeat;
}
#menu li#welcome a {
background: url(New_Welcome.JPG) no-repeat;
}
#menu2 li#phonebook a {
background: url(New_Phonebook.JPG) no-repeat;
}
#menu li#welcome a:hover {
background: url(New_Welcome_knife.JPG) no-repeat;
}
#menu2 li#phonebook a:hover {
background: url(New_Phonebook_knife.JPG) no-repeat;
}
#menu li#leadership a {
background: url(New_Leadership.JPG) no-repeat;
}
#menu2 li#ombudsman a {
background: url(New_Ombudsman.JPG) no-repeat;
}
#menu li#leadership a:hover {
background: url(New_Leadership_knife.JPG) no-repeat;
}
#menu2 li#ombudsman a:hover {
background: url(New_Ombudsman_knife.JPG) no-repeat;
}
#menu li#history a {
background: url(New_History.JPG) no-repeat;
}
#menu2 li#pao a {
background: url(New_PAO.JPG) no-repeat;
}
#menu li#history a:hover {
background: url(New_History_knife.JPG) no-repeat;
}
#menu2 li#pao a:hover {
background: url(New_PAO_knife.JPG) no-repeat;
}
</style>
</head>
<body>
<div style="text-align: center;"><img src="POSTER.JPG" WIDTH="100%" HEIGHT="90%"></div>
<div>
<ul id="menu">
<li id="homepage">HOMEPAGE</li>
<li id="welcome">WELCOME</li>
<li id="leadership">LEADERSHIP</li>
<li id="history">HISTORY</li>
<br class=clear>
</ul>
<ul id="menu2">
<li id="newsletter">NEWSLETTER</li>
<li id="phonebook">PHONE BOOK</li>
<li id="ombudsman">OMBUDSMAN</li>
<li id="pao">PAO</li>
<br class=clear>
</ul>
</div>
</body>
</html>
"list item in each row is taller then all the rest."
by looking at your css, your list item should be all the same height because you specify a height in your a tag inside your li tag
first of all you dont need two id #menu and #menu2, because they have the same properties
you should change it to class, also u dont need "<Br />" before </ul>
HTML :
<ul class="menustyle" id="menu">
<li id="homepage">HOMEPAGE</li>
<li id="welcome">WELCOME</li>
<li id="leadership">LEADERSHIP</li>
<li id="history">HISTORY</li>
</ul>
<ul class="menustyle" id="menu2">
<li id="newsletter">NEWSLETTER</li>
<li id="phonebook">PHONE BOOK</li>
<li id="ombudsman">OMBUDSMAN</li>
<li id="pao">PAO</li>
</ul>
CSS :
.menustyle {
clear:both;
width: 850px;
list-style: none;
margin: 0;
padding: 0;
}
.menustyle li {
float: left;
border: 2px solid yellow;
text-indent: -9999px;
overflow: hidden;
height: 50px;
}
.menustyle li a {
display: block;
width: 200px;
height: 50px;
}
/*for each id, i just make this for example*/
.menustyle li a{ background:url('http://www.braford.org.au/MidgeeBrafords/images/button_midgee_history_up.gif'); }
is this what you want: http://jsfiddle.net/EKycL/
The problem is:
<br class=clear>
</ul>
You need to put that break outside of the list. Like this:
</ul>
<br class=clear>
Related
Below is a drop-down list nested in a drop-down list. the first code snippet works just fine; as I hover over the parent of the first drop-down list it's height transitions and it displays as I intended, as with the subsequent nested drop-down list.
The problem is with the second snippet...
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
/*
ul li li:hover {
transform: scale(1.1);
}
*/
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Here I make one change at the very bottom of the CSS as I wanted the hover effect to be just a bit more pronounced. I apply a transform scale effect to the dropdown list's li's.
The first drop-down list works just fine, but then the second drop-down list does not.
Can someone please explain what is happening?
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
ul li li:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Fixed.
I don't understand why the problem occurred in the first place, nor do i understand why the fix I found works but it does.
I simply made the overflow property 'visible' in the (ul li li:hover ) and it works.
I'm working on a horizontal menu with a vertical submenu. I have most of the display features set the way I want, but I'm running into trouble with displaying the submenu items with the same width. I want to display them as a nice, even block, but I'm left with a jagged edge on the right side of the submenu.
Here's a snippet of the html I'm using for the menu itself.
<nav class="navbar">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >item with sub</a>
<ul>
<li><a href="#" >sub item 1</a></li>
<li><a href="#" >sub item 2 which is longer</a></li>
<li><a href="#" >sub item 3</a></li>
</ul>
I'm not sure which part of the css I'm using might be affecting the width of the dropdown menu, so here's everything.
.navbar {
font-size: 20px;
text-align: center;
position: relative;
z-index: 1;
white-space: nowrap;
}
.navbar a {
background-color: #333;
color: #999;
text-decoration: none;
}
.navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
.navbar li {
float: left;
position: relative;
min-width: 120px;
padding: 10px 10px 10px 10px;
background-color: #333;
color: #999;
}
.navbar li ul {
display: none;
position: absolute;
left: 0;
}
.navbar li > ul {
top: 42px;
left: 0px;
}
.navbar li:hover,
.navbar li:hover > a,
.navbar li a:hover{
background-color: #999;
color: #333;
text-decoration: none;
display: block;
}
.navbar li:hover ul,
.navbar li:hover ul li {
display: block;
clear: both;
min-width: 120px;
}
The fiddle is here: http://jsfiddle.net/jasotastic/yso6v2po/
Possible that this is a duplicate, but I haven't been able to find a similar question asked.
You could set 100% width to <li> to adjust with content width.
.navbar li ul li {
display: block;
width: 100%;
text-align: left;
}
Fiddle: http://jsfiddle.net/yso6v2po/4/
You can set a width to li and use white-space: normal. Then you will have a fixed width and break the phrase if it is bigger than the width.
Your code modified:
.navbar li ul li {
width:200px;
white-space:normal;
display: block;
}
Here is the jsfiddle: http://jsfiddle.net/yso6v2po/3/
i'm creating this base structure :
<ul>
<li>
<a>
blabla
</a>
</li>
</ul>
with css :
ul{
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
}
ul li{
height: 25%;
text-align: right;
width: 100%;
}
a{
display: block;
float: right;
height: 75%;
padding-right: 2%;
position: relative;
width: 98%;
padding-top:25%;
}
i can't manage to simply put the a at the bottom...
i thought giving the A a height of 25% and a padding of 75% would work but it takes 75% of the UL and not 75% of the LI.
anyone has an idea how come?
thanks a lot
What exactly are you trying to achieve?
If I am assuming correctly you want an <li> that is 25% the height of its container and the <a> to sit at the bottom-right of the <li>
If that is the case you could use this css
updated RE comment In this case we could use a <span> inside the <a> to position the text and set the <a> to fill the <li>
ul {
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
background-color: red;
}
li {
height: 25%;
text-align: right;
width: 100%;
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: blue;
}
span {
display: block;
position: absolute;
bottom: 0;
padding: 2%;
width: 96%;
background-color: green;
}
and the html
<ul>
<li><span>blabla</span></li>
</ul>
Fiddle here
Please note that for this to work you need to set html, body { height:100%; } or have a container with an explicit height set. i.e. ul { height: 200px; } or div.container { height: 200px; }
I would also recommend applying the styles via classes.
I have a nav bar with a drop down when you hover over 'services' but there seems to be a block before the first sub menu item and i don't know how to get rid of it....
here is my HTML:
<header>
<div class= "header">
<div class= "nav">
<ul>
<li>
Services
<ul>
<a href=""><li><img class="imgcenter" src="images/Brand-Design-Circle-Blue.png" width="100px" onmouseover="this.src='images/Brand-Design-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Design-Circle-Blue.png'" /> <br>Brand Design</li></a>
<a href=""><li><img class="imgcenter" src="images/Brand-Online-Circle-Blue.png" width="100px" onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Online-Circle-Blue.png'" /> <br>Brand Online</li></a>
</ul>
</li>
<li>
Portfolio
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</header>
and here is my CSS:
.header {
position: fixed;
display: block;
float: left;
width: 100%;
height: auto;
background-color: #666;
z-index: 9999;
}
.nav {
position: static;
float: right;
width: 700px;
height: 50px;
margin: 10px 5px;
}
.nav a {
text-decoration: none;
color: #FFFFFF;
}
.nav ul > li:first-child {
padding-bottom: 25px;
}
.nav a:hover {
text-decoration: none;
color: #6db6e5;
}
.nav li {
font-family: "eras_demi_itcregular", Arial, Helvetica;
list-style: none;
float: left;
margin-right: 50px;
}
.nav li:hover a:hover {
padding-bottom: 5px;
border-bottom: 2px solid #6db6e5;
color: #6db6e5;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
list-style: none;
position: absolute;
display: inline-block;
margin-top: 23px;
}
.nav ul ul {
background: #6db6e5;
}
.nav ul ul li {
padding: 10px;
margin-left: -1px;
margin-right: 0;
border-left: 1px solid #666;
}
.nav ul ul li:hover {
background: #666;
}
jsfiddle here: http://jsfiddle.net/2mnm5/
does anyone know what this could be?
thanks
You should eliminate the padding on that second ul tag
.nav ul ul {
display: none;
padding-left:0;
}
http://jsfiddle.net/2mnm5/1/
I'm creating a liquid j-query slider using Mark Tyrell's blueberry plugin (all hail!), but am having a problem with thumbnail images not re-sizing in Safari (mobile or desktop) that work in IE 8, and Firefox 7.01 and Opera 9.5.
You can see the (almost) working page at http://development.carrollorganization.com/blueberry3.php
IN Safari, the thumbnail images do not shrink to fit the height of the container (div called thumbnail) and are not restricted to overflow:hidden in that container. They do obey the overflow:hidden command in the div's parent (an a tag). The big issue is the refusal to re-size to fit the height of the parent div tag.
I honestly don't know if this is a Safari bug, a box-model problem, user-error (could be likely) or some combination of all. I would appreciate any help anybody can give. If I cou
My style sheets are:
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #404040;
}
a { color: #264c99; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,p { margin-bottom: 0px; }
h1 {
font-size: 48px;
line-height: 60px;
color: #ffffff;
text-transform: lowercase;
}
h2, h3 {
font-weight: normal;
font-size: 22px;
line-height: 40px;
color: #808080;
}
h3 { font-size: 18px; color: #404040; }
h5 { font-weight: bold; font-size: 14px; color: #000; }
#header {
height: 60px;
padding-top: 0px; padding-bottom: 0px;
text-align: center;
background: #405580;
}
#header h1 {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}
#doc {
margin:0px;
padding:0px;
width:100%;
background-color:#F00;
}
#content {
margin: 0 auto;
padding:0px;
width:90%;
min-width: 740px;
max-width: 1440px;
}
.blueberry { max-width: 1440px; position: relative;}
.blueberry { margin: 0 auto; padding:0px;}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
margin:0px;
padding:0px;
bottom: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
margin:0px;
padding:0px;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; /*position: relative; */}
.blueberry .crop li img { width: auto; }
.blueberry .pager {
position:absolute;
top:0;
right:0;
height:100%;
background-color:#0F0;
text-align: center;
width:30%;
margin:0;
padding:0;
/*max-width:400px;*/
}
.blueberry .pager li {
overflow:hidden;
display: block;
height:25%;
width:100%;
margin:0;
padding:0;
}
.blueberry .pager li.active {
background-color: #F00;
}
.blueberry .pager li a {
overflow: hidden;
display: block;
height:100%;
text-align:left;
margin:0;
padding:0;
}
.blueberry .pager li a span {
margin:0;
padding:0;
color:#000;
font-size:1em;
}
.blueberry .pager div.thumbNail {
height:75% !important;
margin:5%;
border:1px solid #fff;
}
.blueberry .pager div.thumbNail img {
display:block;
float:left;
height:100%;
width:auto;
}
My page code is (it's a php page, not html):
<div id="doc">
<div id="content">
<!-- blueberry -->
<div class="blueberry">
<ul class="slides">
<li><img src="images/slider_images/slider_01.jpg"/></li>
<li><img src="images/slider_images/slider_02.jpg"/></li>
<li><img src="images/slider_images/slider_03.jpg"/></li>
<li><img src="images/slider_images/slider_04.jpg"/></li>
</ul>
<ul class="pager">
<li><div class="thumbNail" ><img src="images/slider_images/slider_01_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_02_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_03_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_04_TN.jpg"/></div></li>
</ul>
</div>
height: 100% is not working as you might expect it to
I'd choose
.blueberry .pager div.thumbNail {
position: relative
.blueberry .pager div.thumbNail img {
position: absolute;
top: 0px;
bottom: 0px;
}
additionaly