I have a rather trivial task. 3 DIVs with different backgrounds: 1st - top appendix, 2nd - bottom appednix, and 3rd - repeating background. When I leaving content inside this 3 wrappers I've spacers from top and bottom which I can't remove using negative margins. Well, the CSS is:
.cBlock {
background: url('top.png') no-repeat center top;
padding-top: 16px;
}
.cBlock .inner1 {
background: url('bottom.png') no-repeat center bottom;
padding-bottom: 130px;
}
.cBlock .inner2 {
background: url('bg.png') repeat-y center;
min-height: 250px;
}
.cBlock .inner3 {
margin-bottom: -130px;
}
HTML is:
<div class="cBlock"><div class="inner1"><div class="inner2"><div class="inner3">
123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div></div></div></div>
And results is
You need to close the first and last DIV's immediately.
<div class="cBlock">
<div class="top"></div>
<div class="content">
123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div>
<div class="bottom"></div>
</div>
Now you could position those elements directly (position) or you can use padding and negative margins.
This is also something you could achieve with CSS:
<div class="content">
123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div>
/* styling */
.content:before {}
.content {}
.content:after {}
Reset you line-height to line-height:0px to parent and line-height:normal to child
All right !
Related
Here is the html:
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
I have the following for my background image:
.bg {
background: url("img/watercolor-bkgrd.png") center top / 100% 75% no-repeat
}
Now I would like to position the background image slightly lower from the top (for example: 100px) so that h3 heading will not stay on top the background image. How can I make it happen without modifying the html structure? Please note that I have to keep what is already in the above css such as centering the image horizontally, etc.
Use the background position offset value.
This does require that you know the height of the element above though.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h3 {
height: 60px;
background: lightblue;
opacity: .5;
}
.bg {
height: 100vh;
background-image: url(http://www.placebacon.net/400/200?image=0);
background-repeat: no-repeat;
background-position: center top 60px;
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
Just change "top" to "100px" or whatever value you want to move it by.
See this working snippet (where I use 80px):
.bg {
height:400px; /* for testing */
background: url("http://oi67.tinypic.com/28a11js.jpg") center 80px / 100% 75% no-repeat
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
This is setting the background-position properties inline in the same way that you are in your own code.
The problem is making sure the image is always under the <h3> element: You could make the <h3> element a fixed height and use the same value for your background position.
Unknown height of h3 element
If you don't know the height of the <h3> element, how about adding the image as background to the <div> underneath the <h3> like this:
.bg div{
height:400px; /* for testing */
background: url("http://oi67.tinypic.com/28a11js.jpg") center top / 100% 75% no-repeat
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
Youre looking for the css property "background-position" (Mozilla Docs)
This allows you to set the initial top and left positions of your background image in the div.
background-position: left top;
Just add the following to your .bg class:
background-position: 0 100px;
I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>
Ok, this is driving me nuts!!
I want three div or span tags in a line. Left = a 57px width image; Right = a 57px image; Centre = A span image to fill the whole width.
<div class="bar-left"></div>
<div class="bar-span"></div>
<div class="bar-right"></div>
Basically I'm drawing a fancy hr line where each end fades out. I can get the left and right images aligned using float: left; and float: right; but the middle seems impossible.
Any ideas?
Would this be ok?
JSFiddle
The idea is to put left and right column on top and float them, then put margin to the content div so it doesn't wrap under floated ones...
<div class="bar-left"></div>
<div class="bar-right"></div>
<!- content goes in last -->
<div class="bar-span"></div>
CSS:
.bar-left
{
float: left;
width: 57px;
}
.bar-right
{
float:right;
width: 57px;
}
.bar-span
{
margin: 0 70px;
}
Put your floated divs before the non-floated ones:
<div class="bar-left" style="float: left; color: blue; background-color: blue; width: 57px;"> </div>
<div class="bar-right" style="float: right; width: 57px; background-color: blue;"> </div>
<div class="bar-span" style="background-color: green; display: block;"> </div>
traditionally, when you want to line things up like this end-to-end, you float all of them left or right.
I would like to create from this image a styled DIV box for my website :
How can I do that using CSS and HTML.
I cut the image in three different parts :
However I don't know how to use them with Divs to create my vertically expendable box.
Thanks for your help!
I assume that you want your content to start inside the top one, but expand to the second one as well. If that is the case then you will need some overlap on the background-images.
HTML
<div class="expandable">
<div class="content top">content goes here</div>
<div class="bottom"></div>
</div>
CSS
.expandable{
background:url('middle-image.jpg') 0 0 repeat-x;
}
.top{
background:url('top-image.jpg') 0 0 no-repeat;
height:auto!important;
height:100px;/* whatever the height of the top (big) area is */
min-height:100px; /* whatever the height of the top (big) area is */
}
.bottom{
background:url('bottom-image.jpg') 0 0 no-repeat;
height:10px; /* whatever the height of the bottom image is. */
}
Example at http://www.jsfiddle.net/gaby/s8XZQ/
This could be done with CSS3 features like border-radius,box-shadow and gradient. Here's an example. Should work in Opera, Firefox, Chrome and Safari.
Also, you can do this with :before and :after CSS pseudo-elements, like in other two answers.
Edit: For Internet Explorer all those features are possible with behavior file, like PIE.
Try this:
HTML:
<div class="container">
<div class="top"></div>
<div class="middle">content here content here content here</div>
<div class="bottom"></div>
</div>
CSS:
.container { width: 300px; }
.top { padding-top: 15px; background: url(topimage.png); }
.middle { background: url(middleimage.png); }
.bottom { padding-bottom: 15px; background: url(bottomimage.png); }
Adjust the paddings in the CSS so that they match the height of your topimage and bottomimage, and the container width so that it matches the image's widths.
Use three separate divs, and set the top padding of the middle one to the minus height of the top one. So:
#top-div {
height: 25px;
background-image: url(bg-top.jpg);
}
#middle-div {
background-image: url(bg-middle.jpg);
padding-top: -25px;
}
#bottom-div {
background-image: url(bg-bottom.jpg);
}