disclaimer: i am new to html and don't know javascript so if possible to do only using html and css.
also not native english and this is my first ever question on stack overflow so thank for your patience.
i have a div containing a list that should not be visible. i have a button that should display the div whenever i click it or hover it.
the problem is:
-if the div is outside the button tag the hover thing doesn't work but the div looks perfect
div with list outside the button tag
-if the div is inside the button tag the hover "function" works but if i move to slowly i can't select any of the items from the list because it seems to me there is a little space between the button and the div; also the div looks weird like this:
div with list inside the button tag
this should be the code:
<style>
.total{
margin-left: 61px;
margin-right: 61px;
height:100vh;
}
.meniu{
position:absolute;
top:0px;
right:0px;
height:61px;
width:61px;
}
*{
margin:0;
padding:0;
}
.lista-container{
background-color: lightgreen;
width:auto;
height:auto;
position:absolute;
top:61px;
right:15px;
border:solid black 2px;
display:none;
}
ul{
list-style: none;
font-size:20px;
color: black;
line-height: 40px;
}
ul li a{
text-decoration:none;
display:block;
}
ul li a:hover{
background-color:lightblue;
}
.meniu:hover .lista-container{
display:block;
}
</style>
<body>
<div class="total" >
<button class="meniu" >Menu
<div class="lista-container">
<ul>
<li>Arcul de Triumf</li>
<li>Ateneul Roman</li>
<li>Casa Poporului</li>
<li>Muzeul Antipa</li>
</ul>
</div>
</button>
</div>
</body>
been struggling with this for like 2 days thanks.
Since you do nos cripting, you should remove the button which is a trigger to fire a script.
Then you have in CSS no selector to recognize if a button was clicked. A CSS-Solution would be to use a checkbox which can use a pseudo-selector :checked:
#button {
display: none;
}
.total {
margin-left: 61px;
margin-right: 61px;
height: 100vh;
}
.meniu {
border: 1px solid black;
position: absolute;
top: 0px;
right: 0px;
height: 61px;
width: 61px;
}
* {
margin: 0;
padding: 0;
}
.lista-container {
background-color: lightgreen;
width: min-content;
white-space: nowrap;
height: auto;
position: absolute;
top: 61px;
right: 15px;
border: solid black 2px;
display: none;
}
ul {
list-style: none;
font-size: 20px;
color: black;
line-height: 40px;
}
ul li a {
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: lightblue;
}
.meniu:hover .lista-container,
#button:checked + .meniu > .lista-container {
display: block;
}
<div class="total">
<input type="checkbox" id="button">
<label for="button" class="meniu">Menu
<div class="lista-container">
<ul>
<li>Arcul de Triumf</li>
<li>Ateneul Roman</li>
<li>Casa Poporului</li>
<li>Muzeul Antipa</li>
</ul>
</div>
</label>
</div>
Related
I'm really sorry if I didn't phrase my question correctly, I'm really new at all of this.
I want to put my menu items (I made an unordered list) within my nav block, but they are showing underneath it instead. It overlaps with my body content (not pictured), which is really problematic. Could someone help me?
The pink box is my nav block. I want to put my menu buttons inside it.
I know that the pink block is in fact the nav block?
HTML:
<header>
<h1>Header</h1><h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
</ul>
</nav>
CSS:
header{
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav{
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1, h2{
display: inline;
}
/*Set li as buttons*/
#menu li{
float: left;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
display: block;
}
/*display anchor tags as buttons*/
#menu a{
display: block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover{
color: white;
background-color: black;
}
Thank you!
There are many errors in your CSS:
list-style-type: none; goes on the list, not on its items. It's what disables default list-behavior and makes the list stand on one line.
float: left; will make the elements float, but will also make the parent shrink as if it didn't have any content, which is why the elements sit below the nav block.
display: block; on items makes them stand on their own line. If you want multiple elements to stand side-by-side yet still have margins and paddings like blocks, you need to use inline-block instead. This is much easier to maintain than floating elements.
The margins on the list items are also way too big, I got rid of those. Honestly though, I really don't get why people use lists anymore. You could very well just put the links in the nav directly and save a lot of code.
header {
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav {
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1,
h2 {
display: inline;
}
/*Set li as buttons*/
#menu {
list-style-type: none;
}
#menu li {
width: 5em;
margin: 0;
display: inline-block;
}
/*display anchor tags as buttons*/
#menu a {
display: inline-block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover {
color: white;
background-color: black;
}
<header>
<h1>Header</h1>
<h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha
</li>
<li>beta
</li>
<li>gamma
</li>
<li>delta
</li>
</ul>
</nav>
You need to clear the container of the floated elements, as they don't properly stretch the container.
Add the clearfix CSS to your sheets:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
and then add the clearfix class to menu:
<ul id="menu" class="clearfix">
fiddle
Alternatively, pick one of the other clearfix solutions from here (where I got the solution above).
Get rid of the float left under menu li and replace it with
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
}
and if you want to move it over to the right a bit more
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-right: 5em;
}
I'm making a simple ebook site so me and my friends can access my ebooks and all that jazz. My menu has this black box or space on the end and I'm not sure why. I tried resizing the overall menu and I don't know any way I can make the box act like the home button. It's perfect, there's no space near it. Just at the end. html and css for reference.
<body>
<img src="logo2.png" class="logo" />
<div class="br" />
<ul class="menu">
<li class="list">Home</li>
<li>Ebooks
<ul class="dropdown1">
<li>Case studies, theses, academia, educational</li>
</ul>
</li>
<li>Extras
<ul class="dropdown2">
<li>test</li>
</ul>
</li>
<li>News</li>
<li>Site map</li>
</ul>
<div class="content">
<br>
<p>test</p>
<br>
</div>
</body>
</html>
And the css:
body{
background-color:#0e0d0d;
}
#font-face {
font-family: Lato-Light;
src: url('Lato-Light.ttf');
}
#font-face {
font-family: Lato-Light-Italic;
src: url('Lato-LightItalic.ttf');
}
img.logo {
width: 500px;
height: auto;
display: block;
margin-left: auto;
margin-top:60px;
margin-right: auto
}
div.br {
margin-top:60px;
}
ul{
padding:0px;
font-family:Lato-Light;
background: #000000;
color:#f9a724;
width:535px;
margin-left:auto;
margin-right:auto;
}
ul li{
padding:0px;
margin:0px;
display: inline-block;
position: relative;
line-height: 21px;
text-align: center;
}
ul li a{
display: block;
padding: 8px 25px;
color: #f9a724;
text-decoration: none;
}
ul li a:hover{
color: #000000;
background: #f9a724;
}
ul li ul.dropdown1 {
min-width: 150px; /* Set width of the dropdown */
max-width:350px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}
ul li ul.dropdown2 {
min-width: 150px; /* Set width of the dropdown */
max-width:200px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}
ul li:hover ul.dropdown1 {
display: block; /* Display the dropdown */
}
ul li ul.dropdown1 li {
display: block;
}
ul li:hover ul.dropdown2 {
display: block; /* Display the dropdown */
}
ul li ul.dropdown2 li {
display: block;
}
div.content {
width:535px;
background: #000000;
margin-left:auto;
margin-right:auto;
}
p {
color: #f9a724;
text-align:center;
word-wrap: break-word;
margin-right:50px;
margin-left:50px;
font-family:Lato-Light;
}
https://jsfiddle.net/mncvhoz9/
If you don't want to have to worry about getting down to exact pixel numbers, and/or making each item the same width, you should be able to add the following declarations, though I'm not sure how well it's supported by all the browser versions (it's been a while since I've looked into it):
ul {
display: table;
}
li {
display: table-cell;
}
Example with those added to your code: https://jsfiddle.net/nfqs0j0u/
Just add the following CSS in your file
ul li a{
display: block;
padding: 9px 29.5px;
color: #f9a724;
text-decoration: none;
}
it's not a black box it is the background of your ul element you can simply change the width of your ul to remove this black area:
ul {
width: 488px;
}
ul have margin top and bottom, because of that it has black space.So give like this,it will work.
div.br ul.menu{
margin-bottom:0px
}
Working Demo
If you don't need to reduce the width of ul, then you should set the width of li.
ul li{ width: 103px; }
Please try this one:
Css code like this:
ul{
padding:0px;
font-family:Lato-Light;
background: #000000;
color:#f9a724;
width:488px;
margin-left:auto;
margin-right:auto;
}
Demo
I'm trying to make a header like this:
HOME ABOUT (LOGO HERE) CONTACTS LOGISTICS
l want everything to be in the middle of the page.
If anyone can help me or link me to a helpful website I would really appreciate it
You can use margin:0 auto for centering element in the page. Try the below code for develop your design.
http://codepen.io/ogzhncrt/pen/mJggdd
header {
width:700px;
margin:0 auto;
background-color:#999;
padding:10px;
height:20px;
color:#f4f4f4;
}
header ul {
list-style:none;
margin:0 auto;
}
header ul li {
display:inline-block;
float:left;
margin-left:20px;
}
The most simple, basic solution I can think of is using the <center> tag, and put the same padding trait for each of the elements. Play with the amount of padding to achieve exacly the distance you want between them. Example:
.distanced
{
padding:20px; /*will control the distance between the spans*/
}
<center style="background-color:#aaaaaa">
<span class="distanced"> HOME </span> <span class="distanced"> ABOUT </span> <span class="distanced"> LOGO </span> <span class="distanced"> CONTACTS </span> <span class="distanced"> LOGISTICS </span>
</center>
Using divs you can set up defined widths and place them into a container.
.container{
width:500px;
margin:auto 0;
}
.item{
margin-left:20px;
border:black solid 1px;
width:50px;
height:50px;
float:left
}
.search{
margin-left:20px;
border:black solid 1px;
width:100px;
float:left;
height:50px;
}
https://jsfiddle.net/bLxk96pq/ working example i just created
I recommend using tables in your script, they're easy to use and you can make some really cool things with them. You can use the answers above to make this centered. For example put this in the body:
<div id="menu">
<table>
<tbody><tr>
<td><b>HOME</b></td>
<td><b>ABOUT</b></td>
<td>*Put the logo here*</td>
<td><b>CONTACTS</b></td>
<td><b>LOGISTICS</b></td>
</tr></tbody>
</table>
</div>
And then this in the head/CSS (Border is optional, but it's really cool. Also, color and amount of padding is you choice):
div#menu {
background:red;
height:35px;
padding: 20px;
}
table {
width:100%;
border:3px solid black;
}
td, th {
border:3px solid black;
}
It follows the code is very simple, you simply use the logo as a menu item.
HTML
<div class="container">
<nav id="navbar" style="z-index: 100000" >
<ul>
<li> Home </li>
<li> About </li>
<li><img src="http://neows.com.br/nav-center-logo/logo.png" width="250" height="100" alt=""/></li>
<li> Contact </li>
<li> Logistc </li>
</ul>
</nav>
</div>
CSS
body {
width: 100%;
height: 100%;
font-family: 'Ariar', sans-serif;
color:#828282;
font-size: 18px;
max-width: 100%;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 960px;
}
#navbar {
height: auto;
float: left;
position: relative;
top: 20px;
right: 0;
z-index: 100000;
width: 100%;
text-align: center;
}
#navbar ul {
padding: 0;
margin-bottom: 0;
margin-top: 0;
list-style: none;
margin: 0 auto;
}
#navbar ul li {
display: inline-block;
height: 22px;
}
#navbar ul li a {
font-size: 16px;
float: left;
color:#828282;
padding: 0 15px 0 15px;
line-height: 1.1;
text-decoration: none;
vertical-align: central;
font-weight: bold
}
#navbar ul li a:hover {
text-decoration: none;
color: #363636;
}
.space-item {
margin-top: 40px;
}
http://jsfiddle.net/furlanj1/zku320q3/
I wrote a website design that has a drop-down menu and a page that has a link to my facebook page. Every time you move your mouse over the drop-down menu, however, the h2 tag moves to the right. How do I get this to not happen?
Also, how can I center the "a" tag that contains the link to my FB page to be centered underneath the h2 tag? Here is the code:
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<style type="text/css">
h1{
color: black;
}
body {
background-color: lightgrey;
}
#top_nav li:hover ul{
display: block;
position: relative;
}
#top_nav {
display: block;
position: relative;
background-color: grey;
border: 1px solid black;
font: bold 16px Sans-serif;
height: 40px;
width: 1000px;
margin: 0px auto;
}
#top_nav ul{
margin: 0px;
padding: 5px;
}
#top_nav li {
position: relative;
float: left;
list-style-type: none;
}
#top_nav ul:after{
content: ".";
display: block;
height: 0px;
clear:both;
visibility: hidden;
border-bottom: 1px solid black;
}
#top_nav li a {
text-decoration: none;
display: block;
color: white;
border-right: 1px solid black;
padding: 5px 25px;
}
#top_nav ul ul {
position: absolute;
display: none;
left: 0px;
background-color: grey;
}
#top_nav ul ul li {
border: 1px solid black;
width: 99%;
}
#top_nav ul ul li a {
border-right: none;
}
a {
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<h1 style="text-align: center">This is practice</h1>
<div id = "top_nav">
<ul>
<li>contact us </li>
<li>about us
<ul>
<li>our history</li>
</ul>
</li>
</ul>
</div>
<p></p>
<h2 style="text-align: center">Facebook Page</h2>
my profile
</body>
</html>
I have also uploaded the website at: html.freeoda.com in case you want to see the code working in real time. Just navigate to the "contact" page.
Thanks!
If you want to just fix it change:
#top_nav li:hover ul{
display: block;
position: relative;
}
To:
#top_nav li:hover ul{
display: block;
position: absolute;
}
Basically what you were doing by changing it to relative was placing it back in the DOM to effect other elements, by using absolute positioning it doesnt interact with other elements the same way.
But like i said in my comment there is no reason to reinvent the wheel. Twitters bootstrap has a very nice working solution: http://getbootstrap.com/components/#dropdowns
As for centering the a tag you have a couple of options, the one i recommend would be just to make it a block element and center the text:
my profile
Add an id to make it easily selectable then add:
#fb-profile-link{
display: block;
text-align:center;
}
By default the a tags have a display of inline by changing it to block the element will automatically take up the width of its container. In this case the body of the document. Then using the text-align property we just center the text in that.
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.