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;
}
Related
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>
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;
I've got this structure:
<div id="preview">
<div class="small">preview</div>
<div id="prev_content"></div>
</div>
and the following CSS rules:
#preview {
position:absolute;
display: table;
top:160px;
left:10px;
width:457px;
height:125px;
max-width: 457px;
max-height: 125px;
border-radius: 20px;
background-image:url(../images/preview_greetings.png);
color: #FFF;
font-family: shofar;
font-size:27px;
padding-right:130px;
padding-left:20px;
overflow: hidden;
}
#preview div.small{
position: absolute;
top:-40px;
left:0px;
text-align: center;
width:607px;
color:black;
font-size:30px;
}
#prev_content{
max-width: 100%;
overflow: hidden;
max-height: 102px;
display: table-cell;
vertical-align: middle;
}
but for some reason, if I have overflow text, it just keeps expanding the div and doesn't stop.
Here's a fiddle:
http://jsfiddle.net/sTGpf/
How can I make it stop growing when it has reached it's limitation? The reason im using table display is because I need vertical alignment.
display:table-cell is causing the height to expand based on content. Use a wrapper around the div and set the required style for vertical alignment. And for the DIV with actual content, set the max-height:102px;
#prev_content{
max-width: 100%;
max-height:102px;
}
#wrapper
{
vertical-align:middle;
display:table-cell;
max-height:102px;
}
Fiddle
Instead of using display: table to center, you could use Centering in the Unknown.
Demo
#preview {
height:125px;
font-size:0; /* To avoid extra spaces */
}
#preview:before {
content: '';
height: 100%;
}
#preview:before, #prev_content {
display: inline-block;
vertical-align: middle
}
#prev_content{
overflow: hidden;
max-height: 102px;
font-size: 27px;
}
Remove display: table-cell; from #prev_content and it will respect the max-height: 102px;
Demo: http://jsfiddle.net/sTGpf/3/
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}
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;
}