I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div .dropdown (grey colored) appears whenever the parent div .content-small (green colored) is hovered upon. Please note, that I have used the .max-width property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.
Now, what I want to do is that I want to increase the max-width of the child div dropdown. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.
I know that this can be resolved by replacing max-width with only width in the .dropdown class. But if I do that, then the child div dropdown will not scale with the browser window. So in any case, I have to use .max-width property for all divs.
I also don't want to use media queries at this stage. In totality, this is what I am looking for:
I want to increase the width of the dropdown child div .dropdown, I also want it to be scaled along with the browser windows like all other div's (max-width)
I don't want to use media queries at this stage, since I am trying to practice with plain CSS
I don't mind if the .dropdown div DOES NOT remain the child of the parent .content-small (if a possible solution needs it that way)
Would appreciate a solution for this.
* {
box-sizing: border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}
.content-small:hover .dropdown{
visibility: visible;
}
.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>
Hopefully this does not interfere with what you are trying to accomplish, but what about restructuring your code a little bit:
HTML
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container" style="height:60px;padding-top:10px;">
<div class="dropdown"></div>
</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}
.dropdown {
background-color: rgba(214,214,214,1);
border: 3px solid rgba(255,0,0,1);
max-width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;
}
And here is:
UPDATED JS FIDDLE
[EDIT]
The + in the css select is saying to look for elements after the first criteria. So, in this case, the css is saying, when you hover over .content-small, it then targets the element AFTER .content-small with .dropdown and applies the css to it. Although it is not the most clear, here is a link of some documentation on css selectors
[SECOND EDIT]
I changed the code above to wrap the dropdown in a container and then set it so on container:hover it alters the visibility of .dropdown the same way, making it persist as visible if you are hovering over either. The reason I had to introduce a container is to give it that spacing between .dropdown and .content-small - which you can see I did with padding-top: and not margin-top: because margin would not have worked with the :hover
when you tell: width:100%; to an absolute child, it takes innerwidth and won't mind the borders,why should it overflow :) ?
You may size it with coordonates like you did for left, use right as well and drop the width:100%;
max-width will still be efficient and you may use margin:auto as well if you wish.
* {
box-sizing: border-box;
}
a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
}
a:hover {
color: rgba(0, 0, 255, 1);
}
html,
body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 1);
padding: 0px;
}
.wrapper {
height: 220px;
/*demo purpose */
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204, 204, 204, 1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0, 255, 204, 1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0, 0, 0, 1);
top: 5px;
}
.content-small:hover .dropdown {
visibility: visible;
}
.dropdown {
box-sizing: border-box;
max-width: 250px;
height: 50px;
background-color: rgba(214, 214, 214, 1);
position: absolute;
border: 3px solid rgba(255, 0, 0, 1);
top: 47px;
left: -3px;
right: -3px;
margin: auto;
visibility: visible;
}
.wrapper + .wrapper .dropdown {
max-width: 50px;
font-size:0.75em;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">100% + border
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">tiny
</div>
</div>
</div>
</div>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
I am having trouble adding gray color to the left of that div.
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center"> © Copyright 2016. All Rights Reserved </p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Please check link below for full code:
JS Fiddle
What I need is:
A 60 deg angle requires uneven borders.
.footer-nav-left:after { /* note, now an 'after' */
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent; /* half border-top */
position: absolute;
top: 0;
left: 100%;
}
For the grey background extending to the left side of the viewport, use another pseudo-element
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: inherit;
position: absolute;
top: 0;
right: 100%;
}
body {
margin: 0;
}
.full-width {
background-color: black;
overflow: hidden;
/* no scroll bar */
}
.footer-nav {
min-height: 80px;
width: 480px;
margin: 0 auto;
}
.footer-nav-left {
background-color: gray;
min-height: 80px;
position: relative;
float: left;
color: #FFFFFF;
z-index: 1001;
}
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: green;
/* for demo purposes: use inherit for production */
position: absolute;
top: 0;
right: 100%;
z-index: -1;
}
.footer-nav-left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
left: 100%;
}
.footer-nav-left p {
margin-top: 30px;
font-size: 15px;
}
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center">© Copyright 2016. All Rights Reserved</p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Note: the angled border only works (as would any) because the height of the parent is known. Percentage width borders are not yet possible.
Like this?
New css:
.footer-nav{
min-height: 80px;
width:100%; // <-- changed
margin:0 auto;
}
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left: 80px; // <-- changed
}
Updated fiddle
Not sure about your border issue;
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left:80px;
}
.footer-nav{
min-height: 80px;
width:960px;
margin:0 auto;
position:relative;
}
.footer-nav-left{
background-color:gray;
min-height:80px;
position: absolute;
left:0;
color:#FFFFFF;
z-index:1001;
}
How can I get a fixed Header with a fixed Sidebar and a Content Div?
What i did so far:
body {
margin:0;
}
.header {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 200px;
background: #303030;
}
.content {
padding: 10px;
width: 810px;
margin: auto;
min-height: 30px;
box-shadow: 0px 1px 5px;
background-color: rgba(255,255,255,0.7);
margin-left: 20%;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
But at the moment it's not stable and a bit weird. Means for example that the Content Div is floating under my sidebar and else.
Does someone know a better and more effective was to solve this?
I Think it will help you, For u'r understanding i have added red border for content div. Only I changed the CSS.
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 200px;
border: 2px solid red;
right: 0px;
}
body {
margin:0;
}
.header {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 200px;
background: #303030;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 200px;
border: 2px solid red;
right: 0px;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
There are minor changes in your CSS like:
.content {
padding: 10px;
width: 810px;
min-height: 30px;
box-shadow: 0px 1px 5px;
background-color: rgba(255,255,255,0.7);
margin-left: 200px;
margin-top: 40px;
}
.header{top:0}
This will do the trick. If not please comment.
I have a following div structure
<div id="wrapper">
<div id="header">
<div id="storeFinder">
/* html goes here */
</div>
</div>
</div>
now when i zoom in or out from the browser, "storeFinder" moves right / left ...
I have searched online and found that need a wrapper around the "storeFinder" so that it does not move with the <body> and specifying the min-width also can solve the problem.
in my case, i already have a wrapper div and specifying the min-width also dint help me.
looking for help here very badly.
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storefinderdropdown {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try putting a position: relative on the parent. That will confine the children's positions to be absolute according to the parent and not according to the document. This article gives more details and examples: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your correct CSS code Working Jsfiddle here
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storeFinder {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0px;
left:342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try this:
#storefinderdropdown {
position: absolute;
top: 8px;
left: 342px; /*Add This*/
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0; /* Change This*/
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
May be this will be helpful for you.