I have a nav bar in a div and I need the nav bar to be fluid. The table that it is in is based on percentage (100%) with a min width of 800px. What I think I need is for the images to be resizable based on the main container size. Each image (home, faq, testimonials...). I want to the image width and height to shrink when the window is resized down to the smallest (800px) so that it will all still fit in one line).
#nav-container {
height: 80px;
padding-left:10px;
overflow:auto;
}
ul#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul#nav li a {
background-position: left top;
background-repeat: no-repeat;
display: block;
text-indent: -9000px;
position: absolute;
}
ul#nav:hover li a{
background-position: left bottom;
}
ul#nav li a:hover{
background-position: left center;
}
ul#nav li a span{
background-repeat: no-repeat;
display: none;
position: absolute;
}
ul#nav li a:hover span{
display: block;
}
ul#nav li a.home {
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 0%;
}
ul#nav a.custom{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 13%;
}
ul#nav a.faq{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 26%;
}
ul#nav a.testimonails{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 40% ;
}
By giving the "left" a percentage instead of a the distances between the buttons will change when the window is resized. However, I need to have a minimum distance between the buttons so that when the window goes to its smallest (800px) there is still a distance between the buttons, but when the window is maximized the distance isn't too great.
You can set the min-width/min-height and max-width/max-height of elements in CSS.
W3schools - CSS Dimension
eg:
img
{
min-width:150px;
}
You could try using padding or margins to maintain distance between buttons, rather than using 'left'.
CSS Margins and Padding
Please provide a live demo for a more specific solution. I recommend using a service such as jsfiddle.net.
I hope this helps.
Related
I was wondering if there was any way to achieve this look for navigation hover with CSS? I've tried using a box-shadow effect, but the blur effect would bleed to the sides. As shown in the image, I really want the cut-off look along the edges as well as the gradient applied ONLY to the bottom edge.
Also, this doesn't need to be achieved with CSS; JS or JQ is acceptable.
Here is a jsFiddle that should do what you're asking for.
Here's the code:
body {
background: #e8e8e8;
}
nav {
background: #DEC8A0;
height: 50px;
position: relative;
}
nav:before {
width: 100%;
height: 16px;
background-image: linear-gradient( 25deg, transparent 0%, transparent 50%, #DEC8A0 50%, #DEC8A0 100% ),
linear-gradient( -25deg, transparent 0%, transparent 50%, #DEC8A0 50%, #DEC8A0 100% );
background-size: 28px 16px;
background-repeat: repeat-x;
position: absolute;
bottom: -16px;
left: 0;
display: block;
content: "";
}
nav a {
display: block;
float: left;
width: 100px;
height: 50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
nav a:hover {
box-shadow: inset 0px 4px 0px purple;
}
nav a:hover:before {
width: 100%;
height: 100px;
background: linear-gradient( purple, transparent );
display: block;
content: "";
position: absolute;
z-index: -1;
}
<nav>
<a>About</a>
<a>Other</a>
</nav>
This is a bit intense, so I'll walk you through the various things we're doing:
To accomplish the interesting cutout border, we use gradients applied to the background of the :before pseudo-element of the nav. You can use any angles you want -- -45 and 45 degrees will make really sharp zigzags, and anything below will do nice, gradual angles like we have in this example.
Then, to accomplish the hover effect: there are two components at work. To get the top part of the hover effect, I use an inset box-shadow that is the same color as the start of the gradient. Then, to get the gradient, I use the :before pseudo element of the nav a, which has a height greater than the link itself, and also a lower z-index than the nav element so it sits below.
Finally -- if you're not familiar with it, I'm using flexboxes to center the navigation text vertically.
This all adds up to the effect you're (hopefully) looking for!
EDIT: In case you have fluid width links, you just need to set the width of nav a to auto and add the desired padding on the ends:
nav a {
display: block;
float: left;
width: auto;
padding: 0 20px;
height: 50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
Keep in mind that when doing this, you need to set left: 0 on the :before pseudo-element since we need it to stick to the left of the link:
nav a:hover:before {
width: 100%;
height: 100px;
background: linear-gradient( purple, transparent );
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
}
Here is an updated fiddle with all of this added in.
Perhaps this is what you want: Fiddle
I assume that your HTML looks like that. What you need is to make a link displayed as inline-block (so you can set the width and height of the link), set the line-height the same with the navigation bar height, then set the height of the link to some number higher than the navigation bar height, then use CSS hover to make the link have some background-color from some color to transparent
*Note: this will have some browser compatibility issue because some older browser doesn't support CSS3 Gradients
body {
background: blue;
}
nav {
width: 100%;
height: 50px;
margin: 20px 0 0;
background: #919924;
}
a {
padding: 0 10px;
display: inline-block;
line-height: 50px;
height: 125px;
}
a:hover {
background: -webkit-linear-gradient(red, transparent);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, transparent);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, transparent);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, transparent);
/* Standard syntax */
}
<nav>
<a href="#">
My Cats
</a>
<a href="#">
My Dogs
</a>
<a href="#">
My Pets
</a>
</nav>
EDIT:
If you want the gradient to apply on the bottom edge, then you can change the CSS by adding a:after for the gradient effect like this: Fiddle
you need to make the link to position: relative, then create a a:after with position: absolute and z-index: -1
*Note: For :after to work, you need to add content: '' or else it won't be created
body {
background: blue;
}
nav {
width: 100%;
height: 50px;
margin: 20px 0 0;
background: #919924;
}
a {
padding: 0 10px;
display: inline-block;
line-height: 50px;
position: relative;
}
a:after {
content: '';
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 150px;
z-index: -1;
}
a:hover:after {
background: -webkit-linear-gradient(red, transparent);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, transparent);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, transparent);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, transparent);
/* Standard syntax */
}
<nav>
<a href="#">
My Cats
</a>
<a href="#">
My Dogs
</a>
<a href="#">
My Pets
</a>
</nav>
I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}
I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}
I am trying to make my page look like the Facebook Android app. The app can be summarized as having a 3 column layout with only the central column having the header (there is no footer, but in my requirement I also need a footer).
This can be shown in the image below
The red and blue div's are the left and right side-bars. The green and purple div's are the center div. The purple div's are the header and footer div's and would be sticking to the top and bottom of the page respectively.
One more requirement is there will be buttons on the header (top purple) to hide and show the left and right sidebars. Initially only the center div will be visible and the rest can be called into view as and when required. Here is my code till now. (I am not able to get the width for the center div)
HTML Code
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="leftBar" class="main">Left Bar</div>
<div id="content" class="inner">
<div id="header">Head</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>
CSS
body{
margin: 0px;
}
div.inner{
height: 500px;
width: 50%;
background: red;
}
div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}
#leftBar{
float: left;
}
#content{
position: relative;
height: 100%;
float: left;
}
#rightBar{
float: right;
}
#header{
position: fixed;
top: 0px;
background: blue;
}
#body{
margin-top: 40px;
position: relative;
}
#footer{
position: absolute;
bottom: 0px;
}
I have also added the JavaScript code in the fiddle linked below
http://jsfiddle.net/mv6Bj/1/
The width should be such that the center div is full 100% width of the screen and when the right/left toggles come into the picture they should come to their position and push the center div to the left or right respectively. This is as per the standard Facebook app functionality.
These are the issues I am getting right now
The center div is not 100% and neither does it scale as elements appear and disappear
The height of the center div is not 100% (it is on Chrome, but strangely it is not on JSFiddle)
When I click on left, the leftBar disappears and the content div moves to the left but the header div remains where it is.
As per my understanding, I have updated the fiddle.
Working Demo
I have used display:table propery. You can refer this or this
html, body {
margin: 0px;
min-height:100%;
height:100%;
}
#main {
min-height:100%;
display:table;
width:100%;
height:100%;
}
#leftBar, #rightBar {
background: lime;
width:100px;
display:table-cell;
}
#content {
min-height: 100%;
display:table-cell;
background: red;
}
#header {
background: blue;
height:10%;
}
#body {
min-height:80%;
overflow:hidden;
}
#footer {
background: magenta;
height:10%;
}
Hope this works for you.
you can checkout this fiddle i made some changes in your css accordingly.
body {
margin: 0px;
}
div.inner {
height: 500px;
width: 50%;
background: red;
}
div.main {
background: lime;
bottom:0px;
top:0px;
overflow: hidden;
position: absolute;
width:20%;
}
#leftBar {
float: left;
}
#content {
position: absolute;
height: 100%;
top:0px;
right:0px;
width:60%;
left:20%;
float:left;
}
#rightBar {
float: right;
width:20%;
background: lime;
top:0px;
bottom:0px;
left:80%;
position:absolute;
}
#header {
float: left;
position: fixed;
top: 0px;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
#body {
margin-top: 40px;
position: relative;
}
#footer {
position: absolute;
bottom: 0px;
position: fixed;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
http://jsfiddle.net/mv6Bj/3/
I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance
Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}
You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other
How can I display an image or text whenever I hover over an image? Can you guys help me?
An example:
This actually isn't complicated at all... Use a similar HTML structure as below and just change the display property of the span on hover.
http://jsfiddle.net/kkxfk/2/
<ul>
<li>Link Title<span>Link Desc.</span></li>
</ul>
Use absolute positioning to position the span where you want it.
ul li a span {
display: none;
}
ul li a:hover span {
display: block;
position: absolute;
}
i used it with my own idea and get fully satisfied ,you have to make 2 images, first non-texted and second with your text and hower on them..... try it.....
<style type="text/css">
.leftPan{width:200px; float:right;; margin-top:2px}
#c1 {
margin:6px;
border: thin solid black;
width: 200px;
height: 200px;
background: url(1.jpg) no-repeat;
display: inline-block;
}
#c1:hover {
background: url(2_photo.jpg) no-repeat;
}
</style>
Use a background-image on the a element.
You can then control when it's visible with css
a:hover {
background-image: url(url/to/img);
}
Like this
html
<nav>
Räätälöity-toimitus
<img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" />
</nav>
css
nav {
position: relative;
display: inline-block;
}
a {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 7;
}
a:hover {
background-image: url(http://placehold.it/50x50/E8117F/E8117F/);
background-repeat: no-repeat;
background-position: top right;
}
http://jsfiddle.net/UpGKf/