As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

HTML's making me cry

pogo mudderpogo mudder Registered User regular
edited May 2009 in Help / Advice Forum
hey, i'm scripting a website on HTML atm and i've got my background all set out to layer the text on top, but unfortunately the background image has tiled so it looks a bit weird when you scroll down/maximise. I've checked the net and i can't find much of an answer on this. Does anyone know of the exact command to stop the background tiling, and exactly where to place it in the script?
thanks

what a work of art is man, and the most boring choice you can make
pogo mudder on

Posts

  • rfaliasrfalias Registered User regular
    edited May 2009
    It's not a standard function of HTML.
    Either use CSS or make a massive image/tileable image

    rfalias on
  • EchoEcho ski-bap ba-dapModerator mod
    edited May 2009
  • wasted pixelswasted pixels Registered User regular
    edited May 2009
    Before your </head> tag:

    <style type="text/css">
    body {
    background-image: url(/path/to/image.jpg); // loads the image
    background-repeat: no-repeat; // tells it not to repeat itself
    background-position: top left; // puts the image in the top-left corner (adjust to fit your needs)
    }
    </style>

    wasted pixels on
  • pogo mudderpogo mudder Registered User regular
    edited May 2009
    cheers guys,
    wasted pixels, i looked at the css functions but was a bit apprehensive of using them. If i put in that script will i have to follow suit with scripting in css for the rest of the page?

    pogo mudder on
    what a work of art is man, and the most boring choice you can make
  • SporkAndrewSporkAndrew Registered User, ClubPA regular
    edited May 2009
    Before your </head> tag:

    <style type="text/css">
    background-image: url(/path/to/image.jpg); // loads the image
    background-repeat: no-repeat; // tells it not to repeat itself
    background-position: top left; // puts the image in the top-left corner (adjust to fit your needs
    </style>

    Or, you know, save some space:
    body {
           background: #fff url('../images/lolwut.gif') no-repeat top left; 
    }
    

    edit: Pogo - what the hell are you even doing trying to code HTML without using CSS?

    Get yourself to w3schools and bone up. The internet doesn't need any more web pages with their style entirely hard-coded in.

    SporkAndrew on
    The one about the fucking space hairdresser and the cowboy. He's got a tinfoil pal and a pedal bin
  • pogo mudderpogo mudder Registered User regular
    edited May 2009
    Heh believe me i'd rather be doing anything else, it's an assignment for my course, apparently we have to learn how to do it old school to appreciate how things are done in the real world. We basically have to use HTML but we're allowed a tiny bit of leeway with using css if we're stuck on something.


    but yeah i've been slowly making my way through w3schools but having a bit of trouble.

    pogo mudder on
    what a work of art is man, and the most boring choice you can make
  • MagicPrimeMagicPrime FiresideWizard Registered User regular
    edited May 2009
    Are you allowed to have a separate .css or do you have to do all the style sheet coding inside the page?

    MagicPrime on
    BNet • magicprime#1430 | PSN/Steam • MagicPrime | Origin • FireSideWizard
    Critical Failures - Havenhold CampaignAugust St. Cloud (Human Ranger)
  • pogo mudderpogo mudder Registered User regular
    edited May 2009
    all has to be done inside the page

    pogo mudder on
    what a work of art is man, and the most boring choice you can make
  • MagicPrimeMagicPrime FiresideWizard Registered User regular
    edited May 2009
    If that's the case then do it all at the top of the page if they'll let you. Having to hand code the style in each tag you want to look the same is a pain in the ass.

    If your prof. is making you type all the style information for each tag to prove a point, then I would personally kick him in the balls. From a simplicity standpoint I can understand making you guys keep the CSS information inside the HTML page, but having to hand-type the style information per tag is stupid.

    MagicPrime on
    BNet • magicprime#1430 | PSN/Steam • MagicPrime | Origin • FireSideWizard
    Critical Failures - Havenhold CampaignAugust St. Cloud (Human Ranger)
  • pogo mudderpogo mudder Registered User regular
    edited May 2009
    aye totally :/

    well getting that css background tag to work in my current script ain't working so well atm so i might come back to it later, if i get desperate i'll just make sure i don't maximise the page when i show it too him >.>
    thanks for the help anyway guys, you'll prolly hear from me on here again over the next 2 weeks with more html problems for you to help with

    pogo mudder on
    what a work of art is man, and the most boring choice you can make
  • WillethWilleth Registered User regular
    edited May 2009
    aye totally :/

    well getting that css background tag to work in my current script ain't working so well atm so i might come back to it later, if i get desperate i'll just make sure i don't maximise the page when i show it too him >.>
    thanks for the help anyway guys, you'll prolly hear from me on here again over the next 2 weeks with more html problems for you to help with

    Hell, if you really wanted to do it completely in HTML you could use frames with different backgrounds and no margins, and really go old-school.

    It makes me cringe to type it, but it's possible.

    Willeth on
    @vgreminders - Don't miss out on timed events in gaming!
    @gamefacts - Totally and utterly true gaming facts on the regular!
  • wasted pixelswasted pixels Registered User regular
    edited May 2009
    Or, you know, save some space:

    CSS shortcuts are awesome if you know anything about CSS. But if you don't know anything about CSS, it's probably a good idea to be able to actually figure out what the hell the code is doing. Thanks for being condescending, though!

    wasted pixels on
  • NightslyrNightslyr Registered User regular
    edited May 2009
    First, something that's bugging me: a page written in HTML is not a script. It's a document. Even if you're using a script (say something written in PHP or JavaScript) to generate the HTML, the end result is still a document. The same goes for CSS.

    Second, your instructor is a moron. Forcing you to do a project the wrong way is idiotic. Examining a few simple examples of 90's era code, and the problems that stemmed from that, should suffice.

    Third, from what I can tell, there's no HTML-only way to control background image tiling, even among the deprecated attributes.

    Fourth, kick your instructor in the nuts. Seriously. He was probably some douche who thought that using Microsoft FrontPage to create his Geocities-hosted site made him a badass back in the day.

    Nightslyr on
  • MagicPrimeMagicPrime FiresideWizard Registered User regular
    edited May 2009
    the Firebug addon for Firefox is awesome for CSS work.

    MagicPrime on
    BNet • magicprime#1430 | PSN/Steam • MagicPrime | Origin • FireSideWizard
    Critical Failures - Havenhold CampaignAugust St. Cloud (Human Ranger)
  • MagicPrimeMagicPrime FiresideWizard Registered User regular
    edited May 2009
    OP -- you do understand the basics of what CSS is and does, right?

    MagicPrime on
    BNet • magicprime#1430 | PSN/Steam • MagicPrime | Origin • FireSideWizard
    Critical Failures - Havenhold CampaignAugust St. Cloud (Human Ranger)
  • rfaliasrfalias Registered User regular
    edited May 2009
    Nightslyr wrote: »
    First, something that's bugging me: a page written in HTML is not a script. It's a document. Even if you're using a script (say something written in PHP or JavaScript) to generate the HTML, the end result is still a document. The same goes for CSS.

    Second, your instructor is a moron. Forcing you to do a project the wrong way is idiotic. Examining a few simple examples of 90's era code, and the problems that stemmed from that, should suffice.

    Third, from what I can tell, there's no HTML-only way to control background image tiling, even among the deprecated attributes.

    Fourth, kick your instructor in the nuts. Seriously. He was probably some douche who thought that using Microsoft FrontPage to create his Geocities-hosted site made him a badass back in the day.

    Uhh, angelfire is way better geez...

    Does your page have animated gif sparkels and flames?

    rfalias on
  • SporkAndrewSporkAndrew Registered User, ClubPA regular
    edited May 2009
    Or, you know, save some space:

    CSS shortcuts are awesome if you know anything about CSS. But if you don't know anything about CSS, it's probably a good idea to be able to actually figure out what the hell the code is doing. Thanks for being condescending, though!

    That's why I included a link to w3schools with the tutorials right there. 5 minutes of reading up and you can get up to speed.

    You missed the selector off your example, so I was trying to provide something that would actually work.

    SporkAndrew on
    The one about the fucking space hairdresser and the cowboy. He's got a tinfoil pal and a pedal bin
  • SzechuanosaurusSzechuanosaurus Registered User, ClubPA regular
    edited May 2009
    Heh believe me i'd rather be doing anything else, it's an assignment for my course, apparently we have to learn how to do it old school to appreciate how things are done in the real world. We basically have to use HTML but we're allowed a tiny bit of leeway with using css if we're stuck on something.

    Things aren't done like that in the real world. Even bad web designers use CSS. Well, I say use CSS, the WYSIWYG software they use as a crutch fudges the CSS for them. There is no justifiable reason to teach students pure HTML any more, it only serves to teach them bad habits.

    Szechuanosaurus on
  • wasted pixelswasted pixels Registered User regular
    edited May 2009
    Or, you know, save some space:

    CSS shortcuts are awesome if you know anything about CSS. But if you don't know anything about CSS, it's probably a good idea to be able to actually figure out what the hell the code is doing. Thanks for being condescending, though!

    That's why I included a link to w3schools with the tutorials right there. 5 minutes of reading up and you can get up to speed.

    You missed the selector off your example, so I was trying to provide something that would actually work.

    vBulletin stripped part of my post, should be fixed now.

    You were still a douche about it.

    wasted pixels on
  • MuncieMuncie Registered User regular
    edited May 2009
    I worked freelance for a long time, self-taught, thought myself a badass. Then I decided to get an office job with steady pay and benefits. As low man on the totem pole I was maintaining sites created in 1999, man. At first I was terrified, then I got the hang of how stupid HTML used to be, then I got good at it, then I got angry and left that job.

    Now I'm doing contract work again and the places I get called into are usually tables + attributes + css and div tags like you would not believe, just total vomit.

    You'd be surprised how many businesses are still profitable (even web only retailers) with asstastic web presences.

    Is it the place to start your HTML education? No, I don't think so, but it is somewhat useful if you're ever doing maintenance. Hopefully soon it's going to be about as useful as being the best Conestoga wagon wheel repair man in town.

    Muncie on
  • pogo mudderpogo mudder Registered User regular
    edited May 2009
    MagicPrime wrote: »
    OP -- you do understand the basics of what CSS is and does, right?

    yeah not so much, this is the first scripting (or for nightslyrs' benefit 'documenting') i've ever had to do so i'm still learning as i go along. to give this thread some closure, i managed to get the background to sit in a fixed position on the page as an image using this script:

    <table style="position:absolute; top:10px; left:200px" width="1200"><img style="position:absolute; top:10px; left:130px" src="background.png"></table>


    it might not be the easiest way to go about it but its working out okay, thanks for the advice anyway.

    pogo mudder on
    what a work of art is man, and the most boring choice you can make
  • SporkAndrewSporkAndrew Registered User, ClubPA regular
    edited May 2009
    MagicPrime wrote: »
    OP -- you do understand the basics of what CSS is and does, right?

    yeah not so much, this is the first scripting (or for nightslyrs' benefit 'documenting') i've ever had to do so i'm still learning as i go along. to give this thread some closure, i managed to get the background to sit in a fixed position on the page as an image using this script:

    <table style="position:absolute; top:10px; left:200px" width="1200"><img style="position:absolute; top:10px; left:130px" src="background.png"></table>


    it might not be the easiest way to go about it but its working out okay, thanks for the advice anyway.

    I, uh, wow. Any course where that is the "right" way to go about something really isn't worth taking.

    I'm not even going to start with how semantically incorrect that is, but seriously, just use wasted pixel's code in your <head>.
    <style type="text/css">
    body {
    background-image: url('background.png');
    background-repeat: no-repeat; // tells it not to repeat itself
    background-position: top left; // top right, top center, center left, center center, center right, bottom left, bottom center, bottom right 
    background-attachment: fixed;
    }
    </style>
    

    Or you could position it using pixels
    background-position: 50px 100px; /* left value first, value from the top second */
    

    Or even percent
    background-position: 10% 20% /* left value first, value from the top second */
    

    Just please don't use that abomination you posted.

    SporkAndrew on
    The one about the fucking space hairdresser and the cowboy. He's got a tinfoil pal and a pedal bin
  • bowenbowen How you doin'? Registered User regular
    edited May 2009
    Haha tabled designs, I remember those.

    Tell your professor to brush up on his HTML, because 4.01 transitional may not work in the next few years depending on if your browser is a tiny god or not.

    bowen on
    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • MagicPrimeMagicPrime FiresideWizard Registered User regular
    edited May 2009
    Muncie wrote: »
    I worked freelance for a long time, self-taught, thought myself a badass. Then I decided to get an office job with steady pay and benefits. As low man on the totem pole I was maintaining sites created in 1999, man. At first I was terrified, then I got the hang of how stupid HTML used to be, then I got good at it, then I got angry and left that job.

    Now I'm doing contract work again and the places I get called into are usually tables + attributes + css and div tags like you would not believe, just total vomit.

    You'd be surprised how many businesses are still profitable (even web only retailers) with asstastic web presences.

    Is it the place to start your HTML education? No, I don't think so, but it is somewhat useful if you're ever doing maintenance. Hopefully soon it's going to be about as useful as being the best Conestoga wagon wheel repair man in town.

    Are you talking one page/site using all of those in conjunction. Or are you bitching about each one separate?

    Because there are very few ways to escape divs and CSS.

    MagicPrime on
    BNet • magicprime#1430 | PSN/Steam • MagicPrime | Origin • FireSideWizard
    Critical Failures - Havenhold CampaignAugust St. Cloud (Human Ranger)
  • DelzhandDelzhand Hard to miss. Registered User regular
    edited May 2009
    Heh believe me i'd rather be doing anything else, it's an assignment for my course, apparently we have to learn how to do it old school to appreciate how things are done in the real world. We basically have to use HTML but we're allowed a tiny bit of leeway with using css if we're stuck on something.


    but yeah i've been slowly making my way through w3schools but having a bit of trouble.

    I hope for your sake you're in high school or junior high, because anyone using this method of teaching at a college level has no business in academia. Someone else said it best - this kind of thinking could be useful for showing the problems stemming from the old way, but as an actual assignment? No.

    Delzhand on
  • wasted pixelswasted pixels Registered User regular
    edited May 2009
    Delzhand wrote: »
    Heh believe me i'd rather be doing anything else, it's an assignment for my course, apparently we have to learn how to do it old school to appreciate how things are done in the real world. We basically have to use HTML but we're allowed a tiny bit of leeway with using css if we're stuck on something.


    but yeah i've been slowly making my way through w3schools but having a bit of trouble.

    I hope for your sake you're in high school or junior high, because anyone using this method of teaching at a college level has no business in academia. Someone else said it best - this kind of thinking could be useful for showing the problems stemming from the old way, but as an actual assignment? No.

    Seriously. I dropped out of college over assignments like this.

    wasted pixels on
  • MuncieMuncie Registered User regular
    edited May 2009
    MagicPrime wrote: »

    Are you talking one page/site using all of those in conjunction. Or are you bitching about each one separate?

    Because there are very few ways to escape divs and CSS.

    All at once, it's a soup.

    And I'm talking about shit like:

    ...
    <td>
    <div class="text3bb4" style="font-weight: bold;">Login</div>
    <div class="text3bb5"><font color="red">Shopping Cart</font></div>
    </td>
    ...

    But you know, a gazillion lines like that.

    Muncie on
  • MagicPrimeMagicPrime FiresideWizard Registered User regular
    edited May 2009
    Muncie wrote: »
    MagicPrime wrote: »

    Are you talking one page/site using all of those in conjunction. Or are you bitching about each one separate?

    Because there are very few ways to escape divs and CSS.

    All at once, it's a soup.

    And I'm talking about shit like:

    ...
    <td>
    <div class="text3bb4" style="font-weight: bold;">Login</div>
    <div class="text3bb5"><font color="red">Shopping Cart</font></div>
    </td>
    ...

    But you know, a gazillion lines like that.

    Then we agree -- I would slap the shit out of someone who wrote a page like that.

    MagicPrime on
    BNet • magicprime#1430 | PSN/Steam • MagicPrime | Origin • FireSideWizard
    Critical Failures - Havenhold CampaignAugust St. Cloud (Human Ranger)
  • Tweaked_Bat_Tweaked_Bat_ Registered User regular
    edited May 2009
    <table style="position:absolute; top:10px; left:200px" width="1200"><img style="position:absolute; top:10px; left:130px" src="background.png"></table>

    Ahahahahah hoooly shit.

    This isn't a University/College level course is it? Please say no.

    Tweaked_Bat_ on
  • bowenbowen How you doin'? Registered User regular
    edited May 2009
    <table style="position:absolute; top:10px; left:200px" width="1200"><img style="position:absolute; top:10px; left:130px" src="background.png"></table>

    Ahahahahah hoooly shit.

    This isn't a University/College level course is it? Please say no.

    I've seen worse. Mostly colleges that tack on a comp-sci degree to get more admissions because of the DotCom era and never updated it.

    bowen on
    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • RBachRBach Registered User regular
    edited May 2009
    bowen wrote: »
    <table style="position:absolute; top:10px; left:200px" width="1200"><img style="position:absolute; top:10px; left:130px" src="background.png"></table>

    Ahahahahah hoooly shit.

    This isn't a University/College level course is it? Please say no.

    I've seen worse. Mostly colleges that tack on a comp-sci degree to get more admissions because of the DotCom era and never updated it.

    OK, so I'm a relative newbie to CSS and "modern" web design practices so forgive me for this...but what exactly is wrong with the above quoted markup? Is it just that the styling is inline with the HTML or are some of the CSS properties to be avoided for some reason?

    RBach on
    [SIGPIC][/SIGPIC]
  • bowenbowen How you doin'? Registered User regular
    edited May 2009
    Tables should be used for tabular data, like a spreadsheet in web form. They shouldn't be used for displaying a background or anything else. It used to be a really really big thing about 8+ years ago to use tables for positioning before CSS really was standard in browsers.

    bowen on
    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • RBachRBach Registered User regular
    edited May 2009
    Well, there is that but I was going on the assumption that this was just a sample and there would be some data in the real thing. So other than that what's wrong?

    RBach on
    [SIGPIC][/SIGPIC]
  • SzechuanosaurusSzechuanosaurus Registered User, ClubPA regular
    edited May 2009
    RBach wrote: »
    bowen wrote: »
    <table style="position:absolute; top:10px; left:200px" width="1200"><img style="position:absolute; top:10px; left:130px" src="background.png"></table>

    Ahahahahah hoooly shit.

    This isn't a University/College level course is it? Please say no.

    I've seen worse. Mostly colleges that tack on a comp-sci degree to get more admissions because of the DotCom era and never updated it.

    OK, so I'm a relative newbie to CSS and "modern" web design practices so forgive me for this...but what exactly is wrong with the above quoted markup? Is it just that the styling is inline with the HTML or are some of the CSS properties to be avoided for some reason?

    There are several things wrong with it, a few of them are:

    Inline CSS styles (bloats file size, CSS can't be cached, inefficient coding, complicates future editing, impacts accessibility)
    Using a table for anything other than a table of information (non-semantic, impacts accessibility)
    Placing a background image inside the HTML rather than linking it via CSS (If the CSS fails or isn't available, layup breaks hard. Style is not separated from content, unnecessary data is downloaded for users who don't require it)

    Szechuanosaurus on
  • wasted pixelswasted pixels Registered User regular
    edited May 2009
    Well, yes, part of the problem is that a tag is being used for something other than its intended purpose. There are a couple of other big problems, though;
    1. If you're going to use a table tag, you HAVE to include at least one row (<tr>) and one cell (<td>), so not only is the wrong tag being used (this should be a div, not a table), the tag in question isn't even formatted acceptably.
    2. You should (almost!) never include CSS formatting instructions (in other words, the "style" attribute) in a tag itself, you should be formatting the document from the stylesheet. Using "in place" styling is against best practices.
    3. The entire snippet of code is superfluous, though, as there's an easier and better way to achieve the desired effect without introducing two new block-level elements (a table and an image). He should apply the background to the body of the document rather that what he's doing here.

    Edit: ^5 Szech. :D

    wasted pixels on
  • bowenbowen How you doin'? Registered User regular
    edited May 2009
    These guys know much more about HTML and CSS than I do, take their word for it. But from the programmer perspective, the absolute largest problem is not removing the styling from the data.

    bowen on
    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • MagicPrimeMagicPrime FiresideWizard Registered User regular
    edited May 2009
    If you can't have an external style sheet then define all your CSS in the head of the page.

    MagicPrime on
    BNet • magicprime#1430 | PSN/Steam • MagicPrime | Origin • FireSideWizard
    Critical Failures - Havenhold CampaignAugust St. Cloud (Human Ranger)
  • MuncieMuncie Registered User regular
    edited May 2009
    The idea behind semantic HTML is that the document should be readable with absolutely no formatting and each tag is used logically and the document is outlined properly. Sloppy HTML will work, but clean HTML makes a better base for dynamic content (many web developers I have worked with came from application development, the less HTML they have to deal with the better, also, when I am doing development I like the code to be super clean and well organized for similar reasons, despite being a designer before I was a developer.)

    For example you have 6 header tags. They are, essentially, identical because you can make one look like another using styles. Semantically, however, you will have 1 h1 element on the page, each h2 element will describe it's parent h1, each h3 element will describe it's h2 parent, etc. It makes your unstylized HTML logical and outlined, like a text book.

    Likewise the paragraph tag, <p> describes paragraphs. Each <p> element should generally be in sentence form. When explaining it to people I sometimes say <p> is your narrative text. <p> is not the correct tag to use for site controls, for example.

    The actual library of HTML elements is surprisingly large but it has been pared down in recent years as elements that only deal in style, like <b> (bold) <br /> (line break) and <hr /> (horizontal rule) are being replaced by CSS.

    Before CSS was (near) uniformly compliant in web browsers tables were used for page layouts. Part of this was necessity as CSS was awful in early browsers, part of this was a demand by ex-print designers to work within a grid. Throw in WYSIWYG editors, a growing demand for a more graphical web, and early misgivings about CSS and even now you'll see lots of sites that use tables for layout.

    A table should really just be a data table. You know, columns, rows, words, numbers? If you want to make the table stylish you'd use CSS, which can put background images, define widths, and with alternating class names on the row you can do the zebra effect to make it easier to read. There shouldn't be anything with the table that isn't data in a table. I don't really like doing the alternating class names thing either because it feels so contrived. Plus it seems every time I run into a table like that it's within a web application where I am already using many javascript controls so might as well do the zebra thing while it's at it.

    You can flub it, sometimes, though. HTML is flexible. I have been known to put page controls in the last column of a table. I have also used <br /> tags in pullout quotes.

    The important part about HTML is with every move are you better describing the document? Inline style describes the layout and formatting, not the document. Background images describe the formatting, not the document. In general, style belongs in the head and ideally it is external from the document. External style sheets cache, reducing the load on the user and your server.

    I disagree with the OP's professor's method of teaching HTML. You shouldn't start with table layout exactly because it is easier to conceptualize, the tools are easier to work with, it makes new web designers think in terms of print, which the web is not, and it makes content the enemy of design.

    To be well rounded I think it's a good idea to go back and look at how to deal with table layouts once you have an understanding of best practices and why they are the best practices. I get a lot more contracts for maintenance than I do for original design, so to me, at least, being able to look my hated enemy in the eye has been helpful.

    Muncie on
Sign In or Register to comment.