Web Analytics Made Easy -
StatCounter images wont connect - CodingForum

Announcement

Collapse
No announcement yet.

images wont connect

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • images wont connect

    I need help with my website
    www.usc.kevhosting.com/test/
    Im trying to build this website, but on the left where the navbar is, the images are making spaces under them. If possible please no very complicated codes as I am not that good with html.
    please help me. I want the lines to connect to each other, the one on the left of the first home works, then the right line has a space, and the next line has both sides with spaces
    Last edited by fallenangels; Oct 14, 2006, 11:42 PM.
    www.usc.kevhosting.com/test3 (need help)

  • #2
    Nothing exists at that URI.

    Comment


    • #3
      sorry wrong url lol, try again it should work now
      www.usc.kevhosting.com/test3 (need help)

      Comment


      • #4
        *sigh* It's another table-based layout with spacer GIFs and no doctype declaration…

        The solution is simple: use a vertically repeating background image to present the vertical lines instead of individual images.

        Comment


        • #5
          can u explain how to do this?
          btw how else can u place things right without using tables (without being difficult also)
          www.usc.kevhosting.com/test3 (need help)

          Comment


          • #6
            It's basic CSS. See http://www.w3schools.com/css/css_background.asp.

            For replacing table-based layouts, you would use semantic HTML elements in conjunction with CSS. For example, to replace what it looks like you're building, a menu, you would use a div element and an unordered list, both styled with CSS.

            Code:
            [font="sans-serif"][b]CSS:[/b][/font]
            div {
              width: 180px;
              background: url("menubg.png") repeat-y;
              }
            ul {
              padding-top: 54px;
              background: url("menutopbg.png") top no-repeat;
              }
            
            [font="sans-serif"][b]HTML:[/b][/font]
            <div>
              <ul>
                <li>Home</li>
                <li>Home</li>
              </ul>
            </div>
            Oh yeah, you might want to take a look at your page in something besides the Internet Explorer browser. It looks even more messed up in Firefox.
            Last edited by Arbitrator; Oct 15, 2006, 12:45 AM. Reason: correct code errors

            Comment


            • #7
              ok u can delete this im gonna change it and make it really simple
              www.usc.kevhosting.com/test3 (need help)

              Comment


              • #8
                im trying it agian and i get this now:

                http://www.usc.kevhosting.com/test2/

                its screwed up. how do i fix it?

                and also how do i make an image on the bottom also?
                Last edited by fallenangels; Nov 3, 2006, 04:02 PM.
                www.usc.kevhosting.com/test3 (need help)

                Comment


                • #9
                  Originally posted by fallenangels View Post
                  its screwed up. how do i fix it?

                  also how do i get rid of those bullets
                  Browsers give elements different default styles. In the case of lists, Firefox gives the list a default left padding while Internet Explorer gives the list a default left margin; both of these defaults are for the purpose of making the bullets visible. That’s why the rendering of Firefox and Internet Explorer are different. That said, to get around these kind of differences, it’s helpful to set the margins and padding of everything to zero to eliminate the differences entirely; it makes things consistent. Here’s how you would do so using a universal selector (asterisk):

                  * {margin: 0; padding: 0;}

                  Since you’re eliminating the defaults, you’re going to have to add some margins and/or padding back to the list and/or page to make things look right. The up-side is that you’ll now know what has margins and padding, and how much, since you’ll have explicitly specified them.

                  To get rid of the bullets on your list, you would use the following CSS:

                  ul {list-style-type: none;} or li {list-style-type: none;}

                  Or, if you want all lists to default to having no bullets, just add it to your universal style rule instead:

                  * {margin: 0; padding: 0; list-style-type: none;}

                  By the way, your code is invalid. That could cause some problems along the way, particularly because your page is displaying in backward-compatibility mode. You can fix that by adding a document type declaration at the top, such as that of HTML 4.01:

                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  &#160; "http://www.w3.org/TR/html4/strict.dtd">


                  Your page also doesn’t have a character encoding specified; that could result in certain characters used on your website to render incorrectly. Either ISO-8859-1 for American and Western European characters or UTF-8 for the international character set should suit your purposes (see below). Note that meta elements go inside the head element.

                  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> or
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                  Finally, your code contains some deprecated (old, obsolete) markup that could be relegated to CSS:

                  Deprecated: <body bgcolor="black" text="white">
                  Modern: (CSS) html {background-color: black; color: white;} (HTML) <body>

                  Comment


                  • #10
                    new problem
                    www.usc.kevhosting.com/test2
                    i figured out how to get the text on the same level as the navbar, but now the bottom div for then navbar goes above the text on the right side. what did i do wrong?
                    this is my css:
                    Code:
                    * {margin: 0; padding: 0;}
                    div.navtop {
                      width: 257px;
                      background: url("images/menubg.gif") repeat-y;
                      font-size: 30px;
                      text-align: center;
                      align: left;
                      margin-top: 50px;
                      float: left;
                      }
                    div.navbot {
                      width: 257px;
                      background: url("images/menubottom.gif") no-repeat;
                      font-size: 30px;
                      text-align: center;
                      float: left;
                      }
                    div.content {
                      width: 65%;
                      font-size: 25px;
                      }
                    ul {
                      padding-top: 35px;
                      background: url("images/menutop.gif") top no-repeat;
                      list-style-type: none;
                      padding-left: 25px;
                      }
                    body {
                      background-color: black; 
                      color: white;
                      font-family: morpheus;
                      }
                    h1 {
                      display: inline;
                      font-size: 100px;
                      font-family: nightwarrior;
                      }
                    www.usc.kevhosting.com/test3 (need help)

                    Comment


                    • #11
                      ok i got rid of the float thing cause it just screwed it up, so how do i get the text for the content on the same level as the navbar div?
                      this is my code:
                      Code:
                      * {margin: 0; padding: 0;}
                      div.navtop {
                        width: 257px;
                        background: url("images/menubg.gif") repeat-y;
                        font-size: 30px;
                        align: left;
                        margin-top: 40px;
                        text-align: center;
                        }
                      div.navbot {
                        width: 257px;
                        background: url("images/menubottom.gif") no-repeat;
                        font-size: 30px;
                        }
                      div.content {
                        width: 65%;
                        font-size: 25px;
                        display: inline;
                        }
                      ul {
                        padding-top: 35px;
                        background: url("images/menutop.gif") top no-repeat;
                        list-style-type: none;
                        padding-left: 25px;
                        }
                      body {
                        background-color: black; 
                        color: white;
                        font-family: morpheus;
                        }
                      h1 {
                        display: inline;
                        font-size: 100px;
                        font-family: nightwarrior;
                        }
                      www.usc.kevhosting.com/test3 (need help)

                      Comment

                      Working...
                      X