Automatically fill middle repeated div horizontally - css

I have essentially three divs.
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
With the following CSS
#headerLeft
{
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle
{
background-image: url("topMiddleRepeat.png");
background-repeat:repeat-x;
position:relative;
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight
{
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
I need the middle div to repeat horizontally to fill the rest of the header's space. I can't set the width of the div manually because this html will be inserted into other pages of unknown widths.
I've tried setting the width to 100% but that just fills up the whole line and pushes the leftHeader above the middleHeader and the rightHeader below the middleHeader.
Here is the page I am currently trying to manipulate. http://dl.dropbox.com/u/1501628/web/ipiphony.html
Any help would be greatly appreciated.

The way you are trying to do it i don't think it's possible, What i would do is this:
<div id="header">
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle {
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight {
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
That way your background will cover the header. Another option is to nest the divs and set the background to eack one and use padding for the sides.
<div id="header">
<div id="headerLeft">
<div id="headerRight">Your text here</div>
</div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
padding-left: 329px;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
padding-right: 47px;
}

Try the following:
Update the following styles:
#header {
position: relative;
overflow: hidden;
min-height: 85px;
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
position: absolute;
left: 0;
top: 0;
}
#headerMiddle {
background-image: url("topMiddleRepeat.png");
height: 73px;
color: white;
padding-top: 15px;
margin-left: 329px;
margin-right: 47px;
}
#headerText {
position: absolute;
left: 260px;
font-size: 20px;
font-weight: bold;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
width: 47px;
position: absolute;
right: 0;
top: 0;
}
If there are still issues, I recommend uploading the styles and HTML to jsfiddle.net so everyone can have an active play.

Related

How to overlap a image in responsive slider?

I need to overlap image of logo 20px down in a responsive slider. The image of logo must come at front and the responsive slider must be back. Please view live at: http://www.pahari.com.np
**HTML PART:**
<div id="top_banner"> <div id="logo"><img src="image/logo.jpg"> </div> </div>
<div id="slider_bg"> <?php include_once("slider.php"); ?> </div>
<div id="menu_bg"> </div>
<div id="content_bg"> <div id="content"> </div> </div>
**CSS PART:**
<style>
#top_banner{
width: 1000px;
height: 106px;
margin: auto;
}
#logo{
width: 362px;
background: url(images/logo.jpg) no-repeat;
height: 106px;
float: left;
}
#slider_bg{
float: left;
height: 380px;
}
#menu_bg{
background: #B1BB34;
height: 30px;
}
#content_bg{
background: #A562B1;
height: 180px;
margin-top: 25px;
}
#content{
background: url("image/bg.jpg") no-repeat;
width: 1000px;
margin: auto;
height: 180px;
margin-top: 25px;
}
<style>
The easiest way is to position your slider1_container with a negative value for top and adding a negative z-index. ex.:
top:-2em;
z-index:-1
Hope this help!
I would wrap the top banner in another div and work with absolute positioning. Please note that I have taken only part of your code for display purposes on fiddle. You will need to add this to your site accordingly.
Check this out: http://jsfiddle.net/3Z2JZ/
CSS
body{
background: url(images/bg.jpg) #FFFFFF repeat-x;
font: normal 12px verdana;
color: #9C9C9C;
margin: 0;
padding: 0;
}
#top_banner_wrap {
position: absolute;
width: 100%;
}
#top_banner{
position: relative;
width: 1000px;
height: 106px;
margin: auto;
}
#logo{
width: 362px;
background: url(images/logo.jpg) no-repeat;
height: 106px;
float: left;
}
#slider_bg{
float: left;
width: 100%;
height: 380px;
background-color: red;
margin-top: 86px;
}
use
#logo {
position: relative;
z-index:100;
}
for the logo element and it will stay on top of the slider element.z-index should be highest number defined.

How to.. the middle div of three ever on center and if the navigator are resized

