|
CSS - Can Someone Please Help Me With Positioning Of My .gif In The Header And Links?
Can someone please help me with positioning of my .gif in the header and links?
It moves whenever I change a computer. Depending on the screen size, the image always moves to some weird obscure place. The site name is: papercranes.comlu.com Is there a substitute for absolute positioning? Similar Tutorialshello everyone, I'm quite new at the whole css and coding stuff and I've encountered a problem with my vbulletin forums. on my resolution(1024/768) everything looks as intended, no problems what so ever, but on widescreen monitors part of my header is moved to the left. it also happens if I zoom out from my browser. this is how it looks on my resolution: this is how it looks when you zoom out/widescreen monitor I've tried to provide the code here but it gives me couldn't find phrase aktespam something error so if you aren't bothered please check it in the page source here http://www.g-gaming.ge/forum Hi everyone, I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem. This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code. In the frist part of the css file this appears: body { font-family: Verdana, sans-serif, Arial; font-size: 80%; color: #232323; margin: 0px; padding: 0px; background: url(images/header.png) no-repeat top; } The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px. Then there's this part: #header { float: left; width: 960px; height: 156px; } Then towards the middle of the code there is this other part which also relates to the header: .top-header { float: left; width: 960px; height: 62px; padding-top: 60px; } .top-header a { color: #000000; text-decoration: none; } .top-header h1 { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; font-size: 26px; } .top-header p { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; } So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background. So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do Thanks Chas. Hello, thanks for taking the time to read my post. I'm having a problem getting my divs to layout where I want them to. Here is the worst example:here Obviously, the footer is not in the traditional location. This seems the most logical for the code, the footer is at the bottom of the main div. I thought it would get pushed down by all the other stuff in the main div... This works ok: this But if the content for that page is short, it's going to do this: here This only works for very short content, nesting it in with the menu: here I am able to position it horizontally depending on which div I nest it in. It seems to me that I should have the footer div at the end of the 'main' div so that it winds up at the bottom. thanks for your time, juglesh Hello everyone, I'm working on a word press design for my site and I'm having some problems with absolute positioning. The positioning is fine in and of itself but I've found that if the absolute positioned element is underneath a link, it voids out the link. The text for the link is there, just no link. I've tested this by removing the absolute positioned element and the links work fine after I do that. Any idea what's going on with this? This occurs in both Firefox and IE. I've validated the CSS as CSS 2.1. You can see what I'm talking about at my site randomdamage dot org (the forum wouldn't let me post the link) If you scroll to the bottom of the page you can see two links which are being affected, the comments link for the last post and the next page link. The absolute element is the red splatter graphic. Here's the relevant css: /*footer styles*/ #footer blockquote { background-image: url(images/splash.png); width: 850px; height: 100px; position: absolute; left: 5px; background-repeat: no-repeat; bottom: 63px; text-indent: -9999px; z-index:9;} #footer { clear:both; font-family: Georgia, "Times New Roman", Times, serif; padding-right: 20px; padding-left: 20px; padding-top: 20px; } #footer p { text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 10px; padding-bottom: 40px; } Any help would be greatly appreciated. Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
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. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo 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 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. 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. 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, 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, 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! Hi I have seen alot of sites having a top banner going across the page for example corkd.com When I try to create a table 100% width and put a bg color. It always shows the table one line below the top. How do I move it to way at the top? Or am I not doing it correctly? 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.... OK, my site looks good in every browser except IE. Here's the site: here Can someone tell me how to fix the CSS for IE? thanks I have a site I'm working on at APOD and it works fine in IE until I started putting together the template for the phpBB forums. I am using their template system, but combining it with my theme to make a phpBB template. In IE the header shows up in the correct position, but with a gap. I can't figure it out for the life of me. The link is APOD Forums I have attached the CSS that was developed by phpBB (based on subsilver theme --apod.txt) and then my css (style.txt). |
|||||||