I recenlty started using divs to arrange art on my pages in a very specific position. After I get what I think looks right I get this HUGE gap under all the divs. Seems the more div's I use the bigger the gap. I just want that gap gone. Any pros got an answer on this?
Here is my Code:
<div>
<div style="position: relative; left: 12px; top: -20px; width: 970px; height: 0px;">
<img class="alignnone size-full wp-image-1285 devanco_ep_curimg" alt="dsm-napkin-top-TEMP" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-napkin-full.png" width="1001" height="131" />
</div>
<div style="position: relative; left: 65px; top: -20px; width: 450px; height: 100px; padding: 20px;">
<div>
<h5>We’re a creative full service marketing firm in Northern New Jersey.</h5>
<h6>Creative Branding | Advertising | PR | Website Design | SEO | World Class Client Support</h6>
</div>
</div>
</div>
<div style="position: relative; left: 548px; top: -180px; width: 193px; height: 72px;">
<a title="The DSM Group Is A Full Service Agency" href="http://thedsmgroup.com/jason/agency-2/">
<img class="alignnone size-full wp-image-1412" alt="dsm-who-we-are-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-who-we-are-btn.png" width="251" height="66" />
</a>
</div>
<div style="position: relative; left: 750px; top: -339px; width: 193px; height: 72px;">
<a title="The Most Complete Marketing Agency In NJ" href="http://thedsmgroup.com/jason/services/">
<img class="alignnone size-full wp-image-1411" alt="dsm-what-we-do-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-what-we-do-btn.png" width="251" height="66" />
</a>
</div>
It's because of all of the top adjustments like top:-339px.
Relatively positioning an element doesn't really take it out of document flow, it just uses it's static space and moves it from there. This means if you have an element like this...
.rel {
position:relative;
top:-100px;
}
...it is technically still filling that other space, so the other elements won't move up to fill the gap.
Here's a jsFiddle to illustrate it.
Notice in the picture below how the gap is created.
It happens because You use the nbsp; or the space so more spaces will be covered by the div tag..also you have used position:relative and top:-100px that is also cause to have a huge gap on the div
Related
I currently have something like this
<div class="mycol" id="mycanvas" style="z-index: -1; top:150px;left:240px;width:88%; height:80%; position: absolute;background-color:red;">
</div>
<div class="testclass">
Hello World
</div>
I would like the content of testclass to appear below mycol class. I know i could do that by making it absolute is there any where other than that by which i can tell it to vertically start of when the mycol class ends
You could put testclass inside mycol, and add position: relative; top: 100%; to testclass like this:
<div class="mycol" id="mycanvas" style="z-index: -1; top: 150px; left: 240px; width: 88%; height: 80%; position: absolute; background-color: red;">
<div class="testclass" style="position: relative; top: 100%;">
Hello World
</div>
</div>
I think the requirement of keeping the div.testclass under div.mycol doesn't need the use of position.
If you can explain the complete requirement which you are trying to achive can help all to give you a better solution.
<div style="height:200px;padding:50px;">
<div class="mycol" id="mycanvas" style="width:88%; height:80%;background-color:red;">
</div>
<div class="testclass" style="margin-top:20px;">
Hello World
</div>
</div>
Well, by making mycol have position:aboslute you are removing it from the page's normal flow. We can demonstrate this like so.
<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>
<div class="testclass" style="margin-left: 500px; height: 500px; width: 500px; background-color: black;"></div>
As you can see, the testclass is completely unaffected by mycol's position.
So, in your sample, although we can see the red box, it is not affecting the position of "Hello World".
If we would like to move the text below it, then we could use margins, disrupt the normal flow (using position), or put content behind the existing text to eventually force it below it.
Since you specified that you do not want to use the position technique, then I will demonstrate this using margins. We can use percents, such as : margin-top: 80%, but this would have some odd effects. W3 specifics that margin-top goes off of the width of it's container when using percents, so you wouldn't benefit a whole lot.
Regardless, it does answer your question!
<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>
<div class="testclass" style="margin-top:100%; background-color: gray;">
Hello world
</div>
I want to make about 5 different images appear in the same location on the screen across different screen locations.
I can't paste the code of the whole site because I am using MYBB Software.
But here is the site: www.AlphaDiscussion.com(Yes I realize the part around the forum looks ugly, I am waiting for it to update the color)
I want these five images to appear right above the logo.
This is the code in the header template where the five images are:
<img src="http://i.imgur.com/TtU3OAY.png" style="position: absolute; top: 40px; right: 500px;">
<img src="http://i.imgur.com/pDzigv1.png" style="position: absolute; top: 40px; right: 630px;">
<img src="http://i.imgur.com/pLIlkK1.gif" style="position: absolute; top: 40px; right: 730px;">
<img src=" http://i.imgur.com/KyYZ8m1.png?dateline=1416083133" style="position: absolute; top: 60px; right: 860px;">
<img src=" http://i.imgur.com/iQUavgQ.gif" style="position: absolute; top: 60px; right: 970px;">
They are in a comment tag right now so they won't show up.
I am typing this from a chromebook, but my main computer is a windows laptop.
So How can I do this?
Do you mean those 5 images centered above your logo?
I saw your code and maybe like this:
<div class="wrapper">
<div style="width:100%; text-align:center">
<img src="http://i.imgur.com/TtU3OAY.png">
<img src="http://i.imgur.com/pDzigv1.png">
<img src="http://i.imgur.com/pLIlkK1.gif">
<img src=" http://i.imgur.com/KyYZ8m1.png?dateline=1416083133">
<img src=" http://i.imgur.com/iQUavgQ.gif">
</div>
<center><img src="http://alphadiscussion.com/images/logo.png" alt="AlphaDiscussion ~ For the Alphas" title="AlphaDiscussion ~ For the Alphas" /></center>
.....
...
Create new div above logo (above center tag) with width 100%, and put inside images, then with text-align you can align them center as is here, or text-align:right...
Is that what you need?
those 5 images centered above logo, one after another?
I have seen this question have been asked many times, but mine is a little complicated.
I am using bootstrap on my website, and basically, I am trying to join two images one half is a customer image, other half is a business image. What actually I'd like is, when one hover overs the first half i.e the customer image, the second half i.e the business image should turn to the second half of the customer image and the vice versa when someone hovers over the business image.
Here's my HTML code.
<div class="pics">
<div class="1half">
<div class="col-sm-2" style="padding-right: 0;" id="b1">
<img src="image/b1.png" alt="" width="340px" style="float: right;">
</div>
<div class="col-sm-2" style="padding-right: 0; display: none;" id="c1">
<img src="image/c1.png" alt="" width="340px" style="float: right;">
</div>
</div>
<div class="2half">
<div class="col-sm-2" class="flash" style="padding-left: 0;" id="c2">
<img src="image/c2.png" alt="" width="338px">
</div>
<div class="col-sm-2" class="flash" style="padding-left: 0; display: none;" id="b2">
<img src="image/b2.png" alt="" width="338px">
</div>
</div>
In the above code, what I want is when someone hovers over #b1: #c2 should go away, and #b2 should be visible. I tried implementing CSS changes but it doesn't work.
I have added the link on JSfiddle here. http://jsfiddle.net/2R5bq/
Basically on hover, both should be the same.
No need for so many div's. One main wrapper, two image wrappers/masks is all you need. See this JSFiddle a threw together.
HTML
<div id="imageWrapper">
<div id="imageLeftImageWrapper">
<image src="http://lorempixel.com/320/180/animals/" />
</div>
<div id="imageRightImageWrapper">
<image src="http://lorempixel.com/320/180/cats/" />
</div>
</div>
CSS
#imageWrapper {
position: relative;
width: 320px;
height: 180px;
}
#imageWrapper #imageLeftImageWrapper {
position: absolute;
top: 0px;
left: 5px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper {
position: absolute;
top: 0px;
right: 0px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper img {
position: absolute;
right: 0px;
}
#imageWrapper #imageLeftImageWrapper:hover,
#imageWrapper #imageRightImageWrapper:hover {
width: 320px;
z-index: 1;
}
I'm trying to place an img over another img, because I want the effect of a scrapbook with the images being "taped" into the homepage.
I'd like to keep the tape layer consistent and free myself to change the image underneath without losing the positions.
HTML:
<div id="container">
<div id="content">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div class="text">
<h2>Rain Hands</h2>
<p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
</div>
</div>
</div>
CSS:
.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }
.tape {
margin-left: 10px;
margin-top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
What I get is:
http://oi50.tinypic.com/28s8x8j.jpg
But I want the tape to be on top of the corners of the image.
Take the tape outside of the div container:
<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div id="container">
<div id="content">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="text">
<h2>Rain Hands</h2>
<p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/hescano/bb5JC/
Try #content {position: relative;}, and remove the float on the .tape.
The way that I would accomplish this is by making a wrapper div (class="image") to place the photo and the tape graphic inside of. Then wrap the tape image in another absolutley positioned div. Now you can use the top: left: to position the tape graphic so it matches up. In your example, the tape is too tall for your sample image. If you are going to have varying image sizes, it might be smart to make two tape images, one for the top and one for the bottom, and position them using top: and right: and bottom: and left:
<style>
.image{
position:relative;
}
.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }
.tape {
left: 10px;
top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
</style>
<div class="image">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="tape"><img src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /></div>
</div>
In my site, the back to top button will follow the page, which is exactly what I want. However, if your resolution is above 1024x768 (which I'm pretty sure is the case for everyone) the button's position won't be inside the main content div.
I could use Javascript to detect the resolution, and then adjust the position from there, but if there's a cleaner solution, I'd prefer that! Also, I'm not a designer, so if anyone has any cosmetic input, it'd be appreciated!
I have a solution. Add a div to wrap the button.
<div id="button-wraper">
<div id="backToTop">
<a href="#top">
<img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top">
</a>
</div>
</div>
CSS
#button-wraper {
width: 960px;
margin: 0 auto;
position: relative;
}
And remove position: fixed; from #backToTop.
Also make sure to put this code just above <div class="footer"> only.
Put
<div id="backToTop">
<a href="#top">
<img alt="Back to top" style="border: none;z-index: 100;" src="site_resources/upArrow.png">
</a>
</div>
Inside the content div. Remove the "left" positioning and keep the bottom one, it would sit on its natural left position, since you don't have anything defined.
Actually, though, I think it looks much better where it is now.
Edit**
Try this:
<div id="button-wrap">
<div id="backToTop">
<a href="#top">
<img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top" />
</a>
</div>
</div>
CSS
#button-wrap {
position: fixed;
bottom: 0px;
left: 0px;
width:100%;
}
#backToTop {
position:relative;
width:1000px;
margin:0 auto;
z-index: 1000;
color: #C6C6C6;
opacity: 0.3;
}