I'm posting here to get some help.
I'm trying to make a simple dropdown menu and I'm stacked with the submenus (limpieza and balance).
What i'm trying to achieve here is to make the limpieza and balance buttons have the same width and text align as the rest of the buttons. I just dont know how. It looks like once the relative attribute is added to the container and the absolute attribute is added to limpieza and balance, I can't control their width or text align anymore. I guess is bc they are out of its cointainer. I'm really confused here since this is the first time I try css.
I would appreciate if some1 could provide some help.
Here is the code.
#charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
body {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
/*ESTILOS GENERALES*/
.header {
left: 0;
position: fixed;
top: 0;
width: 100%;
background:white;
}
.barrasup {
background:#203c6e;
padding-top: 10px;
padding-bottom: 10px;
min-height: 29px;
z-index: 2;
}
.contenedor {
margin: 0 auto;
max-width: 1200px;
}
.social {
background: #203c6e;
display: block;
float: none;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
width: 75px;
}
.instasocsup {
margin-right: 10px
}
/*MENU*/
.barrainf {
margin-top: 10px;
}
.menu {
width: 1180px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
list-style:none;
padding: 0;
}
.menu li {
line-height: 2.5rem;
position: relative;
}
.menu li .item2 ul {
position: absolute;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > ul > li >div > a {
text-decoration:none;
color: white;
display: block;
}
.menu li ul {
display: none;
}
.menu li:hover ul {
display:block;
}
.item1 {
margin-left: 10px;
margin-right: 10px;
background: white;
}
.item2, .item3, .item4, .item5 {
margin-left: 0px;
margin-right: 10px;
background:white;
}
.subitem1, .subitem2 {
margin-left: 0px;
background: #203C6E;
color: white;
}
/*1ER NIVEL*/
.menu > ul{
background: #DF2529;
display: table;
width:100%;
}
.menu > ul > li {
float: left;
width: 20%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin tÃtulo</title>
<link href="css/styleIndigo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="barrasup">
<div class="contenedor">
<div class="social">
<img src="Instagram_logo.png"></img>
<img src="twitter_logo.png"></img>
</div>
</div>
</div>
<div class="barrainf">
<div class="menu">
<ul>
<li><div class="item1">Inicio</div></li>
<li><div class="item2">Comprar
<ul>
<li id="listamenu"><div class="subitem1">Balance</div></li>
<li id="listamenu"><div class="subitem2">Limpieza</div></li>
</ul>
</div></li>
<li><div class="item3">Blog</div></li>
<li><div class="item4">Quienes somos</div></li>
<li><div class="item5">Contacto</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just use calculate css for width that works with inherited table display properties. View it here http://codepen.io/anon/pen/reMpRj
.menu > ul > li > div > ul {
width: calc(100% - 10px);
}
Related
I'm brand new to HTML and CSS, and right now I'm following this tutorial. My problem see picture is that the items in my drop-down list are not in a vertical line, but all cluttered together.
I'm sure it's a simple problem with a simple solution but I am not making any progress finding one...
I would be so grateful for some suggestions! :)
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
All you have to do is add position:relative to #nav ul li :
#nav ul li {
float: left;
position: relative;
}
but you should use this only for the li parent and you shouldn't use float:left in the li of the ul child.
So your css will become like this
#nav > ul > li {
float: left;
position: relative;
}
Add a specific width to #nav ul ul, gave it 200px as example considering parent ul width
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
width: 200px;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
You have applied rules CSS for all children of the ul parent, so all chidren of ul ul they will be inherited the rule of parent CSS.
Try to use selector reference '>' when you want to target only parent element
For this exemple you just change
#nav ul li {
float: left;
}
by
#nav > ul >li {
float: left;
}
I want to use the Highlights template from HTML5 up, but I want to add a navigation bar similar to the one from a different template, for example like this menu one that floats, and rolls when clicked on.
I've looked into the HTML,CSS and JSCRIPT and to try and adapt the first template with the navigation bar, as well as investigate different options in SO with no success.
The two templates use different approaches in their html, the highlights template structure uses <div class="container"> in the header, while the other one uses <body class="landing"> ,<div id="page-wrapper">.
Is that feasible?
This is what I've tried:
HTML
...
<style>
.floating-menu {
font-family: sans-serif;
background: transparent;
padding: 5px; width: 130px;
z-index: 10000;
position: fixed;
}
.floating-menu a, .floating-menu h3 {
font-size: 0.8em;
display: block;
margin: 0 0.5em;
color: white;
}
</style>
</head>
<body>
<nav class="floating-menu">
<div id="nav-toggle">
<span></span><span></span><span></span>
<div class="menu-caption">
</div>
</div>
<div id="nav" class="nav-collapse collapse">
<ul>
<li>Home</li>
<li>Who I am</li>
<li>Stuff I do</li>
</ul>
</div>
</nav>
CSS:
/* nav */
#nav > ul {
margin: 0;
display:block
}
#nav > ul > li {
position: relative;
display: inline-block;
margin-left: 0em;
}
#nav > ul > li a {
color: #c0c0c0;
text-decoration: none;
border: 0;
display: block;
padding:0em 0em;
}
#nav > ul > li:first-child {
margin-left: 0;
}
#nav > ul > li:hover a {
color: #fff;
}
#nav > ul > li.current {
font-weight: 400;
}
#nav > ul > li.present {
font-weight: 400;
}
#nav > ul > li.present:before {
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
width: 0.75em;
height: 0.75em;
content:'';
display: block;
position: absolute;
bottom: -0.5em;
left: 50%;
margin-left: -0.375em;
background-color: #37c0fb;
}
#nav > ul > li.present a {
color: #fff;
}
#nav > ul > li.active a {
color: #fff;
}
#nav > ul > li.active.present:before {
opacity: 0;
}
#nav {
cursor: default;
background-color: #333;
padding: 0;
text-align: left;
}
#nav-toggle {
background-color: #transparent;
cursor: pointer;
display:block;
}
#nav-toggle > a {
float:left;
color:#fff;
padding:0px;
width: 0px;
}
#nav-toggle > a > span {
width:26px;
height:2px;
background-color:#fff;
display:block;
}
#nav-toggle > a > span + span {
margin-top:4px;
}
#nav > ul {
display:none;
}
#nav > ul > li {
display: block;
}
.menu-caption {
display:inline-block;
color:#fff;
padding:10px;
}
#media screen and (max-width:767px) {
#nav-toggle {
display:block;
}
#nav > ul {
display:none;
}
#nav > ul > li {
display: block;
}
}
JS
$(function() {
var windowWidth = $(window).width();
$("#nav-toggle").click(function () {
$("#nav ul").slideToggle();
$("#nav ul").toggleClass("open");
});
var navMain = $("#nav");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
$(window).resize(function () {
windowWidth = $(window).width();
if (windowWidth < 767) {
if ($("#nav ul").is(":hidden")) {
$("#nav ul").css("display","block");
}
}
else {
$("#nav ul").css("display","none");
}
});
But this has a strange behavior that the menu doesn't fold back after an item was selected...
To illustrate, in the Spectral index.html file add this in the <head> section below the other CSS links. This should give you a good starting point to what you want.
<style>
#one, #two, #three, #cta, #footer, .wrapper > .inner {
margin: 0 auto;
width: 50%;
}
</style>
I would suggest making these changes in the actual CSS file afterwards though.
For responsiveness you can setup media queries using the below syntax in your CSS file to adjust the width of the section's to fill the width of the page when in mobile view.
#media(max-width: 767px){
#one, #two, #three, #cta, #footer, .wrapper > .inner {
margin: 0 auto;
width: 100%;
}
}
I have this menu that I have been working on for a while. I am using the CSS table displays to accomplish it. When the text inside of my links take up two lines, the ones that are only one line will not fill the parent li on hover. Is there any way I am missing that can accomplish this?
http://jsfiddle.net/g7jmh567/
css
.menu {
background-color: #687c9e;
display: table;
}
.menu-list {
display: table-row;
}
.menu-list > li {
display: table-cell;
height: 100%;
overflow: hidden;
line-height: 1.125rem;
overflow: auto;
}
.menu-list > li > a {
display: block;
color: #fff;
text-decoration: none;
padding: 1.25rem 1.25rem 1.25rem 0;
box-sizing: border-box;
height: 100%;
min-height: 2.25rem;
}
.menu-list > li > a:hover {
background-color: #7889a8;
}
.dropdown-list {
display: none;
}
.hidden {
display: none;
}
html
<nav class="content menu">
<ul class="menu-list">
<li>Home</li>
<li>A really long</li>
<li>Some really long word</li>
<li>Special Events</li>
<li>Newsletter</li>
<li>Photo Gallery</li>
</ul>
</nav>
Simply remove the padding from your li, and add it to your menu-list, check out the link below;
Nav
the reason why it didn't fill the entire li 'coz you're just filling the anchor
hover the li instead of the anchor
.menu-list > li:hover {
background-color: #7889a8;
}
JSFIDDLE DEMO
See This link: this may help you: https://jsfiddle.net/guruWork/8fwo0r06/2/
<nav class="content menu">
<ul class="menu-list">
<li><span>Home</span></li>
<li><span>A really long</span></li>
<li><span>Some really long word</span></li>
<li><span>Special Events</span></li>
<li><span>Newsletter</span></li>
<li><span>Photo Gallery</span></li>
</ul>
</nav>
And CSS
.menu {
background-color: #687c9e;
}
.menu-list {
display: table;padding:0; margin:0;width:100%;
}
.menu-list > li {
display: table-cell;
height: 100%;
overflow: hidden; vertical-align: top;
overflow: auto;
}
.menu-list > li > a {
display: table;
color: #fff;
text-decoration: none;
padding: 0;
box-sizing: border-box;
height: 100%;
min-height:53px; text-align:center;
}
.menu-list > li > a span{display: table-cell;padding: 5% .5rem;vertical-align: middle;}
.menu-list > li > a:hover {
background-color: #7889a8;
}
.dropdown-list {
display: none;
}
.hidden {
display: none;
}
I'm simply trying to modify the navigation bar of my site for smaller devices. The site should be remaining with a fixed design for iPads+ resolutions, and then become responsive for smaller resolutions. While the mobile-size specific codes are applying to some classes (container, main, etc.), they don't seem to apply to the navigation div. You can see how it's currently functioning here: http://moore.whiterabbitstudio.us/
Here is a fiddle for permanence: http://jsfiddle.net/ursalarose/xAp72/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
<div class="main-hold">
<div class="main">
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Process</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS:
body
{
display: table;
margin: 0 auto;
letter-spacing: .1em;
text-align: center;
font-size: 16px;
}
*
{
margin:0;padding:0;
}
html,body
{
height:100%;
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.main-hold {
height:600px;
width:1000px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.main {
height:540px;
width:900px;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/* MOBILE DEVICES */
#media screen and (max-width: 950px){
.main-hold {
width:500px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px auto;
}
.main {
width:100%;
background-repeat:no-repeat;
background-position:center top;
margin-top: 0px auto;
}
#nav {
margin: 20px auto 0 auto;
float:none;
width: 100%;
}
#nav ul {
list-style:none;
}
#nav li {
width: 100%;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align:center;
width: 100%;
height: 22px;
display: inline;
background-color:#CCC;
background-image: none;
padding-right: 0px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#FFF;
}
}
/* NAVIGATION */
#nav {
float: left;
height: 250px;
width: 168px;
margin-top: 60px;
}
#nav ul {
list-style:none;
}
#nav li {
width: 168px;
height: 28px;
display: block;
margin-bottom: 8px;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align: right;
width: 148px;
height: 22px;
display: block;
padding-right: 20px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#fff;
}
Thank you for any help! I've never tried designing for mobile devices before.
Try placing the mobile CSS below the desktop CSS, as the desktop CSS is now overwriting the mobile css.
I am having an issue with elements not vertically aligning in the middle of it's parent div.
CSS:
/* Main body structure */
body{
font-size:0.5em;
}
.main-wrapper {
width: 90%;
margin: auto;
background-color: #efefef;
}
* {
box-sizing: border-box;
}
/* Main header/logo/navigation structure */
.main-header {
padding: 20px;
background-color: #003;
display:table;
width: 100%;
min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
}
.main-logo,
.main-nav, {
display: table-cell;
vertical-align: middle;
}
.main-logo,
.main-nav li {
padding: 10px 20px;
border-radiues: 5px;
background-color:#3CC;
}
.main-nav li {
margin-right: 10px;
display:inline-block;
}
.main-logo {
background-color:#3F6;
}
.main-nav {
padding: 10px;
}
.main-logo a,
.main-nav a {
color: #FFF;
text-decoration:none;
display:block;
text-align:center;
padding: 10px 20px;
}
#media ( max-width: 768px) {
.maing-logo,
.main-nav,
.main-nav li {
display:block;
width: initial;
margin: initial;
}
.main-nav {
padding-left: initial;
}
.main-nav li {
margin-top: initial;
}
HTML:
<div class="main-wrapper">
<header class="main-header">
<h1 class="main-logo">logo</h1>
<div class="main-nav">
<ul class="main-nav">
<li>HOME</li>
<li>SEARCH</li>
<li>MESSAGES</li>
<li><a href=logout.php>LOGOUT</a></li>
</ul>
</header>
</div>
So the issue being that if I alter the min-height of the main-header class the elements stay in the same place and do not automatically adjust but my code looks like it should be automatically middle aligning the elements?
if you use display:table; , you should use height and not min-height . Behavior of this display rule will do that the element will expand to fit its content anyway.
You have an extra , , that kills you rule .
correct is :
.main-header {
padding: 20px;
background-color: #003;
display:table;
width: 100%;
/*min-*/height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
}
.main-logo,
.main-nav/* , */ {
display: table-cell;
vertical-align: middle;
}