I have a website that is here: http://www.southwoldholidayhomes.com/ and as you may see there is a ~25px gap at the top of the page before the content begins.
The original code / layout has been inherited from the previous web design company, and is not up to my standard but works well enough, aside from this issue.
I want to reduce this top-of-page gap, but I can't find what is declaring it.
I have set rules in place on the body / html elements to give margin/padding of zero.
I have viewed various similar questions on SO which all seem to state it is setting of the margin/padding as per point one. I do not see that this is the cause, in this case.
FireBug can not select that area of the screen but does confirm my DIV, Body and HTML elements have padding/margin of zero.
The Gap is cross browser appearing on Chrome, Firefox and IE (so it's not a firebug / firefox specific issue)
I have removed various hidden elements such as <script> for google analytics at the top of the page and <div> for microdata content at the top of the page, but these do not change this layout issue.
Below is the CSS and HTML layout in a slightly simplified form. The page layout does use lightbox but that CSS does not appear to interfere with the page layout CSS which is in a single file.
CSS
html {
margin: 0 !important; ///used for problem solving, not on original.
}
body {
font-family: 'Source Sans Pro', sans-serif;
margin:0;
padding: 0;
color: #111F35;
font-size: 16px;
font-weight:400;
/*line-height: 1.4;*/
background-color: #BACDC7;
}
.containX, .container {
width: 61.875em;
max-width:990px;
background: #FFF;
margin:0 auto; ///used for problem solving, not on original.
padding: 0;
}
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" xml:lang="en-GB" lang="en-GB">
<head>
...
</head>
<body>
** GAP APPEAR HERE **
<div class="containX" id="container">
<script type="text/javascript">
/** Google analytics stuff only ***/
</script>
<div itemscope itemtype="http://schema.org/LocalBusiness" style="display:none;">
<span itemprop="image">http://www.southwoldluxuryholidayhomes.co.uk/images/head1.jpg</span>
<span itemprop="name">Far View Holiday Homes Southwold</span>
<span itemprop="description">Far View are a high quality 4 star experience, with a Gold Award from Visit England. These Self-catering apartments overlook Southwold Common, on the Suffolk Heritage Coast.</span>
</div>
<div class="header" >
EDIT:
I knew it was something silly that I missed, but for future readers - check the top-margin CSS of all lower page elements!!
If you inspect with Chrome dev tools, you can see that there is margin being applied to the h1 in the .header. Removing that margin fixed it for me.
Put this in your CSS:
.header h1 {
margin-top: 0;
}
This is being caused by the H1 in the header. To fix,
.header h1 {
margin-top:0;
}
The h1 tag inside immediately inside of your header div has a margin top of 1.em... This is what is pushing your content down
style rule margin-top: 0.6em; for selector .header h1 at http://www.southwoldholidayhomes.com/css/stylesdw2.css line 73
Related
I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like
*{ margin:0;}
why is that so ?
I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.
Linked soultion question.(Please check the comments in correct selected question)
Header not touching top of screen
My code :
<html>
<head>
<style>
* {
margin:0;
}
.new {
width:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="new">New Website</div>
</body>
</html>
Some browser have set user agent stylesheet at "body" tag
For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.
You can set
body{
margin: 0;
}
Will solve your problem.
http://jsbin.com/luqoruqewa/edit?html,output
Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:
body{
margin: 0;
}
Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.
* is the universal selector. It targets all elements. When you state:
* {margin: 0}
You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.
Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.
I am currently using WKHTMLTOPDF to generate PDFs through my Laravel application. The PDF template uses Bootstrap 3.3.6.
What I'm currently seeing is that the text, font, layout renders perfectly, but text is cut off from the left-margin.
If I remove the call for the Bootstrap CSS, it doesn't cut off the text, but the tables etc.. aren't aligned/laid out correctly. It must be something in Bootstrap that's causing this issue.
Top of template
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
width: auto !important; min-width: 100% !important;
font-family: 'Lato';
}
.page-break {
page-break-after: always;
}
</style>
The line width: auto !important; min-width: 100% !important; makes more of the text visible, but it's still not perfect (see screenshot below on the second page):
Any text wrapped in<p> </p> fits on the PDF correctly, but the headers and tables etc.. are cut off on the left hand side.
Controller code:
$pdf = PDF::loadView('reports.view-full-audit-report', $data)
->setPaper('a4')
->setOrientation('portrait')
->setOption('encoding', 'utf-8');
return $pdf->download('auditReport.pdf');
Has anyone experienced this before? If so, how did you resolve it? If you require further code samples, please let me know. Many thanks.
I have experienced this before, on Frappé Framweork and ERPNext. The HTML rendering for a DocType (Sales Invoice) will do this for mysterious reasons. So far I have found two workarounds:
1. Set the viewport size in the HTML code as per your final document size. For example, an 8.5 x 11 Letter sized page would be:
<style>
#media screen {
.print-format {
width: 21.59cm;
min-height: 27.94cm;
padding: 0.0cm;
}
}
</style>
I think you can use inches or other accepted measurements as well. You must declare an adequate viewport size on the HTML or Jinja template by doing the above solution
If all else fails, I solved my problem alternatively with the following styles and HTML:
<style>
div.general{
position: relative;
top: 0.0cm;
/*left: 0.0cm; */
}
div.document_size{
position: absolute;
width: 21.59cm;
height: 27.94cm;
}
</style>
<div class="general">
<div class="document_size">
<!-- YOUR HTML GOES HERE -->
</div>
</div>
Finally, to carefully position your elements on the page, use the span tag, with a declared class style, so you can place it in absolute terms within the divs created above. Distances are measured from the top left (origin) of the document:
span.item1{
position: absolute;
top: 1cm;
left: 1cm;
}
Once you have placed the span class= "item1" within the div tags as above, you can place anything you want within them. I consider these span tags as a sort of coordinate system marker, that ensures consistent output on every generation of wkhtmltopdf.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
So my problem is why does it do that? I tried everything including 'display: block', not using 'position: absolute' (Which worked but i don't know how to flush it without this), and even 'position: fixed' (Same thing as absolute).
Can anyone tell me why it does that? I do know that 'absolute' destroys your document NORMAL flow but I thought it would still respond to display: blocks? Why is it not listening?
EXTRA:
If possible could anyone link me to any good html and css positioning tutorials? I've done about a good 100+ queries of search on google and could not find any that explains the 'deep core' of how css works.
ANSWER:
Why does this work?
CSS:
#font-face {
font-family: Clash;
src: url(supercell.ttf);
}
body, html {
margin: 0;
padding: 0;
}
#navContainer {
background-color: #3a5795;
width: 100%;
float: left;
}
#contentContainer {
display: block;
clear: both;
}
#navHeader {
font-family: Clash;
color: #ffd700;
}
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
Problem with this:
Whenever I try to put a navigation bar it makes the entire container enlarge which I do not like.
Question for this:
When I type 'float: left' it expands up top and bottom doing the effect I want it to. Which is a bit odd to me as I thought float: left only moves to the left. Why does it expand up when I do float: left? And this just emphasizes the fact that I do not understand 'css' at it's 'deepest'.
I did not completely understand what you were asking (probably because it's pretty late) but I played around with your code a bit. Here is what I can tell you (if I'm wrong hopefully someone will correct me):
Browsers have default values for elements. The reason your container gets larger when you use float: left is because it is moved outside of the document flow. The default padding and margin value on the h1 element are what enlarges the container. (Notice that the asd outside of the nav container doesn't seem to move. This is because of the margin on the h1 element.)
The same explanation goes to why your nav container grows when you try to put a navigation bar into the container. If you are trying to make a horizontal navigation bar, try using display: inline-block on the h1, ul, and li elements. This will make them readable from left to right. (Hopefully this is what you were trying to do.)
As for web tutorials. Try the following:
w3schools --> A great website for learning about web development.
Treehouse Web Tutorials --> Sign up for their free 14 trial and go into their front-end web track. you will learn ALOT.
I'd like to apologize if I gave a pretty bad response. Hopefully this could be of help to you in some way!
For some crazy reason my body tag is not working at all. It is the only CSS that isn't working. I am trying to have a background behind the content of my website and have the content be about 80% of the body. So that I can have two bars on either side of my website which kind of acts as a border. Kind of how there seems to be two white bars on either side of stack overflow.
<style type="text/css">
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
#content {
font: 14px/1.4 'Times New Roman', sans-serif;
width: 80%;
max-width:1260px;
min-width: 780px;
background-color: #89837A;
margin-left: auto;
margin-right: auto;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<!--Replace link with good web font you want.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> - See more at: http://www.newthinktank.com/2011/09/how-to-layout-a-website/#sthash.lWAaNgcS.dpuf -->
<link rel="stylesheet" type="text/css" href="CPLS_Stylesheet.css">
<!--<div class='error' style='display:none'>Event Created</div>-->
<title>MyWebsite</title>
</head>
<body>
<div id="content">
HEADER
<div id="contentBackground">
CONTENT
</div><!--End of contentBackground-->
</div> <!--End of content-->
</body>
</html>
No matter what color I change the body tag to the background always stays white. The content is the correct color.
Don't put style link at the top of the some other link. that's why body design is not working. Put style link under the all the link
Is this: <style type="text/css"> in your CSS or is that just a mistake?
Unless that's an accident when your wrote that code, that's not valid CSS. The only time that's allowed is using the style tags within a HTML document to wrap CSS code.
Okay:
index.html
<style>
body {
background-color: white;
}
</style>
Not okay:
style.css
<style>
body {
background-color: white;
}
Since there's no closing tag, it looks like you accidentally copied that from a tutorial using the <style> tag inside a HTML document.
If you are using some kind of CSS framework make sure you place your custom CSS files, at last, the same thing happened with me I adjusted the order of the files that I
was including and it worked fine.
I don't know the exact reason why this problem is occurring.
The same problem has been occurred to me. However, I tackled it by using !important after the property in body in CSS file.
e.g. body{ background:black !important;}
If you found the actual reason do share it with me.
I know this was asked long ago but here is one solution. Put your css file link as the last one in the part of your html.
I know this was asked long ago, but I have just had the exact same issue.
Add a fake element style in your stylesheet before the body.
e.g.
#myFakeElement { color:red ; }
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
Remove from the style sheet....
I just copied the code to my editor and it worked:
After pulling all my hair out it has come down to this minimal html page that seems to be rendering wrongly on iOS:
<!doctype html>
<html>
<head>
<style type="text/css">
#fold
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
</style>
</head>
<body>
<div id="fold">
</div>
<div id="features">
</div>
</body>
</html>
When viewing in iOS (or for that matter in the iOS simulator) you can see a while line between the two blue divs.
This white line disappears if you zoom in. And of course it's not visible in any other desktop browser I've tried, either.
So, am I going nuts or is anybody else getting this? Any idea how to work around it?
It could be construed as a bug (I think it is) - but it has to do with the way iOS handles background images.
The quick answer - add a negative margin to one of your elements. See this JSFiddle.
The relevant portion is this:
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
margin-top: -2px;
}
You can target this using media queries.