Hey'all,

I'm trying to reskin an invisionfree forum page to look as Star Trek-y as possible for a friend's game. For that, I set myself up a 'sandbox' or 'playground' page to test the skin on.

z15.invisionfree.com/SilkesP...ndex.php

As of right now, the background image is one big (paige filling) one, best viewed in a resolution of 1280 by X, else the right hand margin will be messed up and come up underneath the actual forum.

I WOULD like to enter 2 background images into the code, one left aligned (currently seen in the left hand margin), one right aligned (I would split the background image in two jpg files for that of course). I cannot, for the life of me, figure out how to get the program to understand TWO background files and not go with only one of them, ever :P

Help please?
posted by:
Silke
offline Silke
Detroit
0 friends
join to post
  • Will
    Will
    offline 0

    Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

    Mon, February 25, 2008 - 6:03 PM
    I don't know how much help I can be - hope I don't muddy the water - and I can't stick with this very long but ...

    1) - Am I seeing the background images correctly? They look like navigational items? Will you want visitors to be able to click on parts of the BG images? If so you may want to take a different tac.

    2) - This can come much later, after you work out this page, but I would move all the css into an external style sheet.

    3) - As mentioned, Firefox can help you edit your html. Even doing something as simple as - opening you page in Firefox, right click and choose "view page source". You will see areas of concern in red.

    4) - Further troubleshooting: You can use this validator to look for problems: validator.w3.org/

    5) - Xhtml tags and descriptions - a resource: www.w3schools.com/tags/default.asp

    6) - Learn Xhtml: www.w3schools.com/xhtml/default.asp

    I put off learning Xhtml for a long time (not that I know it now); It just seemed like a huge undertaking. Well, once I made up my mind to buckle down and get thru it - it really wasn't that bad.
    I kept putting off #6 above; always convincing myself to place it at the end of my list - as I have above; always looking for short cuts.

    The best advice I can offer you is to reverse the order above; stop what you are doing and go to #6.
    Use the W 3 Schools tutorial (I think its a pretty good one) and teach yourself Xhtml.
    Short cut after shortcut can lead you in circles.
    Some times not taking the short cut gets you there faster.

    But, I understand (since I was there myself for a long time) that you may feel it is more expedient to keep putting off actually learning how to do it yourself.
    join to post
    • Silke
      Silke
      offline 0

      Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

      Mon, February 25, 2008 - 7:18 PM
      yes, you are seeing the background image correctly but no, they are not supposed to actually link to navigational destinations. I don't think there is any way of doing that to a background image.

      Right now, I'd be happy to get it set in a way that I have the left hand side of the background image left aligned and the right hand side part of the background image right aligned, no matter WHAT the resolution and size of anyone's screen.

      Also .. moving the CSS into an external style sheet is not possible unless I want to host the site somewhere else but invisionfree (which is a free hosting site and works well for our purposes). As it stands right now, I'm stuck with the set up that invisionfree offers me.

      I am using www.w3schools.com as my help source :) And now, I also have firebug set up which is TREMENDOUSLY helpful! :)

      But .. I STILL can't get the 2 background images set up .. I'm trying with a table though .. we'll see how it goes;)
      join to post
  • furt...
    furtographer
    offline 197

    Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

    Mon, February 25, 2008 - 10:00 PM
    The answer for left-aligned and right-aligned backgrounds on the same page:
    Apply each BG image to different layers; apply one to the parent and one to the child:
    - left aligned BG on the div
    - right-aligned BG on the P

    OR some such configuration. I'm currently developing a site where we make rounded-corner boxes using a single huge BG image. We apply it over and over to different elements in order to create the 4 corners that make a random-sized box. YOu just need to nest it 4 layers deep so you have enough elements to give 4 B-Grounds.
    join to post

    • Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

      Tue, February 26, 2008 - 3:03 AM
      <<Apply each BG image to different layers; apply one to the parent and one to the child:
      - left aligned BG on the div
      - right-aligned BG on the P >>

      This would work, but you are suggesting, and relying on, a haphazard collection of elements for the page layout (Ps, and DIVs). Sooner or later, that's gonna bite you in the but. KIS - keep it simple (or, after repeated violations of the rule, KISS - keep it simple, stupid). A table is the way to go to lay out the elements on the page. You could do the same with just DIVs, but the CSS style elements to get DIVs to layout out just as a table are just not KIS (a bunch of hackers must have written that part of the CSS spec; it's a disaster).
      join to post
      • Silke
        Silke
        offline 0

        Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

        Tue, February 26, 2008 - 7:18 AM
        ok .. I'll try the table set up .. cause I honest to god can't get the parent/child/div thing right.

        btw .. whoever pointed me towards firebug .. thank you so much. That program is amazing and helpful beyond belief. It's actually making it easy for me to follow the site layout and understand more about the coding behind it. So .. it's a very handy self-teaching tool once you want to delve deeper into the hows and the whys of coding :)

        Once I get the table code written (and .. hopefully not ridiculously wrong) .. I'll post it here so you guys can look it over and laugh at my rookie mistakes ;)
        join to post
      • furt...
        furtographer
        offline 197

        Modern Web

        Tue, February 26, 2008 - 11:06 AM
        <<A table is the way to go to lay out the elements on the page>>

        [rant]
        Oh, I'm sorry. This isn't a pro-CSS discussion. Yeah, just use tables to layout your page like 1997. It's easy, and you don't have to live up to any requirements about accessibility or logical structure. Skip divs and only use CSS when you need to make a link not underline. CSS isn't for pussies.
        [/rant]

        It's all do-able, and it works in all the funky browsers. It just takes a little research and some adjustments one-pixel-at-a-time. Even with IE 6 and 7, the web is long overdue for CSS positioning. But sometimes if you want a special effect, you'll have to add an extra nested div. But that extra div will still be re-style-able later. What kind of page are you making that doesn't have both a body and an inner element like a H1 or a P? What kind of boxes are you making that can't afford two nested divs for ultimate stylability? We always wrap the entire page in one or two "container" divs these days just so the page can be centered in IE 5 and 6. That's not going to bite you in the ass later like building the whole page with tables.

        Table-free layouts just take some patience to learn, especially if you started HTML in 1997. Back then even the FONT tag seemed legit, and not a designer hack developed by a particular browser. We know differently now.
        join to post

        • Re: Modern Web

          Tue, February 26, 2008 - 11:13 AM
          > We know differently now.

          What Do You Mean "We" Kemosabe? ;-)

          Seriously ... "patience to learn" is right.
          join to post
      • Pixe...
        PixelSlut // C.ontrast M.akes Y.ou K.ill
        offline 91

        Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

        Tue, February 26, 2008 - 4:13 PM
        "This would work, but you are suggesting, and relying on, a haphazard collection of elements for the page layout (Ps, and DIVs). Sooner or later, that's gonna bite you in the but. KIS - keep it simple (or, after repeated violations of the rule, KISS - keep it simple, stupid). A table is the way to go to lay out the elements on the page. You could do the same with just DIVs, but the CSS style elements to get DIVs to layout out just as a table are just not KIS (a bunch of hackers must have written that part of the CSS spec; it's a disaster)."

        KISS does not validate the usage of tables for layout.
        join to post

        • Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

          Tue, February 26, 2008 - 5:11 PM
          > KISS does not validate the usage of tables for layout.

          So? It is is simple, how much validation do you need? Let's be practical.
          join to post
          • Pixe...
            PixelSlut // C.ontrast M.akes Y.ou K.ill
            offline 91

            Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

            Tue, February 26, 2008 - 5:45 PM
            >So? It is is simple, how much validation do you need? Let's be practical.

            Alot more than that. If my criteria for choosing an implemntation method was based primarily on simplicity i shudder to think what the codebase i had to maintain would look like. Now in this particular case thats irrelevant because its a gift and doesnt need to be maintained. And thats all well and good. But if this were a sight... even a simple one, using a table based layout is hard to maintain, takes longer to parse, can potentially decrease search engine ranking and a number of other things. The up front investment pays off in time, money and headaches saved down the road. Not to mention that once you learn what youre doing the investment is spread out across the many projects you learn what a "peak-a-boo" bug is once, how to fix it, and what causes it and you know th next time. On a deeper level if you actually understand the how and why of what you do and what makes it work then you avoid a great many of the "bugs" and cross-browser issues altogether in the first place.
            join to post
  • Paul
    Paul
    offline 10

    Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

    Tue, February 26, 2008 - 8:21 AM
    why not just get two divs with two different background images and absolutely position them?

    am I talkin nonsense here?

    so ..

    div.Left
    {
    position:aboslute;
    background: url(imgLeft.gif) no-repeat top left;
    width: XXXpx;
    top: 0px;
    left: 0px;
    }

    div.Right
    {
    position:aboslute;
    background: url(imgRight.gif) no-repeat top left;
    width: YYYpx;
    top: 0px;
    left: XXXpx;
    }


    OR

    you just create the two divs as above and rather than absolutely position them, just float them to the left

    you don't need to use tables for this.
    join to post

    • Re: CSS coding - 2 background images (one left aligned, one right aligned) .. is that possible?

      Tue, February 26, 2008 - 11:08 AM
      Because for someone just starting out in HTML/CSS, its a heck of alot easier. If you have been hacking it for long enough sure, your approach will get you there.
      join to post
      • furt...
        furtographer
        offline 197

        kindergarden

        Tue, February 26, 2008 - 1:45 PM
        Or you could just layout an imagemap of 800x3000 pixels. EASY! You never have to worry about text wrapping poorly or ugly browser fonts. You don't have to test on browsers at all. Just create a layout with text in Photoshop then slice it up in Dreamweaver with image maps. Who needs to search or resize text anyway? www.loadoffun.net/EventCalendar.html

        Or forget HTML altogether and learn only Flash. It has an accessibility rating of 0.5, but it pays bucks as a developer and you can make all the text dance across the screen and cross-fade.
        join to post
        • Silke
          Silke
          offline 0

          Re: kindergarden

          Tue, February 26, 2008 - 2:14 PM
          First of all - I'm not doing this to make any money and I'm entirely self-taught (or . .seeing how that might express too much knowledge already, self-teaching really). I want to understand what I'm doing which is why I'm using firebug and w3schools.com to wade my way through something most people wouldn't even bother with. Right now though, I only want it to work. I want to present this page to a friend, sort of as a gift. They have wanted to participate in an invisionfree based game with Star Trek theme for a while now and most Star Trek games out there on invisionfree are butt-ugly. So .. gift, people. *shrugs* And for that, I won't go to college and become an expert programmer nor will I spend a year learning codes. I WILL use resource sites and I WILL ask people who know more than I do when I'm stumped with an issue. Which is .. what I thought this place was for. Asking those who knew better and were willing to share. I am NOT asking anyone to make me the whole page because that is what I would actually pay someone for if I needed such an effort. All I'm doing is asking for one blip of coding and I don't much appreciate the tone of voice this topic is deteriorating to.

          I'm the type of person most 'normal' people out there wouldn't even expect to bother with trying to learn more than 'where do I turn this thing on?' and 'how do I write email with it again?' So please .. stop tossing around stuff like rants or accusation of operating on kindergarten level and either do something helpful like offer up real help or get off my case.

          Anyhoo .. to the person who suggested tables - I did just that and it seems to be working. So .. thank you for the constructive help there, and I'm sure there are more than enough sleeker ways of doing this but .. for now, it'll do :)
          join to post

          • Re: kindergarden

            Tue, February 26, 2008 - 5:18 PM
            > to the person who suggested tables - I did just that and it seems to be working. So .. thank you

            That was me. You are welcome. And don't worry, I think I'm the one that is the target of the raves.

            And big, big kudos to you for digging in and trying. Really. Keep that up long enough, and you can be one of the ones ranting at ones like me for not being sophisticated enough. ;-)

            To the rest of you, I'm giving you all the benefit of the doubt that you didn't read or catch the point that we have a beginner here who may be overwhelmed by the technology, and just wants a fast path to the end of a small project they are doing for a friend. *That's* why I suggested tables. For a living I do industrial strength webapps, in which we do DIVs. So there.
            join to post

Recent topics in "- webdesign -"

Topic Author Replies Last Post
Need help with web site on horse / dog behavior, and photography Sol 2 April 21, 2008
100% Height??!! Why don't it work Paul 6 March 13, 2008
Critique my site jazzlamb 9 February 25, 2008
Recommend a CSS Tutorial Site? cowboyangel 3 December 21, 2007
full time job for a creative Web Designer offlineSunChaser 2 December 14, 2007