Questions about CSS.

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

  1. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Hi.
    I wasn't sure what to name the thread.. I've only got one question as of now, but I might need more help in the future, so that's the best thread name I could think of.

    I'm supposed to make a nice looking website (easier said than done.)
    It can't be some HTML-only coded website, like I've done before. It needs cool effects and whatnot.
    So now I need to learn CSS!

    To my first question:
    -I've gathered that using 'Divs' is much neater than 'Frames'..
    However I can't define the size of the 'Divs'.
    I tried setting the width like this: #left {width: 10%;, but using % isn't working.

    What I want is three 'Divs' next to eachother. Left, Center and Right.
    I want Left and Right to take 10% of the screen each, in width. And Center to have the other 80%.

    I can set the width with other units, such as: px and 'em'. But then, I believe, the website will look differently on different resolutions?

    So.. any idea how to fix so that I can use %? :)
     
  2. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    Use float: left; on the left part and float: right; on the right part. Then just set them to 100px wide (or w/e) and the middle ones margin-left & margin-right to 105px (or what you earlier assigned +5px).

    If you insist on using %'s I'd just use tables.

    If you want I can write a basic outline of code for you.
     
  3. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    I believe I got it to work.
    Here's what my code looks like:

    Code:
    #container {width: 90%; background: #ffde9b; float: left; margin: 5%;}
    
    #left {width: 10%; float: left; padding: 1em; border-left: 1px solid #999999;}
    
    #center {width: 70%; float: left; padding: 1em; text-align: center; background-color: #ABC999; border-left: 1px solid #999999; border-right: 1px solid #999999;}
    
    #right {width: 10%; float: right; padding: 1em; border-right: 1px solid #999999;}
    
    However.
    I tried setting my resolution to 1024x768, and the website looked messed-up..
    I was hoping that the Divs would scale-down, due to the % unit.
    -Is it possible to make that happen?
     
  4. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    I personally would do this:

    Code:
    #center
    {
     margin-left: 105px;
     margin-right: 105px;
     /*Insert Any Other CSS here*/
    }
    
    #left
    {
     float: left;
     width: 100px;
     /*Insert Any Other CSS here*/
    }
    
    #right
    {
     float: right;
     width: 100px;
     /*Insert Any Other CSS here*/
    }
    If the resolution is over 600x800 this CSS should work fine.
     
  5. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Thanks.
    But now 'Right' is on the line below Left and Center. (As if I had used <br>, but I haven't.) :p
     
  6. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    Oh, then it's more or less a footer?

    Anyone when your setting it up just don't use any of the code I posted and "right" will be at the bottom.

    ____

    EDIT: Wait, are you saying you WANT it at the bottom or are you saying it IS at the bottom with my code?
     
  7. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    It IS "at the bottom" (really just below the other two).
    I want it on the same row. :p
     
  8. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    Ah ok, hold on I'll test it myself.

    EDIT: What you need to do is put <div id="right"> BEFORE <div id="center">

    Here's my code:

    Code:
    <html>
    <head>
    <style type="text/css">
    #center
    {
     margin-left: 105px;
     margin-right: 105px;
     background-color: red;
     border: 1px solid black;
     /*Insert Any Other CSS here*/
    }
    
    #left
    {
     float: left;
     width: 100px;
     background-color: red;
     border: 1px solid black;
     /*Insert Any Other CSS here*/
    }
    
    #right
    {
     float: right;
     width: 100px;
     background-color: red;
     border: 1px solid black;
     /*Insert Any Other CSS here*/
    }
    </style>
    </head>
    <body>
    <div id="left">
    Left
    </div>
    <div id="right">
    right
    </div>
    <div id="center">
    center
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    
    </body>
    </html>
     
    • Like Like x 1
  9. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    That did the trick! :)
    Thanks. :thup:

    I'll return with more questions later, when I need answers. :p
     
  10. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0

    Your welcome. :)

    Here are 2 tips for general website building:

    -Don't forget the doctype


    -Don't forget to include the encoding. example:

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
     
  11. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    More questions! :)

    I'm using this doctype:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    That should cover what I need, right? (I'm using HTML and CSS and maybe PHP later on..)


    I did this:
    Code:
     margin-left: 5em;
     margin-right: 5em;
    
    However, it seems like there's more space to the right, than it is to the left?


    Another, related, question:
    I got pictures for the website. But they're in .pdf files..
    (I wanted them to be in .png or maybe .jpg format.)
    -Can I convert them someway? Does it matter if they're in .pdf? What's the difference? :p

    Thank you. :)
     
  12. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    pdf is not an image format so yes you must convert them. What I would do is open the pdf file, take a screenshot of it (Print Screen), then paste it into paint (Ctrl + V), then crop it, then save as .PNG

    ____


    Also: I recommend learning JavaScript before you learn PHP.

    _____


    The margins should be the same.

    There might be something else "increasing" the margins though like an image link.

    ___

    Another tip: If you want your code to be nice, clean and look proper on all browsers use the w3c validator.
     
  13. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Yea, that's what I thought.
    No way to export the image from Acrobat Reader to .jpg or .png?


    This is the complete code, shouldn't change the size on either size:
    Code:
    #container 
    {
     width: 85%;
     height: 45em;
     margin-left: 5em;
     margin-right: 5em;
     margin-top: 1em;
     margin-bot: 10em;
     background-color: #ffde9b;
     float: left;
    }
    
    #top
    {
     height: 10em;
     text-align: center;
     background-image: url(loggo.png);
    }
    
    #center
    {
     height: 40em;
     text-align: center;
     background: #ABC999;
    }
    
    #left
    {
     float: left;
     width: 10%;
     background: #999ABC;
    }
    
    #right
    {
     height: 40em;
     background-image: url(test.jpg);
     float: right;
     width: 10%;
    }
    
     
  14. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    You'd need to show me part of the HTML code. (The part where the left and right div is)
     
  15. SFilip

    SFilip Gone but not forgotten

    Ratings:
    +634 / 0 / -0
  16. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    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 href="template.css" rel="stylesheet" type="text/css">
    </head>
    
    
    <body background="background.jpg">
    
    
    <div id="container">
    <div id="top">  </div>
    
    <div id="left">Vänster
    
    <br><br><br><br><br><br><br><br><br>
    test
    <br><br><br>
    
    </div>
    <div id="right">Höger
    
    <br><br><br><br><br><br><br><br><br>
    test
    <br><br><br>
    
    </div>
    <div id="center">Center</div>
    </div>
    
    
    </body>
    </html>
    

    Thanks, SFilip.
    I'll try that out. :)

    (If everyone used google, there would be nothing to do for you guys, right?)


    EDIT:
    Can I open links in DIV? -Like in Frames?

    EDIT #2:
    Why does my .png files look weird in Internet Explorer (7.0)?
     
  17. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    >Can I open links in DIV? -Like in Frames?

    To do that you would need to change your doctype to Frameset.

    But read this.

    >Why does my .png files look weird in Internet Explorer (7.0)?

    They shouldn't look any different from Firefox, unless ofc your really using IE6 then any transparency in a png is turned black.

    ___

    You might want to change
    Code:
    <body background="background.jpg">
    into
    Code:
    <body>
    and add this CSS

    Code:
    body
    {
    background-image: 
    url('background.jpg');
    background-repeat: repeat
    }
    It's not required, nor will make a difference but I think it looks cleaner.

    Besides that, nothing looks wrong with your code... the margins [should] be the same.
     
  18. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    I thought frames "was ugly".
    (I read that somewhere..)

    So the whole idea of using divs, is to get rid of the "ugly frames". :p

    I was hoping there was a way of using divs as frames, sort of, without using frames at all?
     
  19. duyen

    duyen New Member

    Ratings:
    +214 / 0 / -0
    Not really.

    And vBulletin uses frames in the Mod CP anyhow.
     
  20. Exide

    Exide I am amazingly focused right now!

    Ratings:
    +449 / 0 / -0
    Thanks.

    I'm using iFrames. -Anything wrong with that? :p
    Should I use tables together with iFrames?
     

Share This Page