In a site I am developing, I want a fixed menu on top that grows when I scroll. It works perfectly on Chrome and Firefox, but when I try on safari, it adds a margin on top.
The header HTML:
<div id="top-background">
<div id="top-menu">
<header class="large">
<nav><img class="logo" src="img/logo-color-solo.png"/>
<ul class="menu">
<li><span><a data-scroll href="#de-que-se-trata">¿De qué<br/>se trata?</a></span></li>
<li><span><a data-scroll href="#beneficios">¿Cuáles son<br/>los beneficios?</a></span></li>
<li><a data-scroll href="#como-se-usa"><span>¿Cómo se usa?</a></span></li>
<!--<li><span>¿Cuáles son las<br/>membresías?</span></li>-->
<li><a data-scroll href="#unete"><span>Únete</a></span></li>
</ul>
</nav>
</header>
</div>
...
The header CSS:
header{
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #aaaaaa;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}
this is how it looks on Chrome/Firefox (the right way)
And this is how it looks on Safari (wrong):
...as you can see, there is a huge white margin on top. No idea what it is. If I remove the whole CSS code of the header element, the margin disappears. I tried deleting each property individually as well, but I keep seeing the same margin.
Thanx for any help
You just need to add top: 0; to the navbar, so that the navbar always knows where to stay. Hope this helps :)
Related
I have creating one web page using html5
Here is my code:
<header>
<img src="img/logo.png" alt="logo">
<hr class="hr-style">
<h1>The Articles</h1>
<nav>
<ul>
<li>Home</li>
<li>Articles</li>
</ul>
</nav>
</header>
<section>
<article class="article">
<img src="img/articles.png" alt="articles" />
</article>
<aside class="aside">
<img src="img/agencies.png" alt="agencies" />
</aside>
</section>
<footer>
</footer>
This is my JSfiddle i tried: please see this what i tried,
http://jsfiddle.net/3jet0dfu/
I need like this:
I'm new to HTML5, i need to know how to align the page using html5 tag.
To start with, you need to contain your content with a width.
Have an example!
In this example I am giving the body a width the same as your logo image (939px). margin: 0 auto; will center the page. Your question is too broad to give you an exact solution.
body{
margin: 0 auto;
font-family: Raleway, sans-serif;
width: 939px;
}
It would be better to replace the <hr> with a border. For example:
<img src="" alt="" id="logo">
#logo {
border-bottom: solid 2px #CCC;
padding-bottom: 50px;
}
I have also done a crude CSS reset to remove the default margins; they can then be easily controlled by adding them back to each element. You can also use a CSS Reset or CSS Normalise (do some research on the ideal solution for you)
* {
margin: 0;
padding: 0;
}
box-sizing: border-box is also brilliant if you want to use percentages.
Here is an excellent run-down on box-sizing.
* {
box-sizing: border-box;
}
This simple change gives you most of your desired layout. Now you need to change the width and add margins / padding as needed.
I'm not sure what the issue here is, but its frustrating the hell out of me. I have a header div, for the logo and links, a wrapper div for the main section, and then a footer. width is set to 100% for all, but for some reason there is an overflow of white space spilling over on the right side and on the bottom. And it does this funky thing where if I move my mouse to the white space below the footer the contact link in my header is selected!
Theirs a fair bit of html and css so I decided to just link you guys to a jfiddle, it will be easier to just show you the problem in action. notice how you can scroll to the right and there is white space, even though the wrapper has background color set to grey, header has background set to white, and footer has background set to grey. all have 100% widths as well.
There is even white space coming in below the footer for some reason.
I hope all this makes sense and thanks for your help. I'm sure its something silly and obvious but I'm still kind of new to this!
http://jsfiddle.net/46andtool/Q2d4K/2/
heres the main div css
/*body element*/
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; }
/*contains #main and #footer*/
#wrapper { width:100%; background-color:grey; border: none;}
#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/
/*div that contains the banner and navigation*/
.header {width: 100%; margin: 0 auto; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
/*Logo*/
#banner {float: left; max-width: 100%; margin: 0; padding: 0;}
/*navigation*/
#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; }
and the html:
<body>
<div class="header">
<img id="banner" src="img/******.png" alt="*******">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>*****</li>
<li>******</li>
<li>******</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="wrapper">
<div id="main">
<div id="innermain">
<h1>Latest News and Events</h1>
<h2>Welcome to !</h2>
<p>gsfdgdfgsdfgsdfg
</p>
<div id="linebreak"></div>
<p>gfdhgdfhfgh</p>
<br>
<p>hgdhfghgfh</p>
<br>
<p>gdhfgdhfghfgh</p>
<br>
</div>
<div id="rightside">
<h1>Where To Find Us</h1>
<div id="buildingpic"></div>
<div id="map_canvas"></div>
<p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
</div>
</div>
</div>
<div id="footer">
Site design by <a class ="links" href="example#yahoo.com">fsgfdg</a></a> © <?php echo date('Y');?> All Rights Reserved
</div>
</body>
There are a couple things causing issues here.
Your body automatically comes with a margin, so it's going to overflow if you don't specifically set the margin:0px;
Your #footer had a width:100%; but it also had padding:10px. Those are combined, so you had width:100% + 10px of padding. Try to do something like what I provided, which is width:94%; and padding:10px 3%; so your width becomes 94% + 3% + 3% = 100%
Lastly, your #buildingpic element had width:300px which in this case was wider than the container it was in. You would be better off making it width:100% and height:auto; to automatically constraint to the proportions of it's container. In this case I set the max-width:100%;
http://jsfiddle.net/Q2d4K/4/
Also, you're going to have a hell of a time if you always use IDs. Try to use classes for elements so you can re-use them if need be, or at least not have issues with duplication or priority of selection.
I am just finishing a small website and noticed in IE7 that the logo is hiding behind an image on the home page: http://reapvalue.com/
Here is the html:
<div id="wrap">
<div id="header">
<ul id="main-nav">
<li>About</li>
<li>What We Do</li>
<li class="last">Contact</li>
</ul>
<h1><img id="logo" src="/photos/logo.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
<h1><img id="logo-small" src="/photos/logo-small.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
</div><!-- end #header -->
<div id="tagline">
<span class="green">renewable energy</span> <span class="magenta">and preservation</span>
</div>
<div id="main" class="clearfix">
<div id="Stage" class="EDGE-909290339"></div>
<img id="lead-image" src="photos/hickory.jpg" alt="hickory, nc preserveration district">
Here is the CSS:
#header { width: 960px; height: 53px; margin: 0 auto; position: relative; }
body#inside #header { height: 56px; }
img#logo { position: absolute; top: 0; left: 0; z-index: 5000; }
Despite setting the z-index to 5000 it still hides behind the image. Any help in getting the logo to the front will be greatly appreciated.
Thanks.
I can't really explain why, but z-index in IE7 and IE8 acts weird.
If you're using z-index, and want it to work in older IE browsers, you need to make sure your parent element has an heigher z-index then your element.
For example, give your #header a z-index: 6000; and it'll be fixed.
I hope someone can give you an better explanation as to why this works, as I would like to know aswell myself.
EDIT: I've googled abit and found this interesting post:
http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.
How can I eliminate this whitespace?
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active">Home</li>
<li class="divider">PROJECTS</li>
<li class="divider">ABOUT US</li>
<li class="divider">THE TEAM</li>
<li class="divider">EVENTS</li>
<li class="divider">MEETINGS</li>
<li>RESOURCES</li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Here is my desperate attempt at fixing this issue using CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url('../images/someImage.jpg') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
You may want to override the margin-bottom: 20px from navbar :
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/
(the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)
Why you put classes: span12 offset3 ?
Bootstrap has 12 columns default. so if you didn't changed it try to put:
span9 offset3 or just span12.
I have a menu bar in which each button is an image floated to the right. It looks perfect in Safari, FF, and Chrome but in IE7 the buttons are grouped fine, but they appear about 50 pixels lower than the other browsers (out of the menu bar). Any tips on how to fix this? Thank you!
http://jsfiddle.net/mE2b8/
My CSS:
#menu {
width: 100%;
height: 58px;
background-color: #00653a;
}
#menu_mid {
width: 823px;
height: 58px;
margin: 0px auto;
background-color: #00653a;
}
.menu_links {
float: right;
display: inline;
}
HTML:
<div id="menu">
<div id="menu_mid">
<img src="assets/img/menu_rrt.gif" alt="RRT"/>
<img src="assets/img/menu_contact.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_news.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_about.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_home.gif" alt="Contact" class="menu_links"/>
</div>
</div>
The problem seems to be that the logo (or graphic with alt="RRT") does not have a width defined. I added an ID to the img element and then floated it left. Seems to be what you're looking for: http://jsfiddle.net/mE2b8/3/