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;
}
Related
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
Is there any way to make .bar pop up out of bounds of .foo and .plaa and over .baz in the following example:
jsfiddle
HTML:
<div class="plaa">
<div class="foo">
FOO
<div class="bar">
BAR
</div>
</div>
</div>
<div class="baz">
BAZ
</div>
CSS:
.bar{
display:none;
width:420px;
height:420px;
background-color:pink;
z-index:420;
position:absolute;
overflow:auto;
}
.foo{
width:50px;
height:50px;
background-color:orange;
cursor:pointer;
position:relative;
}
.baz{
position:absolute;
top:55px;
background-color:yellow;
}
.plaa{
position:absolute;
overflow:auto;
max-width:50px;
max-height:50px;
}
JS:
$(".foo").click(function(){$(".bar").toggle()});
It works fine when I remove overflow:auto; from .plaa but unfortunately I can't do that in my real world case.
Make these change
.plaa{
position:absolute;
max-width:50px;
max-height:50px;
}
$(".foo").click(function(){$(".bar").toggle(function(){$(".bar").css({"overflow":"visible"});})});
I hope this is what you want.
if you really can't do that in real world case then manipulate the DOM using javascript.
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 created the following demo:
http://thedrivepartnership.com/overflow.html
The scrolls expand fine in FireFox / Chrome but in IE it just does seem to want to work.
Does anyone come across the problem before.
css
body {padding:0px; margin:0px;}
.wrapper {
position:absolute;
top:0px;
bottom:0px;
width:100%;
height:100%;
background:red;
}
.block1 {
position:absolute;
top:0px;
right:0px;
width:70%;
height:50%;
background:green;
}
.block2 {
position:absolute;
bottom:0px;
right:0px;
width:70%;
height:50%;
background:blue;
}
.heading {width:100%; height:50px; background:black;}
.scroll {
overflow-y:scroll;
overflow-x:hidden;
width:100%;
position:absolute;
float:left;
top:50px;
bottom:0px;
zoom:1
}
html
<div class="wrapper">
<div class="block1">
<div class="heading"></div>
<div class="scroll">
<!--content here -->
</div>
</div>
<div class="block2">
<div class="heading"></div>
<div class="scroll">
<!--content here -->
</div>
</div>
</div>
Your design works fine in IE, you just need to declare a DOCTYPE in the first line of your document first.
<!DOCTYPE html>
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.