I have a menu for my website, how can I make it drop down too? The nav bar is the one at my virtual airline on ccvg(dot)net
We want to make it drop downwards so we can have other things there, such as an about page. Etc.
Here is the CSS for it:
#bar {
position:fixed;
top:0;
left:0;
background:#fff url(images/barlogo.png) no-repeat 10px 50%;
border-bottom:1px solid #999;
height:48px;
width:100%;
z-index:2;
font-family:Corbel, sans-serif;
font-weight:bold;
font-size:14px;
}
#bar .btn {
float:right;
height:100%;
border-left:1px solid #999;
text-transform:uppercase;
}
#bar .btn a {
display:table-cell;
width:100%;
height:45px;
padding:0 20px;
vertical-align:middle;
text-decoration:none;
color:#999;
border-top:3px solid #fff;
}
#bar .btn a:hover, #bar .btn a.selected {
background-color:#e6e6e6;
color:#5c5c5c;
}
#bar .btn img {
border:0;
vertical-align:middle;
}
#bar .btn .value {
vertical-align:middle;
padding-left:14px;
font-family:Arial, sans-serif;
font-weight:normal;
font-size:20px;
}
#bar .icon{
background-position:0 0;
display:inline-block;
vertical-align:middle;
margin:0;
}
#barmenu {
position:fixed;
width:250px;
right:0;
top:48px;
background:#fff;
border-left:1px solid #999;
border-bottom:1px solid #999;
font-size:8pt;
font-family:Verdana;
font-weight:normal;
z-index:1;
display:none;
}
#btn_menu:hover~#barmenu, #barmenu:hover {
display:block;
}
#barmenu a {
display:block;
padding:10px;
text-decoration:none;
color:#5c5c5c;
border-top:1px solid #999;
}
#barmenu a:hover {
background:#e6e6e6;
}
Here is the HTML to make a simple button button.
<div class="bar"><div class="btn">Homepage</div></div>
I think you want the HTML tag. The following example is from w3schools, i.e. http://www.w3schools.com/tags/tag_select.asp
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Related
ok so the thing here is , the only way i can get the password_photo_galleries to go where they need to be is adding an extra button on the navbar to open that info.. what im trying to do is have the navbar button MyGallery bring up both photo_galleries, and password_photo_galleries, but i can't seem to figure out how to get it to combine with that one button.. any help would be much appreciated, i also just thought about something, the only way i can think it might work is make the button My Gallery do a drop down with two buttons My Gallery / Password Gallery but my navbar is -90deg so i dont know how that would work , but just a thought.. either way will work fine.. thanks again
#profile_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_password_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_photo_galleries:target {
right:80%;
margin-right:-520px;
}
#profile_password_photo_galleries:target {
right:80%;
margin-right:-520px;
}
.photo_gallery {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.password_photo_galleries {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.photo_gallery .heading,.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.photo_gallery .images a,.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.photo_gallery_preview,.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.photo_gallery_name a,.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.photo_gallery_link {
display:block;
margin-bottom:15px;
}
.password_photo_galleries_link {
display:block;
margin-bottom:15px;
}
.photo_gallery_count {
font-style:italic;
color:#666;
}
.password_photo_galleries {
font-style:italic;
color:#666;
}
HTML CODE FOR THE NAVBAR
<div id="right_menu">
<span>my gallery</span>
<span>Password</span***this is the one i would like to open up with just the button my gallery or if you could make a drop down for a rotation -90deg span for my nav bar that would be awesome****
</div>
here is the navbar , no links
#right_menu {
position:fixed;
font-size:15px;
top:0;
right:0;
background-color:#FF00FF;
width:50px;
height:100%;
}
#right_menu a {
text-align:center;
display:block;
padding:10px;
height:15%;
width:50px;
margin-bottom:0;
text-transform:uppercase;
position:relative;
}
#right_menu a:nth-child(1) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(1) span {
display:block;
position:absolute;
top:40px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(1):hover span {
left:-45px;
}
Every DOM element has a single id. you could approximate it using something like this
<div id='id1'><span id='id2'></span></div>
and then use navigation to get what you really want.
My divs cover each other which is not intended. I have run it through a debugger and nothing came up...
I'm trying to build a pop-up menu.
This is my html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="noteBack.css">
</head>
<body>
<div class="container">
<header><span>Note</span></header>
<div class="sub-header"><span>friday 25.7.13 </span></div>
</div>
</body>
</html>
this is my css:
.container{
position:relative;
width:382px;
border:1px solid black;
}
header{
position:absolute;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
position:absolute;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
}
.sub-header span{
display:inline-block;
padding:bottom:14px;
}
any help would be appreciated.
JsFiddle
Your positioning system is causing problem ,Try this css
.container{
/*container position should be absolute*/
position:absolute;
width:382px;
border:1px solid black;
}
header{
/*header position should be relative*/
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
/*sub-header position should be relative*/
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
}
.sub-header span{
display:inline-block;
padding:bottom:14px;
}
HTML
<div class="btn" >
<span>X<span>
<div class="vertical_line"></div>
</div>
CSS
div.btn{
width:100px;
height:100px;
float:left;
border:1px solid #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:80px;
text-align:center;
position: relative;
}
div.vertical_line{
width:0;
height:100px;
border:1px solid #000000;
position:absolute;
right:50px;
z-index:100;
margin:0;
padding:0;
}
div.btn span{
position:absolute;
z-index:0;
}
Here is the jsfiddle.
Can anyone please tell me how to position 'X' in center such that the vertical line and X will overlap each other?
Instead of making span text to have absolute position, I have given line to have absolute position, and have placed text in center using text-align : center.
div.btn{
width:100px;
height:100px;
float:left;
border:1px solid #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:80px;
text-align:center;
position: relative;
}
div.vertical_line{
width:0;
height:100px;
border:1px solid #000000;
position:absolute;
right:49px;
z-index:100;
margin:0;
padding:0;
top : 0;
}
div.btn span{
float:left;
width : 100%;
text-align : center;
z-index:0;
}
Change your code to the following
HTML
<div class="btn" >
<div class="vertical_line"></div>
<span>X</span>
</div>
CSS
div.btn{
width:100px;
height:100px;
float:left;
border:1px solid #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:80px;
text-align:center;
position: relative;
}
div.vertical_line{
width:0;
height:100px;
border:1px solid #000000;
position:absolute;
right:50px;
z-index:100;
margin:0;
padding:0;
}
div.btn span{
position:relative;
z-index:0;
}
Edit : Is this what you want ? https://jsfiddle.net/y9d25gxq/9/
i'm trying to create an horizontal menu on my site.
The idea is to have a layout in this way ----O---- where the - are the links of the menu and the O is a picture put in the middle of the page, so the two list are on the left and on the right and the are around the picture.
I've created the html
<div class="prima">
<ul class="prima_lista">
<li>primo</li>
</ul>
</div>
<div class="seconda">
<ul class="seconda_lista">
<li>secondo</li>
</ul>
</div>
and then i've created the CSS that will organize everything
.prima{
position:absolute;
top:400px;
width:50%;
left:-70px;
border:1px solid red;
}
.seconda{
position:absolute;
top:400px;
width:50%;
right:-70px;
border:1px solid green;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
border:1px solid blue;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
border:1px solid blue;
}
ul.prima_lista li {
display:inline-block;
border:1px solid gray;
}
ul.seconda_lista li {
display:inline-block;
border:1px solid gray;
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
The big problem is the while the first ul/li works perfectly and is well aligned on the right edge of the div... the second one instead present some spaces between the UL and the DIV margin. Is there a way to eliminate this space?
No matter how much i try i haven't find a way to solve this riddle -> http://jsfiddle.net/7voe8jea/
--- i've updated the link to the jsfiddle. first of all for it didn't work... and second because i think i haven't explained myself very well. What i'd like to do is to "push" the second ul to the left of the div just like the first one is aligned to the right edge of the first div.
I saw that rather that using an id for the div you used a class. SO i changed it to an id, and prefixed everything in the css with a #. Here is a link to the js with it working http://jsfiddle.net/fstxsd5g/1/
Here is the html:
<div id="lista">
<div id="prima_lista">
<ul id="prima_lista">
<li>primo</li>
</ul>
</div>
</div>
And the css
#lista {
position:absolute;
height:60px;
width:100%;
top:400px;
border:1px solid #000;
}
*/
#prima_lista{
position:absolute;
top:400px;
height:60px;
width:50%;
left:-70px;
border:1px solid red;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
}
ul.prima_lista li {
display:inline-block;
/* border-top:1px solid #dededc; */
/* padding-top:16px;
padding-right:40px; */
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
.seconda_lista{
width:50%;
right:-70px;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
}
ul.seconda_lista li {
display:inline-block;
border-top:1px solid #dededc;
padding-top:16px;
padding-right:40px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
Hope this helps! Littleswany
After a long time of trying things I still not have come any closer, I do not know how to make the menu for this website (found here) I have appear in IE7.
I am using a css image replacement technique to achieve this result, currently I have a html menu with links and am replacing the links with images in css.
Could you please help me out thank you.
Here is the CSS
'#charset "utf-8";
/* CSS Reset */
/***** main styles ******/
body {
background-image:url(images/bg-top.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#222121;
}
hr {
border : 0;
height : 2px;
background: url(images/line.png) 0 0 repeat-x;
margin : 1em 0;
}
p, h1, h2, h3, li {
font-family:Arial, Helvetica, sans-serif;
color:#b1b0b0;
}
h2 {
margin-bottom:40px;
}
h3 {
margin-top:30px;
margin-bottom:20px;
font-size:138.5%;
color:#fafafa;
text-transform:uppercase;
}
.body_text {
line-height:1.6em;
font-family: 'Arial Narrow', sans-serif;
font-size:114%;
}
input {
display:block;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #999;
border-bottom:2px solid #999;
background-color:#333;
width:200px;
margin-top:7px;
margin-bottom:10px;
}
textarea {
display:block;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #999;
border-bottom:2px solid #999;
background-color:#333;
width:300px;
height:120px;
margin-top:7px;
color:#CCC;
}
label {
color:#b1b0b0;
}
#submit {
width:100px;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #171717;
border-bottom:2px solid #171717;
color:#FFF;
}
/*** header styles ********/
#header_container {
margin:30px auto 0px auto;
width:860px;
height:110px;
background-image:url(images/line.png);
background-repeat:repeat-x;
background-position:0px 88px;
}
#menu {
position:relative;
left:527px;
top:-8px;
}
#menu li {
display:inline;
margin-right:20px;
}
#menu li.last {
display:inline;
margin-right:0px;
}
.menu_link1:link, .menu_link1:visited {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/home.png);
}
.menu_link1:active, .menu_link1:hover {
background-image:url(images/home_highlight.png);
}
.menu_link2:link, .menu_link2:visited {
display:inline-block;
text-indent:-3000px;
width:92px;
height:16px;
background-image:url(images/portfolio.png);
}
.menu_link2:hover, .menu_link2:active {
background-image:url(images/portfolio_highlight.png);
}
.menu_link3:link, .menu_link3:visited {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/blog.png);
}
.menu_link3:hover, .menu_link3:active {
background-image:url(images/blog_highlight.png);
}
.menu_link4:link, .menu_link4:visited {
display:inline-block;
text-indent:-3000px;
width:78px;
height:16px;
background-image:url(images/contact.png);
}
.menu_link4:active, .menu_link4:hover {
background-image:url(images/contact_highlight.png);
}
.active1 {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/home_highlight.png);
}
.active2 {
display:inline-block;
text-indent:-3000px;
width:92px;
height:16px;
background-image:url(images/portfolio_highlight.png);
}
.active3 {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/blog_highlight.png);
}
.active4 {
display:inline-block;
text-indent:-3000px;
width:78px;
height:16px;
background-image:url(images/contact_highlight.png);
}`
EDIT
Fixed the problem by adding font-size: 0px;
line-height: 0px; to the list-item.
But the background image is not centered and this only effects IE7
After looking through the menu with IE8's compatibility mode and its developer tools, there is an error with text-indent: -3000px; I have no idea what it is, but removing this makes your menu display as intended.