<!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!
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.
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
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.
I am using the following:
<style type="text/css" media="screen">
div#print-footer {display: none;}
</style>
<style type="text/css" media="print">
div#print-footer {display: block; position: fixed; bottom: 0;}
</style>
the div for the footer is:
<div id="print-footer"><p>blah blah</p></div>
It works great but since I have multiple pages it print on every page. I want it on some pages. Oy! So, I broke the pages into individual html documents and that didn't work either. Then on even pages I changed the div to be:
<div id="print-footer"> </div>
but it ignored it and printed the first one.
Any suggestions?
Thanks,
Evan
An element that has position:fixed will be rendered on every printed page. See: http://reference.sitepoint.com/css/position
If you don't want the footer to appear on every printed page, use absolute positioning with bottom:0