This question already has an answer here:
css how to make max-width fixed when adding padding
(1 answer)
Closed 6 months ago.
I'm learning CSS with W3school,in max width lesson, it was said the max-width is the maximum width of an element
So in this code i see this rule is not actually work!
<style>
div {
width:499px;
max-width: 500px;
height: 100px;
padding: 30px;
background-color: powderblue;
}
</style>
When i increase the padding , the width on the site will also increase.
What is the missing point in this lesson?
In what circumstances the max-width will work correctly?
The problem can be solved when you add this to your CSS code.
box-sizing: border-box;
I suggest watching some tutorials about this line of code.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Example:
https://codepen.io/229075284/pen/aboQVXZ
.outer{
background-color: pink;
}
.outer::after{
content:'';
background-color: red;
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 0;
/* display: table; */
}
.inner{
background-color: blue;
height: 300px;
}
<div class="outer">
<div class="inner"></div>
</div>
When I set display of outer::after to inline-block,the outer will have some extra space marked as pink, even if set font-size and line-height to 0. However, when I set display to table,the extra space disappears.
So I am wondering why the extra space appears?
I checked your codepen. It is a combination of both display: inline-block and content: "" on the ::after pseudo element. You are basically telling the browser that right after the outer element you want to reserve an element's place in the DOM.
You could see that if you remove the content: "" although you are using inline-block the extra pseudo div after the .outer element would disappear. That is because although you stated a certain display mode you practically have no content in this element and the browser ignores your element because it has no fixed size in pixels and no actual content within it.
The reason .outer is growing is that its height is set to auto in default, if you would give it a fixed height in pixels it might not show the spare div.
Your question has nothing to do with line-height or `overflow'.
Me personally I prefer not to use pseudo-classes like ::after and ::before in production. I prefer using regular divs and have my code more readable and understandable by other developers, anyway I hope I helped out. Feel free to discuss further if you have more questions.
i hope someone can answer this question because my client wants this and right now i dont know how to build this in css.
Does anyone know how to build something like this ?
It should be something like if you align your image to the right your text will align nicely with the image.
Here what i want to do is to build a div make a border around all the text that has been typed and then align it with the image. how could i do this?
After the help of Pete.
Problem here is the
box-shadow
Also the box needs to be transparant later in the stage.
This is my result right now http://jsfiddle.net/peteng/cu59r/.
Edit : Thank you for all the answers and support to help me solve this css issue.
The following thing it should happen is :
See the picture.
See the jsfiddle link i posted.
The content with the border needs a box-shadow, a border radius and a gradient.
This needs to be dynamic.
And again thank you community for helping me means alot to me.
with the use of a couple of images you should be able to create what you want
html
<div id="wrapper">
<div id="imageHolder"><div class="inner"><img src="http://lorempixel.com/200/200" /></div></div>
<!--put text here-->
<p>Text</p>
</div>
css
#wrapper {width:400px; border-radius:10px; border-top-right-radius:0px; background-color:#7ab37a; overflow:auto; padding:15px;}
#imageHolder {float:right; margin:-15px -15px 0 0; background:#ffffff url(http://i.imgur.com/gMIy72D.gif) left top no-repeat;}
#imageHolder .inner {background:url(http://i.imgur.com/RLBbLYV.gif) right bottom no-repeat; padding:10px 10px 20px 20px;}
Example
Update
With all your edits as to what you now want (instead of the simple l-shape in your original question). This is not possible for the following reason
The text has to have a background colour which means that you need the background colour on the main wrapper so that it will make the l-shape. This means the only way to get the desired effect of the rounded corners for the image is to place another background over the wrapper background (meaning you cannot have anything transparent otherwise the wrapper background-color will just show through)
The best you can hope for is to tell the client, if they want that shape, they will have to keep the images to an exact size and their text to a specific length and then you can use a simple background image
I think there isn't a easy way to style your text-box like this.
My suggestion: designs the box with Photoshop and then add it as a background image in two different divs (the text box should have a transparent background where the image should be). After this you position the divs in the right way, if necessary with a wrapper div.
disadvantages: not responsive, static, and so on
You can simply float the image and it will look like this: http://www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif
Just add
float: right/left;
margin: 0;
See if that works.
see this DEMO . Is this what you are expecting.
<figure style="float:right;">
This is a very good question in my opinion :)
My short answer would be - yes, it's possible - see Pete's answer. I understand the difficulty of the situation and also I understand the fact that this kind of solution lacks flexibility because it combines css border-radius and an image - so => a) it will look weird in IE8 and below and b) it will look weird if we change some css :)
My own answer would be to use css only to do that, but the main issue will be unsolved, the corners close to the image will not be rounded by any means in css that I'm aware of.
Consider looking at this fiddle - http://jsfiddle.net/skip405/m6cpb/1/
I would prefer my variant because it's a bit more flexible - if there is a need of change - only css will change, no need of re-making any images of another color or of a different radius... no images needed at all :) Although you will need to style the images floated to the left differently and those - in the middle of the text as well.
Skull3r7 had a good idea with background-images. In addition, it is possible to use two divs with (dynamic) text and one other with the 'top border'.
Layer one contains the text as 'placeholder' and 'bottom border',
Layer two contains the 'top border image' (covers the top of Layer one)
Layer three contains the visible text.
Example
However, it is easier to implement Pete's solution, but I hope this example can help too. :)
A further alternative to those suggested, given the following HTML structure:
<div class="imgContainer">
<img src="http://placekitten.com/150/150" />
<p><!-- text excised for brevity --></p>
</div>
And CSS:
.imgContainer {
border: 1px solid #000;
padding: 0;
width: 80%;
margin: 0 auto 1em auto;
border-radius: 1em;
}
.imgContainer img {
float: right;
margin: -1px -1px 0 0;
padding: 0 0 0.5em 0.5em;
border: 1px solid #fff;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
.imgContainer p {
margin: 0.5em;
padding: 0;
text-indent: 0.5em;
}
JS Fiddle demo.
This should allow any size image to be used (so long as it fits within the container element, of course), and be responsive, and adaptable to changed sizes.
Unfortunately, though, I can't think of a way to provide the curve on the borders of the img itself. On the plus-side, it avoids needlessly wrapping and re-wrapping elements, so the HTML itself could, and should, stay pretty lean.
I am trying to create this effect by using HTML in UIWebView control of iOS. The goal is to create the effect of progress bar on the listing. So far I tried this but as you see, by adding a padding on diV makes everything messed up. How can I achieve similar effect? I have no issue of using table but seems that would be more difficult.
Thanks
Why not just use nested divs and give the inner Div a percentage width.
<div><div class="inner"></div></div>
And CSS:
div {
background-color: blue;
height: 30px;
}
.inner {
width: 50%;
background-color: skyblue;
}
Since divs are block level element they have a 100% width by default so you don't need to explicitly specify it for the outer div if that is sufficient.
Another possibility would be to use a background gradient and just move alter the background-position.
In the code you supplied you have this div:
<div style='position:absolute;left:0%; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
Just add "top: 0px;" to it so that it becomes
<div style='position:absolute;left:0%; top: 0px; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
And it will look correct.
Edit: And then give the LI elements position: relative to make it work with multiple elements. See http://jsfiddle.net/tFn78/9
Another version which is a bit cleaner: http://jsfiddle.net/v7zNn/ and adjusts to variable height of the title.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
drop shadow only bottom css3
I've been struggling with this for a while and wondered if there is a way to create a box-shadow that has a blur but only appears on one side of an element.
I have setup a JSFiddle, You can see that the blur still shows on the top and bottom of the element? Any ideas?
me again.
I have figured this out. I use the :before CSS selector like so
.element:before
{
content:'';
position:absolute;
left:-5px;
right:100%;
top:0;
bottom:0;
box-shadow: -10px 0 20px #aaa;
}
I have edited my JSFiddle if anyone needs to know how to do this.
I'm not sure it's a perfect solution but you can create a container for your div and hide 3 side by reducing the width of the inner div and playing with the float left or right depending on wich side you want the shaddow. I guest with fixed witdh it will be easier to manage.
Take a look at the example : http://jsfiddle.net/etienne_carre/rhKJF/4/