Help with my website?

Discussion in 'Off Topic Area' started by cavallin, Oct 17, 2010.

  1. cavallin

    cavallin kickin' kitten

    Hello,
    I am updating my website which is in major need!! (below)
    I have to do borders around the pictures otherwise the text sticks right up to it and doesn't look very good.
    the borders always used to be black (or so i thought), so it blended in with the background and created space around the picture.
    But now, the borders are white and it just looks silly.
    Is there a way i can turn them black in the html bit, because the wysiwyg window thingy doesn't have that option :(
    As you can tell i am a big newbie at this, so maybe you could tell me where i could insert a colour for the border and what code to put in?
    thanks :)
    (i wonder how many other questions i will ask today...)

    PS: they're black on the .com version, but white on the .co.uk version!! the snippet master thing has always been on .co.uk, so i am rather confused.
     
  2. holyheadjch

    holyheadjch Valued Member

    Remove the border values from the style attribute and create the spacing using the margin attributes.

    The image tag for the homepage image might look like:

    <img src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs041.snc4/34395_10150291610580478_512780477_14964735_34496_n.jpg" align="right" alt="some of lewes tae kwon do members" title="some of lewes tae kwon do members" style="margin: 15px 0px 15px 15px; width: 400px; height: 286px;">

    I've removed a couple other redundant attributes from that tag.
     
  3. cavallin

    cavallin kickin' kitten

    errr..well so far I've managed to remember to put anything in the editor in tables because i had forgotten to do that. so that's helped a bit of some other pages.

    I'll remove the border from the image properties thing, because that will be easier for me, but then how to i create a margin?

    On the instructors profile, although it doesnt matter how many times i make the font the same size, when i do a preview the fonts are different sizes :-S

    And THANK YOU very much for answering :)
     
  4. holyheadjch

    holyheadjch Valued Member

    Here's a more advanced option, which might save a lot of time down the road.

    I'm guessing you are going to want to add a similar margin to every picture on the site, so it would be easier to maintain if you use css classes and external stylesheets, but that will depend on what editor you are using.

    At the top of every page, you need to add this line of code within the <head> and </head> tags.

    <link rel="stylesheet" type="text/css" href="styles.css" />

    Then you need to create a file called styles.css

    In that file, add the following

    .inlineImage {
    margin: 10px;
    }

    then in each image, add:

    class="inlineImage" to the image tag and remove margin information from the style attribute, for example,

    <img class="inlineImage" src="apicture.jpg" alt="a picture" style="width:200px; height:400px" />

    By doing this it means you can alter the look of every image on the site by changing a single file.
     
  5. cavallin

    cavallin kickin' kitten

    that is waaaay to advanced for me I'm afraid - I don't know how to create a file for a start!
    But, I have a plan, once I have put everything in tables, I just add an extra column and it makes a little gap between the text and the image.
    :/ probably not very professional, but easier for me. Sorry for not understanding, but still appreciate you trying to help.
    I want to contact my friend and change the awful colours though, the red logo, blue border and yellow shadow wiriting is getting a bit too much for me now, but hey, I can't change any of that myself!!
     
  6. holyheadjch

    holyheadjch Valued Member

    If you can copy the whole html source from the editor to this thread, it will be much easier to tell what's going on.
     
  7. cavallin

    cavallin kickin' kitten

    <h1 align="justify"><img height="53" width="364" src="images/welcome.gif" alt="Welcome to Lewes Taekwondo" border="0" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img height="89" width="132" src="http://www.bexhilltaekwondo.co.uk/tagb_taekwondologo.jpg" align="left" vspace="1" alt="tagb LOGO" hspace="3" border="10" title="Tae Kwon Do Association of Great Britain" style="margin: 1px 3px; width: 132px; height: 89px; border-width: 10px" /></h1>
    <h1 align="justify"></h1><span style="color: #000000"></span>
    <p align="justify">
    <span style="color: #000000"></span>
    </p>
    <span style="color: #000000">
    <p align="justify">
    <span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">Welcome to Lewes Tae Kwon do Club! </span></span></span>
    </p>
    <p align="justify">
    <span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">We are members of the TAGB (</span></span></span><a href="www.tagb.biz"><span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">Tae Kwon Do Association Of Great Britain</span></span></span></a><span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">) and a Ken&nbsp;James Tae Kwon Do <img height="286" width="400" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs041.snc4/34395_10150291610580478_512780477_14964735_34496_n.jpg" align="right" vspace="2" alt="some of lewes tae kwon do members" hspace="4" border="10" title="some of lewes tae kwon do members" style="margin: 2px 4px; width: 400px; height: 286px; border-width: 10px" />club. </span></span></span>
    </p>
    <p align="justify">
    <span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">The TAGB is the biggest single style association in the whole of Europe, which gives us lots of benefits such as competing amongst the best in the World, having a trustworthy professional organisation you can rely on, and quality training from qualified, CRB and first aid trained instructors. This also means that gradings are undertaken by our Area Rep, Mr David Oliver 8th Dan, who is the chairman of the TAGB. </span></span></span>
    </p>
    <p align="justify">
    <span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">However, at Lewes, we are a small club, which means you get even more added benefits of one on one tuition, more attention to what you need or want to focus on, and an excellent atmosphere which may be less intimidating than a large club. </span></span></span>
    </p>
    <p align="justify">
    <span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small"><u>Training times</u></span></span></span>
    </p>
    <p align="justify">
    <span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small"></span></span></span><span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">Lessons are&nbsp;held&nbsp;by instructor Michele Cavallin 3rd Dan, who has been training herself for 10 years, under the tuition of Mr Ken James 5th Dan. </span></span></span>
    </p>
    <p align="left">
    <span><span style="background-color: #000000; color: #ffffff"><span style="font-size: x-small">No need to book, come and join us every Thursday evening from 7pm - 8.30pm. Classes are held at the Lewes YMCA hall in Wesgate Street (BN7 1YR). Your first lesson is free - wear loose clothing and bring some water.</span></span></span>
    </p>
    <p align="justify">
    <span><span style="color: #ffffff"><span><span style="font-size: x-small"><span><span><span style="background-color: #000000; color: #ffffff">Mr James teaches at Brighton, Eastbourne and Hastings, and also has clubs in Burgess Hill, Haywards Heath and Horsham. <a href="http://kenjamestkd.com/" title="Ken James Tae Kwon Do academy">Please click here</a> for more information or ring Mrs Sue&nbsp;James on 01797 222556 or 07711084513</span></span></span> </span></span></span></span>
    </p>
    <p align="justify">
    <span style="color: #ffffff"><span><span style="background-color: #000000"><span style="font-size: x-small">Find us on Facebook! </span><a target="_blank" href="http://www.facebook.com/group.php?gid=51033345637" title="lewes facebook page"><span style="font-size: x-small">Lewes Tae Kwon Do</span></a><span style="font-size: x-small"> and </span><a target="_blank" href="http://www.facebook.com/search/?q=ken+james&amp;init=quick#/group.php?gid=9288956786&amp;ref=search&amp;sid=512780477.3179319067..1" title="Ken James facebook page"><span style="font-size: x-small">Ken James TAGB Tae Kwon Do</span></a></span></span></span><span style="font-size: x-small"> </span>
    </p>
    <p align="justify">
    &nbsp;
    </p>
    <p align="justify">
    &nbsp;
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    <p align="justify">
    <span style="font-size: x-small"></span>
    </p>
    </span>

    Taaadaaaa :/
     
  8. holyheadjch

    holyheadjch Valued Member

    Ok, I'm guessing that the reason you cannot change the font size if because the paragraphs of text are formed in an...interesting fashion.

    This is a paragraph of text on your site:

    <p align="justify">
    <span>
    <span style="background-color: #000000; color: #ffffff">
    <span style="font-size: x-small">
    The TAGB is the biggest single style ...who is the chairman of the TAGB.
    </span>
    </span>
    </span>
    </p>


    I've highlighted the code that controls the font-size for this paragraph. It probably wont be possible to change this in the WYSIWYG editor because the editor will probably apply the styling to the <p> tag, which is overridden by each of the three <span> tags. So to change the font size, go into the editor and change the font-size: value. The enumerated values of this css attribute are: xx-small, x-small, small, medium, large, x-large, xx-large.

    You'll have to change this for each paragraph within a page. If you are having problems changing a particular paragraphs font size, just let me know what paragraph specifically is causing you problems and I'll have a look.
     
  9. emaaoz

    emaaoz Valued Member

    Wow, that was brave...
     
  10. cavallin

    cavallin kickin' kitten

    Well, have a look and tell me what you think - hopefully it looks better :) except i just figured otu how to upload stuff as opposed to just linking it to my facebook pictures :/
     
  11. emaaoz

    emaaoz Valued Member

    I wasn't meaning to criticise the site, simply referring to the quality of code that wysiwyg editors create. There is usually an awful lot of it..

    If you plan on maintaining a site I would strongly recommend getting the basic of html, you might be surprised by how easy it is. Check out www.w3schools.com they have some great tutorials.

    Oz
     
  12. cavallin

    cavallin kickin' kitten

    Who thought you were critisising? Not me anyway :) was just pointing that out anyway. I was annoyed because this table kept appearing way below the title, so i just deleted a few bits in between and that seemed to do the trick...trial and error seems to be working lol, but i'll check it out.
    Feel a lot happier with the whole thing now :)
     
  13. RagingDelirium

    RagingDelirium Valued Member

    can i suggest white as the new noir

    for example an impeccable piece of graphic design take a look at this for a few pointers

    [ame="http://www.youtube.com/watch?v=zW1X2j1wCNU"]YouTube - Wipeout HD - Menus[/ame]
     
  14. Gary

    Gary Vs The Irresistible Farce Supporter

    So long since I saw inline styling in html I'd forgotten what it looks like! TBH I'd put the effort in to go with holyheadjch's suggestion of a separate style sheet (.css) since it'll save so much time later and you can change the whole look of the place with relative ease. There's plenty of websites that will give you free basic templates or at least let you have a closer look at how a nicely structured site looks i.e. http://mashable.com/2007/09/29/2-column-website-templates/ (from a quick google search.)
     
    Last edited: Oct 17, 2010

Share This Page