This question has been asked and answered in portions, but I can't seem to find an answer in full. I have a responsive div in bootstrap, and I (1) want my canvas to display with the same position and dimensions, and (2) want my text to appear above the canvas.
<div class="col-md-9 content-wrapper>
<canvas id="canvas" resize="true"></canvas>
<p class="statement">Display this text over canvas</p>
</div>
css:
.statement{
position:relative;
top:50%;
transform: translateY(-50%);
}
#canvas{
width:100%; height:100%;
}
Any advice? I know I'll need some sort of position css on the canvas, but I don't know what, and absolute positioning will give me problems with it's responsiveness. I'd also like to stay away from extra javascript for positioning, but if someone could explain a way that won't make it buggy, I'd be open to the suggestion.
Thanks!
You place
position: relative;
On the background div.
Place
Position: absolute;
On the foreground div and position with top, bottom, left, right. The foreground container will work relative to the background, meaning it is responsive, if you set the width of the foreground using %
Related
i would like to get to result of the blue strip in the picture bellow.
Its inside the wrapper so the HTML is like this:
<body>
<div class="wrapper">
<div class="strap"></div>
</div>
</body>
I know its done with z-index. The strap should be visible on the whole page. Thanks for help
Use the following CSS. The code sets the position to absolute and then positions each point of the div to each corner of the window, top, bottom, left and right. Z-index will bring it to the front. Ensure that there are no other elements that use z-index with a greater value than 99. The background color is then set as white with 40% transparency; Adjust the 0.6 to what you need it to be. 0.8 for example would be less transparent.
.strap{
display: block;
position: absolute;
top: 0;
bottom:0;
left:0;
right:0;
z-index:99;
background-color: rgba(255,255,255,0.6);
}
Use the css attribute position absolute and use top,right,left,bottom for alignment. And use z index to make it appear on top of that wrapper make sure the width is 100% ...
I've been working on this for hours, and reading over 20 articles and I still have no idea how to do this. I have a background, in which I want text to be positioned in a certain place. Everything is fine until I view it on a monitor with a larger resolution. The background re-sizes fine, but the text is no longer in the place I want it to be.
These images hopefully will clearly describe my situation.
How I want the text to look at any resolution (this is on a 1440 x 900 monitor) http://dl.dropbox.com/u/9134840/demo/1.PNG
This is how it looks on a 1080p Monitor:
http://dl.dropbox.com/u/9134840/demo/2.PNG
<body>
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</body>
</html>
body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}
edit: I tried both suggestions, using divs and positioning the text absolutely and relatively and still a no go, the text still moves.
#contain{
position:relative;
width:7000px;
margin:0 auto;}
#blah{font-size:large; left:100px; top:200px; position:absolute;}
I'm not looking for a fixed positioning, because I'm going to be adding content so I need to scroll vertically through the page without the text moving.
Your #blah div needs to be positioned inside a relative div. You might have problems with that if you absolutely positioning something in relation to the body. Place it inside another div or use fixed positioning.
#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}
<div id="containerDiv "><div id="blah"></div></div>
Or
#blah {position: fixed; top:200px; left:300px;}
In this case your div will always remain the same place if you resize the window. If you want it to be centered, use something like:
#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}
Also bare in mind that background-size:cover; will not work in versions of IE.
Examples:
http://jsfiddle.net/mYcXX/1/ (absolute) vs http://jsfiddle.net/mYcXX/2/ (fixed)
This looks like fixed layout.
If so why just not cut the central part of the background and put it in a div with style:
{
width:960px; // maybe more or less - the width of the central image
margin-left:auto;
margin-right:auto
}
And position the paragraph relating to that container (the div)
I believe you can solve this problem by separating the background image style from your container. I could be wrong, but try something like this...
body{
background: url(black.png) top center no-repeat;
}
#container{
width: 960px;
margin: 0 auto;
}
I would recommend relying on the natural flow of the dom as much as possible. Basically, don't ever rely on position: absolute unless ABSOLUTELY necessary. And even then its probably a hack.
Okay, I figured it out myself, big thanks to yisela for the guidance. Ultimately though, here's what I did. I looked at a site, like yahoo.com and saw that they had everything centered and had a white background. So no matter what resolution you had, it will still look neat. With that in mind, I made sure my image was gray, and change the background to gray so it all blended in.
Now, as for the container stuff. I placed the image in a container by itself, and centered it. Then I just set the paragraph relative to the container. That way the text will stay in the same position.
html{ background-color:gray }
body{ }
#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png);
}
#blah{font-size:large; left:120px; top:230px; position:relative;}
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</div>
</body>
</html>
And now..I think I'll happily go back to c#, after this wonderful experience with CSS.
I always have a problem trying to figure out the best way to make expandable content boxes. I used to use tables and cut the box into sections (top, bottom, left and right - then each corner in a table cell too, with an expandable middle cell for the content) This worked flawlessy on all browsers but its generally frowned upon.
Today i have an image which i need need to only expand vertically. however it has a drop shadow and the top 200 pixels or so has a gradient. Heres a link to the image im working with.
http://imageshack.us/photo/my-images/16/brandinfobox.png/
The content needs to flow and the div needs to expand vertically as the content grows. Ive looked at a few approaches but ive either not been successful or they have just not worked in some browsers. The main problem is the drop and shadow and top gradient. Those stop me from using a base background then absolute positioning some divs inside as the background ruins the drop shadow when i absolute position the outer edges.
Any advice? Sure its fairly simple if you know your way around css
May be you can do like this for this type of image & gradient
http://jsfiddle.net/wh6r4/
edit: added CSS code
.content{
background: url(http://i.imgur.com/5hN1S.png) repeat-y top left;
width:647px;
min-height:300px;
position:relative;
margin:50px;
}
.y-repeat{
position:absolute;
left:2px;
right:7px;
top:0;
bottom:0;
background: url(http://i.imgur.com/bJmR4.png) repeat-x top left;
}
.top, .bottom{
background: url(http://img16.imageshack.us/img16/3301/brandinfobox.png) no-repeat 0 0;
height:20px;
width:100%;
position:absolute;
left:0;
}
.top{
top:-20px;
}
.bottom{
background-position:left bottom;
bottom:-20px;
}
If that box can have a min-height than here are some ex. how to do it:
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle"> // CSS bg image = 5*80px vertical tiny gradient line ; min-height!
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
OR EVEN BETTER:
You can make expand a gradient image inside the middle DIV, by setting position:absolute, width 100% and height:100% !!
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle">
<img class="box_mid_img" src="vertical_gradient_image.png"> // CSS: .box_mid_img width:100%; height:100%; position:absolute
</div>
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
Another trick is to simply use a CSS3, you'll get support for IE gradients but not for shadows and corner (border) radius.
http://jsbin.com/uberub/2/edit#javascript,html,live
I would add a linear-gradient in CSS3.
For the surrounding rounded box with drop shadow, whether I go for 100% CSS3 or two background images and an extra div would depend of the requirements of my client.
I would split the image into three horizontal strips. One for the top, including the rounded corners, one for the bottom, including corners and shadow, and one very thin strip for the middle.
Then with markup like this:
<div style='background-image: url("middle.png"); width: 400px;'>
<img src='top.png'>
Expanding content in the middle
...
Can be as big as you like
<img src='bottom.png'>
</div>
So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/
We have a login page that is designed to have a 200px-high DIV vertically centered in the middle of the page. That is, it creates a 200 pixel blue band left edge to right edge (with form elements in it) that ideally should remain vertically centered in the viewport no matter how the browser window is resized.
This must be a CSS solution.
So let's say here's some sample markup:
<body>
<div id="mainDiv">
<div id="centerDiv" style="height:200px;background-color:blue;color:white">
Center this baby vertically in the #mainDiv, please!
</div>
</div>
</body>
Assume that my CSS dictates that the #mainDiv is stretched to cover the viewport top and bottom, which is easy enough to do. Are there CSS rules that I can apply to any of the elements or the page that will reliably and cross-browser (incl. IE6) vertically center #centerDiv? In a perfect world we should just be able to say
#centerDiv {
margin: auto 0;
}
And even in an OK world we should be able to address this issue with a few styles. But to quote Ving Rhames' character from Pulp Fiction, We're pretty %&#!ing far from OK.
I've looked at the solutions offered in Related Questions and scoured the Web. Nothing I can find really works 100%. Maybe this is unsolvable, but I thought I'd give the collective brains here the problem and see if I can get lucky. Thanks in advance.
If you have a fixed height, you can do it. Give the child div a top of 50% and a margin-top of -100px (or vice-versa) and you should be set.
if height unknown:
http://jsfiddle.net/Limitlessisa/a7xw6b2c/
.centerdiv{
background:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
For true automatic positioning in the center, the inner DIV would need to know the boundaries of the containing DIV. If your container does not have hard boundaries, there is no way for the inner DIV to calculate its own position automatically. It simply has no frame of reference.
The closest I think you can make it with a simple CSS solution is this:
#mainDiv
{
border: 1px dashed #000000;
}
#centerDiv
{
margin: 33% auto;
height: 200px;
}