I have created demo of my problem so far.
Demo
The issue I am having is I require the menu image to sit on top of the div and push the whole 'imgDiv' down as if it was hiding behind it. Now I can achieve something close but placing the 'menumobile. directly underneath the 'imgDiv' but it pushes the content down but also causes a problem with it's position.
so my goal is for the image to be sat floating at the centre of the top on top of the 'imgDiv' and when clicked it reveals the menu and pushes down the whole of the 'imgDiv' and not just the content but I am struggling to make it work.
<center><div id="menumobile">
<div id="nav-mobile">
<img src="img/menu.png" alt="Menu" class="menuimage"/>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
<br /><br />
</div>
</div>
</center>
<div id='imgDiv'>
<div>
<div class="containeralt">
<h1>Header</h1>
<br />
<span class="icon lush-arrow-circle-down" style="font-size: 50px; color: #FFFFFF;"></span>
</div>
</div>
</div>
Please ignore center tags I am just using them for the purpose of the demo.
$(document).ready(function() {
$('#nav-mobile ul').hide();
$('#nav-mobile a').click(function(e) {
$('#nav-mobile ul').slideToggle(200);
});
});
#imgDiv {
position:relative;
height:75%;
width:100%;
background-image:url(http://walljpg.com/wp-content/uploads/2014/04/blurry-backgroundgriscomkz-dpilzwd3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #666666;
display:table;
text-align: center;
background-attachment:fixed;
position:relative;
margin-top: -20px;
}
#imgDiv > div:first-child {
display:table-cell;
vertical-align:middle;
width:100%;
}
#nav-mobile > a {display:inline-block;}
#menumobile{
background-color: transparent;
text-align:center;
margin-top: 40px;
margin-bottom:40px;
z-index: 999999;
}
#nav-mobile, #nav-mobile ul, #nav-mobile li {
position: relative;
background: none;
}
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
padding: 20px 0 60px 0;
}
#nav-mobile ul li {
width: 100%;
display: block;
padding: 20px 0 20px 0;
margin: 0;
}
#nav-mobile ul a{
color: #000;
text-decoration:none;
font-size: 16px;
}
#nav-mobile ul a:hover {
background: none;
color: #FFF;
}
#nav-mobile ul li:hover {
}
.menuimage{width: 30px; height: 30px;}
Try adding these properties to your ul tag : position and z-index as shown below.
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
padding: 20px 0 60px 0;
position:absolute;
z-index:999;
}
Let me know if this is the behaviour you expect. Hope it helps!
Related
i've been trying for 2 hours to align the navigation bar nicely under the header image, but it just won't do it.The first 4 list items align in a row, but the last one goes under them, + the nav bar is not centered like i want it to be. I have searched for answers everywhere, and nothing works. Help will be greatly appreciated.
p.s. i am new to css and html so be gentle.
<html>
<head>
<style>
body {
background-image: url("http://i.imgur.com/SwKXk23.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
body {
margin: 0;
}
.header {
width: 100%;
height: auto;
background-color: none;
padding-top: 24px;
}
.headerContent {
width: 1024px;
height: auto;
margin: 0 auto;
}
.headerContent a img {
width: 659px;
height: 144px;
margin: 0px auto;
display: block;
}
.nav {
width:750px;
margin:0 auto;
list-style:none;
}
.nav li {
float:left;
}
.nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
.nav ul li{
height: 40 px;
background: #A14F53;
}
.nav ul li{
list-style-type: none;
width: 150px;
float: left;
}
.nav ul li a{
text-decoration: none;
color: black;
line-height: 40px;
display: block;
border-right: 1px solid #CCC;
text-align:center;
}
.nav ul li a:hover{
background-color:#F9C1B5;
}
.headerBreak{
width: 100%;
height: o%;
border bottom: 2px solid #128e75;
}
</style>
</head>
<body>
<div class="background">
<div class="header">
<div class="headerContent">
<a href="#">
<img style="border:0;width:900px;height:250px;" alt=""
title="" src="http://i.imgur.com/5NhCbxu.png">
</a>
</div>
<div class="nav">
<ul id="nav">
<li>Pagina principala</li>
<li>Despre noi</li>
<li>Clientii nostri</li>
<li>Produse</li>
<li>Contacte</li>
</ul>
</div>
</div>
<div class="headerBreak"></div>
</div>
</body>
</html>
You haven't given the nav bar enough width. Change the .nav rule:
.nav {
width:750px; <------- adjust this
margin:0 auto;
list-style:none;
}
I changed your width to 800px instead of 750px and now the menu fits on one line and is centred.
Here's a fiddle: https://jsfiddle.net/macg14fs/
Your .nav is too narrow for the content so it has wrapped. Press F12 on your browser to discover the interactive debug tools. After that, invest some time in learning about bootstrap.
With a Fiddle it would be much easier to know whats the problem, but try this:
#nav {
width: 100%;
}
#nav > li {
display: inline-block;
margin: 5px 5px 5px 5px;
text-align: center;
}
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.
I'm working on a simple navigation bar with a logo on the left, an image at the center and some links on the right.
I want this all to be on one line, next to each other, but for some reason I don't manage to get the links on the same line as the rest.
You can see my work here. This is the code:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
background-color: #D8D8D8;
color: white;
border: 0;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
nav {
background-color: #888888;
}
#links {
height: 30px;
padding: 10px;
margin: 0;
}
#links li {
text-align: center;
margin: 0;
height: 30px;
padding: 0;
padding-left: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
#container {
min-width: 624px;
min-height: 100%;
position: relative;
}
* {
margin: 0;
padding: 0;
}
#links {
overflow: auto;
list-style-type: none;
}
#links li {
height: 25px;
float: right;
margin-right: 0;
border-right: 1px solid #aaa;
padding: 0 20px;
}
#links li:first-child {
border-right: none;
}
#links li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
font-weight: bold;
color: #333;
}
#logo img {
height: 50px;
float: left;
margin-left: 10px;
cursor: pointer;
}
#arrow {
text-align: center;
}
#arrow img {
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
<div id="container">
<nav>
<ul id="logo">
<img src="images/logo_tekst.png">
</ul>
<ul id="arrow">
<img src="images/remove-arrow-hi.png">
</ul>
<ul id="links">
<li class="link">Pro
</li>
<li class="link">Recreative
</li>
</ul>
</nav>
</div>
The code stripped to the bare minimum with just the essentials to make the positioning work, should look something like this:
<div id="container">
<nav>
<img id="logo" src="images/logo_tekst.png" />
<img id="arrow" src="images/remove-arrow-hi.png" />
<ul id="links">
<li> Pro
</li>
<li> Recreative
</li>
</ul>
</nav>
</div>
nav {
position: relative;
}
#logo {
float: left;
}
#links {
float: right;
}
#links > li {
float: left;
margin-left: 10px;
}
#arrow {
position: absolute;
left: 50%;
width: 40px;
margin-left: -20px; /* halve the width of the image */
}
What i did:
I fixed your html, img can not be a direct child of ul, only li can. No need for any extra wrappers anyway, so I just removed them and moved the id's to the image.
to make your logo be always on the left, I just floated it left
to make your menu be always on the right, I just floated it right.
to center that arrow, I went a bit more creative. I positioned it absolute (note the relative on the nav so it will act as the reference) and set the left to 50%. This causes the left edge of the image to be in the exact center. I then moved that edge to the left, by setting the left margin to negative halve the width of the image. If you do not know the width of the image in advance (or if it isn't an image, but some sort of dynamic content) you can also do transform: translate(-50%,0) in stead of the margin-left to get the same effect.
A demo can be found here: http://jsfiddle.net/73ejv2sg/
The problem you have is you only float your logo. You need to float all elements and add padding or width to align. Also add height to nav to display the background.
Per your comments position absolute and set the left:
#arrow {
position:absolute;
left:45%;
}
Here I just set 45% but you could use JavaScript to easily grab the width of the screen and image width and force it to the center every time.
$(document).ready(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
});
$(window).resize(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
}
html {
height: 100%;
margin:0;
padding:0;
}
body {
height:100%;
margin:0;
background-color:#D8D8D8 ;
color:white;
border:0;
padding:0;
font-family: "Helvetica Neue",Arial, Helvetica, sans-serif;
}
nav {
background-color: #888888;
height:55px;
}
#links {
height:30px;
padding:10px;
margin:0;
}
#links li {
text-align:center;
margin:0;
height:30px;
padding:0;
padding-left:10px;
padding-right:10px;
list-style-type: none;
display:inline;
}
#container {
min-width: 624px;
min-height:100%;
position:relative;
}
* {
margin: 0;
padding: 0;
}
#links {
overflow: auto;
list-style-type: none;
float:right;
}
#links li {
height: 25px;
float: right;
margin-right: 0;
border-right: 1px solid #aaa;
padding: 0 20px;
}
#links li:first-child {
border-right: none;
}
#links li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
font-weight: bold;
color: #333;
}
#logo img {
height:50px;
float:left;
margin-left:10px;
cursor:pointer;
}
#arrow {
position:absolute;
left:45%;
}
#arrow img {
height:30px;
margin-top: 10px;
margin-bottom: 10px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<nav>
<ul id="logo">
<img src="images/logo_tekst.png">
</ul>
<ul id="arrow">
<img src="images/remove-arrow-hi.png">
</ul>
<ul id="links">
<li class="link">Pro</li>
<li class="link">Recreative</li>
</ul>
</nav>
</div>
In the #nav ul li, i cant seem to fix the position of the text without changing the size of the block. Whenever I try to use padding, the size of the block changes. How can I move the text without changing the size of the block? Here is the code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
background-color: #FFC0CB;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
overflow: auto;
background-color: red;
margin: 0px;
}
#headTable
{
float:right;
}
#logo
{
background-color: green;
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
font-size: 35px;
padding-top: 20px;
color: black;
float: left;
margin: 20px 50px;
}
#headTable ul li:hover
{
background-color: blue;
color:red;
}
#nav
{
clear: both;
width:100%;
height: 95px;
background-color: purple;
}
#nav ul
{
overflow: auto;/*
background-color: yellow;*/
margin: 0px;
padding: 0px;
}
#nav ul li
{
background-color: black;
color:white;
font-size: 30px;
list-style-type: none;
text-decoration: underline;
margin: 20px;
padding: 10px 10px 10px 20px;
float: left;
/*text-indent: 0px;
*/}
#page
{
float: left;
margin: 10px;
height:700px;
width:700px;
background-color: #FFC0CB;
}
#page p
{
padding:100px 0px 0px 50px;
font-size: 20px;
color: navy;
}
#content
{
height: 1000px;
width: 1334px;
position: absolute;
margin:0px;
background-color: #00B2EE;
}
#top
{
float: right;
position: relative;
margin: 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
#low
{
position: relative;
clear: both;
float: right;
margin:-300px 10px 10px 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Wow</li>
<li>Doge</li>
<li>Such fun</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
You need to set the width for an li element, and wrap the nav text in span tags. Then you can move them left or right and the width of the nav li will not change.
<li><span>Menu</span></li>
<li><span>Blog</span></li>
<li><span>Ins</span></li>
<li><span>BBC</span></li>
<li><span>Contact</span></li>
<li><span>Wow</span></li>
<li><span>Doge</span></li>
<li><span>Such fun</span></li>
#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}
See a working solution here: http://jsfiddle.net/mtruty/73uav/
I am having a simple layout with a fixed left navigation and a centered page, now the issue in on low resolutions the fixed navigation is comping on the content area which I want to prevent, but I am not able to do so.
Demo
Any idea how I can keep my page centered and even the fixed with div just adjacent to it without overlapping my elements when screen resolution is low
What I want is like this no matter whatever resolution it is in, the page should be centered but the navigation should sit right besides the page and shouldn't overlap page
CSS
.page_wrapper {
min-width: 750px;
max-width: 750px;
margin: 20px auto;
border: 1px solid #ff0000;
}
.content_wrapper {
margin: auto;
max-width: 700px;
margin-left: 120px;
}
p,
ul {
margin: 0;
padding: 0;
}
p {
margin-bottom: 20px;
}
#nav {
left: 300px;
list-style: none;
position: fixed;
top: 20px;
}
#nav li {
margin-bottom: 2px;
}
#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 11px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover {
background: #dedede;
}
#nav .current a {
background: #666;
color: #ededed;
}
.current {
background: red;
}
.section {
border-bottom: 5px solid #ccc;
padding: 20px;
}
.section p:last-child {
margin-bottom: 0;
}
From what I can tell, your "left" property on #nav is causing it to always position always 300px from the left margin. Removing that keeps the left nav on the left (instead of 300px from the left).
Instead of:
#nav {
left: 300px;
list-style: none;
position: fixed;
top: 20px;
}
try
#nav {
list-style: none;
position: fixed;
top: 20px;
}
See W3 Schools Left Property for more info.
In response to your comment "that will make position navigation to flow on the extreme left of the page" :
Add a margin-left:20px; property
this can be done by
#nav {
padding-left:20px;
padding-top:30px;
list-style: none;
position: fixed;
top: 20px;
}
Live Fiddle
I've made an example fiddle for you, what you just need is a wrapper div and a content div which is floated to right
Demo
I've changed some of the container div layout and basically you can wrap up the contents in your container
HTML
<div class="main_container">
<nav class="content_navigation">
<ul id="nav">
<li class="current">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
</ul>
</nav>
<div class="right_content">
<div class="section" id="section-1">
<strong>Section 1</strong>
</div>
<div class="section" id="section-2">
<strong>Section 2</strong>
</div>
<div class="section" id="section-3">
<strong>Section 3</strong>
</div>
<div class="section" id="section-4">
<strong>Section 4</strong>
</div>
<div class="section" id="section-5">
<strong>Section 5</strong>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
.main_container {
width: 900px;
min-width: 900px;
margin: 0 auto;
background: #ffffff;
}
.content_navigation {
width: 205px;
position: fixed;
margin-top: 120px;
}
.right_content {
float: right;
width: 675px;
border-left: 1px solid #252525;
margin-top: 25px;
}
#nav {
list-style: none;
}
#nav li {
margin-bottom: 2px;
}
#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 11px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover {
background: #dedede;
}
#nav .current a {
background: #666;
color: #ededed;
}
.current {
background: red;
}
.section {
border-bottom: 5px solid #ccc;
padding: 20px;
}
.section p:last-child {
margin-bottom: 0;
}
use left: 50% with negative left-margin to position the #nav from the middle
jsfiddle
#nav {
left: 50%;
margin-left:-350px;
...
}
I tried to make something resembling what you have in the diagram, making #nav absolutely positioned wrt .left_navigation. Also removed the margin on .content_wrapper since it didn't seem to serve a purpose.
.content_wrapper {
/*margin-left: 120px;*/
}
#nav {
left:-77px;
width:76px;
list-style: none;
position: absolute;
top: -1px;
}
.left_navigation{
position:relative;
}
DEMO