Here I have two divs with a css background images set for both.
I'm trying to get the divs to overlap so I can have a dotted pattern overlay.
I feel like I'm doing it correctly but the wrong div is coming forward.
Any ideas why this is happening?
Here's the website: http://designobvio.us/portfolio/body.html
HTML:
<section class="bodySection">
<div id="body-wrapper" class="container_12">
<div id="left-container" class="grid_5">
<div class="content">
</div>
</div><!--end of left-container-overlay-->
</div><!--end of left-container-->
</div><!--end of body-wrapper-->
</section><!--end of bodySection-->
My CSS:
#left-container {
background:url(../img/sliderBG.png)transparent repeat;
width:400px;
height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
overflow:hidden;
display:block;
height:100%;
top:0;
z-index:5;
}
#left-container .content {
background:url(../img/Me.jpg) repeat-y;
width:400px;
height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
overflow:hidden;
display:block;
height:100%;
top:0;
z-index:1;
}
Thanks guys!
I do think your problem is that you are nesting one of the overlapping elements inside the other whereas they should normally be just siblings.
See this fiddle for a way to do it: http://jsfiddle.net/GCprD/
It isn't impossible to do it with your HTML structure though!
http://jsfiddle.net/GCprD/1/
But I agree that m90's solution is better.
Related
I have problem with my code. I need have whitespace between the last div (friday_div) and the end of my web page.
HTML code:
<body>
<div class="header">
<h1>Schedule 613</h1>
</div>
<div class="wrapper">
<div class="monday">
<h1>Monday</h1>
<div id="monday_div"></div>
</div>
<div class="tuesday">
<h1>Tuesday</h1>
<div id="tuesday_div"></div>
</div>
<div class="wednesday">
<h1>Wednesday</h1>
<div id="wednesday_div"></div>
</div>
<div class="thursday">
<h1>Thursday</h1>
<div id="thursday_div"></div>
</div>
<div class="friday">
<h1>Friday</h1>
<div id="friday_div"></div>
</div>
</div>
</body>
CSS code:
body{
background-color:lightgray;
min-width:850px;}
.header{
position:fixed;
z-index:1;
left:0;
top:0;
min-height:50px;
width:100%;
background-color:white;}
.wrapper{
position:relative;
top:90px;
left:1%;
width:97.5%;}
.monday,.tuesday,.wednesday,.thursday,.friday{
float:left;
text-align:center;
min-height:250px;
width:100%;
background-color:white;}
.tuesday,.wednesday,.thursday,.friday{
margin-top:30px;}
.friday{
margin-bottom:30px;}
The problem appears only when i tested project in Internet Explorer browser and EDGE. I used Chrome to test what I did but in Chrome 'margin-bottom' works normal. The problem may also appear in other browsers, but I can not check it out. I hope that somebody help me.
(My level of English is not good enough to explain the problem in more detail, so I wrote here a lot of lines of code to people who know how to solve problems like my problem)
Try to add overflow:hidden; to .wrapper
.wrapper{
position:relative;
top:90px;
left:1%;
width:97.5%;
overflow:hidden; // add this
}
Add overflow:hidden; to .wrapper
Then change your CSS to:
body{
background-color:lightgray;
min-width:850px;}
.header{
position:fixed;
z-index:1;
left:0;
top:0;
min-height:50px;
width:100%;
background-color:white;}
.monday,.tuesday,.wednesday,.thursday,.friday{
float:left;
text-align:center;
min-height:250px;
width:100%;
background-color:white;}
.tuesday,.wednesday,.thursday,.friday{
margin-top:30px;}
.friday{
margin-bottom:30px;}
.wrapper{
position:relative;
top:90px;
left:1%;
width:97.5%;
overflow:hidden;
}
I want to have a page like this.
After trying some CSS and HTML code like this:
CSS Code:
html,body{
margin:0px;
background-color:#CCC;
}
#header{
background-color:#FFF;
height:350px;
width:750px;
display:block;
}
#menu{
background-color:#096;
height:60px;
width:100%;
display:block;
}
#content{
background-color:#03F;
width:750px;
height:400px;
}
#footer{
background-color:#900;
height:120px;
width:750px;
display:block;
bottom:0px;
position:relative;
}
HTML Code:
<center>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</center>
it was the same thing but after making some text into "content" part divs got separate. like thisThis.
Whats the issue in my CSS code?
It is Because p tag have some default margin.
Add CSS like this
p{
margin:0px;
}
Fiddle
Okay I have a small problem,who I cant solve.
I hope experts will help :)
As you can see I have 3 divs on my index site.
No in the middle is one input who is across header and main div.
And the yellow circles are divs with but images*
About the div images...their code is
The positions are random,not equal as I have done.
HTML and CSS
#container{position:relative;}
.circle{border-radius:50%;
width:127px;
height:127px
positionate:absolute;
}
#apple_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:-5px;
left:15px;
}
#weight_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:30px;
left:80px;
}
#bike_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:100px;
left:20px;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
</div>
So my problem is when re sizing the windows it will go as the div1,they will go across each other. I need too to make it responsible,but when using mobile,i need them to disapear, and when on smaller displays I need them to adjust their size to display.
Is the positioning okay or should I use float?
Your question is very confusing but I guess that you want is something like this:
In can resize without problems using media queries.
Here is the link of mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
You can also use float:left and position:relative for your divs and position:absolute for your input.
Here is my HTML and CSS code:
.circle {
}
#apple_img {
background:green;
width:100%;
height:100px;
float:left;
position:relative;
}
#weight_img {
background:red;
width:100%;
height:100px;
float:left;
position:relative;
}
#bike_img {
background:blue;
width:100%;
height:100px;
float:left;
position:relative;
}
/* use media query here to other resolutions >768px and <=768px for example */
div > input{
width:200px;
height:200px;
position:absolute;
left:50%;
margin-left:-100px;
top:50px
}
input{
width:200px;
height:200px;
position:relative;
float:left;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
<div><input type="text" value="Type here"></div>
</div>
I guess that your class "circle" is not doing what you want, then I commented it (try used it to check).
For the tags div > input and input you can use the media query to resize correctly your input.
Here is my jsfiddle: http://jsfiddle.net/dhvuakjr/
Ps.: It's position and not positionate like you wrote your class circle
Hope this help you.
i have set the following css to ger border image of the div container but the problem is that my right image is not coming right on the border but it leaves spaces from the right border side of the div container when it stretches out.
<div id="container">
<div id="left-image"></div>
<div id="main-containts">
<div id="data-containts">
data
</div>
</div>
<div id="right-image"></div>
<div id="bottom">
<div id="bottom-left"></div>
<div id="bottom-center"></div>
<div id="bottom-right"></div>
</div>
</div>
div#container{
position:relative;
margin-left:120px;
margin-right:120px;
float:top;
padding-top:0;
margin-bottom:50px;
width:auto;
height:100%;
}
div#left-image{
position:absolute;
left:0;
width:28px;
height:100%;
float:left;
background:url(border-left.png) repeat-y;
}
div#right-image{
position:absolute;
right:0;
float:right;
width:30px;
height:100%;
margin-right:0;
background:url(border-right.png) repeat-y;
}
div#bottom{
position:absolute;
bottom:0;
width:100%;
height:36px;
z-index:100;
}
div#bottom-left{
width:51px;
height:36px;
background:url(corner-left.png) no-repeat;
float:left;
}
div#bottom-center{
height:36px;
background:url(bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}
div#bottom-right{
width:49px;
height:36px;
background:url(corner-right.png) no-repeat;
float:right;
margin-top:-36px;
}
If you are targeting the modern browsers only which supports css3. It could be easily accomplished by the css3 border-image property. Its worth to have a look at the property incase if you are not aware.
http://css-tricks.com/understanding-border-image/
Incase if you want your above code to work.Paste your div structure.
I have an issue with a page I'm doing.
A Snippet of the code:
<div id="header"> // header..
</div>
<div id="content"> // content where ajax is loaded (should be atleast 100% of the site height)
<!-- ajax -->
</div>
<div id="footer"> //empty atm.
</div>
now for the css:
#content{
margin-left:auto;
margin-right:auto;
background-color:#767670;
width:800px;
border-left:1px solid #9F9793;
border-right:1px solid #9F9793;
position:relative;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#footer{
width:100%;
height:40px;
border-top:1px solid #9F9793;
border-bottom:1px solid #9F9793;
background-color:#767670;
}
I want the container to be from the header to the footer, I tried to apply the code and tips that I found, yet without success. Appreciating any answers!
#content{
height:100%;
}
This implies that content div takes 100% of the parent container, which in this case is html.
So write
html{
height:100%;
}