I've got 2 divs on top of another div, but when I resize the window they stay put, instead of moving with the div behind them. I thought that if there position is relative they move along with the previous div, but it doesn't seem to work like this. What am I missing?
CSS and HTML below, simplified.
<div class="wrapper" style="margin: 0 auto; text-align: center;">
<div id="0">
<img src="0.gif" width="960px" alt="" />
<div class="top">
<div id="tag" ><img src="tag.png" alt="" /></div>
<div id="tag2"><img src="5500.png" alt="" /></div>
</div>
</div>
</div>
And CSS like this:
#0 {
clear: right;
z-index: 0;
}
.top {
float: left;
z-index: 1;
clear: left;
position: relative;
}
#tag {
margin-top: -500px;
margin-left: -600px;
}
#tag2{
margin-left: 750px;
}
It seems like you're expecting the top div, with its associated tag divs, to move with the 0.gif image when you resize the page. Instead, it's moving relative to the left edge of the wrapper div, which is pegged to the left-hand side of the screen. You will probably get the result you want by adding width: 960px to the style of your .wrapper div.
For further enlightenment, check the bounding boxes on each of your divs. You may find that a temporary border: 2px solid green style helps clear things up.
Related
I've been looking all over for an answer to this but I can't find a fix anywhere. I'm just trying to move the h1 tag right over top of the icons but whenever I use margin-top or padding-top to move the h1 down the page it moves the column down as well. I put borders around all of the columns around there to see if maybe the borders were touching but that was no help. Is there like some sort of default padding around h1's or columns that you can't see?
Here is a link to my codepen: https://codepen.io/4eller/pen/eVmxeM
HTML:
<hr width="35%">
<div class="container maincon2">
<h1 class="wwd">Social Media Has Never Been Easier</h1>
<hr class="hr1">
<h1 class="whatwedo">What makes us stand out from the rest</h1>
<div class="row topicons">
<div class="col-md-4 maintab1">
<img src="images/graph.png" class="barimg">
<hr width="50%" id="hr2">
</div>
<div class="col-md-4 maintab2">
<img src="images/piggy-bank.png" class="pigimg">
<hr width="50%" id="hr2">
</div>
<div class="col-md-4 maintab3">
<img src="images/support.png" class="supportimg">
<hr width="50%" id="hr2">
</div>
</div>
</div>
</div>
</div>
<div class="container maincon3">
<div class="row">
<div class="col-lg-12 mediumcon2">
<hr class="hrgreen">
CSS:
.maincon2 {
width: 100%;
height: 500px;
background: #424242;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
border: 1px solid orange;
}
.topicons {
border: 1px solid red;
margin-top: 70px;
height: 250px;
table-layout: fixed;
}
If I understand correctly what you want (not really 100% clear), you can apply position: relative to that tag and use top to move it down without affecting anything else, since position: relative plus position settings cause an element to be moved in relation to its original (static) position, but elements before and after it will remain were they are:
h1.whatwedo {
position: relative;
top:30px;
}
Changed codepen: https://codepen.io/anon/pen/MQYRKY
Give the h1 tag position:absolute; and then move it left with left:200px(replace 200 with whatever number you want)
The reason why when using margin, padding or position:relative, it will move other elements, is because then they are considered part of the "flow" of the page, meaning they will interact with and bump other elements around. position:absolute, removes the target element from the flow of the page, thus allowing you to put it wherever without moving other elements.
I am making a header on a HTML page in which I have an image aligned to the left of the page and an image aligned to the right. I want there to be a center background color that is white when I enlarge the page horizontally, and that center white section to minimize to nothing when I shrink the page horizontally. Then the image on the right should be cut of from the right as the page shrinks.
The main problem I'm having is the image on the right goes down below the left image when I shrink the page. How can I fix this? The center section isn't white as well.
HTML:
<div class="navlogo">
<div class="left">
<img src="Weir-Logo.jpg">
</div>
<div class="right">
<img src="compass.jpg" />
</div>
</div>
CSS:
.navlogo {
width:100%;
background-color: white;
}
.navlogo .left {
float:left;
}
.navlogo .right {
float:right;
}
I would go with Turnip's answer, but here's another option for you for variety, if you like tables:
<table style="width:100%;background-color:white">
<tr>
<td align="left">
<img src="Weir-Logo.jpg">
</td>
<td></td>
<td align="right">
<img src="compass.jpg" />
</td>
</tr>
</table>
position: relative for the left image and position: absolute for the right image along with a z-index value on both should get you there:
.navlogo {
width: 100%;
background-color: white;
}
.navlogo .left {
float: left;
}
.navlogo .left img {
position: relative;
z-index: 1;
}
.navlogo .right {
position: relative;
}
.navlogo .right img {
position: absolute;
right: 0;
z-index: 0;
}
<div class="navlogo">
<div class="left">
<img src="http://placehold.it/400x200/f2f2f2/000000">
</div>
<div class="right">
<img src="http://placehold.it/400x200/000000/ffffff" />
</div>
</div>
With the "max-width" style the image will be resize.
<div class="left">
<img style="max-width:30%;" src="Weir-Logo.jpg">
</div>
<div class="right">
<img style="max-width:30%;" src="compass.jpg" />
</div>
So far you've got the old-school strategies covered: tables and position:absolute. Neither meets your requirement for "the image on the right should be cut off from the right as the page shrinks" and both can be problematic for a variety of reasons -- tables are, well, tables; and absolute-positioning, while sometimes necessary, tends to lead to fragile layouts; I try to avoid reaching for that part of the toolbox unless absolutely necessary.
In this situation I would depend on CSS background images, with an #media breakpoint to cover the two different layouts.
With this HTML:
<div class="navlogo"><div></div></div>
This covers the "the screen is wider than both images; put whitespace in between them" case:
.navlogo {
background: url('//placehold.it/250x100') top left no-repeat;
}
.navlogo div {
background: url('//placehold.it/250x100') top right no-repeat;
min-height: 100px;
}
Then, for the "the screen is smaller than the two images, so cut the right-hand one off from the right":
#media screen and (max-width: 500px) {
.navlogo div {
background-position: 250px 0;
}
}
(The #media breakpoint here should be the width of both images added together. The right-hand image's background-position should be the width of the left-hand image. Adjust for body margins/padding as needed.)
If I understood you correctly, you were looking for something like this?
Fiddle: https://jsfiddle.net/7twgsx23/1/
You need to give the navlogo a height value in order to get the white background.
CSS:
.navlogo{
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
min-width:600px;
}
I also suggest using a middle div to get the desired layout.
HTML:
<div class="middle">
</div>
You can use non-breaking space to fill the middle div if you don't want any content there.
In the following HTML, I want the small delete icon to appear in the upper left corner of its container (the div). The larger image (a cat) needs to be inside of the div and scale so that it does not exceed the height of the div. I need the div to float left because of how its used elsewhere. The delete icon is suppose to overlay on top of the larger image (if the larger image fills the width of the div). Please note, that the larger image may actually have a width that is much less than the div and it gets centered in the div. In this case, the delete icon, still is in the upper left corner but is not really overlaying on top of the larger image since the larger image would be too small. The width of the div always remains the same regardless of the width of the larger image.
Here is my html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
And in fiddler:
http://jsfiddle.net/AndroidDev/eJZ7X/
Do you need something like this?
Demo
div {
position: relative;
}
div img {
max-width: 100%;
max-height: 100%;
}
div img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
Here, am positioning the delete img to absolute with top and right properties, if you want left than you can do that too, and make sure you wrap them inside a position: relative; container.
Note: Am using first-of-type pseudo so you do not have to alter your
DOM, but if you think that the order of the img might change than
better assign a class to the delete img instead.
As you feel my selectors are too generic, assume that you have a parent with a class called .img_holder and this will have div nested further and than you nest both the img inside that so your selector will be
.img_holder > div {
position: relative;
}
.img_holder > div > img {
max-width: 100%;
max-height: 100%;
}
.img_holder > div > img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
And the DOM would look like
<div class="img_holder">
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
</div>
I've updated your fiddle here
The icon img now has an icon class and is absolute positioned in the div.
html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
css:
.icon {
position: absolute;
}
I'm using twitter bootstrap 2.1.1 with a responsive layout and I'd like to float a label in the bottom right hand corner of the image. One of the problems i'm having is because it's responsive when the thumbnail is wider then the image it floats too far. The other issue is I can't seem to get it to float to the right. I should also add that although I want it in the right hand bottom corner I do want it offset by a few pixels to it isn't right on the edge of the image. Also the text might always be photo missing, that is just when a default image is shown.
Here is my html so far
<li class="span4">
<div class="photo-group thumbnail">
<a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper">
<img alt="300x200&text=photo" src="http://www.placehold.it/300x200&text=Photo">
<span class="label label-inverse photo-label">Photo Missing</span>
</a>
<div class="caption">
<div class="pull-right">
by <a href="/users/50494983aa113ebd5c000001">
hadees
</a>
</div>
Chocolate Crackle Cookies
</div>
</div>
</li>
and here is my css
.content-header {
padding-bottom: 10px;
}
.thumbnail > a > img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.photo-group .photo-wrapper {
position: relative;
}
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 0;
}
.photo-group .photo-wrapper .photo-label {
float: right;
}
I've also got a jsfiddle for a better example.
Maybe the right way to handle this is to just make the photogroup's max width 300 but I think that kind of looks funny on a desktop full screen.
Here's my version of the fiddle: http://jsfiddle.net/AdVCT/9/
Essentially, you need to put a wrapper around both the image and the label, so that you can absolutely position the label within this wrapper:
<div class="photo">
<img alt="..." src="..." />
<span class="label label-inverse photo-label">Photo Missing</span>
</div>
And then with some CSS, you can alter the .photo to be centered but also only as large as the image inside it (the caption is absolutely positioned, so it is effectively taken out of the page flow and doesn't affect width of parents etc.):
.photo-group .photo-wrapper .photo {
position: relative;
margin: 0 auto;
display: table;
}
And remove margin-left: auto/margin-right: auto from the .thumbnail > a > img rule. Finally, to offset the label slightly from the sides of the image, use:
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 5px;
right: 5px;
}
And set 5px to whatever you want the offsets to be.
This is what I'm trying to achieve
http://i.stack.imgur.com/e9xZa.jpg
I tried this
jsfiddle.net/RUSm3/
but as you can see the date overlaps on the image.
So I added left:215px for the date
jsfiddle.net/9aw29/
It looks good but perhaps I don't have an image. How can I get the date back to the far left? I'm trying to achieve this without php.
If you have a div like this
<div class="container">
<div class="date">today</div>
</div>
with this css fragment your date div will be positioned to the bottom right of it's container.
.container {
position:relative;
width: 100px;
height: 180px;
border: solid 1px black;
}
.date {
bottom:10px;
position:absolute;
right:10px;
}
You can verify it working here
I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.
<div class="entry">
<img [...] />
<div>
<h2>Heading</h2>
<p>Entry text</p>
<p class="date">[Date]</p>
</div>
</div>
Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.
<style type="text/css">
div.entry{
float: left;
position: relative;
width: 40%;
}
img.left{
float: left;
}
div.right{
float: right;
display: inline;
position: absolute;
height: 100%;
width: 50%;
}
div.topRight{
}
div.bottomRight{
position: absolute;
bottom: 0px;
}
</style>
<div class="entry">
<img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
<div class="right">
<div class="topRight">
Some stuff
</div>
<div class="bottomRight">
Some other stuff
</div>
</div>
</div>