Questions about CSS.

Discussion in 'General Webmaster Support' started by Exide, Sep 2, 2008.

  1. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    at the top you need a <html> for yo main code.

    Btw: Overlap is a word and I'll answer your questions later - it's relatively late here as well.
     
  2. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    I figured I'd leave parts of the code out. :p
    Here's the full code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1">
    <title>Work Factory</title>
    
     <link rel="shortcut icon" href="images/favicon.ico">
     <link href="divs.css" rel="stylesheet" type="text/css">
     <link href="meny.css" rel="stylesheet" type="text/css">
    
    </head>
    
    
    <style type="text/css">
    body 
    { 
     background-image: url(images/loggo4.png);
     background-repeat: no-repeat;
     background-color: #000000;
    }
    </style>
    
    
    <body>
    
    <div id="top"> </div>
    
     <div id="container">
    
     <div id="center">
    
      <div id="buttons">
    
       <div id="menycontainer">
        <ul id="meny">
    
         <li title="cities"> <a href="iframe.html" target="iframe" id="cities"> Test </a> </li>
         <li title="About" class="current"> <a href="firstpage.html" target="iframe" id="about"> About </a> </li>
         <li title="Products"> <a href="#" target="iframe" id="products"> Products </a> </li>
         <li title="Contact"> <a href="#" target="iframe" id="contact"> Contact </a> </li>
    
        </ul>
       </div>
      </div>
    
     <br>
     <iframe src="iframe.html" name="iframe" width="85%" height="95%" marginwidth="10" marginheight="10"     scrolling="auto" frameborder="0" allowtransparency="true">
     </iframe>
    
     </div>
    </div>
    
    </body>
    </html>
    
    EDIT:
    My new problem is:
    -I can't center a div..
    I tried this:

    Code:
    #buttons
    {
     height: 40px;
     width: 100%;
     background: #3a3a3a;
    }
    
    #centerbuttons
    {
     margin: 0 auto;
     text-align: center;
    }
    
    But div - centerbuttons won't center.. (I want it to center horizontally on the button - div.)


    EDIT: I figured out something else:
    I want to have two boxes: #borders and #buttons. buttons is supposed to be inside borders.
    I then want buttons to be located 50% from border's left side. (In the middle, simply.)
    I tried margin-left: 50%, but that counts from the very left-most side. (Not border's left side.)
     
  3. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    New Question:
    What font should I use for writing longer pieces of text?
    -My sister mentioned something about that once, supposedly making it easier to read, but I forgot what it was.

    Any ideas? :)
     
  4. AceHart

    AceHart Your Friendly Neighborhood Admin

    Ratings:
    +1,489 / 0 / -0
    Georgia?
     
  5. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Nah, that's not the one.
    Thanks, though.

    New question.
    I want to click on a thumbnail picture and have the picture enlarged and maybe the surroundings become grey'ish.. -How can I do this? :p
     
  6. enouwee

    enouwee Non ex transverso sed deorsum

    Ratings:
    +235 / 0 / -0
    Can't you just search for such trivial things? It's called a Lightbox and there are many scripts for it, like multibox.
     
  7. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Thanks.
    I didn't know what they were called. :p

    So I google'd and found an easier version, than the one you linked to.
    It nearly works, too! :p

    http://www.huddletogether.com/projects/lightbox/

    When I click the image-link, I get the larger image in the middle of the screen and all that. But the background around it doesn't "go grey".
    Also, in the code they mention 'blank.gif' - which isn't available for downloading.. :confused:
     
  8. enouwee

    enouwee Non ex transverso sed deorsum

    Ratings:
    +235 / 0 / -0
    Why don't you look at the code (both HTML and CSS) they've got on their website? Or read the documentation?

    Maybe because you can create it on your own? When somebody tells me "x.gif" or "blank.gif", I immediately associate it to an 1x1 transparent GIF.
    But maybe that's only me. :rolleyes:
     
  9. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Yea, I already figured the "shadow/grey" part out. :p

    EDIT: This problem fixed. :thup:
    Only the problem below remaining, at the moment. :)

    Another thing is my img-links (the thumbnails), they have a blue border around themselves. I believe there's some css code that can fix this, but I can't remember which one it is or where to put it. :p
     
  10. enouwee

    enouwee Non ex transverso sed deorsum

    Ratings:
    +235 / 0 / -0
    You've added the multibox styles from lightbox.css?
     
  11. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    I don't know what that means, but I don't think I did. :p
     
  12. enouwee

    enouwee Non ex transverso sed deorsum

    Ratings:
    +235 / 0 / -0
    From the page you linked to:
    I hope you followed the other instructions... see their own page on how to do it correctly.
     
  13. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Ah.
    Yea, I added it.

    I solved the border problem by: border="0". :p
    It's still not perfect, but I believe I can work it out. =)
     
  14. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Ok, I got a new question. :p
    It's not really CSS, but I figured I'd hi-jack my own thread, instead of creating a new one.

    I'm trying to make image-links. But whenever I do, tiny, annoying underlines appear in the bottom-right corner of the image.
    Like this:
    [​IMG]
    Any ideas of how to get rid of these? :)
     
  15. phyrex1an

    phyrex1an Staff Member and irregular helper Staff Member

    Ratings:
    +446 / 0 / -0
    text-decoration: none; on the a elements which contains the images. Since I don't have the html I can't write you a complete css rule so you have to use your imagination :p
     
  16. enouwee

    enouwee Non ex transverso sed deorsum

    Ratings:
    +235 / 0 / -0
    Rather than writing:
    Code:
    <a href="#"><img ... /> <img ... /> <img ... /></a>
    use:
    Code:
    <a href="#"><img ... /><img ... /><img ... /></a>
    or:
    Code:
    <a href="#"><img ... /></a> <a href="#"><img ... /></a> <a href="#"><img ... /></a>
    To avoid the whitespace inside your link being underlined.
     
    • Like Like x 1
  17. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Aaah, of course!
    Thanks. =)
     

Share This Page