- This topic is empty.
-
AuthorPosts
-
June 13, 2013 at 4:50 pm #45518Attila HajzerParticipant
I’m having a problem with my website.
when you click the nav links to different parts of the page, there’s time where part of my header will dissappear or sometimes my whole header is there something wrong with my css?
and here is a screenshot:
https://twitpic.com/cx169r/full
it goes normal when you scroll. but its weird! i’ve tried changing my positioning of my header from fixed to absolute.
/*
Theme Name: Redesign Niagara
Theme URI: http://hajzer.info/
Author: Attila Hajzer
Author URI: http://hajzer.info/
Description: The official theme for Hajzer.info.Tags: Attila Hajzer, website Design, grey, black, gray, one-column, Yellow, Single page, scroll, fixed-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: AttilaHajzer
*/*{margin:0px; padding:0px;}
a{margin:0; padding:0;}
header, nav, footer, aside {display:block;}.both{clear:both;}
@font-face
{
font-family: Delicious;
src: url(‘font/Delicious/Delicious-Bold.otf’);
}
@font-face
{
font-family: PTSans;
src: url(‘font/PT_Sans/PTC55F.ttf’);
}body{background-image:url(‘images/bg.png’); background-attachment:scroll; }
#wrapper{width:960px; margin:0 auto;}header{width:100%; background-color:#F2C718; position: absolute; top: 0px; border-bottom: 1px solid #FFDF5E;}
#nav-contain{width: 960px; height: 60px; margin: 0px auto;}
nav{height: 60px; float:left;}
header #logo-tag a{font-family: arial; width: 259px; float: left; color: #FFFFFF; text-align: center; padding-bottom: 3px; text-transform: uppercase; text-decoration: none;}
header span{display: block;}
nav ul {margin-left: 0px; list-style-type: none; float :left;}
nav ul li {line-height: 60px; float: left; width: 113px; text-align: center; border-left: 1px solid #FFDF5E; font-family: PTSans; text-transform: uppercase; font-weight:800;}
nav ul li:first-child{border-left: 1px solid #FFDF5E;}
nav ul li:last-child{border-right: 1px solid #FFDF5E;}
nav ul li a{display: block; color: #FFFFFF; text-decoration: none;}
nav ul li a:hover{color: #FFFFFF;}June 13, 2013 at 5:28 pm #138646AlenParticipantWhen you click on “Welcome” it scrolls little bit because you have linked it to a hash `#welcome` so it’s scrolling to the anchor.
Did you want your header to be fixed?
June 13, 2013 at 6:55 pm #138656aLtikalParticipantYou need to use position:fixed on your header for it to stay in the position in the screen and not move whilst scrolling. Make sure it has a higher z-index aswell so it doesn’t drop and hide beneath other elements.
Position:absolute removes it from the document flow and allows you to place an element anywhere you want on the page in a pixel-perfect way – but it will stay in that exact position.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.