Hi I have a dropdown button that when you hover it, it drops down some links to pages. I want those links to be the same size as the width of the button.
The button size is 100% width of the content, so it varies. How do I make the size of the drop down items the same size as the button with CSS?
<style type="text/css">
#button { /* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none; /* Remove the underline from the links. */
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
list-style-type: none;
}
#button ul {
list-style-type: none; /* Remove the bullets from the list */
}
#button .top {
display:block;
width:100%;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase; /* The button background */
}
#button ul li.item {
display: none; /* By default, do not display the items (which contains the links) */
}
#button ul:hover .item { /* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #6CC417;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<p><img src="Screen%20shot%202010-07-11%20at%204.07.59%20PM.png" width="211" height="86" alt="idc">
<ul>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
</ul></p>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
Three things:
#button ul:hover .item needs width set to 100%.
#button ul:hover .item {any of the links) */
display: block;
width:100%;
border: 1px solid black;
background-color: #6CC417;
}
.
All links are set to 120px!
a:link,a:visited {
display:block;
width:120px;
...
Delete the width:120px;
As meder said, Do not use an id, use a class. And the code has the same id multiple times -- which is illegal.
So: <div id="button"> becomes: <div class="DropDwnMenuBtn">.
You have multiple button ids. Use classes for multiple elements.
Shouldn't you just need #button a { display:block; }? It's hard to tell when you don't have a visual.
Related
I am trying to make 4 separate buttons in a layout in a foursquare type layout. (see attached image and pretend the boxes are the same size and equidistant from eachother) my issue is that i want the boxes to be in the center of the page no matter the browser window size, except i do not want the buttons to re-size when the page gets too small. I am drawing blanks at how to do this but it doesnt seem to hard.
body{
font-family: Arial, Helvetica, Sans-Serif;
font-size:1em;
padding:0;
margin:0;
}
#content{
position:relative;
}
/* Banner Styling */
#banner {
display:inline-block;
}
#banner a{
text-decoration:none;
color:black;
}
#banner h1{
float:left;
padding-left:1em;
padding-right:auto;
}
#banner #logo{
position:absolute;
top:0px;
right:0px;
}
/* Navigation Styling */
Nav {
margin-top:2em;
}
Nav ul{
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
background-color: #1666af;
padding-left:2em;
min-width:1532px;
}
Nav ul li{
float:left;
text-align:center;
}
Nav li a{
border: 1px solid #1666af;
padding:.3em 2em .3em 2em;
display: block;
background-color: #1666af;
color:White;
text-decoration:none;
}
Nav .current{
background-color:green;
border:1px solid green;
}
Nav li a:hover{
border: 1px solid #278efc;
background-color:#278efc;
}
/* BUTTONS */
#buttons{
position:relative;
left:50%;
}
#buttons a{
width:330px;
height:210px;
display:inline-block;
text-align:center;
color:white;
text-decoration:none;
border-radius:6px;
margin-top:50px;
box-sizing:border-box;
padding-top:89px;
}
/* CDW Button */
#button1{
border:1px solid black;
background-color:green;
transition: background-color 1.0s;
}
#button1:hover{
background-color:yellow;
}
/* ADR button */
#button2{
border:1px solid black;
background-color:blue;
transition: background-color 1.0s;
}
#button2:hover{
background-color:red;
}
/* GoGatway Button */
#button3{
border:1px solid black;
background-color:red;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button3:hover{
background-color:teal;
}
/* AAS button */
#button4{
border:1px solid black;
background-color:orange;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button4:hover{
background-color:brown;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
</head>
<body>
<div id="content">
<div id="banner">
<h1>Website</h1>
<img id="logo" src="images/imagehere" alt="imagehere" />
</div>
<nav>
<ul>
<li><a class="current" href="default.htm"> Home</a></li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
<div id=buttons>
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
</body>
</html>
<div id=buttons>
<!--create a div here-->
<div class="container" style=" width:100%, height:540px">
<!--inside this div you create a new div for your foursquares-->
<div class="forsquare">
<!--use something like canvas to create the graphic or
use something like canvas to get the image how you would like it
you can also create a image and map it to create different a href
elements that links from the square-->
</div>
</div>
I have a navigation bar that floats the buttons on the left. I no want to add 4 social media icons but I want them to align on the right. However we i add the social media icon they are aligned on the right but not inline with the navigation bar, but just below it. adding top:-50px;doesnt help.
<body>
<div class="menu">
<ul>
<li>TL Custom Printing</li>
<li class="active">Home</li>
<li>Custom Printing</li>
<li>Products</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
<div class="clearFloat"></div>
</ul>
</div>
<div class="social">
<img src="images/twitter.png" />
<img src="images/fb.png" />
<img src="images/flickr.png" />
<img src="images/pinterest.png" />
</div>
</body>
The CSS:
/* Navigation Bar
----------------------------------------------- */
.menu{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width:100%;
}
.menu ul{
list-style:none;
background:#2d2d2d;
margin:0;
padding:0;
}
.menu li{
display:inline-block;
float:left;
}
.menu li:first-child{
margin-left:20px;
margin-right:20px;
display:block;
padding:10px;
text-decoration:none;
color:#ff4800;
font-weight:bold;
font-size:14px;
border-top:2px solid transparent;
}
.menu a{
display:block;
padding:10px;
text-decoration:none;
color:#bbbbbb;
border-top:2px solid transparent;
}
.menu a:hover,
.menu li.active a{
background:#3d3d3d;
color:#dddddd;
border-top:2px solid #ff4800;
}
.clearFloat{
clear:both;
}
/* Social Media Icons
----------------------------------------------- */
#social {
float:right;
}
JSFIDDLE
You are clearing your floats in the .menu div so .menu and .social will never sit on the same line. Here is one solution (of which there are many):
DEMO
<div class="menu_wrap"> <!-- ADD A WRAPPER -->
<div class="menu">
<ul>
<!-- REMOVE THE CLEARFIX FROM HERE -->
</ul>
</div>
<div class="social">
...
</div>
<div class="clearFloat"></div> <!-- ADD CLEARFIX HERE -->
</div>
CSS
.menu_wrap {
background: #000;
}
Also, #social { should be .social { (class not ID)
Do You need this
Explanation:
1. Set width 100% to your header/footer.
.header
{
background: #333;
width: 100%;
height: 10%;
overflow: hidden;
}
2. Set width to menu and social and float properties..
.social
{
float:right;
width: 100%;
height: 100%;
overflow: hidden;
width: 28%;
}
.social a img
{
margin-top: 10px;
}
There is no social id in your code.
I have made a few changes in your mark up.I had put the div social inside the parent and had corrected the #social to .social in your css.
WORKING CODE
I have a menu with 5 items. The idea is that there is a border between each.
The issue is that some of the menu items need to be double lined, but when this happens, the borders are all over the place.
I've been looking at the code for an hour almost and not sure how to correct this.
I could just have them single lined, but that goes against the design.
JSFIDDLE:
http://jsfiddle.net/69CSf/
CSS:
body {
background-color:black;
}
#menu {
width:500px;
top:100px;
-border:solid 1px #ffff00;
height:40px;
vertical-align:middle;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Open Sans', sans-serif;
font-size: 12px;
text-transform: uppercase;
color:#FFF;
width:100%;
height:40px;
}
li {
display: inline-block;
width:19%;
height:40px;
text-align:center;
padding-top:9px;
vertical-align:center;
}
li~li {
border-left: 3px solid #FFFFFF
}
li>a:hover {
color:#FFF;
}
li>a {
color:rgb(200, 200, 200);
text-decoration:none;
}
HTML:
<div id="menu">
<ul>
<li>Philosophy
</li>
<li>Your Trainer
</li>
<li>Word of Mouth
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
Change display value from inline-block to table-cell and change vertical-align value to middle (vertical-align:center does not exist at all).
Example
you have this vertical-align:center;, change it to vertical-align:middle; for LI element
You can see the image in the middle.
Any idea how to move it down to match please?
My code is included as jsfiddle. There is some space bellow the image also and I couldn't erase it. Is there some way that would move it?
HTML
<div id="menu">
<ul>
<li><span>Link 1</span>
</li>
<li><span>Link 2</span>
</li>
<li class='widthAuto'><img src='https://www.google.co.in/images/icons/product/chrome-48.png' height='80' height="175px" alt="Domu"/>
</li>
<li><span>Link 4</span>
</li>
<li><span>Link 5</span>
</li>
</ul>
</div>
CSS
body {
width: auto;
background-image: url(blue4.jpg);
background-size: cover;
margin: 2px 0 0 0;
}
#menu {
height:210px;
line-height:36px;
margin:0 auto;
text-align:center;
width:800px;
padding:0;
}
#menu ul {
display: inline;
-webkit-padding-start: 0px;
-webkit-margin-before: 2x;
-webkit-margin-after: 0px;
margin:0;
font-size: 0;
}
#menu ul li {
text-algin:center;
display:inline;
font-family:Arial, sans-serif;
font-size:40px;
padding:0 0 10px 0;
margin:0;
text-decoration:none;
background-image:url(../Pics/Buttons/Menu/Menu.gif);
}
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
min-width:100px !important;
display:inline-block;
}
#menu a:hover {
font-weight:bolder;
}
span {
width:100%;
font-size:30px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.widthAuto {
width:auto;
}
Try this:
#menu a{
/* other css properties */
height: 80px; /* equal to image height */
line-height: 80px; /* equal to this element height, to get in middle */
vertical-align: middle; /* To keep all the elements in middle of the parent container */
}
Working Fiddle
Try adding the following class
#menu img{
position:relative;
top:20px;
}
Also think about using float: left on the li elements and not display:inline. At least use display:inline-block if you really want to go with display. By setting the display of block elements to inline it really messes the whole picture.
Hi there i had a nav bar which was working perfectly. Then i added a lightbox effect. Both work perfectly however in my css they are messing up. When i added some css to lightbox effects to the div it messes up my navigation bar. I think its something to do with the a tag. My code is below
Html:
<div id="nav">
<ul>
<li>Home</li>
<li>Regsiter</li>
<li>Rules</li>
<li>Photo's</li>
<li>Contact Us</li>
</ul>
</div>
<div class = "lightbox">
<img src="images/image1t.jpg" />
<img src="images/image2t.jpg" />
<img src="images/image3t.jpg" />
<img src="images/image4t.jpg" />
<img src="images/image5t.jpg" />
<img src="images/image6t.jpg" />
</div>
CSS:
#nav ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#nav ul li
{
float:left;
}
#nav a:link,a:visited
{
display:block;
width:163.2px;
height: 35px;
font-weight:bold;
color:#FFFFFF;
background-color:#181818;
text-align:center;
text-decoration:none;
text-transform:uppercase;
line-height: 35px;
}
#nav ul li a:hover
{
background-color:#989898;
}
//Below is the lightbox CSS
a
{
border:3px solid #ccc;
display:block;
float:left;
margin:10px;
}
a img
{
margin:3px;
}
a:hover
{
border:3px solid #666;
}
img
{
display:block;
}
Like i said. If i delete the light box CSS the nav bar works fine. When i add it, the border on the nav bar and everything changes. I think it something to do with them both having the a tag but not sure. Thanks for the help.
Apply the lightbox CSS only to elements inside the lightbox:
.lightbox a{
border:3px solid #ccc;
display:block;
float:left;
margin:10px;
}
.lightbox a img{
margin:3px;
}
.lightbox a:hover{
border:3px solid #666;
}
.lightbox img{
display:block;
}
Demo: http://jsfiddle.net/42BjW/ (I don't have the lightbox JS, so obviously the lightbox itself is not working)
just add .lightbox in front of your later classes , the lightbox css