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
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'm having problems getting the background formatting to work with my and tags. The text I type is showing up and formatting like I want, but I want the white background and border to extend down too. I've tried a couple things, including doing away with the #bodywrapper and extending the #headerwrapper by adding a height. I'd rather not do this, but I guess I will if I have to. If I add a paragraph within the #bodywrapper, but outside of the section or aside tags, it works correctly. Why isn't this working?
Here is my code:
CSS:
#headerwrapper {
width:80%;
height:auto;
margin-top:.5em;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background:#FFFFFF;
border-top-left-radius:.625em;
border-top-right-radius:.625em;
border:1px #000000 solid;}
.header {
width:100%;
height:10em;
margin:0;
border-bottom:3px #4E5E78 solid;}
img {
float:left;
margin-top:1.5em;
margin-right:1em;
margin-bottom:1.4em;
margin-left:1em;}
#bodywrapper {
width:80%;
height:auto;
margin-top:0em;
margin-right:auto;
margin-bottom:2em;
margin-left:auto;
background:#FFFFFF;
border-bottom-left-radius:.625em;
border-bottom-right-radius:.625em;
border:1px #000000 solid;}
section {
width:60%;
float:left;
margin:auto;}
aside {
width:40%;
float:right;
margin:auto;}
HTML:
<body>
<div id="headerwrapper">
<div class="header">
<img src="images/headerlogo.png" alt="Digital Billboard Guru" />
<h1>Call Now For Your<br />FREE Consultation<br />(000)000-0000</h1>
</div>
</div>
<div id="bodywrapper">
<section>
<p>Test</p>
</section>
<aside>
<p>Test</p>
</aside>
</div>
</body>
</html>
Add overflow:auto into the tags so that u don't have to adding the height.
I hope this is what you want.
Try adding overflow:auto to the #bodywrapper.
Fiddle
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.
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>
Hey guys. Im setting a position:absolute to my UL to make it appear on the bottom of div #destaques, but isnt work. Whats going on?
<div id="destaques">
<ul>//stuff</ul>
<div class="banner"><img src="images/001.jpg"/></div>
<div class="banner"><img src="images/002.jpg"/></div>
<div class="banner"><img src="images/003.jpg"/></div>
<div class="banner"><img src="images/004.jpg"/></div>
</div>
Its currently appearing on the page bottom.
#destaques {
margin:0;
padding:0;
width:1000px;
height:250px;
float:left;
overflow:hidden;
}
#destaques .banner {
position:absolute;
}
#destaques ul {
float:left;
border:1px solid #777;
background:#fff;
position:absolute;
margin:0;
color:#333;
padding:0;
right:0px;
}
What im doing wrong?
Thanks!
You need to add:
position:relative;
to your #destaques div