I have the below slideshow which is 100% of the screen width. I need to position the banner_slideshow_controls div on top of this in the middle.
I have tried setting the main container of the slideshow to relative and then setting the div to absolute but this will not sit in the middle unless I set a width and margin: 0 auto on the slideshow which I cannot do as I need it to be 100%.
Can anyone suggest a work around for this?
<div id="banner_slideshow_container">
<div id="banner_slideshow">
</div>
<div id="banner_slideshow_controls">
<div class="slideshow_caption">TEXT FOR BANNER</div>
<div class="slideshow_button">More Information</div>
<div id="prev" class="img_replace">Previous</div>
<div id="next" class="img_replace">Next</div>
</div>
</div>
#banner_slideshow_container {
width: 100%;
height: 366px;
margin-top: 339px;
background-color:#ccc;
}
#banner_slideshow {height:366px}
#banner_slideshow a{
width:100%;
height:100%;
display:block;
}
#banner_slideshow_controls {
position:relative;
top:-100px;
margin: auto 0;
width:900px;
z-index:10;
border:2px solid green
}
Many thanks,
If you want to center horizontally, left and right margin has to be auto, so margin: 0 auto, or shorter margin: auto (because default div margin is 0)
Or if you want to use absolute position, add to #banner_slider_container position: relative and than you can position absolutely (if you don´t know container width, you can use left: 50%; margin-left: -450px)
margin: x y is short hand for -
margin-top: x
margin-bottom: x
margin-right: y
margin-left: y
If I understood the requirement correctly -
set margin : 0 auto not the other way around on #banner_slideshow_controls
By doing that you set the left, right margin to 'auto' and top,bottom margin to 0 - which will place the div in the middle.
Related
I created a doc page using Flare and forced breadcrumbs to stay fixed below the top nav. The page works as it is, but I want the div to stretch across the page.
Please see current design below:
Click to see example screenshot
I can stretch the div to 100% if I remove the min-width in the child div, but it stretches only to the right, while keeping the breadcrumbs where I want. Example below:
Click to see example screenshot
Or I can make it stretch 100% by adding left:0; on the parent div, but then the breadcrumbs move out of place. I can use margin-right or right to position the div to desirable areas, but div does not sync with the rest of the content when resizing browser.
Try this:
*{
padding:10px;
}
.parent {
margin:auto;
width:300px;
background-color:red;
}
.breadcrums {
background-color:blue;
}
.full-width {
background-color: green;
position:relative;
width:100vw;
left:50%;
transform:translateX(-50%);
}
<div class="parent">
<div class="breadcrums">breadcrums</div>
<div class="full-width">full-width element</div>
</div>
The important part here being position, width, left and transform on .full-width.
Applied the css " left " property if that div has "absolute" position.
Thank you for your replies. Here are the html and css:
Html:
<div class="crumbs_wrapper">
<div class="MCBreadcrumbsBox" >
<span class="MCBreadcrumbsPrefix">You are here:</span>
B1
<span class="MCBreadcrumbsDivider"> B2 </span>
B3...
</div>
</div>
CSS:
div.crumbs_wrapper
{
position: fixed;
float: none;
width: 100%;
z-index: 1;
}
div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
padding-top: 18px !important;
padding-left: 10px !important;
float: left;
position: relative;
margin-top: -12px;
background-color: #FFF;
z-index: 999;
width: 100%;
max-width: 104.5em;
box-shadow: 1.5px 1.5px 15px #888888;
}
Th tool I use is Flare, which does not have the fixed breadcrumbs feature. Breadcrumbs are automatically generated; I only changed the CSS values and added an extra div with the .crumbs_wrapper class. Other classes are automatically generated by the software.
If I remove the max-width the div only stretches to the right, and if I add left: 0; to the parent div, the breadcrumbs move to the left. I can bring the breadcrumbs to the position where I want using margin, but it does not stay fixed when the browser is resized. Also, the paddings and margin-top are used to keep the breadcrumbs below the top nav and aligned with the rest of the content.
I'm not sure if that can be done with pure CSS.
The site structure looks like this:
<body style="text-align:center;">
<div style="max-width:1000px; margin: 0 auto;" id="mainWraper">
<div id="fixedBox" style="position:fixed; top:100px; left:0;"></div>
</div>
</body>
What I want to do is make the fixedBox element to be displaed always 100px from the top screen and aligned to the left side of the mainWraper.
mainWraper is responsive with the max width - 1000px;
I know that it can be done with JS but can I do this also only with css?
If the width of the container is below 1000px the box will be aligned left to the viewport. Otherwise, it will be aligned left to the container:
#fixedBox {
position: fixed;
left: 50%;
/* move it back half the width of your mainWrapper */
margin-left: -500px;
}
#media screen and (max-width: 999px) {
#fixedBox {
left: 0;
margin-left: 0;
}
}
Demo
Try before buy
Assign a margin to fixedBox rather then using fixed position:
#fixedBox{
margin: 100px 0px 0px 0px;
}
the grey box is your fixedBox and it will always be 100px from the top and aligned left to main column
<body style="text-align:center;">
<div style="width:1000px; margin: 0 auto; height:1000px; position: relative;" id="mainWraper">
<div id="fixedBox" style="position:fixed; top:100px; left:0; width: 20px; height: 20px; background-color: #aaa;"></div>
</div>
</body>
issues:
always give fixed element width and height
added top: 100px so that the fixedBox stays 100px from the top
give some height to the mainwrapper
Lets say I have a div of heigh 400px and width 400px.
<div style="width:400px; height:400px; background:#CCC;" align="center">
<img src="/static/{{media_info.media_file}}" />
</div>
Now if I have a image of height 350 and width 200 px I want it to be adjusted in this div. I mean it adjust inside the div being child to the div. It should not fit to the div neither stretch. Just fit in the center.
Like div should be taken as 100% and image should be in its ratio.
Remaining 50 px in height and 200 px in width should be left. like buttom and top leaving 25 25 px and left and right leaving 100 100 px.
Also if the image is of say width 800px and height 700 px same way the div height and width should be considered as 100 percent and the image should lie in the middle without any stretch
I am not a front end developer :(
So you want the image to be centered inside the div, in its original size, and any overflow simply cut of when the image is larger than the div in any dimension?
Well you could just set it as a centered background-image, instead of using in actual img element.
If that’s not an option, position it absolutely – -50% from either “side” (top, left, right and bottom), and use margin:auto to center it:
div { position:relative; width:400px; height:400px; margin:10px; background:#ccc;
overflow:hidden; }
div img { position:absolute; top:-50%; left:-50%; right:-50%;
bottom:-50%; margin:auto; }
<div id="div1"><img src="http://placehold.it/350x250/ff9999/000000"></div>
<div id="div2"><img src="http://placehold.it/800x700/ff9999/000000"></div>
You can achieve this using transform property of css.
Here is the fiddle
div {
position: relative;
}
img {
display: block;
margin:0 auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Note, I cleaned up the inline styles, just to make it clear.
http://jsfiddle.net/s4ja2q1z/4/
div {
width: 400px;
height: 400px;
background: lime;
text-align: center;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
EDIT: Added fixes if the image is taller than the container.
Try putting max-width and max-height on the image:
<img style="max-width: 100%;max-height: 100%;" src="/static/{{media_info.media_file}}" />
This will keep the image dimensions limited to a maximum width and height of the parent container (aka 400px in this case) and it will scale down if you ever change your parent div's dimensions without changing any ratios that would cause stretching.
You can do it this way too by using the table-cell property.
http://codepen.io/Edrees21/pen/XJoEmp
<div class="container">
<img src="http://placehold.it/350x200/aEEAEE" />
</div>
.container {
width: 400px;
height: 400px;
text-align: center;
background-color: #cccccc;
vertical-align: middle;
display: table-cell;
}
I would set the image as a background of your div and then change the size of it using background-size: contain.
This will make your image not be distorted, but still fill the entire div.
<div style="width:400px; height:400px; background-image:url("image.jpeg"); background-repeat:no-repeat; background-size: contain; background-position: center;">
</div>
div {
text-align: center;
}
img {
max-width: 400px;
max-height: 400px;
vertical-align: middle;
}
I have a div centered in another div with:
<div id="align" style = "width: 420px; margin:auto; ">
The div stays always in the center and that's fine but,
how do I offset it 60px (or any other distance) to the right?
You can move the div and still have it centered using position:relative
#align {
width: 420px;
margin:auto;
position:relative;
left:60px;
}
<div id="align"></div>
Use relative position and left, for example:
<div id="align" style="width: 420px; margin:auto; position: relative; left: 60px;">
I making a animation on set of DIV's which are wrapped inside div with id="wrapper"
using CSS3.
However if I hover on the rounded box, the animation is left aligned but not center aligned.
The URL for the code is #http://jsfiddle.net/X5Ycu/
<div id="wrapper">
<div class="roundedbox"></div>
<div class="ball"> </div>
<div class="greenball"> </div>
<div class="redball"> </div>
<div class="greenleaf"> </div>
<div id="pacman"> </div>
</div>
Thanks & Regards
Alex
change the blocks from inline-block to display: block
add margin 0 auto
remove the position absolute
quick fiddle here
http://jsfiddle.net/ktcle/X5Ycu/2/
#wrapper{
position:relative;
width: 400px
}
.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;
}
Try below:
div.roundedbox:hover{
width:100px;
left: 137.5px; //Add this line
}
You can add margin applied effect like TOP and BOTTOM also RIGHT and LEFT to these two applied to half the original size
see that example: http://jsfiddle.net/X5Ycu/1/
.limeball{
margin: 0px; // original margin
width: 100px; //original width
height: 50px; //original height
}
.limeball{
width: 0px;
height:0px;
margin: 25px 50px;
// margin results:
// (original width) / 2 = 50px (LEFT AND RIGHT)
// (original height) / 2 = 25px (TOP AND BOTTOM)
}
Well, if you use modern CSS as you say, then you could specify:
left: 50%; /* or figure out where the center is */
And then just move the element to its half size to the left, which you can do using transform:
transform: translateX(-50%);
So now, even when your element is changing its size, also its position (translation) will change according to its size. This (the translation) will always work, regardless of how your element is positioned or displayed.
You will surely need to use some vendor prefixes.