Continuing the question through the title...
My html li has a padding, but when I remove it, the text is positioned as before yet, almost outside of its own container. And I'm just testing, though.
Some view (I'm not allowed to add images yet)... I just want that the text be inside its container.
The respective content is:
(note: the class no-s just removes the ugly selection)
/* Context menu */
.context-menu {
position: fixed;
padding: 4px 0 4px 0;
background-color: #fff;
border: 2px solid #628;
}
.context-menu list {
list-style: none
}
.context-menu li {
display: block;
width: 100%;
padding-left: 15px;
padding-right: 100px
}
.context-menu .base,
.context-menu .second {
display: inline-block
}
.context-menu .base {
float: left
}
.context-menu .second {
float: right
}
.context-menu li .active,
.context-menu li .inactive {
display: inline-block;
font: 600 14px"Segoe Ui", sans-serif
}
<div class="context-menu no-s" style="left: 60px; top: 60px;">
<list>
<!-- A context menu item -->
<li>
<!--Left content-->
<div class="base">
<span class="active">Copy</span>
</div>
<!--Right content-->
<div class="second">
<span class="active">CTRL + C</span>
</div>
</li>
</list>
</div>
you can delete the padding-left (even if necessary padding-right but now not necessary) from here;
.context-menu li {
display: block;
width: 100%;
padding-left: 15px;
padding-right: 100px
}
that's all
or you can use flexbox model for this section.
Are you able to change the padding of the .context-menu?
I changed it to this: padding: 4px 20px 4px 0; and it seems to work
/* Context menu */
.context-menu {
position: fixed;
padding: 4px 20px 4px 0; /* changed right padding */
background-color: #fff;
border: 2px solid #628;
}
.context-menu list {
list-style: none;
}
.context-menu li {
display: block;
width: 100%;
padding-left: 15px;
padding-right: 100px
}
.context-menu .base,
.context-menu .second {
display: inline-block
}
.context-menu .base {
float: left;
}
.context-menu .second {
float: right;
}
.context-menu li .active,
.context-menu li .inactive {
/* display: inline-block; */
font: 600 14px"Segoe Ui", sans-serif
}
<div class="context-menu no-s" style="left: 60px; top: 60px;">
<list>
<!-- A context menu item -->
<li>
<!--Left content-->
<div class="base">
<span class="active">Copy</span>
</div>
<!--Right content-->
<div class="second">
<span class="active">CTRL + C</span>
</div>
</li>
</list>
</div>
Related
I have created a minimal example that represents a simple tabbing system, with tabs on the left and content on the right.
In my example, the bottom position of the tabs influences the positioning of content on the right. This only happens when I clear positioning inside the content block.
This is the minimal example's HTML, including a self-explanatory description in the content block. So what goes wrong is that the line below the clearfix is wrongly positioned. In fact, it's positioned under the left tabs' bottom.
* {
box-sizing: border-box;
}
.clearfix {
clear: both;
}
.nav-tabs {
float: left;
display: block;
list-style: none;
padding-left: 0;
margin: 0 auto 0 0;
width: 20%;
}
.nav-tabs > li {
position: relative;
display: block;
float: none;
}
.nav-tabs > li > a {
position: relative;
display: block;
padding: 10px 15px;
border: 1px solid transparent;
}
.nav-tabs > li.active > a {
border-color: blue transparent blue blue;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .tab-pane.active {
display: block;
}
.tab-body {
position: relative;
border: 1px solid red;
padding: 20px;
width: 80%;
margin-left: 20%;
}
<ul class="nav-tabs">
<li><a>foo</a></li>
<li class="active"><a>bar</a></li>
<li><a>baz</a></li>
<li><a>boo</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane">
<div class="tab-body">
<h1>Foo content</h1>
</div>
</div>
<div class="tab-pane active">
<div class="tab-body">
<div style="float:right">
floating right
</div>
<h1>Bar content</h1>
<div class="clearfix"></div>
<p>
This line is wrongly positioned to the bottom of the tabs left, why? And how can it can corrected?
</p>
</div>
</div>
</div>
I don't know exactly what goes wrong, and therefore how to fix it... To make editing / fixing / trying all a bit easier, here's the JSFiddle.
try this
HTML
<ul class="nav-tabs">
<li><a>foo</a></li>
<li class="active"><a>bar</a></li>
<li><a>baz</a></li>
<li><a>boo</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane">
<div class="tab-body">
<h1>Foo content</h1>
</div>
</div>
<div class="tab-pane active">
<div class="tab-body">
<div class="pull-right">
clearfix
</div>
<h1>Bar content</h1>
<p>
This line is wrongly positioned to the bottom of the tabs left, why? And how can it can corrected?
</p>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.clearfix {
clear: both;
}
.nav-tabs {
float: left;
display: block;
list-style: none;
padding-left: 0;
margin: 0 auto 0 0;
width: 20%;
}
.nav-tabs > li {
position: relative;
display: block;
float: none;
}
.nav-tabs > li > a {
position: relative;
display: block;
padding: 10px 15px;
border: 1px solid transparent;
}
.nav-tabs > li.active > a {
border-color: blue transparent blue blue;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .tab-pane.active {
display: block;
}
.tab-body {
position: relative;
border: 1px solid red;
padding: 20px;
width: 80%;
margin-left: 20%;
}
.pull-right{
float:right;
}
demo
I have the following Html file, together with the CSS file. When I hover over the Main Navigation bar to open the drop-down menu, the parent width enlarges together with the drop-down menu. How can I fix this? If I set position: absolute to the dropdown menu, it will not work at all.(hovering doesn't trigger the dropdown). I have put my code here: https://jsfiddle.net/L67oxmqc/2/ .
Thank you!
Code:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
float: left;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
/* position: absolute; */
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>
Just update in your style may it works for you
div.menu ul {
background-color: #a9bcba;
border-radius: 5px;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
div.dropdowncontent {
background-color: #a9bcba;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
display: none;
position: absolute;
width: 115px;
}
Here is a JSFiddle of the solution I mention below: https://jsfiddle.net/2sy0dn6w/
Fixing your solution is incredibly simple. You want to use position: absolute; for your div.dropdowncontent CSS class. You also want to make your parent li tag have position: relative; to keep your div.dropdowncontent constrained within the parent li. And then you have an issue with your primary ul tag with using overflow: hidden. This would prevent your dropdown from being seen. And I understand why you are using overflow: hidden; - you're using it as a clearfix. But in this case, it is a problem because it hides your dropdown. So instead we would want to use :before with the ul for the clearfix. The steps for applying the fixes are below.
First, remove overflow: hidden; from your css for div.menu ul {}. This will create the following:
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
/* overflow: hidden; */
background-color: #a9bcba;
/*z-index: -1; */
}
Next, right after the div.menu ul {} CSS, add:
div.menu > ul::after {
clear: both;
display: table;
content: ' ';
overflow: hidden;
}
Lastly, at the very bottom of your CSS, add the following (you can even move each of the below to their designated declarations you already have in your CSS. The reason I'm adding this separate is so that it's more obvious what I included to give you the outcome you're looking for):
div.menu > ul > li {
position: relative;
}
.dropdowncontent {
position: absolute;
top: 100%;
}
li.dropdown:hover div.dropdowncontent {
display: block;
}
You have to use position absolute, you cant see it working because ul has overflow:hidden;
add this css :
.menu ul{
overflow:visible;
}
.menu ul li.dropdown{
position : relative;
}
.menu ul li.dropdown .dropdowncontent{
position : absolute;
top:38px;
left:0;
}
try this in your css:
add .menu class and remove bg-color from ul
.menu {
background-color: #a9bcba;
height: 45px;
}
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
//background-color: #a9bcba; <--- remove background
/*z-index: -1; */
}
Try this code below
Remove overflow hidden
div.menu ul{
...
overflow: hidden;
}
Add position absolute
div.dropdowncontent {
...
position: absolute;
}
replace float left
div.menu li{
/* float: left; */
display: inline-block;
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
display: inline-block;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
position: absolute;
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>
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 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
Here is my CSS:
<style>
ul, ol, dl { padding: 0;
margin: 0;
}
#navWrapper {
background:#3C6;
height: 90px;
float: left;
position: relative;
width: 600px;
}
#nav {
margin: 0 0 0 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
}
#nav li {
float: left;
list-style-type: none;
}
#nav li a, #nav a:visited {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover, #nav a:active, #nav a:focus {
color: #c00;
background-color: #fff; }
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#wrapper {
width: 965px;
background: #FFFFFF;
margin: 0 auto;
}
a img {
border: none;
float: left;
}
</style>
Here is my HTML:
<div id="wrapper">
<div class="header"><img src="" alt="Insert Logo Here" name="Insert_logo" width="300px" height="90px" id="Insert_logo"/>
<div id="navWrapper">
<div id="nav">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<!-- end #nav --></div>
<!-- end #navWrapper --></div>
<!-- end .header --></div>
<div class="clearfloat"></div>
</div>
I am trying to create a navigation bar that sits on the bottom of its wrapper. The only way I can think to do this is using absolute positioning and setting the bottom to 0. But the problem is I have to set a width the div inside of the wrapper, which is what my code reflects now. I want the width to be dynamic and change with the width of the navigation bar while it still sits on the bottom of the wrapper, aligned to the bottom of the header image. How can I do this?
You can set #nav to 100% width, and the four items to 25% width each.
fiddle
If you mean something else, leave a comment.
Here are the exact changes I made.
#nav {
width: 100%; /* Add: */
}
#nav li {
width: 25%; /* Add: */
}
Based on the fiddle you provided, the left float on the navWrapper is causing problems. Removing it hides the logo, which is floated left. To fix this, put a clearfix before the navWrapper, and after the logo image.
updated fiddle