I have a navbar that contains a div, i need to do it like instagram.com that when i resize the window; the inside element stays always visible.
Is there a certain strategy in CSS to do the same thing?
CSS:
.navbar {
position: fixed;
background-color: #039D6E;
width:100%;
height: 55px;
white-space: nowrap;
}
.subNav{ /* Inside Div of the navbar that always need to be visible */
height:55px;
width:auto;
display: inline-block;
position: relative;
left:25%;
white-space:nowrap;
padding: 12px;
}
Just give .subNav a fixed width, for example width: 150px;.
See test fiddle below:
.navbar {
position: fixed;
background-color: #039D6E;
width:100%;
height: 55px;
white-space: nowrap;
padding: 0px;
margin: 0px;
}
.subNav{ /* Inside Div of the navbar that always need to be visible */
height: 51px;
width: 150px;
resize:none;
border: 2px solid red;
position: relative;
left:25%;
white-space:nowrap;
//padding: 12px;
margin: 0px;
}
<div class="navbar">
<div class="subNav">
</div>
</div>
Related
I have multiple images with different images which I need to display within a overview grid. The images do have totally different dimensions and ratios and the wrapper for these images is always the same height and width.
I'd like to position the images always within the center of the wrapper but that doesn't work.
I use that for the image
.content_page .slide_content .product img {
/* max-height: 100%; */
height: auto;
width: 100%;
margin: auto;
float: none;
border: none;
}
and for the wrapper that one
.content_page .slide_content .product {
width: 27%;
float: none;
display: inline-block;
margin: 30px 3%;
position: relative;
height: 400px;
overflow: hidden;
border-top: 1px solid #121224;
}
Very small or wide images now do get aligned at the top of the wrapper as margin:auto doesn't seem to work. What can Id do there?
.content_page .slide_content .product {
width:<some width>;
height:<some width>;
position:relative;
}
.content_page .slide_content .product > img {
max-width:100%;
max-height:100%;
position:absolute;
left:0; right:0; top:0; bottom:0;
margin:auto;
}
Set margin left and right as auto and use vertical align middle
.content_page .slide_content .product img {
/* max-height: 100%; */
height: auto;
width: 100%;
display:inline-block;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
float: none;
border: none;
}
I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized. I need also to put in the page others div with others images. I want the images align in the bottom side.Sameone help me please?
This is the code example.
.box{
display: inline-block;
position: relative;
bottom:100%;
width: 100%;
margin: 5% 5% 0 0;
font-size: 12px;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
img {
max-width:100%;
height:auto;
border:1px solid black;
text-align:center;
}
.content{
/* Positioning */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Styling */
border:1px solid;
padding: 30px;
text-align: center;
vertical-align: center;
text-transform: uppercase;
color: #fff;
}
<div class="box">
<div class="content">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
</div>
</div>
strong text
Just add this to the img:
See fiddle https://jsfiddle.net/16q2xr8k/27/
img {
width: calc((100% / 3) - 2px);
height: auto;
border: 1px solid black;
text-align: center;
}
In my navigation I have a protruding red box. I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out among the other elements I put in the black box. The problem is that it's margin is also effecting the layout of separate elements' children bellow it. When I add a negative margin to the child elements of the section bellow it does overlap but I want the red box to be on-top. I use z-index and it doesn't seem to work.
Here's my example on Jsfiddle:
http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
To use z-index, you need to specify a position (like absolute, fixed, or relative).
And the last line written is wrong:
z-index = 99;
The correct way to write it is:
z-index: 99;
How about: http://jsfiddle.net/1qsuvhnd/30/
change the ribbon to position: absolute; and fix the z-index = typo :D
Now you don't need that margin hack!!
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index: 99; /* take that equal out and make it a colon */
position: absolute; /* position: absolute to the rescue!!!! */
}
You need to specify a position CSS rule for the nav div for the z-index to work correctly, like this:
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index:99;
position: relative;
}
Here is the new jsFiddle link:
http://jsfiddle.net/1qsuvhnd/54/
I got 3 div's side by side. The leftmost div have fixed size: 60px;
The other two divs are suppose to fill the rest of the screen.
The complicated part is that the middle and right div are supposed to contain scrollable tables. As of now, I have to scroll the page to get to the bottom of the table.
Here is a picture of the current look:
As you see, I got a menu on the left sided div (the yellow border).
The two red bordered divs are tables.
Issue 1: The right-most table which contains the songs doesnt fill the rest of the screen.
Issue 2: I cant get the tables (Playlists and the table of songs) to be scrollable. In other words, I want them to 'end' at the bottom of the page and have a scrollbar inside the tables tbody or something like that.
This is the code:
.div_container
{
top: 0;
bottom: 0;
border: 1px solid #0000FF; /* blue */
margin-top: 87px;
}
.div_menu
{
width: 60px;
background: #111111;
position: fixed;
float: left;
border: 1px solid #F7FE2E; /* yellow */
}
.div_playlists
{
width: 25%;
height: 100%;
top: 0;
bottom: 0;
margin-left: 60px;
float: left;
border: 1px solid #DF0101; /* red */
}
.div_tracks
{
max-width: 60%;
height: 100%;
float: left;
margin-left: 10px;
border: 1px solid #DF0101; /* red */
}
And for the tables:
table.playlists
{
width: 100%;
height: 100%;
text-align: center;
float: left;
background: #181818;
border-collapse: collapse;
}
table.playlists tbody
{
font-size: small;
overflow: auto;
width: 100%;
height: 100%;
}
table.tracks
{
width: 100%;
height: 100%;
text-align: center;
float: left;
background: #181818;
border-collapse: collapse;
}
table.tracks tbody
{
font-size: small;
overflow: auto;
width: 100%;
height: 100%;
}
The HTML:
<div class="div_container">
<div class="div_menu"></div>
<div class="div_playlists"></div>
<div class="div_tracks"></div>
</div>
Sorry for the noob question, I should probably use a bootstrap template or something, but I couldn't find any free templates that matched my design interest.
This is just a simple case of using position:fixed, as in this Fiddle example:
The CSS is the only interesting part:
div {
color:white;
position:fixed;
overflow:auto;
left:0;
right:0;
top:0;
bottom:0;
}
#top {
background:red;
height:64px;
bottom:auto;
}
#sidebar {
background:green;
width:64px;
top:64px;
right:auto;
}
#playlists {
background:navy;
left:64px;
top:64px;
width:192px;
right:auto;
}
#tracks {
background:brown;
left:256px;
top:64px;
}
Try this
CSS
overflow-y:scroll;
My website container has a width of 95%. I'm trying to create a navigation which spans the full width of my container. It works fine until I add the 'position: fixed;' to the navigation, it then just ignores the container and spills outside the container.
below is my CSS code and a link to a picture.
#page {
width: 95%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
border: solid 1px #000;
}
.nav {
width: 100%;
background-color: fuchsia;
height: 50px;
position: fixed;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
display: block;
padding: 5px;
background-color: fuchsia;
line-height: 40px;
}
Image of problem... http://i.imgur.com/pZEbe.png
Thanks for any help! It's much appreciated!
you are giving position:fixed which makes your navigation to come out of the parent div or element.
Add something like this in your navigation element:
.nav
{
width:95%; /*dont give width as 100% */
margin:0 auto; /* for center alignment purpose */
background-color: fuchsia;
height: 50px;
position: fixed;
}