CSS - Header Won't Cooperate Right -- Help!
I need help with a div header issue. I have a background image in the main header (#header) that has a link associated with it.
I'm trying to place a smaller div tag (#ping_header) that floats in the bottom-right (over the #header ) which is pointing to another link. When I place the second div, it's inheriting the a href properties for the #header. How do I get the #ping_header to NOT assume the #header properties and assume it's own properties? It's driving me crazy! Anyone know what I'm talking about? Regards, Corrie Similar TutorialsAll I want to do is to fit an <INPUT TYPE="FILE" NAME="FILE"> box and a <INPUT TYPE="SUBMIT" VALUE="Send"> in a box that is 25px high and 100% wide, why on gods green earth does it resize everything I try to put it in to like 45-50px in height? please help, I'm going insane. Here's what I've tried: Code: <DIV STYLE="height: 25px; width: 100%; background-color:#6a0000;"> <FORM ACTION="upld.asp" METHOD="POST" ENCTYPE="multipart/form-data"><INPUT TYPE="FILE" NAME="FILE"><INPUT TYPE="SUBMIT" VALUE="Send"></FORM> </DIV> Code: <TABLE HEIGHT="25" WIDTH="100%" BGCOLOR="#6a0000"> <TR> <TD><FORM ACTION="avaupld.asp" METHOD="POST" ENCTYPE="multipart/form-data"><INPUT TYPE="FILE" NAME="FILE"><INPUT TYPE="SUBMIT" VALUE="Send"></FORM> </TD> </TABLE> Code: input { color: #CACACA; background-color: #161616; border :0px solid #464646; vertical-align: middle; font-size : 7pt} Hi! I've a problem that I've been trying to solve for a couple of hours now... on my test-site testsite You can se my horisontal menu not turning up alright, The four images (house, ball, discussion and about) won't be in line with eachother... When I select the text and images in Firefox, I can easily see that there is something wrong... Can somebody please give me a push in the right direction? BR 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. How do i stop the <h1> add white space above and below anything in the header tag. 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. Post resolved -- css controlled by unmentioned files. (apologies for duplicate post, was sure that was "edit" but must not have been) 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. 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 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 ? 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! 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 have a Header, and inside that header I want to have a Black empty I guess you would say mini Header that will be at the top of my main Header. How would one glue the mini Header to the top of the Main Header? Would one use Position: Relevant, Margin ? ?, top: ? Left: ?....? Thank you I'm new to CSS .. got the basics, but having a problem using 3 images in a header for a site ..... [---img_1 ------img_2 -----img_3----] I want img_2 to allways be centered. in the page, and img_1 and img_3 on the sides... so far I have that working .. now the problem .... I want img_1 & img_3 to scale depending on size of browser ... so that the header fills 100% of the width ..... html <div id="siteHead" align="center"> <div id="leftbar"></div> <div id="midbar"></div> <div id="rightbar"></div> </div> css #siteHead { width:100%; } #leftbar { float:left; width:100%; height:248px; background-image: url(imgs/1_01.jpg); background-repeat: repeat-x; text-align:right; } #midbar { float:left; width:778px; height:248px; background-image: url(imgs/1_02.jpg); background-repeat: no-repeat; text-align:center; } #rightbar { float:left; width:100%; height:248px; background-image: url(imgs/1_03.jpg); background-repeat: repeat-x; text-align:right; } so what am I missing ... or whats my n00b mistake ... I hope I made sense ... english is poor playing with width %'s if browser is so small the 3 images stack on each other .. I would like to prevent that from happening ... but one n00b issuse at a time.... 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) Hey everyone. I've been working on a redesign of a website I run. Up until now, I hardly used CSS for anything at all. My new redesign is using XHTML-Strict and CSS. I'm having some big problems working out the layout of the header. The new website layout is located at: hxxp://Schiz0.securityexploits.com/~Schiz0/skittles_beta/home.php (If you get some php errors, just refresh the page. It's a work in progress). Basically, this is what I WANT it to look like: hxxp://img140.imageshack.us/img140/8765/headerit2.png I want the entire header is aligned on FOUR rows: Left News, Banner, Right News Username, Date, Donations bar AP/Rank, Search Boxes, Donate link Navigation Links The problem I'm having is...the objects aren't aligned properly in rows, and it's kinda throwing off the whole layout of the header. You can see in the following screenshot what I mean. The Donations bar isn't aligned with the date and username row. hxxp://img139.imageshack.us/img139/5341/sitescreenshotuj3.png I tried using both div's and span's. I also played around with the css for quite a while, and still can't get it. The CSS for that website is located at: hxxp://schiz0.securityexploits.com/~Schiz0/skittles_beta/stylesheets/Schiz0.css If anyone can help me out, I would greatly appreciate it. I'm so close to just using html tables instead of these div's and span's Note: Sorry for the "hxxp" links...Apparently new user accounts, such as mine, aren't allowed to post links. Hello, I am trying to create a header with a background color and a padding of the text. I know that if I apply the background color to the header it will expand 100%. So I did the following: <h1><span>Header</span></h1> h1 {} h1 span { background-color: #252525; color: #D2D2D2; font: normal 1.2em/1.8 Verdana, Geneva, sans-serif; letter-spacing: 0.1em; padding: 0.8em; } But now I am not able to apply the top and bottom padding. How should I create this header? Thanks, Miguel I'm trying to put together a CSS layout for a blog, and unfortunately my meager skills have crapped out on me. The page currently looks like this: http://prestonandtread.com/test/ I want it to be a full screen header while the footer is fixed and the width of the content. I thought I had it pieced together ok enough from different tutorials, but the top and left sides of the screen show background and the content isn't parking itself on the page correctly. Help me get this to where it should be! Code: <style type="text/css"> html, body { margin:0; padding:0; height:100%; /* 100 % height */ } #header { width: 100%; height: 150px; } html>body #header { position:fixed; z-index:10; /* Prevent certain problems with form controls */ } html>body #wrap {height:100%;} /* 100 % height */ #wrap { width:479px; margin:0 auto; } html>body #content-wrap {height:100%;} /* 100 % height */ html>body #content {padding:10px 10px 10px 10px;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */ #footer { width:479px; height:160px; } html>body #footer { position:fixed; bottom:0; z-index:10; } html, body { background-color: #99CCFF; } #header { text-align: center; background-image: url(background.jpg); background-position: top left; background-repeat: repeat-x; background-color: #99CCFF; } #footer { text-align: center; background-image: url(eyes.jpg); background-color: #99CCFF; } #content-wrap, #content { background-color: #FFFFFF; } #footer a {color:#111;} </style> My website works perfectly on IE, but not in IE. The page loads fine in Firefox, but after a few seconds, the page jumps and the header cuts in half and almost hides behind my toolbar. |