Jump to content
talvi

Aligning Text In A Repeating Background With A Floating Image.

Recommended Posts

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

Edited by talvi

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
 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>

  • Like 1

Share this post


Link to post
Share on other sites

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.)

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

... 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.

Edited by talvi

Share this post


Link to post
Share on other sites

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.

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Edited by talvi

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Edited by talvi

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...