I am trying to build menu bar for my first website. On the window resolution of 1280x800 menu is seen properly. However, when scaling it down, Menu starts aligning incorrectly.
HTML:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}"/>
<div class="menu">
Buy Cherry
</div>
CSS:
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: fixed;
top: 0%;
left: 0%;
right: 0%;
background-image: url('http://i.imgur.com/kMdEoP6.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('http://i.imgur.com/7d2V63b.png');
width: 249px;
height: 55px;
}
.shopbtn {
position: fixed;
font-size: 12pt;
right: 10%;
left: 23%;
top: 5%;
white-space: nowrap;
color: black;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
float: right;
}
.shopbtn:hover {
color: darkred;
I have tried adding margin-left and margin-right with auto statement on all the elements, but the menu would mess up and still would go incorrectly when resized.
What is solution for keeping navigator proper when scaled? Is there any layout that could solve the problem? Can this be done without use of Javascript?
Just remove position fixed from both logo and shopbtn and add float left as below,
.logo {
float:left;
}
.shopbtn {
background:#666666;
float:left;
margin:20px;
}
Now adjust your padding and margin accordingly.
You can add min-width to the <body> tag and set your desired width size. It can help maintain your page size whenever you try to scale it down.
body {
background-color: lightgrey;
min-width: 800px;
}
Edit: Try changing your .logo's position to relative.
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: relative;
top: 0%;
left: 0%;
right: 0%;
background-image: url('images/logo.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('images/logohover.png');
width: 249px;
height: 55px;
}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}" />
<div class="menu">
Logo
Buy Cherry
</div>
Update: Change the .logo's position to relative. Maybe this is the one that you are looking for.
Related
Currently, I'm working on simple card recipe on VueJS and have a little problem. While mouse is on image, I would like to show diffrent properties of my recipe(like in this picture https://pasteboard.co/JrWe5JB.png). Firstly I darken a little bit my image and trying to display symbol on this(while mouse is on ofc), but it doesn't seem work. Here is my code:
CSS
.imageRecipeContainer
{
position: relative;
height: 200px;
min-width: 100%;
}
.imagePerfumeRate
{
position: absolute;
display:none;
left: -9999px;
right: -9999px;
margin: auto;
height: 200px;
min-width: 100px;
}
.card-image {
position: absolute;
display:block;
left: -9999px;
right: -9999px;
margin: auto;
height: 200px;
min-width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.card-image:hover
{
-webkit-filter: brightness(30%);
filter: brightness(30%);
}
.card-image:hover .imagePerfumeRate
{
display: block;
}
and code in Vue:
<div class="imageRecipeContainer">
<img class="card-image" :src="card.image"/>
<img class="imagePerfumeRate" :src="require('../assets/2PointPerfumeRate.svg')"/>
</div>
I have a bouncing down-arrow and want to hide it when I reach the footer after scrolling down, and show it again when I scroll back to the top. How can I do that without any JavaScript?
.bounce {
position: fixed;
left: 95%;
bottom: 0;
margin-top: -25px;
margin-left: -25px;
height: 50px;
width: 50px;
background: #65C178;
background-size: contain;
opacity: 0.8;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
-webkit-animation: bounce 1s infinite;
-webkit-overflow-scrolling: touch -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 750ms ease-in-out;
-ms-transition: all 750ms ease-in-out;
-o-transition: all 750ms ease-in-out;
transition: all 750ms ease-in-out;
overflow: hidden
}
#-webkit-keyframes bounce {
0% {
bottom: 5px;
}
25%, 75% {
bottom: 15px;
}
50% {
bottom: 20px;
}
100% {
bottom: 0;
}
}
<div class="bounce"></div>
as far as i know there is no css-only solution. you'll need javascript to determine the scroll position. The only CSSonly way i could think of, is to put the footer in front of the arrow (with z-index). so it gets hidden behind it.
I have ben boxing with this issue for ages now.
I have a parent div "wrapper" containing a child div "sidebar-wrapper" consisting of an ul with li in it.
I want "sidebar-wrapper"s height to fit "wrappers" height. My issue is when i set its height to auto goes 0.
My HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
a lit of these li's
</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
Whatever Content!!
</div>
</div>
</div>
</div>
My css:
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:400px;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
See this fiddle
The CSS used is as follows
html,body{
height: 100%;
}
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
I've given height:100% for html,body,wrapper and body-content..
Setting height to auto just sets the height equal to the height of the contents of the div..here i think you want the height to be equal to the wrapper..so you'll have to set it to 100%.
and this is how can i see your website after making the specified changes..
Change the sidewrapper height to 100% and give the wrapper a height: see fiddle: See fiddle
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: auto; /* example height */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
Set the parent div's position to relative and children div's to absolute:
#wrapper {
...
...
/**** added css ****/
position:relative;
/*********************/
...
...
}
Edit 1
as you commented, I came to learn that you want the sidebar to available throughout the page regardless the height of the page.
If that is the case then "wrapper" div has nothing to do with.
Just set the position of "sidebar-div" to "fixed" and give proper top and bottom margins according to your page header and footer margins:
and set the top and bottom of child wrapper to 0:
#sidebar-wrapper {
...
...
/**** added css ****/
position:fixed;
top:10px;
bottom:10px;
/*********************/
...
...
}
Here's the updated demo JS fiddle link:
Updated Demo JS Fiddle Link
Hope that helps!
i am trying to animate a div when hovering on another div. Ihave following code
html
<div>
</div>
<div class="content">
</div>
css
div {
height: 100px;
width: 100px;
background: red;
transition: all 0.4s ease-in-out;
}
.content {
height: 20px;
width: 20px;
background: green;
display: none;
}
div:hover + .content{
display: block;
margin-top: -100px;
margin-left: 50px;
}
What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position, when the user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english
jsfiddle-> http://jsfiddle.net/fTAUk/1/
You need to wrap the content in the div and use a child selector. Note I gave the larger div an id as well. Here is the css:
JS Fiddle
#box {
height: 100px;
width: 100px;
background: red;
position: absolute;
transition: all 0.4s ease-in-out;
}
#content {
width: 20px;
background: green;
height: 0;
transition: all 0.4s ease-in-out;
position: margin-top: -100px;
margin-left: 50px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 20px;
}
I'm trying to create simple auto-hide menu/header with css. I use transition but I think this is not a point here.
When I hover header is should slide down and show whole content, when I move mouse away it should slideup. It works for me. I want also screen content to expand when header is slidedup. This is mayor problem. The only way I know to have div expanded on whole page (screen) is to fix its top, bottom, left & right. It does not work when top value is changing.
Please look at my code example:
http://jsbin.com/ahamid/2/edit
The green part is problematic. I tried to fix it with changing top value on hover - but it does not work when mouse is outside of content & outside of header too.
Below is code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main">
<div id="head">
<span> header </span>
</div>
<div id="content">
<span>
test content
</span>
</div>
</div>
</body>
</html>
and css:
body {
position: relative;
}
#main {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
}
#head {
display: block;
height: 50px;
top: -44px;
right: 0px;
left: 0px;
background-color: #fcc;
margin: 0px 3px;
position: absolute;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover {
height: 50px;
background-color: red;
top:0px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content {
background-color: cfc;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 3px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#head span {
color: black;
font-weight: bold;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover span {
color: yellow;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content:hover {
top: 6px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
I think that the problem is that you set the #content as you want it to be on hover.
What you really want is that it is always that way, and only change it (downwards; increasing top) in the hover of the #head
Change the #content to:
#content {
background-color: cfc;
.....
top: 6px;
.....
}
and modify the top in the hover of the head:
#head:hover ~ #content {
top: 50px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
You can do that because head and content are siblings, so you can use the sibling selector.
This way it behaves correctly, the only strange thing comes from the transitions timing being different, but you can manage this :-)