I'm new to this world, but loving it so. Please excuse my newbie status if I ask ridiculous questions or if things are not posting quite right. Please advise as you see fit.
I am trying to get a button to float over an image. I've brought the image in as an in-line element so that I can preserve the PSD link in Dreamweaver, rather than bringing it in as a background image and for the alt attribute applications. I'm guessing the problem is that I want the inline image to act as a block? Is that right? I've been able to get the button to float over the image using relative positioning for the button and absolute positioning for the image, but then am unable to center the whole thing on the page. Any advice you have is greatly appreciated!
CSS
#container {
margin: auto;
display: block;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
float: left;
position: relative;
}
HTML
<body>
<div id="container"><img src="index.jpg" width="1200" height="900" /></div>
<div id="button"></div>
</body>
Move your button div inside your content div:
<div id="container"><img src="index.jpg" width="1000" height="900" /><div id="button"></div></div>
And then change your container to be the width of your content. Position set to relative. Then, position the button inside the container div with absolute, top, and left.
#container {
margin: auto;
display: block;
width:1200px;
position:relative;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top:0px; left:20px;
}
Related
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
I have seen the layout similar to the image below used on some sites before and I really like the design but don't exactly know how to implement the overlapping image (Profile Image). I am using bootstrap if that helps. Any ideas?
Thanks!
I can see three ways to do this generally.
position: absolute
You could give the image or the image's wrapper the attribute of position:absolute and giving its container (in your example the green box) position:relative. Then you would apply top: -100px or whatever and a left attribute of left: 100px or whatever. This gives the effect of the image being out of flow, aligned to the left and offset by 100px, and 100px offset from the top of the green container. The disadvantage of this approach would be that any body content in your green container could appear under the image.
position: relative
This is the same approach as the first one with the exception of how the image flows in the document. Instead of giving the image position:absolute, you would give it position:relative. Relative works differently from absolute. instead of being x and y coordinates of the parent container, it's just shifted by however much you give as a value for top and left. So in this case, you would apply top:-100px and just leave the other directional values as default. this would shift your element by that amount but also leave its original spot in the document flow. As such you end up with a gap below the image that other content will flow around.
negative margin
I honestly would prefer this method in your case. In this method, you can give the image a negative margin (e.g. margin-top:-100px). This will offset the image, collapse the area below the image, and it will still retain some of its flow in the document. This means that the content of the green container will flow around the image but only around the part that is still inside the container. It won't have a ghost area that content flows around like with relative positioning, but it also doesn't entirely take the image out of flow like absolute positioning. One thing to keep in mind, however, is that if you try to use overflow of any kind other than the initial value, it will cause undesirable effects to your image.
Demo
Here's a quick little demo demonstrating all three methods in a simple use case: http://jsfiddle.net/jmarikle/2w4wqfxs/1
The profile image can be set with position: absolute; top: 20px; left: 20px, or something like that to keep in from taking up space in the flow of the page.
make the html element that holds the header image "position:relative". Then put the header image and the profile image in that element. then make the profile image "position:absolute" and utilize "top: XXpx" depending on how far you want it from the top of the header element. Same for "left".
see fiddle here
<div class="header">
<img src="" alt="my image" class="floatdown">
this is my header, image could go here too
</div>
<div class="body">
this is my body content
</div>
.header {
position: relative;
width: 100%;
height: 150px;
border: 2px solid #000;
text-align: right;
}
.body {
position: relative;
width: 100%;
border: 2px solid #000;
height: 500px;
text-align: right;
}
img {
width: 90px;
height: 90px;
border: 2px solid #ddd;
}
.floatdown {
position: absolute;
top: 100px;
left: 20px;
}
You can use the float property on your profile image to take it out of the "flow" of the document, and play with the margins to place it properly.
CSS :
#profile-image{
width: 100px;
height: 100px;
float: left;
margin: 100px;
}
The marginis used to push it down and place it properly.
You can see an example of this in a Fiddle : http://jsfiddle.net/y706d77a/
I wouldn't recommand using position: absolute as you can get very strange results with different resolutions. I would only use that as a last resort.
This can be done many ways.
Anytime you see something like that on the web you can just use your inspector or firebug and see how they are doing it to get some ideas.
It wouldn't hurt to do some research on the web about CSS positioning.
http://www.w3schools.com/css/css_positioning.asp
Another great site.
http://css-tricks.com/
I just finished it.
Here is a codepen link:
http://codepen.io/anon/pen/zxYrxE
HTML:
<div class="main-container">
<div class="header">
<p>This is the header div</p>
</div>
<div class="profile">
<p>Profile</p>
</div>
<div class="content">
<p>Some dummy content div</p>
</div>
</div>
CSS is to big to be pasted here, so just open the link.
Put the profile image in the header, make the position: absolute; and the image position: relative;, and give it a negative bottom value that's half the height of the image, and set left to position it horizontally to taste.
HTML
<header>
<img class="profile">
</header>
<div>Content</div>
CSS
header, div{
min-height: 110px;
background: darkgray;
}
header{
position: relative;
background: gray;
}
img{
position: absolute;
bottom: -50px;
left: 100px;
}
http://jsfiddle.net/dekqn84c/
I recently stumbled upon a problem while coding html and css. I have this img element within a div and I want the div to resize to the size of my img. It's a responsive design, so whenever my img gets smaller, I want my div to resize with it.
Normally it would do this automatically, but since I used "position: absolute" in my img tag, the div height is simply 0.
Html: (note: there's 4 images because I'm creating a slideshow using css3, that's also why I need the position absolute on my img tag)
<div id="cf4a" class="shadow">
<img src="Afbeeldingen/Home/img1.jpg">
<img src="Afbeeldingen/Home/img2.jpg">
<img src="Afbeeldingen/Home/img3.jpg">
<img src="Afbeeldingen/Home/img4.jpg">
</div>
Css:
#cf4a {
text-align: center;
padding-left: 2.5%;
width:95%;
position: absolute;
}
#cf4a img {
max-width: 1160px;
width: 90%;
position: absolute;
left: 1.25%;
}
How would I go and fix this? Thanks in advance.
this is a good tutorial for what you are trying to do,
basically you trick out the css by using a relative position but switching through what portion is viewed, using the overflow hidden property, check it out it is pretty cool!
http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/
I am trying to design a website, where I want a div of 100% height inside a element and then some other div inside it, formatted in a specified manner.
the code I am trying is this
css
#main1{
margin: 0 auto;
width:300px;
background: red;
position:absolute;
}
#content1{
top:0;
width: 300px;
height: 250px;
background: gray;
}
#content2{
width: 300px;
height: 250px;
background: yellow;
}
#content3{
width: 300px;
height: 250px;
background: brown;
}
#bottom{
width: 300px;
height: 75px;
position:absolute;
bottom:0;
background: blue;
}
and I have designed it like this
<td width="300" valign="top" style="position:relative; height:100%">
<div id="main1">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
</td>
I want the div with id content1 at extreme top and with id bottom at extreme bottom inside td, so that if the height of the element varies it automatically get aligned at top and at bottom with margins in between the inner divs, also I want this to be all browsers compatible.
I tried and it worked in IE.
I have tried so many codes but couldn't get the solution
You can see in this link at right side that where and what I am trying to make
http://www.spoiledagent.com/about_hanu.html
Thanks
First, I'd ask that you display the whole of the HTML markup for the body structure. A small snippet doesn't give an accurate picture of the entire structure that could be affecting your undesired result.
Second, I'd recommend you don't use tables for site layout. It's bad practice for a variety of reasons. Here's a Q/A with supporting arguments.
Third, you have to remember that every element that you make has a parent, right up until the <html> tag. So, let's say I wanted the main container of my site to have 100% height to the window.
Let's say this is the only other element besides <html> or `'.
<div id="container">
<h1>Why you no touch the bottom?</h1>
</div>
with this CSS:
#container {
background: #ccc;
height: 100%;
}
http://jsfiddle.net/BvNY4/
In this fiddle, we can see it doesn't to to 100% height. Why? Well...technically, it is...but it's parent isn't. So like a brave Tee-Ball coach, we need to tell this element's parents what to do:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
http://jsfiddle.net/B6RH7/1/
Ta-da! Let me know if you need anymore clarification on how this applies to your scenario. :)
A little more directed at your specific goals, try this article explaining position: relative; for parent elements. If the parent element has attribute position: relative;, any child elements with position: absolute; will position themselves to the parent element.
I'm trying to achieve an image flowing out of a div. Basically, in my heading I have a fixed width of 960px, the logo image has something coming off of it, which I would like to sit outside that 960px.
Is there a nice clean method of achieving this?
The simple method of doing it (that works in most browsers), is that you make your main wrapper have position:relative, and the make the div (that you want to flow outside) have position: absolute; left: -25px; top: -25px;.
Having position:relative as the wrapper makes the position:absolute relative inside the parent container.
put your logo in fixed div and give that div a style overflow:hidden
You could also absolute positioning to achieve this. Quick example below:
http://jsfiddle.net/spacebeers/9QJ4w/1/
You can use the position property of CSS to accomplish this:
HTML:
<div><p>Some content<img src="http://placehold.it/50x50"></p></div>
CSS:
div
{
width: 100%;
height: 175px;
}
div p
{
width: 960px;
margin: 0 auto;
background-color: #333;
height: 175px;
text-indent: 20px;
}
div img
{
position: relative;
right: 140px;
}
http://jsfiddle.net/FpTDc/
Your friend will be overflow:visible.
Your containing div will have the 960px width with overflow:visible. Inside, you will have a relatively or absolutely positioned image (you will need to offset 'left' to center it)
<div>
<img src="" />
</div>
div { width:300px; height:100px; background:red; margin:100px; }
img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }
code: http://jsfiddle.net/cSQrR/