I'd like to know how to set different height to a div and make it responsive. I'd like to have the div with set to 100% but the left side of the div should have the height of 100px and the right side of the same div should have 120px in height. When you scale down the browser the different heights should remain even on mobile phones. Yes, there will be content in it..
#myDiv {
width: 100%;
height: 100px;
background-color: #ffffff;
border-left: 200px solid blue;
border-right: 100px solid blue;
border-bottom: 10px solid green;
}
My tries doesn't work and yes, I have googled without any luck.
The div has a shape of square or a rectangle not other so it is much better to make an image for the background and then use it like
#background
{
background-image:url('image.png');
background-repeat:no-repeat;
}
Your code just sets the left and right border's widths, which doesn't work out in your case. The best way is to use an image and put it in the background, without a repeat.
.bgDiv {background: url("bg.png") center bottom no-repeat;}
Related
I am trying to get a background image to display in the bottom right corner of a div (or asp:panel) but I believe that the display:inline-block is causing it to not show. That is required because I have multiple boxes horizontally aligned on the screen (without it they display vertically).
css:
.showIcon{
background: url('Images/icon.png') no-repeat right bottom;
display: inline-block;
box-shadow: 2px 2px 2px #808080;
}
Is there something wrong with the css?
I do have a table displayed within each div, can that be the reason?
There is no problem with your code. And also as you asked, no table won't make any difference.
See this fiddle with your code: http://jsfiddle.net/3V8m9/2/
The only thing I added is the dimensions: height: 100px; width: 100px; to illustrate.
There can be two scenarios. One, either your image path is not correct. Two, width/height may not be adequate enough.
If you believe display:inline-block is the issue. You can always use float left to align each against each other.
CSS
.showIcon{
background: url('Images/icon.png') no-repeat right bottom;
float: left;
box-shadow: 2px 2px 2px #808080;
} code here
I'm using the 960.gs grid system for a design. What is the best way to add a thin separating vertical line between two boxes? The width and color should be adjustable.
My plan is to define a couple of div classes with absolute positions and background color, one for each possible position, and use JQuery to make sure that it has the same height as the surrounding boxes. That seems a bit complicated, though. Is there a better solution?
You can implement a border using the pseudo-selector :after and absolute positioning, like so:
.line:after {
border-right: 1px solid #000000;
content: "";
display: block;
margin: 1px;
position: absolute;
right: -11px;
top: 0;
bottom: 0;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
position:relative;
}
Here is a demo http://jsfiddle.net/andresilich/ZTyf4/show/
Edit here http://jsfiddle.net/andresilich/ZTyf4/
If you don't want the separating line to change the position of the next row of DIVs, I think absolute positioning is your best bet. What you could do is use an absolutely-positioned :after selector to position something relative to the bottom of the box yet not affect the layout. This works for me to position a line between boxes without affecting layout, just change the values of the last four properties as needed:
#topbox:after {
content: "";
display: block;
position: absolute;
margin-top: 25px;
height: 5px;
width: 400px;
background-color: #999;
}
I think this is do-able without jQuery. The main issue is accounting for the variable height of the elements.
reference here: http://jsfiddle.net/uqZgt/1/
HTML:
<div class="container">
<div class="box-1">
This box has alot of content. This box has alot of content. This box has alot of content.
</div>
<div class="box-2">
This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content.
</div>
</div>
CSS:
.container {
width: 242px;
}
.container div {
width: 100px;
background: #ff0000;
float: left;
padding: 10px;
border-right: 2px solid #000
}
.box-1 + .box-2 {
border-right: none;
border-left: 2px solid #000
}
.box-1 ~ .box-2 {
margin-left: -2px
}
in this example, all divs in the .container div have a 2px solid black border-right. However, an element with class box-2 which directly proceeds an element with .box-1 will have a 2px solid black border-left, and no border-right. So far this creates a 3px border in between the two elements.
Now, .box-1 ~ .box-2 selects any .box-1 that directly preceeds a .box-2, and sets it's margin-left to -2px. This drags it's sibling two pixels to the left, which effectively makes the borders of both elements overlap.
The .container div has a width equal to the sum of the width of the two elements (200px), plus padding (10px right and left = 20px) plus the width of one of the borders (2px). 242px, so the two elements fit perfectly.
No matter which div has more content, the border will appear to span the height of the div with the most content.
I may not be understanding your problem. I would probably just use a right or left border on one of the columns and adjust padding to be sure it is centered between the 2.
I have a div and I've tried to set the height to 100% so the content of it makes the div grow to fit.
I've tried the following and it won't work:
Adding 100%:
#latest{ height: 100%; background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}
Leaving having to height setting at all, so the div would just fit the content in:
#latest{ background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}
Unless I set a specific height (e.g. height: 370px;) the div will not even show it's outline in design view in Dreamweaver. Very odd.
Any ideas?
Thanks
The height property will correct here.But instead of this use following code.If you go on adding content the div will also increase in height.
#largest {
background: url("firefox-gray.jpg") repeat-x scroll 0 0 #E3E3E3;
border: medium none;
margin-top: 10px;
overflow: auto;
}
Unfortunately you can not set heights of divs as percentages, mainly as content tends to make divs grow downwards, so you would be limiting yourself.
Take a look at the min-height css property though. That, I think, will go some way to sorting your problem.
Does the content of the div have a "float: left" or a "float: right" attribute?
html, body{
height:100%
}
div{height: 50%}
I don't know the browser compatibility of this so you may need to test it.
http://jsfiddle.net/ZKZFa/
may be you have to write like this:
html, body{
height:100%
}
#latest{
height: 100%;
background: #e3e3e3 url(banner_grad.jpg) repeat-x;
border: none;
margin-top: 10px;
}
Is it possible using CSS background-position: to position an image to the far right of an element, but then minus a few pixels so it's not right up against the edge? Without having to add a bit of padding to the actual image itself?
Thanks
Lets say your div is 1000px wide and you want it 5px from the right the code would be
background: url('image.jpg') no-repeat 995px 50%;
Edit:
As pointed out the code above does not accommodate for the size of the image.
Lets say your div is 1000px wide and your image is 100px wide and you want it 5px from the right the code would be
background: url('image.jpg') no-repeat 895px 50%;
Your positioning is Div Size - Image Size - desired spacing from right edge.
There is some hacky way. Just use background position to the far right:
background-position: right center;
and combine it with:
box-sizing: border-box; border-right: 5px solid transparent;
for 5px indentation from the right.
I want to Create DIV based Flexible corners. as per shown in the Image.
This is Not regular rounded corner, but something more complicated. This is Something like challenge .
And Please Note that I want Image based rounded Corners, so please give answer as per requirments.
Thanks a Lot
Well, the easiest answer is: use CSS3:
#roundedCornerDiv {
-moz-border-radius: 1em; /* for mozilla-based browsers */
-webkit-border-radius: 1em; /* for webkit-based browsers */
border-radius: 1em; /* theoretically for *all* browsers
dependant on implementation of CSS3 */
border: 12px solid #ccc;
}
you should be able to do this with 9 explicitly sized and floated divs. the corner divs are fixed size and have background-url for the 4 corners and the side divs are repeat-y and top bottom divs have repeat-x
You should look into The Thrashbox approach for this.
You can use a series of spans and 4 images, one for each corner, to make a resizable rounded corner div. Like this:
div {
background: white url(topleft.gif) top left no-repeat;
}
div span {
display: block;
background: url(topright.gif) top right no-repeat;
}
div span span {
background: url(bottomright.gif) bottom right no-repeat;
}
div span span span {
padding: 2em;
height: 0; /* fixes a padding bug in IE */
background: url(bottomleft.gif) bottom left no-repeat;
}
div span span > span {
height: auto; /* sets the height back to auto for all other browsers */
}
And now for the HTML:
<div><span><span><span>Round corners!</span></span></span></div>
For an actual example and code please refer to this page for a working example and source code.
border-radius: 10px 10px 10px 10px;
first is the left-upper corner.
second is the right-upper corner.
third is the right-lower corner.
fourth is the lower-left corner.
you can use that basically in any tag where you want the round corners. just remember to specify the border like:
border: 2px solid black;
if you specify the border separately, eg:
border-left: 6px;
border-right: 6px;
border-top: 2px;
border-bottom: 2px;
you can get some awesome-looking stuff.