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.
Related
I am trying to figure out the correct way to make a div class inherit the parent div height so that when I do for example, padding-top: 100% , it puts the element at 100% of the parent div.
Here's my code:
CSS
#globalContainer{
margin: 0px auto;
width: 100%;
height: 100%;
}
#header-out{
width: 100%;
background-color: black;
}
#header{
width: 940px; /* Set to % when possible */
height: 240px; /* Set to % when possible */
margin: 0px auto;
background-color: white;
}
#header .title{
position: relative;
float: left;
padding-top: 100%;
}
HTML:
<body>
<div id="globalContainer">
<div id="header-out">
<div id="header">
<div class="title">Test</div>
</div>
</div>
</div>
</body>
At the moment, my Test appears at the very bottom of the page inside of the bottom of my header...
Thanks !
EDIT: I am now trying to add a logo next to my title, I used this code:
#header .title{
position: relative;
float: left;
top: 50%;
left: 2.5%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
#header .logo{
position: relative;
float: left;
top: 50%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
Problem is, it overlaps my title, starting where my title would end if I did not use the left: 2.5%
I tried to remove the float: left, it doesn't change anything...
Anyone can help on this ?
Could you please give a html code for the following?
I need to display div and iframe horizontally fitting the whole page. But I need div to be fixed size (100px) and iframe fitting the remaining space.
Thanks
Fiddle
CSS
div{ border: 1px solid #f00; width: 100px; position: absolute; left: 0; top: 0;}
iframe{ width: 100%; margin: 0 0 0 100px;}
HTML
<div>hi</div>
<iframe src="http://www.google.com/"></iframe>
EDIT:
To avoid horizontal scrollbar define width in % to both the elements - Updated Fiddle
http://jsfiddle.net/gZNKk/1/
<html><head>
<style>
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#left {
float: left;
width: 100px;
background: blue;
height: 100%;
}
#right {
width: auto; /* This is the default */
float: none;
margin-left: 100px;
background: red;
height: 100%;
}
#right-iframe {
background: yellow;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<iframe id="right-iframe"></iframe>
</div>
</body></html>
EDIT: Fixed the extra spacing on the right causing the scrollbar to appear.
CSS:
#content-wrapper {
width: 100%;
overflow:hidden;
}
#content-left {
width: 49.5%;
min-height: 100%;
float: left;
border-right: solid 1px #A9D0D6;
}
#content-right {
width: 49.5%;
min-height: 100%;
float: right;
}
HTML:
<div id='content-wrapper'>
<div id='content-left'></div>
<div id='content-right'><iframe src="http://www.google.com"></div>
</div>
Width you can adjust, whatever you required.
Try this,
http://jsfiddle.net/anglimass/UUmsP/15/
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%;
..
}
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.
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.