Background problems

Discussion in 'HTML & Website Design' started by New Age, Feb 13, 2015.

  1. #1
    Hi,


    Perhaps is a small introduction for a newbie on this forum (like me) a good idea:
    I'm a Beglian chemical engineering student and I'm building my first website:
    http://www.corazza.be
    ... but unfortunately I've stumbled upon a BIG problem.

    Like you can see, I use a picture as a background: a paper "glued" to a a wall.
    I would like that the main text appears on this paper.

    But here is the problem: I'm bounded to the length of this paper. I can't write longer texts than the length of the paper.
    Here you can see the problem:
    http://www.corazza.be/Slalom.html
    The bottom part of the text falls out of (actually below) the paper.

    Do you have ideas about how I can solve this WITHOUT losing the background picture?

    I did not think about this during the designing phase, so now I'm really stuck with this problem.
    By the way: you will notice that the website is not finished yet.
     
    New Age, Feb 13, 2015 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi.
    How about separating that transparent paper from main background, and then split it into 3 parts: top, middle and bottom ? Those 3 will then be glued instead to new 3 subblocks inside your article.col1. Note that only the middle repeats.

    Other idea would be to use CSS3 multiple background perhaps, but I have no experience with that before. Ref: http://www.css3.info/preview/multiple-backgrounds/
     
    hdewantara, Feb 13, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Have you ever noticed how you do NOT see a lot of websites doing what you are asking about, and how most that do are broken rubbish? Yeah, there's a reason for that.

    What you are asking to try and do and the very method you are going about trying to build a website is broken nonsensical gibberish. On top of the massive images that make the page painful to watch load, you're trying to use fixed sized elements, and as you just discovered that WILL bite you in the backside. There's a reason REAL websites don't do that. It's slightly related to why "off the shelf templates" are scam artist garbage, as you end up being forced to design your content to the template instead of having the template adjust to the content. That's why art faygelah bs like fixed size backgrounds have ZERO business on websites -- EVER!

    Of course, the illegible colour contrasts, fixed metric fonts, and host of other accessibility failings are why I'd pitch that in the trash and start over. There is little if anything I'd be trying to retain from that.

    As I often tell people, start out with your content or a reasonable facsimile of future content in a flat text editor, organized in a logical manner as if HTML never even existed. You then mark it up semantically (using HTML to say what things are, so no DIV or SPAN at this point) so that search engines, screen readers and other 'non-screen media' targets have something to work with. Then and only then do you add DIV and SPAN if needed using CSS to create your layoutS -- yes, PLURAL since different screen sizes and font metrics will need to adjust the layout to fit. Only once all that is in place do you have any business screwing around in some goofy paint program like photoshop to make graphics to hang on the layout... and then enhance the page with scripting if needed/desired, keeping in mind that if you can't make the page work without javascript FIRST, you likely have no business adding scripting to it.

    Peeking under the hood, that's not what you have. It looks like you used some rubbish WYSIWYG to sleaze together (no offense) the page... that or you failed to grasp how to use things like numbered headings properly and when NOT to use DIV -- much less the HTML 5tard code bloat for nothing. I really wonder how other than ignorance anyone can be duped into thinking HTML 5 serves a legitimate purpose!

    For example, I'm pretty sure that "Recent News" is NOT a subsection of "Latest Works" and that "why Me" is not a subection of "Recent News" -- but that's what those levels of headings MEAN. H5 means the start of a subsection of the H4 before it, H4 means the start of a subsection of the H3 before it... that's what "structural import" means, as opposed to "importance" which is what people seem to misunderstand it as -- it sure as shine-ola doesn't mean "larger text of a certain size". Likewise HR indicate a change in topic/section where a heading is unwanted/unwarranted -- Which is why a page should only have one H1 (the heading under which ALL content of the page is a subsection), it's why skipping over heading levels is gibberish, and it's why most of your headings on your page should structurally ALL be H2. It's also why HTML 5's idiotic SECTION, NAV, HEADER, FOOTER and ARTICLE are pointless redundant code bloat BS... NOT A FAN!

    You aren't even using FIGURE properly, since those do not appear to be mathematical or scientific figures (NOT that there is a legitimate reason on 99%+ of websites for that tag to exist either!)

    This ALONE: media="all"

    Means you are doing it all wrong, since I'm SO sure your screen layout is meaningful for print, or aural...

    The red on black and sections of black on gray is effectively invisible, the textured pattern makes text hard to read, the fixed metric fonts and fixed width layout are accessibility rubbish...

    As I often tell people, pitch it in the trash and start over -- with semantic markup, separation of presentation from content, logical document order, and an elastic semi-fluid responsive layout... and do yourself a huge favor and back the **** away from whatever paint program you are using (photoshop? GIMP?) as you are saddling yourself with artsy-fartsy bull that has NO business on websites in the first place.

    Oh and Cufon? REALLY? What is this, 2001?
     
    deathshadow, Feb 14, 2015 IP