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
Related
This is a very minute detail, as it is not a problem when there ARE posts obviously; but when the theme has no posts, the page displays a white border with no padding or content. I'd like to hide that completely if there are no posts.
HTML
<div id="container">
<div id="content">
{Block:posts}
...
{/Block:posts}
</div>
</div>
CSS
#container:empty{
display:none;
}
#container{
position:absolute;
border:5px solid white;
border-radius:3px;
display:inline-block
background:#155484;
max-height:497px;
width:547px;
overflow-y:scroll;
overflow-x:hidden;
margin-left:43%;
margin-right:15%;
margin-top:3%;
margin-bottom:5%;
}
#content{
margin:5px;
margin-right:0px;
background:#7995d6;
padding:5px;
padding-left:10px;
width:auto;
color:#fff;
font-family:monospace;
text-decoration:none;
font-weight:normal;
}
I know that display:none doesn't actually work, but I'm lost on where to start. Also, I'd like to stick to CSS or HTML if possible; I don't have a clue how to use anything else.
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
Note:
Before I posted my question I have searched this site to get answers, but I couldn't find any solution which allows me to set equal margin in percentages value.
The following codes are not scaling to full 25% of it wight:
Please see the sample HTML code below:
<style>
#Wrapper {
margin:0 auto;
width:70%;
}
#MainLogo{
width:100%;
height:100px;
border:1px solid #000;
}
#LeftSide{
width:25%;
height: 600px;
background-color:#90F;
margin-top:5px;
float:left;
}
#FloatLeft {
float:left;
}
#One{
width:25%;
height:300px;
background-color:#000;
margin-top:5px;
float:left;
}
#Two{
width:25%;
height:300px;
background-color:#F00;
margin-top:5px;
float:left;
}
#Three{
width:25%;
height:295px;
background-color:#F00;
margin-top:5px;
float:left;
clear:both;
}
#Four{
width:25%;
height:295px;
background-color:#000;
margin-top:5px;
float:left;
}
#RightSide{
width:25%;
height: 600px;
background-color:#00F;
margin-top:5px;
float:right;
margin-bottom:5px;
}
#MainFooter{
width:100%;
height:100px;
border:1px solid #000;
clear:both;
}
</style>
<body>
<div id="Wrapper">
<header id="MainLogo">
Logo Goes here!!
</header>
<aside id="LeftSide">
Left side goes here
</aside>
<div id="FloatLeft">
<aside id="One">
One Goes Here!!
</aside>
<aside id="Two">
Two aside goes here!!
</aside>
<aside id="Three">
Three aside goes here!!
</aside>
<aside id="Four">
Four aside goes here!!
</aside>
</div>
<aside id="RightSide">
Right side goes here
</aside>
<footer id="MainFooter">
Main Footer Goes here!!
</footer>
</div>
The reason it isn't working is because of things such as padding and margin. You are going to need to use the box-sizing property to get the effect you want.
First, you should remove the padding and margin for everything, then set the box-sizing property to border-box. This will ensure that no matter how much padding or margin you have, it will always stay at the height, and width you specify.
Here is a sample usage
* {
padding:0;
margin:0;
box-sizing-border-box;
}
The box-sizing property isn't fully supported yet, so you will need to use vendor specific properties
I'm struggling to find a direct answer to my problem due to the many variations in peoples code.
I imagine my code is probably very messy as i'm trying to build a website for my partner, and quickly (i have just a few hours Dreamweaver experience and that's it)!
Anyway, i have a fixed width website where there are around 6 separate divs in a column, all contained within a webpage-sized div for my background colour.
Anyway, when i am trying to add a border to my footer, it does not display in browsers. I just wan 1px to separate the 'main' div from the footer and it won't appear. This is also the same for my navigation div.
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:#000000;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color:ffffff;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left: auto;
margin-right:auto;
border-style:solid;
border-left:1px;
border-right:1px;
border-bottom:1px;
border-top:1px;
border-color:#000000;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<img src="Images/Logo.jpg" alt="Ruth Fifer Jewellery">
</div>
<div id="main">
<div id="navigation">
<br />
</div>
<br />
<br />
<img src="Images/Home Image.jpg" />
</div>
<div id="footer">
<img src="Images/facebook.png" alt="Facebook" id="Facebook"/>
<img src="Images/twitter.png" alt="Twitter" id="Twitter"/>
<img src="Images/linkedin.png" alt="LinkedIn" id="LinkedIn"/></div>
</div>
</body>
If anyone is able to help it would be great, as i get the feeling I'm probably using conflicting codes due to my inexperience but don't have time to learn everything right now and will instead go back at a point where i have more time to adjust things.
Thanks,
Martyn
1) Write <!DOCTYPE><html><head> tag in the beginning of the code.
2) Write </html> tag in the end of the code.
AND USE:
border: 1px 0px solid #000000;
And it will solve your problem. Look at http://jsfiddle.net/p2269/1/ I wrote code as I explained and it shows borders.
Your code is incomplete, I think...
Here you have a working example.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:green;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color: yellow;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:blue;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:red;
margin: 0 auto;
border-top: 3px solid white;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header"> </div>
<div id="main">
<div id="navigation">
<br />
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
When containing element (div with id=footer in your case) only contains floated elements (facebook, twitter and linkedin icon) some browser will treat it as if it is zero pixels tall. You should add two CSS rule in footer selector: the overflow property with its value auto, the width property with its value 100%, to show that border.
How do I remove the whitespace found at website.com underneath the elements div is like 730 px of whitespace. I've been fiddling around with my css code for over an hour now. I can't seem to isolate the problem
HTML:
<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>
<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>
CSS:
div.element img:nth-of-type(1){
padding-top:80px;
}
div.element div:not(:nth-of-type(1)){
position:relative;
width:auto;
height:auto;
bottom:375px;
}
div.element img{
position:relative;
right:198px;
padding-right:56px;
border:none;
}
.Projecttitle{
text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 22px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
padding-top:15px;
}
#Projecttitle{
position:relative;
bottom:162px;
width:410px;
height:155px;
left:226px;
}
.Projectdescription{
text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 17px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
}
#Projectdescription{
position:relative;
bottom:290px;
width:410px;
height:155px;
left:226px;
z-index:0;
}
First of all, you have an unclosed div tag. the second div.element is nested inside of the first one, when they are obviously supposed to be siblings. When you fix this, the problem will become more obvious. You are also using way too much relative positioning. This confuses the issue more because the appearance of the element on screen changes, but the space it 'occupies' in the document flow does not.