|
CSS - Trouble With Header
Hi guys,
So, I've been working on my portfolio site over the past week or so and I'm really pleased with how it's looking. You can view it here eyeforillustration.com It is on the Cargo Collective platform. I have just one last problem that I just can't get my head around. Basically, I can't get the header image aligned with the thumbnails and footer properly. I would also like the header to slide like the thumbnails and footer when you resize the page. Also, when viewing it in different resolutions it seems to jump around depending on the width? I'm pretty sure it's something to do with the header container but I've tried everything and can't get it working. If you guys could take a quick look, any help would be much appreciated. Jack (If anyone would like an invitation to try Cargo out, I do have a couple to give away, just let me know) Similar TutorialsHi, I have a header div on my page that when the page is scrolled down to the header area, it is pinned at the top (via position:'fixed', and top:0), but the problem is that the content div that sits below it ends up shifting up on top of the header div when I set the position to 'fixed'. How do I keep the content div from shifting up when I pin the header? Thanks in advance!! Hello, My website yaou.org looks good in every browser except IE... The css for the menu can be checked here : yaou.org/website/menu.css Can someone tell me how to fix the CSS ? Thanks, Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; } TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; } A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; } A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; } A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; } A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; } #poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px} #poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold } select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; } .pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline} .pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none} body { SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA; ; background-color: D8E0E9 } FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; } TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )} And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at: http://www.getbrightstar.com/v2/ And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing. Thanks, -Daniel what in gods name am I doing wrong? I want the header image to scale with the web page, I can't stand how it shows the scroll bar when you resize firefox's window. themidnighter .ca/test Thanks! hi my site uses class i press, a wordpress theme (www,grimsbyforsale,com) how do i make my header bigger so my logo image does not overlap? what values on what code would i need to change i am new to all this ? Hi, How do I indent my H1 tag as they are too close to the edge of the page. I tried all the functions for a <p> but they dont work for headers Thanks Post resolved -- css controlled by unmentioned files. (apologies for duplicate post, was sure that was "edit" but must not have been) Why is the second header on his site is located at the bottom of the page, I can't seem to figure it out. Can anyone take a look at the page and maybe point me in the right direction? The url is <NO LONGER AVAILABLE> I know that is has to have something to do with #clearheader1 or #clearheader2 calls. Maybe where they are placed or something. Hello, my name is Jordan, and I run breatheheavy (can't post the URL) I have a new header designed that's 1665x515px. I am having a little trouble putting it on the website because of the current restrictions placed in Wordpress on the header.php and style.css files. When I uploaded the header and changed the settings in Wordpress, it didn't look correct on all browsers or the iPad. I was hoping to get some help from someone that could help me with this and make it compatible with all browsers / mobile version. You can see the site on an ipad simulator site (also can't post the link) Thanks for reading Sending good vibes your way, Jordan Hi, I am working on a design for one of my websites and have run into a little bit of a problem. I am hoping one of you guys can help me out. I am relatively new to coding with css and have read a bunch of tutorials but cannot for the life of me figure out how to convert the following table into divs: Code: <table border=0 width=100%> <tr> <td rowspan=3>logo</td> <td rowspan=3>navigation bar</td> <td>some links</td> </tr> <tr> <td>search box</td> </tr> <tr> <td>more links</td> </tr> </table> Basically its the header part of the design, I have the rest of it done without much problems. I have tried everything but cannot get it to look like the table. Any help will be greatly appreciated. Thanks, I'm currenty working on a website, and header is really starting to get on my nerves. If you go to http://www.techtalk.l2p.net/tab/index.php you can see what I have done so far. Well, I have a few problems. When trying to log in, and you press tab to go from Username to Password, it goes to the Login link instead. After filling in the Password field, and you press Enter, nothing happens. When the browser is resized, the whole header gets messed up. I was thinking some CSS could help it work, but I have no idea where to start. Any help would be appreciated. How do i stop the <h1> add white space above and below anything in the header tag. I'm having trouble with creating a nav bar in css. The code I'm using is this for the html: Code: <div id="wrap"> <div id="nav"><a id="home" href="#" title="home"><span>home</span></a> </div> </div> <div id="bottom"></div> </div> and this for the css: Code: @charset "utf-8"; /* CSS Document */ body { overflow:hidden; padding:0; border:0; margin-left:50%; color: #000000; line-height: 100%; font-family: verdana; font-size: 12px; text-indent: 0cm; background-image: url('bg.png'); background-position: top center; background-attachment: fixed; background-repeat:repeat-x; } #bottom { position:absolute; height:100%; width:100%; background-image:url('lbg.png'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; margin-left:-340px; } #wrap { background-color: #FFFFFF; border-color: #660000; border-style: double; position:absolute; width:900px; height:750px; margin-left:-450px; } #nav { height:50px; } #home { display: block; width: 226px; height: 50px; background: url("home.gif") no-repeat 0 0; } #home:hover { background-position: 0 -50px; } #home span { display: none; }
The button shows up but only half the link works! And I have put in other bottons to the right of it and they don't work at all... can anyone help pls? thank you. Hello, this is my first time here so not really sure how to ask for help so i am just going to poste the html/css code here and say what i want to say and hope no rules will be broken This is the body of the html: <body> <div id="wrap"> <div id="logo"><img src="images/logo.jpg"/></div> <div id="header"> <ul> <li id="home"> <a href="#"><img src="images/home_button.jpg"></a></li> <li id="about"> <a href="#"><img src="images/about_button.jpg"></a></li> <li id="fun"> <a href="#"><img src="images/fun_button.jpg"></a></li> <li id="gallery"> <a href="#"><img src="images/gallery_button.jpg"></a></li> <input type="text" name="s" id="s" value="Start search" /> </li> <li id="search"><img src="images/search.png" alt="search" /> </ul> </div> <div id="main"> <div id="primary"> <div class="post_item"> <h2> My First Post</h2> <p class="meta"> 1/4/2020 Insp </p> <p> This is text This is text This is text This is text This is text </p> </div> </div> <div id="secondary"> <div class="secbox"> <h3>News</h3> <img class="featuredImage" src="images/left.png" alt="Left" /> <p> Left arrow </p> <div class="prevNext"> <a href="#"><img src="images/right.png" alt"More"/></a> <a href="#"><img src="images/left.png" alt"Less"/></a> </div> <div class="secbox"> <h3>Recent Stuff</h3> <ul> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> </ul> </div> </div> </div> </div> <div id="footer"></div> </div> </body> And this is the css: a:hover {text-decoration:underline;} input{background:#696969; border:1px solid #c3c3c3; color:#cbcbcb; paddind:3px;} input:focus, input:hover{background: #ededed; color: #4e4e4e; } /* MAIN STYLES */ body{background:red url(images/bg_main.jpg) repeat-x;} #wrap{width:1000px; margin:auto; } #header {background: url(images/bar.jpg); width:100%; height:50px; float:right; } /*Navigation*/ #header ul{overflow: hidden; padding-left: 30px;} #header ul li{float:left; padding-right: 15px; } #header ul li a{color:#cbcbcb; position:relative;} /*SEARCHBOX*/ #header ul li#search{float:right; padding-top:10px;} #header input{margin-left:230px; margin-top:15px;} /*MAIN CONTENT*/ #main #primary {float:left;width:600px;} #main #secondary{float:right; width:180px;} #main #primary .post-item{background:#ededed; margin-bottom: 28px; border:1px solid;} Now, basically what i am trying to do is set the width of the "#header" to 100% but it seems to be stuck at 1000px ...won't go over that. can someone please help Hello! I've been searching the internet for a solution to this for quite a while now but I've found nothing. I've also tried some methods to fix it but nothing seems to be helping me. I might just be stupid because I'm not terribly good at this. Here goes. Scenario: Firefox not reading list items as hyperlinks even though it's <ul><a><li>Hello World</li></a></ul>. where I use something like li{width:200px;height:100px;} firefox only interprets the text as a hyperlink, but not the list item field. This is the actual example: Markup: Code:
<UL id="menu">
<LI> Product
<UL>
<A href="index.php?m=product1"><LI>PRODUCT1</LI></a></LI>
</UL>
</LI>
</UL>
CSS: Code:
#menu UL LI UL A{
height: 100px;
width: 500px;
}
#menu UL LI UL LI:hover{
background: red;
}
This results in the background shifting to red when I hover over the list item, HOWEVER firefox does not interpret the list item as a hyperlink, even though it's inside <a></a> where Opera and Chrome both do. Any suggestions on how to solve this? I apologize for bad grammar. EDIT: To make the problem obvious I attach a picture. URL Hi All, Just in the middle of designing a website for my personal hobbies. I have used alot of CSS to create the layout of the page. The problem being it looks perfect in Firefox, Opera, Seamonkey etc etc BUT NOT IE!!! In IE it is all over the place, nothing is where it should be. I checked my CSS against w3 validator, and it came back with a few errors, so i decided to fix them... it then looked even worse... in ALL BROWSERS! So i decided to go back to how i had it originally. The site in question is my username. You can access the css stylesheet file by adding /test.css to the end of the domain name. Any information, or anyone else had problem like this? All the best for now, Mike Can anyone tell me why my TOP margin on the content div works fine in FF but isn't acknowledged in IE. (Other then IE being a terrible browser) css here Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
#nav{
position:absolute;
height:35px;
background-color:#666666;
width:405px;
left:60%;
top:65px;
}
#header{
height:100px;
background-color:#333333;
}
#content{
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:50px;
height:500px;
width:75%;
background-color:#CCCCCC
}
HTML Code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"></div> <div id="nav">Content for id "nav" Goes Here</div> <div id="content">Content for id "content" Goes Here</div> </body> </html> |
|||||||