I have some stupid problem but it bothers me quite a lot. I already tried some things but nothing works so maybe someone of you will have a soultion.
I have a centered picture inside div and as you can see on the picture the border of the image on the right side overlapping a little bit the padding of the div. I tried different things but I canno't "push" the image to the left.
Both img and div width have to be set as 300px.
Overlapping border
and heres some code for img and div
img {
width: 300px;
height: auto;
border: 2px solid rgba(115,186,155,.5);
border-style: dotted;
border-radius:8px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#first {
border: 1px solid rgba(115,186,155);
padding:15px;
width: 300px;
}
Related
I have made a bordered box. Here is the css code:
.Box{
height: 500px;
width: 700px;
border: 2px solid black;
margin: auto;
margin-top: 10px;
}
When I run the following CSS my box appears as shown in the image below.
Now when I try to decrease the size of the containing block of the box, till there is a margin on both sides the box remains in the middle and the margins decrease but once the margin space is over the left border becomes stationary and only the right portion starts to shrink.
In the above image, it could be seen that the margin has fully shrunken and now the left side is stationary and the right side is only shrinking
I want the box to shrink from both sides equally even when the margin is over. Please guide me on how I could achieve this. Please let me know if more information is required.
You can use the CSS function min to make sure the box is 700pa when its container has a width greater than or equal to 700px, and thereafter it will take on the width of the container.
This snipper transitions the container width from 100vw to 100px (and vice versa) when you click the button. It has a backgound color so you can see when it is larger than the box.
body {
width: 100vw;
}
.container {
width: 100vw;
transition: width 5s linear;
margin: 0 auto;
background-color: #eeeeee;
}
.container.shrink {
width: 100px;
}
.Box{
height: 500px;
width: min(700px, 100%);
border: 2px solid black;
margin: auto;
margin-top: 10px;
}
<button onclick="document.querySelector('.container').classList.toggle('shrink');">Click me to make the container shrink/grow</button>
<div class="container">
<div class="Box"></div>
</div>
In your approach if you change your width:700px; to max-width:700px;
when screen shrinks, both left and right borders will shrink with them because when the screen width is smaller your box's width will be equal to screen width.
.Box{
height: 500px;
max-width: 700px;
border: 5px solid red;
margin: auto;
margin-top: 10px;
}
body {
min-height: 100vh;
margin:0;
}
.container {
height: 500px;
max-width: 700px;
border: 5px solid red;
margin: auto;
margin-top: 10px;
}
<div class="container"></div>
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I have a <div> container with a certain max-width,
max-width: 300px;
margin: 4em auto;
border: 1px solid black;
that contains two things: 1) text, 2) a floating div with
float: right;
width: 150px;
See my example at http://jsfiddle.net/uXEBR/.
When you reduce the window’s width, the floating <div>, as expected, extends outside the containing <div>, getting beyond its left border. However, I would like it to decrease in width so that it never leaves the outer <div>’s border. In other words, the width specification of the floating element should be conditional on sufficient width of the outer div. Is there a way to achieve this in CSS?
The other option is a media query. Here is an example based on the code you supplied. Keep in mind that .divright element will only shrink as small as the longest word in the div.
>>jsFiddle<<
CSS:
.divout {
max-width: 300px;
margin: 4em auto;
border: 1px solid black;
}
.divright {
float: right;
max-width: 150px;
margin-right: 1.25em;
border: 1px solid black;
}
#media screen and (max-width: 225px) {
.divright {
margin-left: 1.25em;
}
}
Sure:
width: 50%;
max-width: 150px;
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.