Sorry about my english.
Please, i have a problem with divs, i have 3 divs "with image" horizontally, the images have to be together.
Here is the default view, if the screen is large enough.
If the navigator are resized i lost center with the #div2. The #div1 are aligned to the left, that is not i need.
What i need is the #div2 stay on center, but i don't know to do that. #div1 and #div3 are outside of the navigator, no one div can be resized, are a fixed size.
The html code:
<body id="body">
<div id="wrap">
<div id="baseLeftBg">
</div>
<div id="baseContent">
</div>
<div id="baseRightBg">
</div>
</div>
</body>
The CSS code:
#body {
text-align: center;
height: 100%;
margin: 0 auto;
padding: 0px;
background: #ffffff;
-moz-background-size: cover;
background-size: cover;
float: inherit;
}
#wrap {
width: 1484px;
margin: 0 auto;
text-align:center;
}
#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}
#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
float: left;
}
#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}
How i can do that?
Link to Fiddle: http://jsfiddle.net/murb83/BChLs/
Thanks!!
Making text-align center for wrapper will be helpful. This will show the elements in center.
#wrap {
width: 1484px;
margin: 0 auto;
text-align:center;
}
Other solution could be using absolute positioning like this:
#wrap {
..
position:relative;
..
}
#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
left:0;
}
#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
position:absolute;
top:0;
left:0;
right:0;
}
#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
right:0;
}
Why don't you consider using Javascript for solving your problem?
You should have a container larger as much as you want containing your three divs and with javascript, based on the screen width, you should set the left margin (obviously it could be a negative number).
Then, with JS, you can also handle the event on screen resize for "adjust" the left margin
I found a way to do that with jsQuery.
HTML
<body id="body">
<div id="wrap">
<div id="baseLeftBg">
</div>
<div id="baseContent">
</div>
<div id="baseRightBg">
</div>
</div>
</body>​
CSS
#body {
text-align: center;
height: 100%;
margin: 0 auto;
padding: 0px;
background: #ffffff;
-moz-background-size: cover;
background-size: cover;
float: inherit;
}
#wrap {
width: 500px;
height: 300px;
}
#baseLeftBg {
background: #CDCDCD;
width: 100px;
height: 300px;
float: left;
}
#baseContent {
background: #A7A7A7;
width: 300px;
height: 300px;
float: left;
}
#baseRightBg {
background: #CDCDCD;
width: 100px;
height: 300px;
float: left;
}​
JSQuery
$(window).resize(function(){
$('#wrap').css({
position:'absolute',
left: ($(window).width() - $('#wrap').outerWidth())/2,
top: ($(window).height() - $('#wrap').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
var $scrollingDiv = $("#wrap");
$(window).scroll(function(){
$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine' );
});
See in action: http://jsfiddle.net/murb83/BChLs/
That is the solution without JS works ok for me at the moment...
#wrap {
margin-top: 5%;
left: 50%;
margin-left: -742px;
position: absolute;
width: 1484px;
height: 776px;
}
Maybe you should try making it dynamic, with percentages like:
#baseLeftBg {
..
width: 20%;
..
}
#baseContent {
..
width: 60%;
..
}
#baseRightBg {
..
width: 20%;
..
}

Proper css div positioning?

I tried, but totally failed at positioning an interface that will go above a google maps layout. What I tried to do is this:
But I ended up with this
The format I have is like this:
<div id="GoogleMap"> // the containing google maps layer
<!-- map will go here <div id="GoogleMapCanvas"></div> --> //eventual map
<div class="map-topmenu"></div> //my interface
<div class="map-leftmenu"></div> //my interface
<div class="map-rightmenu"></div> //my interface
<div class="map-bottommenu"></div>//my interface
</div>
I succeeded in making the top menu horizontally centered, and 10px from the top of the screen.
I have been unable to center vertically the left and right menu's, and I started noticing that the code needed to center the left menu was becoming weird.
And as for the bottom menu, I utterly failed - however many different methods I tried.
Can anyone please look at my code and let me know where I messed up? Thanks so much!
body {
border: 0 none;
margin: 0;
padding: 0;
height:100%;
}
#GoogleMap {
position:absolute;
background-color: grey;
background-position: 50% 50%;
background-repeat: repeat;
height: 100%;
overflow: hidden;
width: 100%;
}
.map-topmenu {
height: 52px;
width: 353px;
background-image: url(http://i.imgur.com/KlyKR.png);
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.map-leftmenu {
height: 263px;
width: 77px;
margin-left: 10px;
top:50%;
position: absolute;
margin-top: -150px;
background-image: url(http://i.imgur.com/Q3d1r.png);
}
.map-rightmenu {
background-image: url(http://i.imgur.com/si6dl.png);
height: 147px;
width: 280px;
margin-right: 10px;
float: right;
top:50%;
}
.map-bottommenu {
background-image: url(http://i.imgur.com/iDmuP.png);
height: 52px;
width: 312px;
margin-right: auto;
margin-bottom: 10px;
bottom: 0;
margin-left: auto;
}
Use absolute positioning with negative margins:
http://jsfiddle.net/PJTDy/3/
#GoogleMap {
position:absolute;
background-color: grey;
height: 100%;
overflow: hidden;
width: 100%;
}
.map-topmenu, .map-leftmenu, .map-rightmenu, .map-bottommenu {
z-index:1;
position:absolute;
background:blue;
}
.map-topmenu {
top:0;
left:50%;
margin-left:-176px;
height: 52px;
width: 353px;
}
.map-leftmenu {
height: 263px;
width: 77px;
left:0px;
margin-top:-131px;
top:50%;
}
.map-rightmenu {
height: 147px;
width: 280px;
right:0;
top:50%;
margin-top:-73px;
}
.map-bottommenu {
height: 52px;
width: 312px;
bottom: 0;
left:50%;
margin-left:-156px;
}
Any reason why you are positioning the main container div (id="GoogleMap") absolutely? Your bottom menu does not have a position property set, otherwise you can position it exactly same way as the top one with bottom: 0.

Auto expand DIV with border images

I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.

CSS need div to extend it's containers width

This is my current HTML structure. The footer div is sitting alone in the BODY.
<div id="footer">
<div class="container">
<div id="footer-bg">
<div class="footer1">
<p class="p1">asd</p>
<p class="p2">asd</p>
</div>
<div class="footer2">
<p class="p1">asd</p>
<p class="p2">asd</p>
<p class="p3">asd</p>
</div>
<div class="footer3">
<p class="p1">asd</p>
</div>
</div>
</div>
</div>
Here's the CSS for it:
#footer
{
position: relative;
background: url('../footer-bg-repeat.jpg') repeat-x;
height: 307px;
}
#footer #footer-bg
{
background: url('../footer.jpg') no-repeat top left;
height: 528px;
width: 1587px;
position: absolute;
left: -380px;
top: -221px;
}
#footer .footer1
{
position: absolute;
top: 137px;
}
#footer .footer1 .p1
{
position: absolute;
left: 500px;
background: #dcdcdc;
height: 23px;
width: 80px;
text-align: center;
line-height: 25px;
font-weight: bold;
}
#footer .footer1 .p2
{
position: absolute;
left: 1000px;
top: -20px;
background: url() no-repeat top right;
height: 40px;
width: 249px;
text-indent: -9999px;
z-index: 6;
}
#footer .footer2
{
position: absolute;
top: 159px;
height: 23px;
width: 100%;
background: #000;
}
#footer .footer2 p
{
display: inline;
line-height: 25px;
color: #636466;
height: 23px;
}
#footer .footer2 .p1
{
position: absolute;
left: 500px;
background: url() no-repeat center right;
width: 175px;
}
#footer .footer2 .p2
{
position: absolute;
left: 700px;
background: #dcdcdc url() no-repeat 60px 8px;
width: 75px;
padding-left: 15px;
}
#footer .footer2 .p3
{
position: absolute;
left: 800px;
}
#footer .footer3
{
position: absolute;
top: 190px;
}
#footer .footer3 .p1
{
position: absolute;
left: 500px;
width: 1000px;
}
I'm trying to get .footer2 and .footer3 to extend the width of the container allowing me to have a background colour set for what ever width the screen may be.
Setting 100% width just gets it to the size of the container - As I'd expect. How can I, though, get it to the width of the page?
Try setting both left and right property to 0;
you didn't define question well.
if you want to set it in middle set margins
margin:0 10px;
width:%your pages width%;
if you mean something else download Firebug plugin for Firefox and inspect a page's footer that did what you want to do and take a look at structure and css rules. it always works

Resources