I am trying to line this bottom shadow up as in the top shadow but I cannot seem to get the firgured out. The only time it collapses is when I remove the line-height or font-size much further down in the css file using Developer Toolbars but of course this affects everything else too. Here's my basic html structure:
<div class="banner-image">
<div class="banner-image-wrapper">
<div class="shadow-top"></div>
<a class="header-image">
<img />
</a>
<div class="shadow-bottom"></div>
</div>
</div>
On the tag, if I remove the font-size and line-height, everything collapses nicely on itself but I cannot seem to force this just on the tag.
I know this is going to be a ridiculous issue once it's been solved.
Thanks!
The answer is actually pretty simple, you just need to use some clever positioning & take advantage of the parent's box-model:
.banner-image{
position:relative;
}
.shadow-bottom{
position:absolute;
height: x;
bottom: -x;
}
Here's the formula you need:
Take the height of the bottom shadow ( some value x )
Then make sure the parent of that element has a position of 'relative' (~important~)
Make the position of the bottom shadow 'absolute'
Position it at the bottom minus the value of it's height ( -x )
Here's a jsFiddle illustrating the effect: http://jsfiddle.net/k7CmJ/
I know this is old, but for anybody else looking for an answer to this, where absolute positioning won't work, setting display:block on the img tag will get rid of that space:
.header-image > img {
display:block;
}
Normally an image is an inline block, and because it's inline, white-space around it is preserved.
Here is the problem: http://jsfiddle.net/3Kd3f/
And here is the exact same code, only with display:block added to the img tag: http://jsfiddle.net/3Kd3f/1/
Related
I am building a few websites and always have this same problem with css.
I have two images inside a div container.
When i put for example a text inside a div the div takes the heigth of the text but when i put an image in for some for me unknown reason the div suddenly seems to have a default heigth.
As you can see i have made the size of the images responsive in my css. I ve involved a color on the div just to give a clearer look on what happens.
When i narrow my browser screen the heigth of the div stays equal ( thus not being responsive) and for some reason the images are pushed down inside the div.
How can i solve this.I want the div container height to be responsive as the images inside are and holding the same height as the images and as i narrow the browser screen.
Last but not least ... what is it that i do not understand ?
Thank you for helping me out.
My code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
</div>
</body>
</html>
If you want the parent div to have a certain size, you should enforce dimension on the div and inherit its properties to its children...
div{
height: 50vh;
width: 50vw;
background: red;
}
div>img{
height: 100%;
width: 100%;
}
<div>
<img src="image.jpg" alt="text">
</div>
you should try adding display: block; to <img> tag.
I hope this help.
If you aren't using Bootstrap or another css framework, maybe you need to add reset.css file to your project. Example of reset: https://meyerweb.com/eric/tools/css/reset/
Please check this. I think it will help you. codepen
div{background-color:red;width:200px;overflow:hidden;}
div img{height:auto; max-width:100%;display:block;}
<div>
<img src="image" alt="text">
</div>
Try using max-width:100% on the image. This will keep it's size limited to it's parent size.
I'm looking for a way to put a child div at the bottom of the parent div. The parent div is placed inside a td which has a dynamic height depending on the content of the row. I tried several attempts including the position: relative and position: absolute solution, but it didn't work because of the dynamic height.
Does anybody has an idea?
Edit:
I'm not using the table for layout. The table is used to display data which is loaded dynamically from the server. I've added a picture which shows how the the two divs should be placed inside the td. The parent div has no specific style at the moment. I don't need to support old versions of IE. The site will be used primarily with latest versions of Firefox, Chrome and Safari.
layout http://img29.imageshack.us/img29/5271/e49.png
You should be able to position the child div by using absolute positioning. Set the parent div to relative position, then child to absolute and bottom:0; You will then need to adjust the vertical align of the <td> elements if you want the parent div to also be at the bottom.
your css would be something like -
div#container{width:200px;height:200px;
border:1px solid #666;
position:relative;
}
div#bottom{
width:100px;height:100px;
border:1px solid #f00;
position:absolute;bottom:0;
}
here is a sample jsfiddle - http://jsfiddle.net/LRy6h/
and one where the parent div is also at the bottom - http://jsfiddle.net/LRy6h/1/
and one with resizeable (dynamic) heights - http://jsfiddle.net/LRy6h/2/
and another one to match your updated image - http://jsfiddle.net/LRy6h/3/
I found another way to solve the problem. I set the height of the corresponding tr as well as the height of the td and parent div to 100%. Here is a code snippet:
html + css:
<tr style="height: 100%;" ng-repeat="order in orders">
<td style="height: 100%;" >
<div style="height: 100%; position:relative;">
<span>PARENT - SOME TEXT</span>
<div style="position:absolute; bottom: 0;" >CHILD</div>
</div>
</td>
</tr>
Sorry, but I have to write an answer instead of adding a comment (not enough reputation).
Sounds as if you are using a table for layout - that's no good idea! ;-)
Furthermore it would be helpful, if you post the relevant HTML and CSS code, or even better setup a jsFiddle.
How do you style the parent DIV?
There is no cross-browser way of setting it to the height of the TD (using CSS only). The "modern" way might be using 'flexbox'. But it depends on the Browsers (and versions) you have to support and the layout you would like to achieve.
Using 'position: relative' on table elements does also not work, because the behaviour for this is 'undefined'.
So to really give you some good advice there are some informations missing.
I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.
I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags