I have a DIV which has a red dotted border all around:
HTML for the DIV:
<div id="certificate" style="text-align:center;display:none;">
<img src="imgflo_topleft.png" id=img1 />
<img src="imgflo_bottomleft.png" id=img2 />
<img src="imgflo_topright.png" id=img3 />
<img src="imgflo_bottomright.png" id=img4 />
//OTHER texts will go here but it should not interfere with the images
</div>
CSS:
#certificate {
width: 900px;
margin: 0px auto;
border: 2px dotted red;
padding-right: 5px;
padding-left: 5px;
text-align: center;
}
Image to be placed on each corner of DIV:
Outcome:
You can do this with background images, without creating extra elements.
See this fiddle.
.cert {
min-width: 212;
min-height: 166;
background:
url(http://i.stack.imgur.com/ghI7u.png) left -106px top -83px no-repeat,
url(http://i.stack.imgur.com/ghI7u.png) right -106px top -83px no-repeat,
url(http://i.stack.imgur.com/ghI7u.png) left -106px bottom -83px no-repeat,
url(http://i.stack.imgur.com/ghI7u.png) right -106px bottom -83px no-repeat,
white;
padding: 40px;
}
Also, you can combine the four corner images for faster downloads:
Set position: relative on your container div, and position: absolute on the images in conjunction with top, bottom, left, and right pixel values, i.e:
#img2 { position: absolute; bottom: 0px; left: 0px; }
Absolutely positioned elements are removed from the page flow and thus won't interfere with any other elements inside the container div (text, other graphics, headings and so on).
Or, if your container div is a fixed (set pixel value) size, just use background-image instead for all four corner images and save yourself some page loading time.
If your div has a fix width, you can manage it with two divs and two background images:
HTML:
<div class="topDiv">
<div class="botDiv">
content goes here
</div>
</div>
CSS:
.topDiv {
background: url( topImage.gif ) center top no-repeat;
}
.botDiv{
background: url( bottomImage.gif) center bottom no-repeat;
}
If your div has a fluid width, you could use the same technik, but then with four divs.
It's no clean method, but it works.
Related
I'm having a problem in which whenever I add another element inside, like for example, a P element, my div moves out of position vertically, it's supposed to stick with the top header at all times, but whenever I add another element inside it, it slightly shifts out of position
The background is supposed to be glued to the header on top like this
How it should be
How it looks
Is there any way to make so the mainbody div ALWAYS sticks to the main header div?
.menucontainer {
width: 1000px;
height: 150px;
margin: auto;
outline: solid black 1px;
background-image: url("images/backgrounds/mainheaderbanner.png");
background-position: -75% 40%;
}
.mainbody {
background-color: rgba(0, 0, 0, 0.8);
position: relative;
top: -18px;
margin: auto;
width: 1002px;
height: 1345px;
}
<div class="menucontainer">
<a href="index.html">
<div class="logocontainer">
<img src="images/logo.png" class="logo"></a></div>
</div>
<div class="mainbody">
</div>
In some Editors each time, after using automatic code indentation, an "Enter" will appear between two elements and create white space again!
To eliminate the space between two divs try to write them in the same line :
in your case :
<div class="menucontainer"><div class="logocontainer"><img src="images/logo.png" class="logo"></div></div><div class="mainbody"></div>
test it and tell me if it works!
I have a hard time to get background on both side of my page:
Style
.left {
background: url(wax.png);
width: 15%;
position: absolute;
left: 0px;
height: 100%;
}
.right {
background: url(wax.png);
width: 15%;
position: absolute;
right: 0px;
height: 100%;
}
.middle{
margin: 0 auto;
}
HTML
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
Result
Its close to what I am trying to achieve but the right image is misplaced.
Also the backgrund is not repeated vertically
background: url(wax.png) repeat-y 0 0;
To get the vert repeat.
Do you have something positioned relative? That input text field is probably pushing down the right div unless you have something else positioned relative?
If you're going to use position:absolute, wrap it all and use position:relative on that wrapping div.
Otherwise, you could use the body tag or even the html tag but it's probably better to use a wrapping container.
im not really sure what you are trying to do it looks align to me but for repeating image is this background: url(wax.png); background-repeat: no-repeat
Its close to what I am trying to achieve but the right image is
misplaced.
Add top:0 to the .right class
Also the backgrund is not repeated vertically
As others have mentioned add repeat-y in the background property value
background: url(wax.png) repeat-y
Maybe you just want to place your middle inside one div with the background repeated in both direction and middle having background white
html:
<div id="background">
<div id="content">
this was middle
</div>
</div>
css:
#content{
margin: 15%;
background: white;
}
#background {
background: url(wax.png);
}
<div id="header"> Header content </div>
<div id="content"> Content </div>
#header {
background-image: url("/Content/Images/bg.png");
background-repeat: repeat-x;
float: left;
height: 45px;
margin: 0;
width: 960px;
z-index: 10;
}
#content {
background-image: url("/Content/Images/separator_shadow_both.png");
background-repeat: repeat-y;
float: left;
margin: -4px 0 0;
padding: 0 10px;
width: 940px;
z-index: 9;
}
Header div have background that have 45 px height - 41 pixel solid color and bottom 4px is transparent shadow. I want that shadow to show above the content. I put content div margin top -4px to crawls under header div, but he appears above instead below of div1. z-indexes are set different... Is it z-index problem or header background can't be positioned above content?
Thank you
The z-index property is only relevant for positioned elements. Solution: Set position: relative on #header. You don’t even need the z-index since positioned elements always render on top on non-positioned ones.
Okey so basically I have:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png is a 800x1 image (tiles vertically), and has transparency.
content_bottom.png is a 800x200 image.
Basically, I need to have the content_bottom.png image to replace the #content background image only on the bottom.
Having a negative margin on #content almost works, but since both images are transparent images, they overlap, and it should not happen.
I think that I need to make #content not to render its background on the last 200px on its bottom.
Any idea how I could do that ?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):
HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
create a third div, nested in #content, that is 200px height.
I am building a CSS site and fail solving this partial problem:
On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.
I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code.
(I put both columns into a container div and set the left box to height: 100.)
But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.
I didn't manage to get this effect without position: absolute though. I tried using float etc.
Here is the example code:
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
With this stylesheet:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
It looks like this (Colored it for better understanding):
The yellow part is actually a stretched image, I left it out for the example, it works as expected.
How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?
EDIT: BitDrink's solution looks this way at my browser (current FF)
alt text http://img502.imageshack.us/img502/1241/layoutsample2.png
I could be wrong here but what you are trying to achieve here is two columns of the same height no matter how much text is in the left or right columns.
Equal Height Columns using CSS is the best CSS technique for this where by the backgrounds and bottom curved edges would need to be given to div#vertical stretcher.
The only other way that I know to make two columns equal height is to use JavaScript. See The Filament group article on setting equal heights with jQuery.
the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop!
Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:
<style type="text/css" >
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
float: left;
width: 185px; /* width of the bg images */
height: 100%;
background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
width: 100%;
height: 100%;
background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
width: 100%;
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
background-color: #FFF;
border: 1px dotted black;
}
</style>
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
text top
<div id="bgmiddle">
text middle
<div id="bgbottom">
text bottom
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
You can see the result below:
The 4 div(s) resize vertically according to their content!