I want the logo div to be on top of the nav container. How would I achieve this? I have been playing around with positioning and nothing seems to be working. They are both inside the header container.
Here is my CSS code:
and js link:
http://jsfiddle.net/4vA93/3/
header {
position: relative;
height:100px;
background-color: yellow;
}
.logo {
position: absolute;
margin-top:10px;
margin-left:20px;
width:80px;
height:80px;
background-color: red;
}
nav {
position: absolute;
width:100%;
bottom: 0;
background-color: bisque;
}
and HTML
<header>
<div id="logo">Logo</div>
<nav>
<ul>
<li>| Hours |</li>
<li> Facilities |</li>
<li> Restaurant Charlotte |</li>
<li> Penthouse Suite |</li>
<li> Gift Shop |</li>
</ul>
</nav>
</header>
Do you mean like this? http://jsfiddle.net/4vA93/4/
#logo {
z-index:10;
}
Or like this? http://jsfiddle.net/4vA93/5/
Related
I'm trying to make a simple top menu with one level of submenus. I want to animate them with translate3d, but I can't manage to get them to sit behind the header with z-index. I'm using Foundation, so the header looks a bit like this:
#main-menu > li {
position: relative;
}
#main-menu ul {
position: absolute;
-webkit-transition: transform 400ms ease; (omitted other prefixes)
transform: translate3d(0,-100%,0);
}
#main-menu > li:hover ul {
transform: translate3d(0,0,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
So in the normal state the submenus #main-menu ul are translated vertically by their height so that when the main menus buttons are hovered the submenus slide down. However, I can't seem to make it so that the submenus are behind the entire header but appear above the content below.
this may help to your.This can do in several ways.this is one of it.you can do it easily if you start to use bootstrap.this solution only use html, css and js.this may a quick help to you.
<!DOCTYPE>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li.one").mouseenter(function(){
$("div.submenu").fadeIn(500,function(){
$(this).mouseleave(function(){
$(this).fadeOut(500);
});
});
});
});
</script>
<style type="text/css">
body{
margin: 0;
}
ul{
background-color:black;
}
ul li{
color: white;
list-style-type: none;
display:inline;
font-size:30px;
width:100px;
margin-left: 30px;
margin-right: 30px;
}
div.submenu li{
list-style-type: none;
color: white;
font-size: 30px;
width:200px;
background-color: black;
text-align: center;
position: relative;
top:-15px;
left:550px;
}
div.submenu{
display: none;
}
</style>
</head>
<body>
<div style="text-align:center;">
<ul>
<li class="one">Basin & Sinks</li>
<li>Bathroom Accessories</li>
<li>Showers </li>
<li>Toilets</li>
</ul>
<div class="submenu">
<li>one</li>
<li>two</li>
</div>
</div>
</body>
</html>
You need to set your either your header or main menu (depending on the style you going for) to absolute with no z-index applied and then add a negative z-index to the absolute positioned sub-menu. this will hide the submenu content behind the parent elements.
* {
margin:0;
padding:0:
}
#header {
background: #f4f4f4;
border-bottom: 1px solid #e3e3e3;
height:60px;
position:relative;
}
#main-menu {
position:absolute;
width:100%;
height:30px;
list-style:none;
}
#main-menu li > a {
display:block;
text-decoration:none;
padding:1em 2em;
}
#main-menu li.has-children ul {
position:absolute;
z-index:-1;
top:100%;
-webkit-transition: transform 400ms ease;
transform: translate3d(0,-100%,0);
background:#f4f4f4;
border:1px solid #e3e3e3;
padding:1em;
}
#main-menu li:hover ul {
transform: translate3d(0,20%,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
I can't seem to understand how I should center this menu among the logo and the login/register
http://jsfiddle.net/hnnsr97x/2/
HTML
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="Logo/logo.png" ></a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
}
#logo, #menu {
float:left;
}
#menu {
}
#menu li {
display:inline-block;
}
#LogReg {
text-align:right;
}
The fiddle is quite empty because I cleared it from some things I tried
So I'm here to ask for someone to explain how I should get the menu in the center? I'm obviously missing something.
Try this: http://jsfiddle.net/hnnsr97x/6/
the calc(50% - 500px) is saying make the margin-left 50% minus the width of the image and half of the menu
#logo{
float:left;
}
#menu {
float:left;
margin-left: calc(50% - 500px);
}
Do you mean centering the menu like this?
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div class="container">
<div id="logo">
<a class="logo" href="index.html">
<img alt="Logo" title="logo" src="Logo/logo.png" >
</a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</div>
</header>
CSS style:
#header {
width: 100%;
}
.container {
display: block;
margin: 0 auto;
width: 300px;
}
#logo {
float: left;
}
#menu {
float: right;
}
.main_menu {
margin: 0;
}
#menu li {
display: inline;
}
#LogReg {
text-align: right;
}
http://jsfiddle.net/jonathanzuniga/66xnov5z/embedded/result/
See working demo here Centered Menu
HTML:
<header id="header">
<div id="LogReg">
Login | Register
</div>
<div id="logo">
<a class="logo" href="index.html">LOGO</a>
</div>
<nav id="menu">
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
display:block;
position:relative;
}
#LogReg {
float:right;
}
#logo{
position:absolute;
top: 0px;
left:10px;
}
#menu{
display:block;
width:100%;
text-align:center;
overflow:hidden;
}
#menu li {
display:inline;
}
https://jsfiddle.net/AkashPinnaka/0eq1f9az/embedded/result/ I am assuming you are intended to make them align in a line. And obviously you know the height of your logo. Let me assume your logo is of height 40px.
Modify your HTML code to the following code.
<header id="header">
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="http://www.planwallpaper.com/static/images/9-credit-1.jpg"></a>
MENU1
MENU2
MENU3
</div>
<div id="LogReg">
Login | Register
</div>
</header>
And CSS code as following
#header {
width:100%;
height: 100px;
}
div#logo{
float: left;
}
div#logo a{
/* line-height: 100px; */
display: table-cell;
vertical-align: middle;
}
div#LogReg{
line-height: 40px;
float: right;
}
img{
height: 40px;
width: 80px; /* just assumed to be 80px wide. Width doesn't matter as long as it is not too long. */
}
I took img height as 40px in css as I assumed.
This aligns logo, navigation menu and login|register in the same line.
If you need Login|Register a bit higher than logo and menu, just reduce the line-height of div#LogoReg to less than 40px.
And if u want some margin on both left and right sides, wrap your whole header content in another div tag as shown below
<header id = "header">
<div id = "header_in">
</div>
</header>
and give the width of div#header_in as 80% or something you like. This gives the margin on both left and right sides of your header.
div#header_in{
width: 80%;
}
Let me know if you want anything different.
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this
I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do
Here what I have don't so far
,as you see there is space between my two divs ,and I don't seem to undestand why ,
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<div class=Container>
<p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br>
<span style="font-size:52px "><span style="color:#990202">TEST</span>
<span style="color:#f1a2a2">PROJECT</span></span>
</p>
<img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >
<div id="headerDIV" >
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
<li>
GALLERY
</li>
<li>
CONTACT US
</li>
</ul>
</div><!--headerDIV-->
</div><!--headerDivContainer-->
<div id="topRedStrip"></div>
</header>
<section id="main">
<div class=mainContainer>
<div class="slider"> <!---THIS is the DIV that doesn't listen-->
<img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">
</div>
</div><!--Container-->
</section>
<footer>
</footer>
</body>
</html>
and here is my css
#headerDIV
{
}
header p
{
font-family: "myriad Pro";
margin-bottom:0;
margin-top:0;
width:500px;;
}
#chatDiv
{
position:relative;
float:right;
}
#topRedStrip
{
position:relative;
top:12px;
background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
width: 100%;
z-index: -2;
height: 8px;
}
.slider
{
position:relative;
float:left;
}
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
height: 200px;
float: right;
}
.Container
{
margin: 0 auto;
width:936px;
}
.mainContainer
{
margin: 0 auto;
width:936px;
height:auto;
}
header ul
{
padding: 0;
margin:0;
z-index: -1;
}
header li
{
list-style-type: none;
float:left;
padding-left: 30px;
font-family: "myriad Pro";
font-size:12px;
color: #504848;
padding-top:9px;
}
Can anyone tell me why I get empty space between the div,
Thanks
Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.
Here's Chrome as example:
Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.
It seems to be because the height of your header div is 200px:
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
**height: 200px;**
float: right;
}
It doesn't need to be 200px when the only thing in it is the black navigation bar.
I'm attempting to build a phone directory into a CSS dropdown menu. I'm aiming for it to render like a typical phone book would, with the names aligned left and the phone extensions/numbers aligned right, like so:
James T. Kirk x1701
Mr. Spock (123) 555-8795
The HTML is pretty straightforward:
<ul id="phone">
<li>
Phone Category 1
<ul>
<li>
<span class="phone-description">Phone Description 1</span>
<span class="phone-number">x55555</span>
</li>
<li>
<span class="phone-description">Longer Phone Description 2</span>
<span class="phone-number">(800) 555-1234 x1701</span>
</li>
</ul>
</li>
...
</ul>
The basic formatting is fairly simple as well:
body {background: #999;}
ul {list-style: none; margin: 0; padding: 0;}
li {margin: 0; padding: 0.4em 2em 0.4em 1em; white-space: nowrap;}
#phone {position: fixed; top: 0; left: 0;}
#phone li {background: #FFF; position: relative;}
#phone li:hover {background: #CCC;}
#phone ul {display: none; position: absolute; top: 0; left: 100%;}
#phone li:hover ul {display: block;}
.phone-number {margin-left: 2em;}
Making the columns, however, has proven to be extremely difficult. I've attempted using text-align, floats, absolute positioning, and the CSS brilliance explained at "Fluid width with equally spaced DIVs."
I've put the above code up at http://jsfiddle.net/HQ4ZN/2/, along with each of my attempted solutions commented out. Any help you can provide would be much appreciated!
Is this what you're trying to accomplish?
#phone li ul li { overflow: hidden; }
.phone-description { float: left; }
.phone-number {float: right;}
http://jsfiddle.net/HQ4ZN/4/
just use css display:table
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.category{display:table}
.category li {display:table-row}
.category span {display:table-cell}
</style>
</head>
<body>
<ul id="phone">
<li>
Phone Category 1
<ul class="category">
<li>
<span class="phone-description">Phone Description 1</span>
<span class="phone-number">x55555</span>
</li>
<li>
<span class="phone-description">Longer Phone Description 2</span>
<span class="phone-number">(800) 555-1234 x1701</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
You probably could play around with the text wrap of the different spans so the longer ones won't push the phone number down. But I believe this will fix your issues. You probably were not clearing your floats, which is why your previous methods were not working.
http://jsfiddle.net/feitla/HQ4ZN/5/
.phone-number {
margin-left: 2em;
float:right;
}
.phone-description {
float:left;
width:150px;
}
#phone ul {
display: none;
position: absolute;
top: 0;
left: 100%;
width:420px;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
<ul>
<li class="clearfix">
<span class="phone-description">Phone Description 1</span>
<span class="phone-number">x55555</span>
</li>
<li class="clearfix">
<span class="phone-description">Longer Phone Description 2</span>
<span class="phone-number">(800) 555-1234 x1701</span>
</li>
</ul>