Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
  1. #1
    Junior Member moforilla's Avatar
    Join Date
    Nov 2006
    Posts
    6
    Member #
    14399
    This is my first attempt at my own website, prior to this I have only done assignment webpages not really worry about the layout.

    I have satisfacoty knowledge of html and im basic with css. I am trying to achive a design like this

    http://www.freneticvirus.com/
    or this,
    http://www.smashmyps3.com/

    To me it looks like the trick is all in the css, no tables needed.

    The problems im having with css is the positioning and varying resolutions. With the example pages when resizing the browsers the page looks prefect in all sizes.

    Where as my attempt at it seems to go mental, the boxes jumping around, text going out of box and just the shrinking of the objects.

    I have tried a few different methods; it just got me frustrated after a while. Iím using the OíReilly CSS cookbook for help and its not really helpful.

    Just wondering if there are any tutorials or reference you would recommend.

    Thanks people.

  2.  

  3. #2
    Senior Member simpleurl's Avatar
    Join Date
    Jul 2006
    Location
    Leicester, UK.
    Posts
    150
    Member #
    13598
    Ok, well using positioning can work, but I'll help
    Depending on whether you have linked your html to your css, or they are both in the same file...
    CSS
    Code:
    /* css for single column (simple) */
    #container{
    width: 760px;
    margin: 0 auto;
    padding: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000}
    That's a really basic column thats in the middle of the page. All the HTML is basic...
    HTML Code:
    <div id="container">
    content goes here...
    </div>
    Quite simple. Easy to extend it further as well

    My site uses a single column

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yes, please tell us what's going wrong so that we can help you fix it :-) In terms of tutorials and such, search the forums -- others have asked and gotten answers.

  5. #4
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    If you center you page then use relative positioning then the screen size and resolution really won't make a difference

  6. #5
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Try playing around with one of the templates from this site. The zip will contain the CSS, and basic HTML for the page.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  7. #6
    Junior Member moforilla's Avatar
    Join Date
    Nov 2006
    Posts
    6
    Member #
    14399
    Thanks for the help guys, really friendly people on here.

    I will give all the suggestions a try and report back, just finding it hard to have time for building this site so much other stuff going on, any way thanks a lot.

  8. #7
    Junior Member moforilla's Avatar
    Join Date
    Nov 2006
    Posts
    6
    Member #
    14399
    Im back with a few html validation errors.

    Thanks chris for the link, within a few hours I had a decent looking site from those templates.

    The errors im getting are these,

    Error Line 27 column 14: there is no attribute "align". <p align="center">&nbsp;</p>

    This way of centering text is all over my site. What the best way to slove this problem ?

    Example code from my page:

    <p align="center">&nbsp;</p>
    <p align="center"><a href="http://www.sv-sd.com"> Home</a></p>
    <p align="center">&nbsp;</p>
    <p align="center"><a href="http://www.sv-sd.com/patch.zip"> Download</a></p>
    <p align="center">&nbsp;</p>


    The other error im getting is with a images border, I used it to remove the blue line. How else can you remove the blue border with out using the attribute border?

    Error Line 44 column 73: there is no attribute "border"....www.sv-sd.com/patch.zip"><img border="0" src="images/download.jpg" alt="Downl

    <p align="center"><a href="http://www.sv-sd.com/patch.zip"><img border="0" src="images/download.jpg" alt="Download" /></a>&nbsp;Download the patch.</p>

  9. #8
    Senior Member simpleurl's Avatar
    Join Date
    Jul 2006
    Location
    Leicester, UK.
    Posts
    150
    Member #
    13598
    I'm guessing that you are using dreamweaver in design view because of the non-break spaces. If you can go through your code in notepad or code view then this will help. Where it says:
    Code:
    <p align="center">&nbsp;</p>
    You should define the text to be centered in css. Like:
    Code:
    p{text-align: center}
    So then in html you just have the p tag.
    For the images you can set a class for them in css:
    Code:
    img .noborder{border: 0px none}
    Then for the HTML you would put:
    Code:
    <img class="noborder" src="path/to/image" alt="alternate text" />
    Should validate those bits of code

  10. #9
    Junior Member moforilla's Avatar
    Join Date
    Nov 2006
    Posts
    6
    Member #
    14399
    Simpleurl, your a god.

    Thank mate.

    Sites all valid now, just one warning saying

    "No Character Encoding Found! Falling back to UTF-8"

    Its somthing I need to add to the <!DOCTYPE... part.

    Btw, Im writing this all from a text editor, the spaces are from a css template, I just left them in. Should I remove them?

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

  11. #10
    Senior Member simpleurl's Avatar
    Join Date
    Jul 2006
    Location
    Leicester, UK.
    Posts
    150
    Member #
    13598
    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    Have you got this bit in?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com