I am applying the following CSS to a div in a page that is used for a horizontal menu the selected div is missing it's right border.
Also, selecting the div changes the size so it jumps to a new line so maybe there is a way of making it inside the div
box-sizing: border-box;
width: 100%;
border: dashed $color-button-passive; 1px;
However for some reason I just can not find, this is coming out like this:
enter image description here
Please can someone help me? I think the 1px is extending to the next div
Related
I'm on a site where you are allowed to customize a profile, but you can only touch the css.
I've managed okay but I have a problem with the scrollbar here. It is going out of boundaries because it is in a div box with border radius on.
How could i fix this? to either make it smaller or pushed away from the side. just as long as it doesnt go out of the div border.
Sorry for no jsfiddle.
It looks as though you have a container element, with an inner element that holds your icons. You cannot clip the scrollbar corners, but there are a few things you can try to fix this visually.
Firstly, for the container element, you need to make sure that you have set its CSS 'overflow-y' property to 'scroll':
.container {
overflow-y: scroll;
}
Then, you can try getting rid of the border radius altogether by doing this:
.container {
border-radius: 0;
overflow-y: scroll;
}
Or, you can adjust the 'border-radius' and increase the 'border' to give the appearance that the scrollbar is properly nested inside of the container and no longer going outside of its bounds:
.container {
border: 7px solid black;
border-radius: 10px;
overflow-y: scroll;
}
I've written a Codepen example for you.
I want the gray background to continue all the way to the height of the current window. I tried setting height to 100% of #default-wrapper-body, but that doesn't appear to do anything.
See it live here: http://www.zorgbeurs.nl and even more prominent here: http://www.zorgbeurs.nl/aanmelden
I've also added an image, the areas in the right boxes should run to the bottom of the page, on all pages, not just the homepage.
This is happening because the browser can't detect the height of the footer for one reason or another, also your not use a wrapper on all elements, a quick fix would be to add the following CSS to your stylesheet:
#footer_footnote_wrapper {
height: 80px;
border-bottom: 1px solid #DCDCDC;
}
html, body {background:#f3f3f3;}
html, body, form, #default-wrapper-body { height: 100%; }
… does the trick, see here: http://codepen.io/zitrusfrisch/pen/ouEdI
Better move the form inside the #default-wrapper-body to prevent all forms being stretched to 100% height though.
I think the cookiebar div is causing your white stripe at the bottom, it has background:none; and when its visible the background looks fine, all the way to the bottom.
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
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 have a form surrounded by a border. When the window is resized the border sometimes overlaps the form. This should not happen.
See the fiddle output:
http://jsfiddle.net/sdSdW/embedded/result/
Can someone tell me what I have to change in my source to make the border surrounding my form, keeping a distance between the form and the border even if the window is resized.
I do not want to make the border fixed width (if not really necessary)
See the fiddle source:
http://jsfiddle.net/sdSdW/
You don't need many parents for the border. You can add the border to fieldset itself
try -
fieldset {
border: 1px solid #DDDDDD;
margin: 0;
padding: 40px;
}
JSFiddle