I'm thinking this isn't possible, but I'm not a CSS expert, so I thought I'd check. I've got a translucent div absolutely positioned over an image. That's good so far, but I'd like to force my translucent div to respect the box in which it and the image are contained.
<div class="parent">
<div class="title-bar"> /* prolly not important */
<h2>Title</h2>
</div>
<img src="whatever"/>
<div class="overlay">
A few lines of txt
</div>
</div>
The more I think about it, the more I think I may be asking for too much - I want the parent to expand with the img, but the overlay to be constrained by the parent. Can this be done?
To force the container expand with the child img, make it float.
To force the overlay relate to container position and size, make the container relative.
.parent {
float: left;
position: relative;
}
To force the overlay respect the bounds of the container, use percents.
.overlay {
position: absolute;
max-width: 100%;
/* And then, position it at will */
top: 0;
left: 0;
}
I've prepared an example: http://jsfiddle.net/rYnVL/
It's doable, but not quite beautiful :
<div id="parent">
<div id="abs">stuff fadsfasd fsad fasdsdaf </div>
<img src="/img/logo.png" />
</div>
#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}
#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}
Main point to note :
parent floats to not have a 100% width. Position is relative.
abs is absolute, with 100% size.
also, if abs content is bigger than the image, it will overflow. If you do not like this, just add overflow:hidden.
Related
Please help.
I need to position an svg inside a div, next to a headline. It's a rectangle, kind of a corporate design element. Code:
<div id="container">
<h1>HEADLINE</h1>
<img src="/my/rectangle.svg">
</div>
It should look like:
HEADLINE ▮
But in the case of
WRAPPED
HEADLINE
the rectangle should scale up, stretching over two lines, keeping its aspect ratio.
So my problem is:
I can't set the height of #container, because I don't know how many lines of text will be in it. When I do as suggested here, meaning say
#container {position:relative}
#container img {position:absolute; height:100%}
the svg will stretch to the right size, but it will overlap with the headline.
Any ideas? Thanks!
Edit: Maybe this has nothing to do with svg. Could be any child element that needs to be scaled to parent width. The challenge is that one aspect of the problem requires it to be relative, and the other one requires it to be absolute.
The simplest option is probably to use display: flex and use background-image for the SVG.
.heading {
display: flex;
}
.heading h1 {
margin: 0;
}
.heading .img {
flex: 1 1 auto;
background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/obama.svg) no-repeat;
}
<div class="heading">
<h1>HEADLINE</h1>
<div class="img"></div>
</div>
<br/>
<br/>
<br/>
<div class="heading">
<h1>WRAPPED<br/>HEADLINE</h1>
<div class="img"></div>
</div>
I have an image which has to take full width. And I need to put a text and a button on top of it in a specific place. I looked over many topics but can not figure out how to make it fully responsive.
<div class"wrapper">
<div class="image-box">
<img src="x">
</div>
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
so this is the layout but it can be changed if it gets me to the point I need.
If I understand correctly the parent div called wrapper should be set to position: relative and all the child divs to position: absolute, after that you just position all these child elements with top, left, right, bottom. So after testing this this is what I get. Since the image is always 100% of the viewport it gets smaller and smaller by height and width because of its aspect ratio. The text and button on the image just stays at a fixed place and after some point it goes out of the image.
Whats my mistake?
P.S found a lot of topics but still, I am messing something up. Thank you for your insights and help.
The image tag is used to create a separate element on the page. This is not really what you want... you want the content-box to have a background, right? Rather than using the image tag, use CSS to apply a background image.
here is a jsfiddle
.content-box {
/* set width and height to match your image */
/* if these are omitted, it will only be as big as your content, */
/* and only show that much of your image */
width: 200px;
height: 300px;
/* obviously, replace this with your image */
background:url('http://placecage.com/200/300');
}
<div class"wrapper">
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
I think this is what you want. Also, this is a good occasion to use those HTML5 tags figure
and figcaption, but basically all you need is this kind of structure:
<div class="wrapper">
<img />
<div class="content-box">
<!-- Your content here -->
</div>
</div>
So what is happening here is that your wrapper's dimensions are fixed by the image, and then you position absolutely your content-box or the elements within. If you do not want to position them at the very top or bottom of your image, just use percentage values when positionning:
top: 10%;
figure {
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figure figcaption {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
background: rgba(255,255,255,.7);
padding: 10px;
}
<figure>
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
<figcaption>
<h1>The image title</h1>
<p>This is the image caption</p>
</figcaption>
</figure>
I want to center some text in a fixed height div.
I've made the following fiddle
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h1 style="vertical-align:middle;">Contact</h1>
</div>
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h2>Welcome to the</h2>
<h1>AAA</h1>
<h4>system</h4>
</div>
I've tried various options of the vertical-align:middle applying it to the different elements but it doesn't seem to work.
I did see other questions where the line-height was set to the same height as the font-size but in the second example I have multiple lines of text at different heights.
Is there a good way to do this?
Used to display table-cell
as like this
.parent{
height:180px;border:1px solid black;vertical-align:middle;
display:table-cell;
}
Demo
Don't use to inline css write a class in external css and define css
Vertical alignment always comes with some trouble. You should apply that css property only to table (td) elements and inline elements, not block elements like divs.
To position something in the middle you can use very simple solution - by using absolute positioning.
Create child block and set it's position to absolute, move it 50% from top, and set margin-top to negative value with amout equal to half of parent's height. Set your parents position to relative.
#parent {
position: relative;
height: 180px;
}
#child {
position: absolute;
top: 50%;
margin-top: -90px;
}
<div id="parent">
<div id="child">
<h1>sample</h1>
<h2>sample</h2>
</div>
</div>
I have something like this:
<div class="top">top</div>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
Relevant code in jsFiddle
As you can see, between top and bottom divs, there is a div container. I want this div container to move bottom dive as much as is needed (and i don't want it to be a fixed value - that means if, lets say left container will get much higher - the bottom div will be pushed down as well.
How can i do that?
This is a simple seeming problem that ends up being kind of tricky. The above suggestion about position:relative vs. position:absolute are a good first step. After that you need to make some room for the set width right div:
.left {
height: 100%;
min-height: 50px;
border:1px dashed red;
padding-right: 50px; <---
}
Then float your right div in the space you made:
.right {
float:right; <---
width: 50px; (This needs to match the padding-right value above.)
text-align: right;
min-height: 50px;
height: 100%;
border:1px dashed blue;
}
Finally, put the right div before the left div in the html:
<div class="top">top</div>
<div class="container">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="bottom">bottom</div>
(Tested in Chrome and IE.)
See: Right div fix width, left div extend to max width?
You can check out a fiddle here: http://jsfiddle.net/x3QfG/1/
Will that work for you?
Right now you're using absolute positions for the left/right div's, so you will always need to know the height in order to position the bottom div correctly. What you want to do is float these instead, then clear the floats in the bottom div. That way the left/right can be as high as their contents, and the bottom div will always appear below.
.bottom {
clear: both;
}
.left {
float: left;
width: 50%;
min-height: 50px;
}
.right {
float: right;
width: 50%;
min-height: 150px;
}
I've modified your jsFiddle accordingly, and made the right div higher to show how the bottom always appears below.
Use floats rather than positioning them absolutely. That will make your architecture very much fluid and flexible.
After you apply necessary float values to your .left and .right, use a clearfix hack to contain your floated elements within the container. Now whenever any of the .left or .right divs increase in height, the bottom div will be pushed down.
Make Container Relative and left and right absolute,and for positioning set width rather than using float.
I'm having problems working out the z-index order for an application we're working on, i have two root parents, a nav bar and a map, and one child, the map tooltip. The navbar should be visible above the map, so it has a higher z-index, but the problems is to make the tooltip in the map container to be displayed over the sidebar as well, a bit hard to explain, so you can visualize the case on http://jsbin.com/afakak/2/edit#javascript,html,live :
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
Thanks for any help.
If #map-container is positioned (i.e. not static), this is not possible, because of the way z-index is compared:
body (or any other positioned parent element) is the reference for both #map-container and #nav-bar. Any z-index you give them is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements. Z-index of #tooltip will only be compared with other children of #map-container.
You could do as Nacho said and statically position #map-container. You can simulate fixed positioning via Javascript, if you like.
If you cannot do that, you need to change your markup, so that #nav-bar and #tooltip have a common positioned parent element. Either move #nav-bar inside #map-container, or #tooltip out of it.
Below solution should work but I don't know if you have a requirement like keeping nav-bar outside map-container. If so I don't think that there is a workaround for that.
CSS:
#tooltip-helper{
position:relative;
/*below properties are to demonstrate the helper*/
width:10px;
height:10px;
background-color:green;
top:200px;
left:200px;
}
#tooltip
{
position:absolute;
top:10px;/*this is just to make sure helper is visible*/
left:-100px;/*this is to center the tooltip*/
width: 200px;
height: 200px;
background-color: yellow;
color: black;
padding: 10px;
z-index: 15;
}
HTML:
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip-helper">
<div id="tooltip">This is the Tooltip</div>
</div>
</div>
You have to absolutely position nav-bar and tooltip (otherwise z-index won't be taken in account), and maintain map-container static positioned
#map-container{
...
position: static;
...
}
#nav-bar{
...
position: absolute;
}
#tooltip{
...
position: absolute
}
I think the only way you can do this with a position: fixed on the #map-container is to restructure your tool tips to display outside the #map-container. So on click of the icon "inside" the map container, the tool-tip itself is displayed above both (with a proper z-index set).
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
</div>
<div id="tooltip">
This is the Tooltip
</div>
After going through, your codes, i noticed this.
#tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
Your #tooltip has a z-index, but it's not positioned. Z-index property will only work if it's has one of the position property value. And considering you want the tooltip to stand out, you should use the absolute position value like this.
#tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
HTML
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
This keeps the #tooltip on top....
For future readers with similar problems -
If your conflicting child items are position: fixed, consider setting the height of the parent containers to 0px, and then shifting any parent background display settings onto a mutual grandparent of the conflicting children.
This solved my analogous delimma.
If, in the real page, the tooltip has to be shown only on hovering the map container, you could just change dynamically its z-index like so:
#map-container:hover
{
z-index: 16
}
Otherwise you need to change the position of the tooltip so that the nav-bar doesn't overlap it.