HTML:
<div>
<img>
<div>
<table>...</table>
</div>
</div>
CSS:
#img {
position: absolute;
right: 0px;
}
Both divs are the same size as the table.
I want the image to float top right of the table.
This results that the img is at the right side of the screen and not in the div.
You need to add position:relative; to the containing div. Also, I would advise against using tables unless you will be displaying tabular data, they should not be used for layout.
.container {
position:relative;
width:500px;
height:500px;
border:1px solid black;
}
.container img {
position:absolute; /* absolute misspelled in your example */
top:0;
right:0;
}
<div class="container">
<img src="http://placehold.it/250x250" />
<div>
<table></table>
</div>
</div>
img ignore width set to their parent. Apply width to img itself instead.
Also, you misspelled "absolute".
Related
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
I have some child divs placed in a parent div. It looks like that:
Now I need to place an image with a relative size into the red(brown) div.
But every time when I place the image into the div the layouts expands.
And that is a problem for me.
So how can I put an image with a relative size into my div without expanding the div layout?
HTML:
<div class="textContentContainer">
<div class="FirstSectionContentHeader">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="FirstSectionHeaderintroText uppercase">
SOME TEXT
</div>
</td></tr></table>
</div>
<div class="FirstSectionLogoArea">
<img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
</div>
<div class="FirstSectionIntroText usualText">
ddd
</div>
<div class="FirstSectionBottomLayout">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
</div>
</div>
CSS
.FirstSectionContentHeader{
height:10%;
width: 100%;
font-weight:200;
text-align:center;
background-color: aqua;
}
.FirstSectionLogoArea{
height:10%;
width:100%;
background-color: chartreuse;
}
.FirstSectionTitleLogo{
height:80%;
width:100%;
object-fit:contain;
}
.FirstSectionIntroText {
height:70%;
width:100%;
background-color:white;
}
.FirstSectionBottomLayout{
height:10%;
width:100%;
background-color: brown;
}
.FirstSectionBottomArrow {
height:10%;
width:10%;
object-fit:scale-down;
}
the image has position: staticby default, which is "inserted" in the parent element and "takes some space" there, causing the parent element to become larger. You can give it position: absolute(which requires that the parent element has position: relative) and still use percentage values.
I am trying to take one image, place it on the screen as a background, and then put a company logo on top of it so it all looks like one image. I have looked at other people's examples, and those give me the background where I want it, but the company logo that I want on top of the background is displayed beside the background instead of on top. Nothing I try seems to be working. Can someone please help?
HTML:
<div id="Background">
<img src="images/background/background.png">
</div>
CSS:
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
Here's how I'd do it. You'll need to give the surrounding div the dimentions of the background image:
HTML
<div class="background">
<img class="logo" src="http://placehold.it/150x75/FF0000/FFF&text=Logo" alt="Company Name" />
</div>
CSS
.background
{
position:relative; /*Any child elements can now be positioned relative to this element*/
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px; /*Width of background image*/
height:150px; /*Height of background image*/
}
Example: http://jsfiddle.net/8RC7U/
There are many different ways you can then position the logo:
Margins
.logo
{
margin-top: 10px;
margin-left: 10px;
}
http://jsfiddle.net/8RC7U/1/
Absolute Positioning
.logo
{
position:absolute;
top: 15px;
right:30px;
}
http://jsfiddle.net/8RC7U/2/
and that's just for starters.
On a final note the following may be more accesible for screen readers and better for SEO:
HTML - Include the company name as text
<div class="background">
<h2 class="logo">Company Name</h2>
</div>
CSS - Shift the text off screen and use background image again
.background
{
position:relative;
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px;
height:150px;
}
.logo
{
text-indent:-9999px; /*Shift the text off screen*/
width:150px; /*Width Of logo*/
height:75px; /*Height of logo*/
background-image:url(http://placehold.it/150x75/FF0000/FFF&text=Logo);
margin: 10px 0 0 10px; /*Positioning top right bottom left*/
display:inline-block; /*Set to inline block so margins apply inside parent*/
}
Example: http://jsfiddle.net/8RC7U/3/
Use the "background-image" CSS attribute on a block-level element (, etc.) for the background PNG, then place the PNG buttons inside that block element.
You can try Like this:
CSS
<style type="text/css">
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
</style>
HTML
<div id="Background">
<img src="images/background/background.png" />
</div>
If you have doubt let me know..
One of the simple solution is use
z-index
make your logo's Z-index graterThan background Z-index e.g()
#background
{
z-index:9
}
#logo
{
z-index:99
}
This would help you accomplished what you want.
Hope that helps
FIDDLE
HTML
<div>
<img src="http://placehold.it/350x150" class="img1">
<img src="http://placehold.it/150x100" class="img2">
<div>
CSS
div {
position:relative;
}
.img1 {
position:absolute;
z-index:1;
top:0; left:0;
}
.img2 {
position:absolute;
z-index:2;
top:24px; left:100px;
border: solid 2px;
}
if you want to use only two images the best way to do it
have the div with the background, then load a image in side the div.
<div id="Background">
<img src="images/background/background.png">
</div>
#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
I would like to use height:50%, but the container's height is not defined, what's the correct solution?
<div id="container">
<div id="left-50">
<div id="left-50-1">1</div>
<div id="left-50-2">2</div>
</div>
<div id="image">
<img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg">
</div>
</div>
#container {
overflow:hidden;
}
#left-50 {
float:left;
}
#left-50-1 {
height:50%;
width:50px;
background:yellow;
}
#left-50-2 {
height:50%;
width:50px;
background:purple;
}
#image {
float:left;
}
Jsfiddle url: http://jsfiddle.net/XqMDF/
the correct solution is to define container height.
or refer to the body or other defined element.
make container display:inline-block; to adjust to image height ... or define a fixed height.
DEMO: http://jsfiddle.net/XqMDF/2/
Point is: add position: relative; to #container, and position: absolute; to elements with height: 50%;. Also, apply display: block; to image. Then add left margin on #image. Value of that margin is width of elements with height: 50%; (50px in your example).
Here is demo with all properties.
http://jsfiddle.net/XqMDF/1/
I have a markup that looks like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" />
<div class="YellowExclaimIcon iconsBlack"></div>
</div>
What I want to achieve is below:
Meaning that the image should always be placed center (Both horizontal and vertical) in the parent div and the warning icon should on top of the image with a margin of 5 to the right and to the bottom.
Another thing to note is that, the image width and height is not always the same, but the position for the warning icon should always be the correct place.
The YellowExclaimIcon class contains a background image, but can be altered to a image if need be. Something to consider is the image also has a max-width and max-height.
I tried with the answer in this thread CSS Help - div over image but I could't get it to work with the centering.
if the image width & height are variable, you can only achieve this if you change the markup, something like this:
<style type="text/css">
div.container {
width:150px; height:250px; display:table-cell; vertical-align:middle;
text-align:center; background-color:#ededed}
div.image {
position:relative; display:inline-block; }
div.image img {
display:block; }
div.YellowExclaimIcon {
position:absolute; width:80px; height:80px; bottom:5px; right:5px;
background:transparent url(your-icon.png) no-repeat 100% 100%}
</style>
<div class="container">
<div class="image">
<img src="Image.jpg" alt="" />
<div class="YellowExclaimIcon"></div>
</div>
</div>
The sample above will always horizontally & vertically align the image in the center, with an icon in the bottom right corner, 5px margin.
Check a working sample: http://jsfiddle.net/Q9uhV/
Use position:relative to outer div and absolute to inner div
HTML
<div class="outer">
<div class="YellowExclaimIcon"></div>
</div>
CSS
.outer{
width: 150px; height: 250px;
border:solid red 1px;
position:relative;
vertical-align:middle;
background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;
}
.outer img{text-align:center; vertical-align:middle}
.YellowExclaimIcon{
position:absolute;
width:100%;
height:100%;
top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;
}
DEMO
You need to use z-index and some positioning like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" style="z-index:-1" />
<div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>
..for example, set your margins to what you need.
Make your warning image absolute so you can position it over the other image at a specified location.
HTML:
<div class="container">
<img src="penguin.png" />
<img class="warning" src="warning.png" />
</div>
CSS:
.warning {
position:absolute;
left:80px;
top:80px
}
See this jsFiddle for a demo.