+ Reply to Thread
Page 1 of 2
1 2 LastLast
Results 1 to 10 of 11

Thread: new website with css problems

  1. #1

    new website with css problems

    hi all,

    i have been desiging a site for my local cricket club Eggborough Power Station Cricket club i have used css and tested it on my resolution 1280x1024.
    i know this isnt a standard res for most people but i have tried making the site available for 1024x768 but i am having some problems.

    i only started with css about a week ago and my coding is taken from various tutorials around the web and looks terrible ( i am still learning )

    could someone please take a look at where i am going wrong with this site and guide me to the fixes it requires to work in browsers with lower resolutions.

    i will post my css code below ( please dont laugh)

    p.s.
    i do have a problem with scaling bg for my content the bg i made isnt seemless and as such will cause me problems once content gets too long any way i can sort this out?
    Code:
    html, body {
        text-align: center;
        background-image: url(imagestest/background.jpg);
        background-attachment: fixed;
        background-color: #000000;
    }
    
    
    h1, h2, h3, h4, h5, h6
    {
        color: #872020;
        font-family: comic sans MS, Times New Roman, Times, serif;
        line-height: 100%;
        padding: 20px 0px 8px 0px;
        margin:0;
        font-size: 20px;
    } 
    /* images outside of container */
    #champs
    {
        position: absolute;
        left: 950px;
        top: 350px;
        background-image: url(imagestest/champs.png);
        background-repeat: no-repeat;
        width: 222px;
        height: 170px;
    
    }
    
    
    #capn
    {
        position: absolute;
        left: 950px;
        top: 16px;
        background-image: url(imagestest/captain.png);
        background-repeat: no-repeat;
        width: 160px;
        height: 276px;
        overflow: hidden;
        margin:0;
    }
    /* end of images outside */
    
    body {
        font-family: comic sans MS, Arial, Verdana, Helvetica, Sans-serif;
        font-size: 15px;
        color: #000000;
        text-align: center;
        font-size: 13px;
    }
    
    
    #container 
    {
        width: 599px;
        margin: auto;
        text-align: left;
    }
    
    #header 
    {
        
        background-image: url(imagestest/banner.png);
        background-repeat: no-repeat;
        width: 599px;
        height: 231px;
        
    }
    #topmenu
    {
        background-image: url(imagestest/links.png);
        background-repeat: no-repeat;
        width: 599px;
        height: 100px;
        margin: none;
        padding: 0;
    
    }
    ul#menu 
    {
        margin-left: 70px;
        padding-left: 0;
        list-style-type: none;
        float: left;
        width: 500px;
        padding: 0;
    }
    
    ul#menu li
    {
        display: inline;
    
    }
    
    
    ul#menu a
    {
        display: block;
        float: left;
        padding: .1em .5em;
        text-decoration: none;
        
    }
    
    ul#menu a:link img
    {
        border-style: none;
    }
    
    ul#menu a:visited img
    {
        border-style: none;
    }
    
    #contentbox
    {    
        background-image: url(imagestest/contentbg2.png);
        background-repeat: repeat-x;
        width: 599px;/* was 599px */
        height: auto;
        margin: 0;
        padding: 0;
    }
    /* test for affiliate links */
    #page2 
    {
        background-image: url(imagestest/contentbg2.png);
        width: auto;/* was 599px */
        height: auto;
        margin: 0;
        padding: 0;
        padding-left: 75px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 5px;
    }
    #news
    {    
        height: auto;
        width: auto;
        padding-left: 75px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 5px;    
        
    }
    #sidebar
    {
        background-image: url(imagestest/postit.png);
        background-repeat: no-repeat;
        width: 242;
        height: 235;
        position: absolute;
        left: 100px;
        top: 90px;
        padding: 15px 0px 0 0px;
        text-align: left;    
    }
    
    ul#sidelinks
    {
        list-style-type: none;
        
    }
    
    ul#sidelinks a
    {
        text-decoration: none;
        color: #000;
        
    }
    
    
    ul#sidelinks a:link img
    {
        border-style: none;
    }
    
    ul#sidelinks a:visited img
    {
        border-style: none;
    }
    
    #footer
    {
    
        margin:0;
    }
    /* sponsors section */
    #images
    {
        width: 599px;
        height: 600px;
    }
    
    div.thumbnail
    {
        width: 100px;
        float: left;
        margin: 10px 0px 0px 0px;
        padding: ;
        
    }
    
    div.thumbnail img
    {
        border-style: none;
        border: 1px solid #656464;
    }
    
    /* League Table data */
    
    table.helpT
    { 
        text-align: center;
        font-family: Verdana;
        font-weight: normal;
        font-size: 11px;
        color: #404040;
        width: 500px;
        background-color: #fafafa;
        border: 1px #6699CC solid;
        border-collapse: collapse;
        border-spacing: 0px; 
    }
    
    
    td.helpHed
    { 
        border-bottom: 2px solid #6699CC;
        border-left: 1px solid #6699CC;
        background-color: #BEC8D1;
        text-align: left;
        text-indent: 5px;
        font-family: Verdana;
        font-weight: bold;
        font-size: 11px;
        color: #404040; 
    }
    
    td.helpBod
    { 
        border-bottom: 1px solid #9CF;
        border-top: 0px;
        border-left: 1px solid #9CF;
        border-right: 0px;
        text-align: left;
        text-indent: 10px;
        font-family: Verdana, sans-serif, Arial;
        font-weight: normal;
        font-size: 11px;
        color: #404040;
        background-color: #fafafa; 
    }
    
    table.sofT
    { 
        text-align: left;
        font-family: Verdana;
        font-weight: normal;
        font-size: 11px;
        color: #404040;
        width: 500px;
        background-color: #fafafa;
        border: 1px #6699CC solid;
        border-collapse: collapse;
        border-spacing: 0px; 
    }
    
    /* extra divs */
    #extradiv1
    {
        
    }
    
    #extradiv2
    {
    
    }
    
    #extradiv3
    {
    
    }
    
    #extradiv4
    {
    
    }
    
    #extradiv5
    {
    }


  2. #2
    Netvibes is an Addiction™ Toon's Avatar
    Join Date
    Jan 2007
    Gender:
    Location
    Sheffield, UK
    Posts
    23,494
    Blog Entries
    9
    Have a read about resets

    A Killer Collection of Global CSS Reset Styles • Perishable Press

    Didn't see a reset in your css so this might be a good place to start.

  3. #3
    aha! that has helped with the position of my links in the post it note section.

    when i change the post it from absolute to relative, and test how the css works on other pages the post it can appear from half way down the page to out of the screen completely, also i get extra empty scrollable content and i dont know how to stop that

  4. #4

  5. #5
    float didnt work unfortunately, but after another few hours of searching the answer was simple :/ i had to set negative margins for the div so the "space" was removed from where it would have been in the document flow!
    simple when you know how!

  6. #6
    Don't threaten me with a dead fish james's Avatar
    Join Date
    Jan 2007
    Location
    Oxfordshire
    Posts
    1,127
    You also have a CS problem - Comic Sans... Really ruins what is otherwise a good looking site!

  7. #7
    what would you suggest? i really have tried a load of standard fonts without getting the look i wanted :/

  8. #8

  9. #9
    i have made trbuchet the default (not uploaded yet),

    i do now have another problem (others are all sorted now)

    since i didnt have a doc type i have added this one:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    but by doing so i have caused a few other problems:
    In IE the page itself is centered, but my relative divs are in the correct position but off to the left?

    in firefox the whole page is aligned left see screens

    my code 1st
    Code:
    * 
    {
        padding: 0;
        margin: 0;
        
    }
    
    html, body 
    {
        text-align: center;
        background-image: url(imagestest/background.jpg);
        background-attachment: fixed;
        background-color: #000000;
    }
    
    
    h1, h2, h3, h4, h5, h6
    {
        color: #872020;
        font-family: Trebuchet, Times New Roman, Times, serif;
        line-height: 100%;
        padding: 20px 0px 8px 0px;
        margin:0;
        font-size: 20px;
    } 
    
    #champs
    {
        position: relative;
        left: 850px;
        top: 200px;
        background-image: url(imagestest/champs.png);
        background-repeat: no-repeat;
        width: 222px;
        height: 170px;
        margin: -170px -222px;
        clear: both;
        float: left;
    
    }
    
    
    #capn
    {
        position: relative;
        left: 900px;
        top: 0px;
        background-image: url(imagestest/captain.png);
        background-repeat: no-repeat;
        width: 160px;
        height: 276px;
        margin: -276px;
        float: left;
        clear: both;
    }
    
    
    body {
        font-family: Trebuchet, Arial, Verdana, Helvetica, Sans-serif;
        font-size: 15px;
        color: #000000;
        text-align: center;
        font-size: 13px;
        width: 100%;
        
    }
    
    #container 
    {
        width: 599px;
        text-align: center;
        margin-left: auto;
         margin-right: auto;
    }
    
    #header 
    {
        
        background-image: url(imagestest/banner.png);
        background-repeat: no-repeat;
        width: 599px;
        height: 231px;
        
    }
    
    #topmenu
    {
        background-image: url(imagestest/links.png);
        background-repeat: no-repeat;
        width: 599px;
        height: 100px;
        margin: none;
        padding: 0;
    
    }
    ul#menu 
    {
        margin-left: 70px;
        padding-left: 0;
        list-style-type: none;
        float: left;
        width: 500px;
        padding: 0;
    }
    
    ul#menu li
    {
        display: inline;
    
    }
    
    
    ul#menu a
    {
        display: block;
        float: left;
        padding: .1em .5em;
        text-decoration: none;
        
    }
    
    ul#menu a:link img
    {
        border-style: none;
    }
    
    ul#menu a:visited img
    {
        border-style: none;
    }
    
    #contentbox
    {    
        background-image: url(imagestest/contentbg2.png);
        width: 599px;/* was 599px */
        height: auto;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    
    #page2 
    {
        background-image: url(imagestest/contentbg2.png);
        width: auto;/* was 599px */
        height: auto;
        margin: 0;
        padding: 0;
        padding-left: 75px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 5px;
    }
    #news
    {    
        height: auto;
        width: auto;
        padding-left: 75px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 5px;
        
        
    }
    #sidebar
    {
        background-image: url(imagestest/postit.png);
        background-repeat: no-repeat;
        width: 242px;
        height: 235px;
        position: relative;
        left: 70px;
        top: 80px;
        clear:both;
        text-align: right;
        margin: -242px -235px;
        float: left;
    }
    
    ul#sidelinks
    {
        list-style-type: none;
        padding: 3em;
        
    }
    
    ul#sidelinks a
    {
        text-decoration: none;
        color: #000;
        
    }
    
    
    ul#sidelinks a:link img
    {
        border-style: none;
    }
    
    ul#sidelinks a:visited img
    {
        border-style: none;
    }
    
    #footer
    {
    
        margin:0;
    }
    
    #images
    {
        width: 500px;
        height: 600px;
        padding-left: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 5px;
    }
    
    div.thumbnail
    {
        width: 120px;
        float: left;
        margin: 10px 50px 0px 0px;
        padding: ;
        
    }
    
    div.thumbnail img
    {
        border-style: none;
        border: 1px solid #656464;
    }
    
    /* League Table data */
    
    table.helpT
    { 
        text-align: center;
        font-family: Verdana;
        font-weight: normal;
        font-size: 11px;
        color: #404040;
        width: 500px;
        background-color: #fafafa;
        border: 1px #6699CC solid;
        border-collapse: collapse;
        border-spacing: 0px; 
    }
    
    
    td.helpHed
    { 
        border-bottom: 2px solid #6699CC;
        border-left: 1px solid #6699CC;
        background-color: #BEC8D1;
        text-align: left;
        text-indent: 5px;
        font-family: Verdana;
        font-weight: bold;
        font-size: 11px;
        color: #404040; 
    }
    
    td.helpBod
    { 
        border-bottom: 1px solid #9CF;
        border-top: 0px;
        border-left: 1px solid #9CF;
        border-right: 0px;
        text-align: left;
        text-indent: 10px;
        font-family: Verdana, sans-serif, Arial;
        font-weight: normal;
        font-size: 11px;
        color: #404040;
        background-color: #fafafa; 
    }
    
    table.sofT
    { 
        text-align: left;
        font-family: Verdana;
        font-weight: normal;
        font-size: 11px;
        color: #404040;
        width: 500px;
        background-color: #fafafa;
        border: 1px #6699CC solid;
        border-collapse: collapse;
        border-spacing: 0px; 
    }
    
    /* extra divs */
    #extradiv1
    {
        
    }
    
    #extradiv2
    {
    
    }
    
    #extradiv3
    {
    
    }
    
    #extradiv4
    {
    
    }
    
    #extradiv5
    {
    
    }
    www.eggboroughpscc.co.uk/IE.jpg

    www.eggboroughpscc.co.uk/fireforx.jpg

  10. #10
    Netvibes is an Addiction™ Toon's Avatar
    Join Date
    Jan 2007
    Gender:
    Location
    Sheffield, UK
    Posts
    23,494
    Blog Entries
    9

+ Reply to Thread
Page 1 of 2
1 2 LastLast

Similar Threads

  1. Problems
    By Alex* in forum General Web Design Forum
    Replies: 50
    Last Post: 29-08-2008, 03:23 PM
  2. End of my Leopard problems
    By strev in forum General Web Design Forum
    Replies: 16
    Last Post: 16-11-2007, 10:10 PM
  3. IE Problems as usual
    By bryceray in forum CSS Forum
    Replies: 8
    Last Post: 06-08-2007, 08:08 AM
  4. Meta tag problems
    By workinprogress in forum Graphic Design and Web Design Help
    Replies: 14
    Last Post: 03-04-2007, 04:09 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts


The Graphics Forum Web Design Stuff Free Decent Downloads Free Quality Wallpapers Graphics Forum Free Vista Themes
The Top The Best Images Tech Talk 247 Logo Design - $149 Affordable Stock Vector Illustrations Creativecurio - Design Blog Graphic Design Advertising

Check the forum often for the latest design announcements. Everything from graphic design and web design, to films and music. Estetica is a great place for people to get together and help each other out.



Web Hosting - UK Web Hosting services for business or personal website hosting needs.

Dedicated Servers - A full range of Managed Dedicated Server solutions suitable for all your requirements.

Graphic Design Blog | Web Design Forum | Graphic Design and Print Forum | Graphic Design Links | Advertise On This Site

Web Design UK | Vision.To Design | Leaflet Printing | Estetica Design Forum's Privacy Policy

Flyer Printing | Photography Blog | Design Forum Links | Logo Design | Graphic Design Social Network | Logo Design

Graphic Design Tutorials | Logo Designer | UK Logo Design Studio | Land for sale | Vector Art Blog

Free Web Hosting | Custom Logo Design - $149 Only | Affordable Print Design Templates | Small Business Logo Design | Company Logo Design

Logo Design Service | Logo Design Firm | Logo Design Reseller | Custom Logo Design | Letterhead Printing | Flyer Printing | Business Card Printing

Printing | Leaflet Printing | Online Backup | T-Shirt Printing | Personalised Mugs | Canvas Printing

Search Engine Optimization by vBSEO 3.5.0 RC1 PL1