I have a problem in Chrome with this example
This is a responsive bootstrap design..
When the width is less than 1000px the green block should press the blue bar down, but in Chrome the blue bar keeps the same position and the green block is layered under it..
http://www.bluemachines.dk/_bootstrap/break/
You have specified height for the '#presentation' div: 385px. The green box in inside this box.
The '#statistics' div is clearing the '#presentation' div so it will sit after the 385px.
SOLUTION:
Either increase the height of the '#presentation' div to include the height of green box.
Or
Remove the height from the '#presentation' div.
Try moving statistics to a new row div!
because fix width is give for classes under .col-md-12
#slideshow {
position: relative;
float: left;
height: 380px;
width: 570px;
background: rgba(0,0,0,0.1);
}
#register {
float: right;
height: 380px;
width: 20%;
background: green
}
use can use bootstrap classes for giving width
Related
I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/2/
It's a bootstrap carousel with caption on each slide.
I'd like to change the position of the caption so it is left aligned to the red block below that is a bootstrap container block. I can position it with px or % but looks out of place at big pr small screen sizes.
I'd also like to have the text inline and have a black background. In the example I have done it by fixed the width of the container which won't work because I don't know how much text that will be.
.block{
background: red;
height: 200px;
}
.carousel-caption{
font-size: 3em;
left: 10%;
text-align: left;
background: black;
color: white;
display: inline;
width: 200px;
padding: 0;
}
1.To align left edge with the red block, you could add left: 0; to your class .carousel-caption. So the caption will be positioned to the left edge.
2.For the size of the caption box. No need to set the size in fix pixel. The reason why there is a strange width for this box is. The CSS code in Bootstrap has already set a rule right:15%;. That makes the right side of this box stick to the 15% of the right edge. It automatically drag the box's right edge. Thus, let remove this rule by add right:auto; to your .carousel-caption, and remember to remove the width:200px; .
You can override it by putting styles width: 46%; and margin-left: -153px; into .carousel-caption class.
I need both divs to have dynamic width.
The gray one has to be centered, while the blue one to float right BUT both be horizontally alingned.
These to are sitting in a wrapper.
The problem is that in order to have varying width I use display:block and this makes the gray div to push the other one down.
How can I manage this without setting a fixed width for the gray div?
EDIT
This is how it should look like. I just put another left floating div.
The red div has to be perfectly centered.
All divs' width must be dynamic.
You can nest the blue div within the grey one and absolutely position it, using left:100% will make it horizontally dock to the right side of the grey div.
Just one of many options.
Here is a demo: http://jsfiddle.net/HnsEx/
Here's a fiddle :)
fiddle
and css
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
I have a main div (width: 960px) which is centered in the browser window with "margin: 0px auto". From time to time I would like to show an ad (160x600, margin left side maybe 10px) attached to the right side of the main div but the main div should always remain in the center of the browser.
How can I do that?
You can place the ad inside the centred div, make the centred div position:relative, the ad position: absolute and set left as appropriate: http://jsfiddle.net/3vqh8/1/
#center {
background: blue;
width: 960px;
height: 600px;
margin: 0 auto;
position: relative;
}
#ad {
position: absolute;
height: 600px;
width: 160px;
background: red;
right: -170px;
}
Try positioning the main div as relative and the ad div as absolute.
Play with top and left to adjust the placement.
(Not sure it will work, make a jsfiddle to show us your case)
If your main container is already centered, just lay your new divider like first inner element of your main-container, then position it absolute with a 'move-it-to-left' position.
<div class="main-container">
<div class="new-left-publicity"></div>
<div class="what-was-there-before"></div>
</div>
How can I keep the play button centred even if the the image/video size changed?
.image{
position:relative;
width:500px; //changed
height:300px;
}
Here is my example...
Attention: my images/videos haven't no specific size, so they can change according to their own size... This is just an example!
I set up three examples to show how you could solve this problem.
Please see the fiddle: http://jsfiddle.net/audetwebdesign/mxSkQ/
The HTML is essentially yours:
<div class ="image ex1">
<a href="#">
<img src="http://placehold.it/200x150" alt="video">
<span class="play">
<span></span>
</span>
</a>
</div>
I am using a demo image with configurable dimensions, 200x150 for example, easily changed for testing.
Example 1 - Image Size Determines Size of the Parent Container
.ex1.image {
position: relative;
display: inline-block;
margin-left: 50px;
}
.image a {
display: inline-block;
position: relative;
}
/* Gets rid of the extra white space that follows an inline element*/
.image img {
vertical-align: bottom;
}
If you want the .image div to shrink to fit the image, use inline-block to display.
The margin-left is optional, will depend on the rest of the layout.
Important: To center the play button motif, simply set the a tag to display as inline-block and your arrow-motif-span will position itself nicely.
Because img is an inline element, browsers insert a small space after it that can show up if you have borders or backgrounds. Use vertical-align: bottom to clean that up.
Example 2 - Parent Container Has A Specified Width
You can specify a width for the .image parent container and then use text-align to position the image element.
.ex2.image {
position: relative;
display: inline-block;
width: 400px;
height: auto;
text-align: center;
}
Example 3 - Parent Container Has Full Width and Specified Height
In this example, I let the parent container fill up the width of the window and set the
height to 200px. To get vertical centering, I set margin-top to a hard-coded value that will depend on the height of the image. If you let the image take on a fixed height, this example is useful.
.ex3.image {
position: relative;
display: block;
width: auto;
height: 200px;
text-align: center;
}
.ex3.image a {
margin-top: 25px;
}
You need
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)
http://jsfiddle.net/nGKcn/13/
Try playing with the image size/different images.
Give the image CSS of:
display: block;
margin: 0 auto;
This is just a general way you put stuff in the middle.
Unless I'm missing something maybe?
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}