Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
What have I done wrong?
Options
-
04-05-2012 4:34pm#1So I stopped coding/developing sites a while ago, and decided I'd just brush up on it the other day, and found I'd forgot a lot. :P
So I finished a basic and ugly site last night, and couldn't help notice that when I previewed it in a browser, it had a 5px or so white spacing from the edge of the browser (Top, left, right and bottom) I was confused by this, and assumed it was due to a CSS error, but couldn't find anything. Can anyone solve this problem/ It's probably something stupid that I've overlooked!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type='text/css' href="css/style.css">
</head>
<body>
<div class="All">
<div class="MainContainer">
<!-- This is where the header starts -->
<div class="Header">
<div class="Nav">
Home About Us Contact Us Portfolio
</div>
<div class="Logo">
<img src="images/Logo.png" title="DesignFlow Studios Logo">
</div>
</div>
<!-- This is where the Header end -->
<!-- This is the main banner, under the header -->
<div class="Banner">
<div class="BannerText">
Lorem Ipsum dolor
<br />
set amet boei
<br />
aerati
</div>
<div class="BannerImage">
<img src="images/Macs.png" title="">
</div>
</div>
<!-- This is where the banner ends -->
<!-- This is where the main content begins -->
<div class="Content">
<div class="News">
<div class="NewsOne">
<b>Latest News</b>
</div>
<br />
<br />
<br />
<div class="NewsTwo">
<a href> Lorem Ipsum </a href>
</div>
<br />
<div class="NewsThree">
Lorem ipsum dolor si lorum impsum donpretium volutpat
<br />
cursus. Nunc sed diam erat, hendrerit commodo enim.
<br />
Lorem ipsum dolor si lorum impsum donpretium
<br />
volutpat cursus. Nunc sed diam erat, hendrerit
<br />
commodo enim.
</div>
<br />
<br />
<div class="NewsFour">
<a href> Lorem Ipsum </a href>
` </div>
<br />
<div class="NewsFive">
Lorem ipsum dolor si lorum impsum donpretium volutpat
<br />
cursus. Nunc sed diam erat, hendrerit commodo enim.
<br />
Lorem ipsum dolor si lorum impsum donpretium
<br />
volutpat cursus. Nunc sed diam erat, hendrerit
<br />
commodo enim.
</div>
</div>
<div class="QuoteTop">
Why should you choose us?
</div>
<br />
<br />
<div class="QuoteBottom">
We have the talent, and creative
<br />
spark needed to create amazing
<br />
websites for you and your
<br />
buisness!
<br />
With DesignFlow Studios, you can be
<br />
sure that you are getting the best quality
<br />
work, for a fraction of the normal price!
<br />
Feel free to contact us today for a free
<br />
quote on a website!
<br />
Don't know what you need? We can help!
<br />
We will recommend the best fitting website
<br />
for your buisness!
</div>
<div class="Border">
</div>
</div>
<div class="Footor">
<div class="Copyright">
© 2012 DSF
<br />
All rights reserved.
</div>
<div class="Newsletter">
<div class="ContactInfo">
Contact@DesignFlowStudios.ie
<br />
0866614077
<br />
<a href>Facebook</a>
<br />
<a href>Twitter</a>
</div>
<div class="NewsletterText">
Newsletter
</div>
<div class="EmailField">
Email Address
</div>
<div class="SubmitButton">
Submit
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
.All {
background-color: #2c2c2c;
Width: 100%;
Height: 100%;
Margin: 0px 0px 0px 0px;
}
.Header {
Width: 1024px;
height: 100px;
background-color: #2c2c2c;
margin-right: auto;
margin-left: auto;
Margin-top: 0px;
}
.Nav {
Float: Left;
Font-Size: 18px;
Font-Family: Verdana, Arial;
Text-Align: Left;
Color: White;
margin-top: 35px;
Padding-left: 15px;
}
.Logo {
Float: Right;
margin-top: 17px;
margin-right: 15px;
}
/* This is where the Banner content styling starts */
.Banner {
Width: 1024px;
height: 270px;
background-color: #59c1af;
margin-right: auto;
margin-left: auto;
}
.BannerText {
Font-Family: Impact, Verdana, Arial;
Font-Size: 60px;
Float: left;
padding-left: 20px;
Color: White;
Margin-top: 20px;
}
.BannerImage {
Float: right;
Padding-right: 15px;
Margin-top: 15px;
}
/* This is where the main content begins */
.Content {
Width: 1024px;
height: 328px;
background-color: White;
margin-right: auto;
margin-left: auto;
}
.News {
float: left;
Padding_left: 15px;
}
.NewsOne {
float: left;
Padding_left: 15px;
Color: Black;
Font-Family: Verdana, Arial;
Font-Size: 16px;
Margin-Left: 18px;
Margin-Top: 13px;
}
.NewsTwo {
Float: left;
Padding_left: 15px;
Color: Black;
Font-Family: Verdana, Arial;
Font-Size: 14px;
Margin-Left: 18px;
}
.NewsThree {
float: left;
Padding_left: 15px;
Color: Black;
Font-Family: Verdana, Arial;
Font-Size: 14px;
Margin-Left: 18px;
}
.NewsFour {
float: left;
Padding_left: 15px;
Color: Black;
Font-Family: Verdana, Arial;
Font-Size: 14px;
Margin-Left: 18px;
}
.NewsFive {
float: left;
Padding_left: 15px;
Color: Black;
Font-Family: Verdana, Arial;
Font-Size: 14px;
Margin-Left: 18px;
}
.QuoteTop {
float: right;
Text-Align: left;
Margin-Right: 195px;
Color: #2781a7;
Font-Family: Verdana, Arial;
Font-Size: 18px;
Padding-top: 10px;
}
.QuoteBottom {
float: right;
Text-Align: left;
Margin-Right: 57px;
Color: Black;
Font-Family: Verdana, Arial;
Font-Size: 17px;
}
.Border {
background-color: Black;
width: 1px;
height: 220px;
Margin-left: 511px;
Margin-right: 511px;
Float: Center;
}
.Footor {
Background-color: Black;
Width: 1024px;
Height: 110px;
margin-left: auto;
margin-right: auto;
}
.Copyright {
Font-Family: Verdana, Arial;
Font-Size: 12px;
Color: #aeaeae;
Text-Align: Left;
Float: Left;
Padding-left: 15px;
Padding-top: 10px;
}
.NewsletterText {
Margin-left: 420px;
Color: #aeaeae;
Padding-Top: 15px;
Font-Family: Verdana, Arial;
Font-Size: 12px;
}
.EmailField {
Background-color: #2b2b2b;
Width: 190px;
Height: 30px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Text-Align: Center;
Margin-left: 410px;
}
.SubmitButton {
Background-color: #2b2b2b;
Width: 70px;
Height: 30px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Text-Align: Center;
Margin-left: 540px;
Margin-Top: 5px;
Float: Left;
}
.ContactInfo {
Float: Right;
Color: #aeaeae;
Padding: 15px;
Margin-top: 1px;
Text-Align: Right;
Font-Family: Verdana, Arial;
Font-Size: 12px;
}0
Comments
-
Google says:
body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }0 -
Thanks for that :P That was driving me crazy!0
Advertisement