I am trying to make the navigation section of my site responsive but cannot seem to get it to work the way I want to. Best way is to view the fiddle and see what I mean.
Currently when the browser is re-sized the blue div contracts until it meets the black div. The black div remains where it is and scroll bars appear! What I actually want this to do is for the red divs to be pushed left when the black and blue divs touch whenever the window is re-sized. When the window continues to shrink and the red divs are pushed left they will stop moving as soon as they touch the green div (scroll bars to appear).
I have tried converting things to %'s and changed the positioning but just cannot work this out! I need to learn and understand how this works before I am able to continue withe rest of the site.
Any help is much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fluid</title>
<style>
#container{position: relative; margin: 0px auto; width: 100%; max-width: 1000px; border: 2px solid blue;}
#logo-and-nav-bar{position: relative; width: 750px; height: 175px; margin: 0px auto; border: 2px solid black;}
#logo {position: absolute; top: 5px; width: 200px; height: 70px; border: 2px solid green; text-align: center;}
#nav-bar-upper, #nav-bar-lower {position: absolute; margin-left: 36%; width: 470px; border: 2px solid red;}
#nav-bar-upper{top: 5px;}
#nav-bar-lower{top: 65px;}
#nav-bar-upper > ul > li, #nav-bar-lower > ul > li {display: inline; padding: 0 8px 0 8px; list-style: none;}
#blower{position: absolute; top: 150px; left: 600px; border: 2px solid red;}
</style>
</head>
<body>
<div id="container">
<div id="logo-and-nav-bar">
<div id="logo">.jpeg Logo<br />In Here!</div>
<div id="nav-bar-upper">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
<li>Item F</li>
</ul>
</div>
<div id="nav-bar-lower">
<ul>
<li>Item G</li>
<li>Item H</li>
<li>Item I</li>
<li>Item J</li>
<li>Item K</li>
<li>Item L</li>
</ul>
</div>
<div id="blower">Tel: 1234 56789</div>
</div>
</div>
</body>
</html>
Instead of
#logo-and-nav-bar {
width: 750px;
}
#nav-bar-upper, #nav-bar-lower {
margin-left: 36%;
}
use
#logo-and-nav-bar{
width: 750px;
min-width: 680px;
max-width: 100%;
}
#nav-bar-upper, #nav-bar-lower {
right: 0;
}
Demo
Related
Illustrated: how to display a logo contour (children of logo) behind a menu background?
The logo is part of a centered menu but not necessarily at the middle (depends of menu item names), so for me best solution is to still the contour inside the logo div like this:
<img src="background-image.jpg">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>
<div class="logo">
<div class="contour"></div>
</div>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
What I have:
What I want:
I have browsed dozens of solutions for similar issues offered on stackoverflow but none seems to fit… At this point, I tried to set z-index, to move div.contour out of div.logo, to set .contour as pseudo-class :before or :after, to set a position: absolute for .contour or to play with overflow: hidden. Is there a CSS solution (without using JS)?
JSFiddle Sample here
My preferred solution would be working with one background SVG for the dark and light green shape and the orange contour. That background would be centered via CSS.
That whole "contour partially around two different shaped elements" looks to me undoable with normal browser (perhaps some mask magic via CSS...)
Well, you could always trick it, adding first a before pseudoelement to hide the top part of your circle and then add after pseudoelement to cover your circle with another one without border.
like this:
* {
position: relative;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
.menu {
width: 100%;
height: 50px;
position: fixed;
top: 0;
background: darkcyan;
border-bottom: 5px solid orange;
text-align: center;
z-index: 99;
}
.menu ul li {
display: inline-block;
margin: 0 10px;
vertical-align: top;
}
.logo {
width: 100px;
height: 100px;
border-radius: 100px;
background: cadetblue;
}
.anotherclass:before {
content:"";
display:block;
background-color:darkcyan;
height:50px;
width:110px;
position:absolute;
top: -16px;
left: -5px;
}
.anotherclass:after {
content:"";
display:block;
background-color:trasparent;
width: 100px;
height: 100px;
border-radius: 100px;
background: cadetblue;
position:absolute;
top:0px;
left:0px;
}
.contour {
border: 5px solid orange;
left: -5px;
top: -5px;
z-index: -1;
}
<img src="https://images.freeimages.com/images/large-previews/0b3/burning-tree-1377053.jpg" width="100%">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>
<div class="logo anotherclass">
<div class="logo contour"></div>
</div>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
Notice I added another class to your html as you have 2 "logo" classes (parent and child). You may correct this if you like.
If you have problems with the image of your logo now, you could place it trough background-image as a property in the after pseudoelement or if you use html <img> z-index should work probably fine to place it above after pseudoelement.
I'm tring to make a simple drop-down menu, which would be triggered on hover event over some element and stay active as long as the cursor is over that element or is over the dropdown list.
Sample code:
HTML
<div class="header">
<div class="items">
<div class="item">
<span>Caption</span>
</div>
<ul class="items_hidden">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<input type="text">
CSS
.items {
float: right;
position: relative;
}
.item {
text-align: right;
}
.items_hidden {
display: none;
margin-top: 7px;
list-style: none;
z-index: 2000;
width: 80px;
border: 1px solid #f2f2f2;
text-align: left;
padding: 10px;
color: #333;
line-height: 30px;
border-bottom: 3px solid #f2f2f2;
}
input {
width: 100%;
}
JS
$(function() {
$('.items').on('mouseenter', function(e) {
$('.items_hidden').show();
});
$('.items').on('mouseleave', function(e) {
$('.items_hidden').hide();
});
});
I got that working, when the dropdown list is positioned relative, but the problem is once the list is displayed, it causes all following content to move down.
Here is an example: https://jsfiddle.net/2ya06aLo/
Another way would be to position the list absolute, so it wouldn't affect the content below. But in that case the list disappears as soons as I move the cursor out of 'Caption' (in contrast with the first fiddle).
Here is the second example https://jsfiddle.net/8L6ojqLm/
What would be a solution to make the list behave like in 1 and at the same time do not affect the rest of the content like in 2 ?
You can don't use JS
Example
.items {
float: right;
position: relative;
}
.item {
text-align: right;
padding: 10px;
}
.items_hidden {
position: absolute;
right: 0;
top: 20px;
display: none;
margin-top: 7px;
list-style: none;
z-index: 2000;
width: 80px;
border: 1px solid #f2f2f2;
text-align: left;
padding: 10px;
color: #333;
line-height: 30px;
border-bottom: 3px solid #f2f2f2;
}
input {
width: 100%;
}
.items:hover .items_hidden{
display: block;
}
<div class="header">
<div class="items">
<div class="item">
<span>Caption</span>
</div>
<ul class="items_hidden">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<input type="text">
Live JSFiddle - https://jsfiddle.net/grinmax_/8L6ojqLm/1/
Couldn't it be done via pure css?
https://www.w3schools.com/howto/howto_css_dropdown.asp
Maybe this would help.
.navigation {
width: 100%;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
}
.mainmenu a:hover {
background-color: #D90000;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 400px;
}
.submenu{
max-height: 400px;
}
.submenu a {
background-color: #FF4D4D;
}
.submenu a:hover {
background-color: #D90000;
}
.submenu{
overflow:hidden;
display:none;
}
<nav class="navigation"><!-- pocetak navigacije -->
<ul class="mainmenu">
<li>Link</li>
<li class="start">Link
<ul class="submenu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Home</li>
</ul>
</nav>
To take up the comment of CBroe: The problem seems to be the "gap" between the and the element. To remove it you could either
give the "item"-Element a height so that it "reaches down" to the ul-element or
or remove the margin-top of the ul-element
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
so I've encountered a bug that I can't figure out in IE8. I've seen some doozies, but this one might take the cake.
I tried replicating it in Codepen, but we have a lot of code for this so I'll try including the computed styles from IE8.
Using Foundation 5, I have a Top Bar that starts out looking like this:
The dropdown is positioned absolutely, so it obviously shouldn't be stretching out the parent container. It doesn't actually stretch out the parent, but the grandparent. Here's the markup:
<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar >
<section class="top-bar-section">
<ul class="title-area">
<li class="name">
Title
</li>
</ul>
</section>
<section class="links top-bar-section">
<ul class="left">
<li class="divider"></li>
<li>Create
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a>Explore</a>
<ul class="dropdown tab-left" id="explore-menu">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</li>
<li class="divider"></li>
<li>Find
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li class="has-form search">
<form id="header_search" name="search_form">
<input type="search" placeholder="Search" class="search" results=3 id="search_term" name="search_value" maxlength="200" />
<button id="search_submit"></button>
</form>
</li>
<li class="login">
Login
</li>
</ul>
</section>
The computed CSS from IE8:
#global-nav{ //this is the topbar that is stretching
background: #2a2d43;
background-image: none;
color: #666;
display: block !important;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: 80px;
line-height: 60px;
margin: 0px;
overflow: visible;
padding: 0;
position: relative;
vertical-align: baseline;
width: 100%;
}
li.has-dropdown .dropdown{
background: #fff;
box-sizing: border-box;
clip: rect(1px 1px 1px 1px);
z-index: 99;
color: #666;
display: block;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: auto !important;
left: 10%;
line-height: 60px;
margin: 0;
max-height: none;
max-width: 200px;
overflow: hidden;
padding: 0px;
position: absolute !important;
right: auto;
top: 64px;
vertical-align: baseline;
visibility: hidden;
width: auto;
}
li.has-dropdown.hover .dropdown{ //the open dropdown state
clip: rect(auto auto auto auto);
visibility: visible;
}
If you need more information let me know. Thanks in advance.
For reference, I'm testing on a Parallels VM of Win7 with IE8, using IE8 document mode and IE8 Standards.
Do you have a link to view this? I am wondering if maybe you should set the ul to position relative. I think the li is falling back to the first relatively positioned item. Hopes this helps.
If any of the parent elements of the absolute element has position: relative then the absolute is computed relative to that,
try removing the position: relative from the parent containers maybe it could help
also make sure you have correct
<!DOCTYPE html>
at the beginning of your file
It is not an IE8 rendering error, but a coding error/incompatibility somewhere. This demo code shows that IE8 does take absolutely positioned drop-down elements out of the flow:
<!DOCTYPE html>
<head>
<title>Demo IE8 Drop-Down Menu</title>
<meta charset="utf-8">
<style>
#navDivParent { /* = grandparent of the dropdown menu */
background-color: darkblue;
text-align: right;
color: white;
height: 100px;
width: 550px;
}
#navDiv ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
#navDiv ul li {
float: left;
position: relative;
margin-right: 10px;
}
#navDiv ul li ul li {
clear: left;
}
#navDiv ul ul {
display: none;
}
#navDiv ul li:hover ul {
display: block;
position: absolute;
}
#navDiv a {
display: block;
padding: 0 10px 0 10px;
background: yellow;
color: blue;
text-decoration: none;
}
#navDiv #item2SubList a {
width: 175px;
}
#navDiv a:hover {
background: red;
color: white;
}
</style>
</head>
<body>
<div id="navDivParent">This is the grandparent<br> of the dropdown menu.
<div id="navDiv">
<ul>
<li>Menu item</li>
<li>Menu item w/ child
<ul id="item2SubList">
<li>Menu sub-item</li>
<li>Menu sub-item</li>
<li>Menu sub-item</li>
</ul>
</li>
<li>Menu item</li>
</ul>
</div>
</div>
</body>
</html>
.
I haven't made a live demo because JSFiddle, JSBin and the likes don't function in IE8, but I tested it in both a real IE8 and IE9 in IE8 mode.
As the in the question provided code does not contain a CSS :hover state declaration, the coding error/incompatibility might lie in the Javascript that would drive the hover state.
Your dropdown has a max-width of 200px. IE8 doesn't deal well with max-width. Essentially it's treated as a width declaration. Your forcing a width of 200px in IE8. You would need to set it to none...
max-width:none\9; /* IE8 */
I do not think this "bug" has anything to do with the position: absolute; not taking the .dropdown out of the flow. li.has-dropdown also has a .hover state applied to it. There is likely some other styling applied to li.has-dropdown that is causing #global-nav to shift. Perhaps some extra padding is being applied to li.has-dropdown. Unfortunately we don't have all the code to properly debug this.
This is a pure html/css Question, here it goes..
I have a floating div to the right of my page layout, I need it to disappear if my screen size is too small (or if resize the browser window to a smaller setting). Let's say it's something as simple as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout test</title>
<link href="simple.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h1>Welcome</h1>
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</body>
</html>
let's say it has this simple CSS too:
#main {
border: 1px solid black;
width: 800px;
height: 500px;
padding: 7px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 10;
}
#right-div {
border: 1px solid black;
float: right;
width: 200px;
position: relative;
z-index: 9;
}
As of now, if I reduce window size, the div with id of right-div starts to overlap with the "main" div. I need to know how to make it disappear or hide if the screen size is small (or getting smaller).
How can I accomplish this?
Thank you all in advance for your help,
J.
Use Media Queries. Example:
#media all and (max-width: 300px) {
.floated_div { display: none; }
}
jsFiddle Example. Resize the output area until it is smaller then 300px to see the effect.
See this answer for IE compatibility.
Here is a solution if you have a fixed width layout. http://jsfiddle.net/uMVMG/
<div id="container">
<div class="inner">
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</div><!-- .inner end -->
</div><!-- #container end -->
#container {
overflow: hidden;
max-width: 500px;
min-width: 300px;
}
#container .inner {
width: 500px;
}
#right-div {
float: right;
width: 200px;
background: green;
}
#main {
width: 300px;
height: 200px;
background: red;
}