Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them?
Example:
<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" />
<h2 style="padding: 15px" >This text is behind not below the image</h2>
Is there a way of displaying the h2 below the image excepting positioning it absolutely too?
Example:
http://jsfiddle.net/fDGHU/1/
(yes, I have to use absolute in my case, and dynamic margined content below, and I'm lost :D)
The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.
PS: position:block doesn't exist. Only absolute, relative, static, and fixed.
For h2:
specify a top margin equal to the height of your image.
eg.
img {
position: absolute;
top: 0;
}
h2 {
margin-top: 400px;
padding: 40px;
}
Simple , just remove position absolute . (tested)
If an object is not defined it will automatically go to the right of its neighbour or below
How about wrapping the image and the title in an absolute block? This solution puts the title after the image because h2 is a block by default and your content is still absolutely positionned.
<style type="text/css">
.wrapper{
position: absolute;
top: 0;
}
h2 {
padding: 40px;
}
</style>
<div class="wrapper">
<img src="image_url" alt="image!" />
<h2>Am I invisible? (not!)</h2>
</div>
Related
I have the following attempt, trying to make a simple sticky footer.
My problem is the footer is not sicking to the bottom, I suspect it might be a css problem.
Would greatly appreciate it if someone can give the following code a scan and provide some advise.
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: absolute;
bottom: 0;
}
<footer class="footer" id="footer">
<div class="footLeft" style="width:75%; float:left;">
</div>
<div class="footerRight" style="width:25%; float:right; padding:25px;">
<button class="btn btn-danger" style="font-size:20px;">Sign Up</button>
</div>
</footer>
The Problem Im having / Output
Add the following rules to body
body {
min-height:100%;/*or 100vh */
position:relative;
}
Explanation:
The min-height property will make sure that the body at least takes 100% of your viewport height. This way even if you have less content your footer will always stick to the bottom of viewport.
Position: relative rule is set so that the footer is positioned absolute relative to the body and not any other wrapper
You can just use this native class to achieve sticky footer in bootstrap--
<div class="footer navbar-fixed-bottom">
Another possibility is using position:fixed, without influencing the body css.
In that case the footer would be always at the bottom of the page event if a scrollbar is present
Example
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: fixed;
bottom: 0;
}
See fiddle
Given the following CSS:
body {
font-family: Corbel, Calibri, Verdana, Helvetica, sans-serif;
font-size: 9pt;'
}
.heb {
font-family: Bwhebb;
}
.heb, .eng {
font-size: 25pt;
cursor: pointer;
display:none;
}
.slideshow, .cardface, .card {
width: 100%;
height: 15%;
text-align: center;
position: absolute;
}
and the following HTML
<div class="card" id="wordID">
<span class='heb cardface'>
some word
</span>
<br />
<div class='eng cardface'>
some translation
<br />
<a href='#' class='right' >correct</a> |
<a href='#' class='wrong' >incorrect</a>
</div>
</div>
I get two different results on Chrome and Firefox. Chrome centers everything on the page while Firefox places the span .heb .cardface WAAAAAYYYYYYYYYYYYYYY to the right.
I am pretty sure I'm doing something wrong, could you help me figure it out?
If I remove position: absolute; from your CSS, in the last line, having .slideshow, .cardface, .card {width: 100%; height: 15%; text-align: center;}, it is all centered.
Is that what you're after?
You have an absolutely positioned div with an auto left offset. That means its left edge should be placed where it would go if its position were static.... and since the parent element has centered text, that means at the center of the parent element. Chrome gets this right if you have any text in the parent element, but wrong if the parent element has only positioned kids. See the testcases at https://bugzilla.mozilla.org/show_bug.cgi?id=671491
Oh, and the upshot is that left: 0 should do what you want, I would assume.
The problem in firefox is that <div class="card" id="wordID"> is in absolute position, and <span class='heb cardface'>some word</span> is also in absolute position.
You can either remove the absolute positionning, according to #Nightfirecat suggestion.
Or you can remove the absolute positionning for either .card or .cardface. It's better if you remove it from .cardface, since then, .card content will be what's inside .cardface (Remember : Positionning something in absolute moves it out of it context! Aka, the parent element won't use it to define it's size/will act quirky.)
Goal:
A CSS two column layout with main content in the flow first followed by left nav (see example code). This is probably easier than I think but I could not find any clear cut example here or online. The left nav has to have a fixed width.
I would like to position the left nav and main content areas as you would expect (left nav then main content). This is for SEO purposes to place the content as high up in the flow as possible then position it appropriately. I need to have this work in IE6 as well. The main content area needs to expand with the browser window. With my current version the left nav is absolute positioned and overlaps the main content container. Thanks in advance for all you CSS gurus!!! Hopefully this can be of use to others as well.
<style>
.clearly {clear: both; font-size: 1px;}
.contentContainer {border:1px solid; width:800px;}
.leftNav {width:200px;background-color:#CCC;position:absolute;}
.mainContent { position:relative;left:200px;width:100%;float:left;background-color:#A6C9FF;}
</style>
<div class="contentContainer">
<div class="mainContent">
Relative Main Content - Width 100%
</div>
<div class="leftNav">
Absolute Left Nav<br />
Absolute Left Nav<br />
Absolute Left Nav<br />
</div>
<div class="clearly"> </div>
</div>
Drop the containing div.
html, body { width: 100%; height: 100%; overflow: hidden; margin:0; padding: 0; }
.mainContent
{
position: absolute;
left: 200px;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.leftNav{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
}
http://jsfiddle.net/hFAaZ/
P.S. this has an advantage over the other answer in that any backgrounds applied to either nav or content areas will always fill the page. This is usually what is expected from the designer.
Edit
Just noticed that you need a fixed width on the container. Add .container to the html,body list above, then also add another rule to ste it's width to 100%;
Is this what you are after:
http://jsfiddle.net/Mutant_Tractor/8uws6/
Simple semi-fluid + fixed layout:
Fluid column:
padding-left: 170px;
Fixed:
width:150px;
float:left;
background:red;
position:absolute;
http://elektrikhost.com/
You see the penguins thats over the header on the columns? I'm trying to get them to be over the header and list. I'm wondering what would you do? use position absolute, or relative? I'm stuck.
HTML:
<section class="starter">
<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Starter Plan</h2>
<ul>
<li><span>5GB Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->
.plan-icon is the image.
Needs to look like this:
You can simply set the image style to float: right
.starter { position: relative; }
.starter img { position: absolute; top: 5px; left: 140px; }
The idea is that the image is positioned "absolute" so it can be anywhere within the confines of its parent element ".starter". This will not work if ".starter" is not set to relative.
I got this to work in Firebug, the .starter img selector might need changing but its the idea of absolute positioning that you should take away from this.
try
<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">
I might even suggest adding a padding: 5px 5px; to that, but that's just me ...
Use relative positioning. You can also give it a z-index to place it "on top" of any elements.
Regardless, take a look at this page. It should help you out:
http://w3schools.com/CSS/css_positioning.asp
If it were me, I'd add this CSS.
#plans-wrap section { position: relative; }
#plans-wrap section .icon { position: absolute; right: 0px; top: 0px; }
I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works.
#banner {
width: 700px;
height: 90px;
top: 60px;
left: 178px;
overflow: hidden;
text-align: center;
display: table-cell;
vertical-align: bottom;
position: relative;
}
<div id="banner">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>
But if I change the css code "position: relative" to "position: absolute", the image cannot be aligned to bottom any more. Is this a bug of Firefox3? How can I solve this problem?
My current solution is:
<div id="banner">
<table width="100%" height="100%"><tr><td valign="bottom" align="center">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</td></tr></table>
</div>
But I do not like this solution.
Short answer:
Change
top: 60px;
to
bottom: 60px;
Long answer:
The declaration position: absolute takes your element out from wherever it is and place it relative to innermost element that is not declared static. In no longer participate in the alignment of any other element, hence it no longer serve as table-cell (the declaration has no effect). Additionally, declaration such as top: 10px means to place it that much distance from the top of that containing element.
Declaring an element as position: relative makes declaration such as top: 10px means 'move the element 10px from the top from the current position'. It is possible for elements declared relative to overlap with other elements, although you should remember that the original position still determines the arrangement of other elements.
I hope this answer your question.
You could also try setting a position:relative; container, which makes the banner (the #banner position:relative; and the img position:absolute) then set the absolute position to be bottom:0, aligning it to the bottom of the container. If it's the whole page, just set the width and height of the container to 100%, and remove extra padding/margin on the body or on the div.