Website help! (html and css invovled)

Discussion in 'Web Design' started by j0nni, Jan 14, 2010.

to remove all ads.
  1. j0nni

    j0nni New Member

    Messages:
    12
    Hi I'm new here, and will be sticking around for a while mainly because I kind of need to know my web stuff (Multimedia Student):p

    Anyways I'm building myself a basic portfolio site, I've made very basic sites in the past but with assistance from teachers, but this is all on my own at home (I'm on holidays)

    Here's what the main page is meant to look like without content (for the main page)
    [​IMG]

    Here is the url to it for what i've done:
    http://members.optusnet.com.au/j_troy/index.html

    anyways I've got a few questions which I'm unsure about. The first will be easy. How do I get rid of the box around the nav bar buttons?
    Also is there a better way to do the nav bar? Such as using text instead of images with the custom font? because all I've done is put images inside it's own div tags as I got no idea how to use custom fonts in web.


    (Going to try a different method for this tomorrow)
    Second question is how do I go about making CSS rounded boxes? I've tried but had no luck.
    I tried to put it directly into the main index page with the css code but none of the rounded corners were displaying while viewing the site in a web browser, but it showed in dreamweaver.
    But I trialed it all on a blank html page and I was able to get one of the rounded corners to display.

    The other thing is with the code for the css rounded box (link provided below) that it doesn't provide code for the right hand side for the corner images?

    Here's a link to the seperate page:
    http://members.optusnet.com.au/j_troy/purple_box.html

    Here's the images for the css rounded box(purple box):
    http://members.optusnet.com.au/j_troy/images/bl_purple.png
    http://members.optusnet.com.au/j_troy/images/br_purple.png
    http://members.optusnet.com.au/j_troy/images/tr_purple.png
    http://members.optusnet.com.au/j_troy/images/tr_purple.png

    And this is the tutorials/site I used for the css rounded box:
    http://kalsey.com/2003/07/rounded_corners_in_css/

    Thank you for reading this
    Hopefully it all makes sense :D
     
    Last edited: Jan 14, 2010
  2. bluecollar01

    bluecollar01 New Member

    Messages:
    90
    hi jonni,

    to remove the rules around your links you need to set the border attribute to "0" as shown below.

    <a href="index.html"><img src="images/logo.gif" border="0" /></a>

    if you want to use the custom fonts i think your going to have to use images vs text for the nav

    for rounded corners you may want to make one top image and one bottom image for your box - that way you get your rounded corners and it's much easier to implement.
     
  3. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Jonni,

    You could use the method bluecollar mentioned but, one, you would have to add that border attribute to every image link, and two, that is a inefficient method. The solution is to use CSS.

    Here is an example:

    Code:
    a img {
    border:none;   /* eliminates the border around an image */
    outline:0;   /* eliminates the focus, dotted line when a link is clicked */
    }
    
     
  4. j0nni

    j0nni New Member

    Messages:
    12
    Ok I've fixed up the nav bar and finally got the css rounded box/corners sorted.
    There will be more issues coming up later once I progress through the site.

    For the mean time thanks for the help :)
     
  5. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    anytime, your welcome
     
  6. j0nni

    j0nni New Member

    Messages:
    12
    Alright I've got another question :p

    It's to do with images loading up with the lightbox css/script thing.
    If you click on the image under latest work you notice that the full sized image doesn't load up smoothly and that it gets blocked by other divs/objects (I think thats the right way of putting it)

    I've tried different ideas but had no luck, and tried to find other examples/templates for something similar but nothing really looks right for it.

    Thanks again

    p.s - Don't mind some of the content, I'll finalize everything later ;)
     
  7. j0nni

    j0nni New Member

    Messages:
    12
    oh yeah thanks...:confused:
     
  8. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Jonni,

    I chose to use this js-based image gallery instead of Lightbox because it was smaller in file size and very easy to use, and also function well in all browsers. It's called Slimbox (v2). I would suggest checking it out, maybe this will be a great substitute?

    Slimbox v.2
     
  9. j0nni

    j0nni New Member

    Messages:
    12
    thank you, i'll give it ago later on :)
     
  10. uptownhr

    uptownhr New Member

    Messages:
    27
    Regarding rounded, there is a bug with IE that does not allow this. Try checking it in firefox and chrome. You should see it there.
     
  11. j0nni

    j0nni New Member

    Messages:
    12
    That reminds me, I gotta check it out in different browsers as I go along. The rounded circles run pretty well so far, The text in IE8 isn't showing as it's meant to. Firefox displays it correctly, which I'll look into later on.

    But that slimbox thing worked good actually thank you :)
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Your welcome Jonni. Yeah I liked it because the js file is only 4K.
     
  13. bluecollar01

    bluecollar01 New Member

    Messages:
    90
    This isn't the best tool but in the lack of other options it will do the job - http://ipinfo.info/netrenderer/index.php.

    It gives a screen cap of the upper portion of the page in different versions of IE. Someone else may be able to provide a better tool. Thanks.
     
  14. uptownhr

    uptownhr New Member

    Messages:
    27
    john, your site looks awfully similiar to another users post below asking for a mentor. Are you the same person?
     
  15. j0nni

    j0nni New Member

    Messages:
    12
    I'm guessing your refering to me :p

    I sorta got my idea from this template
    http://www.csszengarden.com/?cssfile=109/109.css

    I just picked a theme which I wanted to work with, and then I came up with what I've got.
     
  16. j0nni

    j0nni New Member

    Messages:
    12
    That site will come in handy actually..thanks :)
     
  17. northpark

    northpark New Member

    Messages:
    29
    You should use an unordered list for your navigation

    <ul >
    <li><a href="link1">Home</li>
    <li><a href="link1">Home</li>
    </ul>

    Then style it with css. Here's and old but still relevant article on using lists for navigation etc.

    You could use a font replacement script like cufon to replace the text with your particular font.

    If you are going to stick with images at least have an alt attribute e.g. <img src="blahblah.png" alt="Home" /> so that if the image can't be displayed the text will be there in its place.

    Also you should validate your site as you work on it http://validator.w3.org/
     
  18. j0nni

    j0nni New Member

    Messages:
    12
    I was going to add attributes later on, but I've just changed the navigation to css, it's hard to tell visually but I'll have a play around with it later.
     
  19. j0nni

    j0nni New Member

    Messages:
    12
    and I tried that validator, it found 34 errors :p
     
  20. northpark

    northpark New Member

    Messages:
    29
    www.browsershots.org for checking how your site displays on different browser and operating systems
     

Share This Page