talvi Posted January 8, 2012 Share Posted January 8, 2012 I have been using Positioning and Float to set up a banner. I want to have a fixed height banner (starting at the top of the page) and for this to have: an image located on the left; a background (generated from an img); and a single line of text aligned to the right of it and at the bottom. The html has a div with an id. This div contains the img and that has a class which floats it to the left. This div also contains the text, which is aligned to the right. The external CSS style sheet details the id, which repeats a background img to fill the browser window [repeat-x (doesn't seem to matter if I specify left/right/center)], and the class which floats the image [img.floatLeft], Main Problem: It works, but I can't figure out how to get the line of text, which is happily sitting on the right, to be at the bottom of the div. Isn't align deprecated? I'm confused. Secondary Issue; I read about the CSS background-position Property. I would like to fix the banner at the top of the page independent of scrolling, But I can't make it work with the repeated background image. I also noticed that the size of the image used for the repeat is changed when the div is fixed. I'm viewing it in FF 9.0.1. Thanks in advance.for any help / suggestions Link to comment Share on other sites More sharing options...
regicidedelferoz Posted January 9, 2012 Share Posted January 9, 2012 can you post your codes sir? Link to comment Share on other sites More sharing options...
talvi Posted January 9, 2012 Author Share Posted January 9, 2012 deleted Link to comment Share on other sites More sharing options...
talvi Posted January 9, 2012 Author Share Posted January 9, 2012 Hiya!There isn't a lot of code to post. I'm just trying to get a handle on it, so the the code is an everchanging scratch pad, but here's the bits that relate as they are at this moment:The CSS bit is:img.floatLeft { float: left; margin: 0px; }#bannerContainer { height: 100px;background: url(Lav-180x180.png) ;position:fixed;background-repeat:repeat-x;background-attachment:fixed;background-position:fixed, top, left; }the html is just:< div id="bannerContainer ">< img src= "p-173x173.png" class="floatLeft" width="100px" height="100px" hspace="0" border="0px" ></img>menuItem< /div>If I delete the CSS part about positioning {position:fixed; background-repeat: etc etc} then the banner shows "correctly" except for the word "menuItem" which I want at the bottom. (sorry but can't quick figure out the posting here) Link to comment Share on other sites More sharing options...
regicidedelferoz Posted January 9, 2012 Share Posted January 9, 2012 is this what you are looking for? <style>img.floatLeft {float: left;margin: 0px; }#bannerContainer {height: 100px;background: url(http://www.mpa-garching.mpg.de/galform/cr/CR_LCDM_dump40_1500_170000_12000_100_red.gif) ;width:100%;background-repeat:repeat-x;background-attachment:fixed;background-position:fixed, top, left;}.clear {clear:both;}</style>the html is just:<div id="bannerContainer"></div><div class="clear"></div>another text Link to comment Share on other sites More sharing options...
talvi Posted January 9, 2012 Author Share Posted January 9, 2012 Hiya RegicideThanks, but no. Adding the class you suggest to the external style sheet and the emty div, moves the text outside of the header div. I want to locate that text at the bottom of the banner div, and I would also like the banner to be fixed. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 9, 2012 Share Posted January 9, 2012 img.floatLeft {float: left;margin: 0px;width:100px;height:100px;border:none;}#bannerContainer {height: 100px;position:fixed;top:0;right:0;left:0;bottom:0;background: url(Lav-180x180.png);background-repeat:repeat-x;background-attachment:fixed;background-position:left top;}#banner_text {position:absolute; left:110px; right:10px; bottom:0; text-align:right; } <div id="bannerContainer"><img src= "p-173x173.png" class="floatLeft"><div id="banner_text">Single line of text</div></div> Link to comment Share on other sites More sharing options...
talvi Posted January 10, 2012 Author Share Posted January 10, 2012 Yaaay dsonesuk ! Thank YOU!!! I am truly ecstatic ))) You have no idea. You've made a silk purses from a sow's ears and to me it is a thing of BEAUTY! Soooo simple (when you know how!) ... ...except, would you explain two things .. ?1. If I leave out the top,bottom,left,right variables in #bannerContainer then the banner is located further down the page (I get that) but it also shrinks to the width of the picture (which is the bit I don't get). I cannot predict/understand why putting values other than 0 gets the results it does.2. This is a tiny thing but you removed the closing tag of the img statement ... (I am just unsure what habits to cultivate now. Same with the < p> tag ?) Thank you again (..and thanks to the forum designers' for their considerations in saving this post so it wasn't deleted when the forum logged me out for some reason. Wish others would follow your lead.) Link to comment Share on other sites More sharing options...
dsonesuk Posted January 10, 2012 Share Posted January 10, 2012 1) As position: fixed; acts like floated element in that it shrinks to it content, using left, right, top bottom properties with value 0, tells it that its edges should be to left, right, top bottom of its parent container in this case the body. Actually you could lose the bottom:0; because you have set the height, you could also set width to 100%; and lose right:0; the least you should always have is top and left, if you remove left while using width:100%; and had not removed margins from the body element, you would find the container with contents move to the right by approx 10px, causing the right text to butt up to the right edge. 2) Some elements self close: HTML <br>, <hr>, and <img> - XHTML <br />, <hr />, <img />, while others use closing tag <p></p>, <div></div>, <h1></h1> as you can see img element is a self closer. Link to comment Share on other sites More sharing options...
talvi Posted January 10, 2012 Author Share Posted January 10, 2012 You're a star dsonesuk! Really thanks! Link to comment Share on other sites More sharing options...
talvi Posted January 12, 2012 Author Share Posted January 12, 2012 err.....maybe this should be another thread but, well all has gone well, in Firefox it all does as I think it should, but in IE ... arrrgghhhh! Two problems:1. The inline "menu" on the top and on the right of the window, slips inboard 2. The content of the page drops about 150px down from the fixed bannerIn my travels I came across something on problem 2. I think but now can't find it.The offensive pages can be seen here: http://phoenixchange.com/sandbox/newIndex000.phpAny ideas anyone? Thanks again. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 12, 2012 Share Posted January 12, 2012 the <!--******************* INDEX PAGE **********************--> at the top of the page is making IE revert back to Quirkes mode. Link to comment Share on other sites More sharing options...
talvi Posted January 12, 2012 Author Share Posted January 12, 2012 Hiya, thanks. Is there a way of doing this or am I attempting something that's not possible in IE? Getting rid of the comment or inserting an empty div at the top does even weirder things it seems, though my brain has turned to mush. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 12, 2012 Share Posted January 12, 2012 You need to validate your page, your banner image is not closed correctly, trying to correct code which is not valid, usually means you will find yourself going round in circles for no reason just because of improperly closed element. Link to comment Share on other sites More sharing options...
talvi Posted January 12, 2012 Author Share Posted January 12, 2012 Ok thanks, will do that now.... Link to comment Share on other sites More sharing options...
talvi Posted January 12, 2012 Author Share Posted January 12, 2012 ... it's valid now but still the same problems in IE.  Any ideas?This is a version without the php requires http://phoenixchange.com/sandbox/newIndex06.php It's validated ok.In FF this also works fine but in IE it's even worse than the php requires version, though why that should be I can't fathom as they're basically identical. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 12, 2012 Share Posted January 12, 2012 Validate css I still find errors there, change margin-top: 150px; to padding-top:150px; then IE should look almost the same. If you can get add-ons for firefox 'Web Developer' and firebug. Web developer: shows three icons in right corner for document mode (quirkes mode, standards compliant mode), css errors, and javascript errors, it will show red/white cross to identify any errors found, green tick if no errors found. you can then use firebug to investigate further There are many more features in both of these which you can use when creating your sit. Link to comment Share on other sites More sharing options...
talvi Posted January 12, 2012 Author Share Posted January 12, 2012 Sorry! CSS and HTML now both validated, but it's made no difference. I changed that margin to padding but that made no difference either The banner isn't fixed in IE, but that isn't important. It's the giant white space and the misaligned menu that's the issue. So it's "just" the way IE is interpreting the markup. Problem is that most people who'll look at the page will be looking at it on IE :(Any more ideas on how to get IE to play ball? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2012 Share Posted January 13, 2012 I still see errors background-position:fixed, top, left;font-family: Arial; helvetica, sans-serif;text-align : inline; I have corrected the code using your source, tested it in ie7 to ie10 in IE Tester, and it looks the same as in FF, although the IE9 version does not show the js generated content, that may be down to a error showing that relates to js code in the status bar in IE8/IE7 compatible versions I do have. Link to comment Share on other sites More sharing options...
talvi Posted January 13, 2012 Author Share Posted January 13, 2012 Yeah, those are the errors it threw up for me but I corrected them before I posted.  Just viewed the files on the server to double/triple check.  Msybe it was a cache issue.  To really nail it I tested the page in Litmus and took a screenshot of the result.As this has become (I think) a compatibility issue its off topic, so I'm going to post with pictures in a new thread in case it's helpful to anyone else here. Thanks for being there dsonesuk.  I really appreciate it. Link to comment Share on other sites More sharing options...
talvi Posted January 14, 2012 Author Share Posted January 14, 2012 I'm lost again! I want to get the page (http://phoenixchange...newIndex000.php) to display "more or less right" on a handheld. It's all fine except for the banner header. I used two different stylesheets but my Nokia doesn't recognize the "handheld" media type so for testing I've used the same code for both stylesheets. I got rid of the fixed banner and stripped it down. (it validates). The last thing I did was change the #banner_text postion to Relative. That moved things forward a bit but now.: 1. ScreenThe menu text is now at the top of the white space instead of sitting on top of the grey bar. As the page scrolls on my PC screen there remains a white background behind the menu text that moves down over the banner. . 2. HandheldOn my Nokia, the grey banner displays the full width now, but the two menu items are on top of each other. Help? If I can get these problems sorted I intend to reinstate the fixed banner as that "functionality" appears to get stripped out on the handheld anyway.. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 14, 2012 Share Posted January 14, 2012 I think you will find position: fixed in handheld devices is mostly treated as position: absolute; so you may have to forgo that styling for handhelds completely. Link to comment Share on other sites More sharing options...
talvi Posted January 14, 2012 Author Share Posted January 14, 2012 Hiya Losing the fixed banner on handhelds isn't a problem. I deleted that (and some other things) but couldn't get rid of those two problems. What am I misunderstanding here? Why are the menu items jumbled up on the handheld, and why is there that white space (and the menu at the top of the screen) on the pc? p.s. I had got rid of the div that enclosed the menu text and managed it's positioning. Adding it back in for the handheld results in the menu text moving down ontop of the grey band but the two words are still jumbled. On the pc putting it back in had no effect. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 14, 2012 Share Posted January 14, 2012 Can't tell, don't have your mobile, don't know what is and isn't allowed for mobile, you need mobile emulator, try opera mobile so you can test in different mobile type/brands. Link to comment Share on other sites More sharing options...
talvi Posted January 14, 2012 Author Share Posted January 14, 2012 Understood, but what of the display on pc browsers? How can I get rid of the white background associated with the menu text and make it scroll together with the images? I think this points the way but I do not understand enough to decipher what's happening (on the pc not the handheld) update:...ok, again not understood, properly, Getting rid of the "background fixed" in #bannerContainer sorted out the white space on the pc, while leaving the "relative" in the class for the menu text aligned that properly. A series of "&nb sp" without spaces between them forced the menu text to display on one line. Shame about the fixed banner. Maybe it's just a problem with Opera mini, but as you say, best to accept it's not practicable. Thanks again for all your help Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.