Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question div ids and classes

    ok, I'm working on my second table-free site and I seem to have run into some trouble. I am making a website for a friend of mine who illustrates books. It can currently be found here on my website.

    I am trying to make an animated border around both sides of the main image. So far, I can get the left border to show up in firefox but nothing in ie. I also have a problem with my footer (temporarily blue) and with images being oddly positioned and resised.

    I'm guessing I'm misusing div ids or classes. I got the layout from Eric Costello but I really don't know what I'm doing. I could do the whole thing with tables in a few minutes but I really would rather use css. Your help is greatly appreciated.

    -Liam
    Last edited by lkeane; 07-18-2005 at 12:37 AM.

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    well...

    not excatally sure where to start.

    should probably check some intro to css guides.... try google, there's bunches.

    this might help, too...
    put all images in a folder called images...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html><head><title>the new first page</title>
    <meta name="description" content="Artist's official website">
    <meta name="keywords" content="Patricia Eubank">
    <meta name="Author" content="Liam Keane, Siochan.org">
    <meta name="Copyright" content="Patricia Eubank">
    
    <style type="text/css">
    
    
    body {
    background:red url(images/bgred3.jpg);
    }
    
    #content1 {
    background:url(images/star.gif) repeat-y left;
    margin:0 auto;
    width:750px;
    padding-left:25px;
    }
    
    #content2 {
    background:url(images/star.gif) repeat-y right;
    padding-right:25px;
    text-align:center;
    }
    
    #scroll {
    background:url(images/scroll.gif) no-repeat top center;
    padding:30px 110px 200px 110px;
    text-align:justify;
    }
    
    div.w {
    float:left;
    background:url(images/w.gif);
    width:70px;
    height:80px;
    }
    
    div.w span{
    display:none;
    }
    
    .stuff {
    color:maroon;
    }
    
    #footer{
    font-size:8pt;
    margin:0 auto;
    width:750px;
    text-align:center;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="content1">
         <div id="content2">
              <img class="dog" src="images/main2.jpg" alt="" border="0" height="700" width="700">
    
    
                <div id="scroll">
                
                <p class="stuff">
                   <strong><div class="w"><span>W</span></div>elcome!</strong>
                    Loremipsum dolor sit amet, consectetuer adipiscingelit. Sed justo sapien,
                    aliquam eu, posuere vitae, lobortis eget, turpis. Vestibulum ante ipsum
                    primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                    Nullam vitae tortor aliquam enim auctor luctus. In augue dolor,
                    pharetra ut, varius et, lacinia a, felis. Quisque dapibus felis vitae
                    wisi. Suspendisse ut ipsum.
                </p>
    
              </div>
          </div>
    </div>
    
    	<div id="footer"><p>Privacy, Accessibility | <a href="http://siochan.org/">Copyright</a> 2005 Patricia Eubank. All rights reserved. | Design by <a href="http://siochan.org/">Siochan</a>, Hosted by 1&amp;1 | Valid XHTML, CSS</p></div>
    
    
    
    </body>
    
    </html>

    note:
    this probably isnt the MOST ELEGANT OR CORRECT way to do it, and doing it for you inst the best way to learn, but look at the code and see if that clears some things up for you...

    ...also.... ID is for elements that appear once on a page, classes can appear multiple times. They work for determining the "Specificity" of elements....
    Last edited by zro@rtv; 07-15-2005 at 08:24 AM.
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999


  •  

    Posting Permissions

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