How do I remove the white space above this navbar that I created?
http://gyazo.com/b41271cad8d41c08c52ff26b1f1cab9e
I have search StackOveflow for this answer, but can't find one that seems to fix my issue. I have set html, body padding/margin to 0 as well as reset all other elements. Does anyone have any advice?
<nav id="header">
<div class="home-header">
<h1> testing this </h1>
</div>
</nav>
Here's the CSS
#header {
position: relative;
margin: 0 auto 0;
padding-top: 0px;
background-color: $main-color;
}
Live demo
The space at the top is create by the h1 because of its default margin. To fix this:
#header h1{
margin:0px;
}
PS: I assume that you removed the margin for the body tag. If not here's how you remove it:
body{
margin:0;
}
#header {
position: relative;
margin: 0;
padding-top: 0px;
background-color: $main-color;
}
body{
margin:0px;
}
<body>
<nav id="header">
<div class="home-header">
<h1> testing this </h1>
</div>
</nav>
</body>
Put The body Tag margin:0px; Header margin:0px; Try This Code
I ran into this problem. No other solution helped me, so eventually, I found one:
When I was coding the HTML file with Visual Studio in Windows, it saved it as UTF-8 BOM, so when the browser was rendering the page, it was misinterpreting that Byte Order Mark and showing it as a blank space above everything else.
If that is your case, you just need to reencode the file to UTF-8. I used Notepad++ for simplicity, but I'm almost sure you can do that inside VS as well.
Related
Want to get a bullet in html/cs (three of them actually) on the bottom of my page. I tried to do sth like this:
<style>
div.container {
position: absolute;
bottom: 0px;
text-align: center;
font-size: 200px;
font-family: cursive;
width: 100%;
}
</style>
<body>
<div class='container'>
...
</div>
</body>
But I guess that it isn't the best idea to code it this way. Now it is possible that my dots are covered by other html elements (just because of the fact that div is out of normal flow as an absolutely positioned element).
So my question is how to do it properly (and without using divs with border-radious: 100% set in their CSS). In fact I'd be glad to see a solution using dot signs (.). Thanks for your help ;)
Is this what you're after " • • • " ?
Use:
•
Depending upon your chosen Doctype, you may need to use:
a solution using dot signs (.)
fiddle
<style>
div.bullets {
text-align: center;
font-size: 200px;
font-family: cursive;
}
</style>
<body>
<div class="container">
<div>some content</div>
<div class='bullets'>...</div>
</div>
</body>
Edit
I guess you could us a negative margin then margin-top: -170px;
fiddle
I'm designing a website for my company and we're using a wordpress template. We've been able to modify the template to make it full screen (& full width), however, we can't get rid of the blank header that is seen in the screen shot below. We've added custom CSS style into our style sheet, which has helped, but did not eliminate the problem:
CSS Style we added:
.page-template-template-fullsize-php #header { margin-bottom: 0; }
Any other advice would be very helpful as we're looking to clean up this aesthetic flaw on our website.
Screenshot:
Website Address: http://visualicreative.com/products/advertising/web-commercial-html/
This will help your CSS:
#content .entry-header {
display:none;
}
#content {
padding: 0px 30px 30px 30px;
}
/*changed from padding:30px; */
You really need to tweak your theme. You've got a lot of blank code in there that is creating gaps (including the blank header).
You have some inline code that increases top padding:
<div id="main" class="clearfix zIndex" style="padding-top: 108px;">
Then all of this under the entry content:
<p><a name="top"></a></p>
For your article directive/element if you use margin-top: -100px; you can shift it up by 100 pixels. More here.
In one of your template files that has been used on that page, there is a
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
empty header which causes a little more space. The rest of that additional space is because possibly in the same file just one line up of your header element, you have an <article> element with the id of #content which has padding:30px;
You can change that padding style to
padding: 0px 30px 30px 30px;
just to get rid of the top padding.
Hope this helps.
You have 108px of padding at the top of div#main.clearfix.zIndex. By removing or lessening that padding, you can affect how close to the menu bar your main div is.
Change the padding of .nav-full-width #main and you are good to go. also .entry-header has a margin, change that too.
I visited that web page and I recognized to there is many different type of levels to header.You can fix and delete some of them.However, there is a one way to fix,You should insert #content css veraible to padding-top:0px;.Also, you should delete unnececarry div and p lines from pure html.One of the unneccecary code line is in the following segment;
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
More over, there 2 empty p tags on the pure html.You should delete them.I tried it on the browser and it displaying,whatever you like.
Ive been having this issue accross a few projects im working on.
im sure its a basic issue and ive tried looking for answers but to no avail.
the code for the page in its entirity is:
HTML
<html>
<head>
<link rel="stylesheet" href="cssbin/default.css" type="text/css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
</section>
<footer>
</footer>
</body>
</html>
CSS:
body {
background-color: #B3BDE6;
}
header {
height: 200px;
background-color: #020C36;
}
nav {
height:100px;
background-color: #7A8FE6;
}
section {
height:500px;
background-color: #2B314D;
}
footer {
height: 200px;
background-color: #020c36;
}
body, header, nav, section, footer {
border: 1px solid black;
}
the webpage below shows what im talking about:
http://virtualharrogate.co.uk/template.php
in google chrome the page is framed, im not sure if this happens in every browser but i need to rectify the issue for chrome if nothing else...
Im asking why the borders there (as im obviously missing the point of something somewhere) and how to fix the issue?
ive tried styling the page with css properties width: 100%; & height: 100%; but still nothing.
thanks in advance
This happens because by default body has margin:8px.
Here is the default stylesheet - http://www.w3.org/TR/CSS21/sample.html
Just add a margin:0; styling to correct it.
And you should use some sort of css reset before applying custom css. Thats the right way to go about stuff.
Check out Initializr. It offers that plus a lot more, including IE6+ compatibility/fallbacks etc.
Look at the last line of your CSS:
body, header, nav, section, footer { border: 1px solid black; }
This is adding a 1px border around ALL of those elements. Try removing body from that line.
just use body {margin: 0;} or body {margin: auto;}
I have tried to create an anchor point using:
<a href="index-xxx.html#reference-name"> and
<a name="reference-name">
The problem is I have a floating margin on the top and the anchor point goes to the top of the page hiding the top of the text.
Is there an easy way to add a relative spacing to the top margin using HTML?
I'm new to this and using a template that I found online. I have since found that it would have been easier to start from fresh instead of using the template but I am too far down the line now, and I don't really understand how to change the CSS to do this. Is there an easier answer?
Many thanks in advance to someone that has been searching for hours for the answer.
EDIT: I've updated based upon the code supplied.
Basically we've got something to the effect of this:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#main {
min-width: 980px;
margin: 0 auto;
font-size: 0.75em;
padding:101px 0 37px 0;
}
header {
height:101px;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
}
footer {
overflow: hidden;
position:absolute;
bottom:0;
left:0;
width:100%/*; height:37px*/;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
color:#9d9d9d;
text-transform:uppercase
}
</style>
</head>
<body>
<div id="main">
<header>...</header>
<section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
<footer>...</footer>
</div>
</body>
</html>
As written the anchors links are buried under the top navigation. It seems the only solid fix is to use 'CSS frames' to get the content to display correctly, which requires the following CSS tweaks:
#main
{
padding:0 0 37px 0;
}
section#content
{
position:fixed;
top:101px;
width:100%;
bottom:37px;
overflow:auto;
}
footer
{
position:fixed;
height:37px;
}
So I've removed the top padding from #main.
Then I made the content and footer fixed position. Because of this the content has to be moved down 101px, hence the top.
I then had to give the footer a height, and then put that same amount as a bottom on the content.
Overflow auto gives us scrollbars, and width of 100% puts those bars in a reasonable place.
Tested on IE 9, Chrome 10, Firefox 4, and Opera 11.
Edit 2: And unfortunately I can't find much online about this particular method. Eric Meyer talks about it in Smashing CSS. It doesn't look like any of the existing resources online test for how anchor links will work with the content, which is pretty unfortunate.
I have built several web sites and now i am having newbie problem that is driving me nuts...
Here's my code:
<body>
<div id="page">
<div id="page_wrapper">
<div id="header">
<h1>Heading 1</h1>
<div class="clear_both" /> </div>
</div><!-- end #header -->
<div id="main_menu">
<p>Here goes the main menu</p>
<div class="clear_both" /> </div>
</div><!-- end #main_menu -->
<div id="left">
</div><!-- end #left -->
And here's my CSS
First i have a CSS Reset template from here:
http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css
and then on another file:
body, html {
font: 10pt Verdana,Arial,sans-serif;
background: #fff;
margin: 0;
padding: 0;
text-align: left;
color: #333;
}
div {
line-height: 1.4em;
}
#page {
}
#page_wrapper {
}
#main_menu {
}
#left {
}
div.clear_both {
margin: 0;
padding: 0;
font-size: 0;
height: 0;
line-height: 0;
clear: both;
}
And on the link below there is an image screenshot on which you can see the output... (i am working on a local server)
There is an unexplainable space between the div tags I CANT REMOVE IT and it is driving me nuts... please can someone tell me how to remove it?
I have tryed adding a negative top margin but from my previous experience it is not a solution... usualy seting the margin and the padding to 0 was enough... somehow now it is diferent :S
Unexplainable DIV space
I've finaly found the problem thanks to all of You but especialy thanks to Notepad++
The problem was caused by the invisible blank spaces (from the SPACE key).
I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.
I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.
div {line-height: 1;}
h1, p {margin: 0;}
don't use units for your line height, see: Unitless line-heights for more information,
if you simply put 1.4 then the line height will be 1.4 x the font-size, this should help you get control of your gaps, obviously my code example above absolutely zero's everything and is just an example
JSFiddle : HERE
In top of your CSS file just paste this
* {
margin: 0; padding: 0;
}
Hope this helps.
<div class="clear_both" /> </div>
This is creating you a white space between Heading 1 and Here goes the main menu...
DIVs comes one below other if you have them "display: block", so even if this div don't have text, it has empty space " "...
If you delete this, all other will be like text below...
Sorry if I understand something wrong... ;)
div {line-height: 1.4em;} should be the culprit.
on your DIV or image use:
.div
{
display: inline-block;
padding:0;
margin:0;
}
and on body use:
body
{
padding:0;
margin:0;
}
I had the same problem and this worked just fine for me I just got it fixed! Hope this helps anyone searching for an answer.
Div comes with blank spaces whenever used.
In order to remove them
Use
margin-top: -10px
or whatever is convenient to your page setup.