SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Berchem
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Border arround the content of a page

    Hello everybody,
    I'm trying to make a border arround (a part of) the content of my pages. But the pages are not from the same size,so the border has to fit on each size of page...
    So it can be a little short one, but also a longer one ... Can anyone help me ?

    THX, Tomato

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    CSS:
    Code:
    .content {
      border: 1px solid navy;
    }
    HTML Code:
    <div class="content">
    <p>Content here.</p>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Berchem
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    CSS:
    Code:
    .content {
      border: 1px solid navy;
    }
    HTML Code:
    <div class="content">
    <p>Content here.</p>
    </div>
    Hello !
    Thank you verry much for your quick reply ! But could you explain it a little bit more ? Is this a CSS-stylle or something ? and the "code-part", what language is that ? Is it also HTML ? Where do I have to paste this code ?
    Thx very much !!!!!!
    Tomato

  4. #4
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to the CSS world. Learn more about CSS here @: http://www.w3schools.com/css/

    The code of Vgarcia create a border of 1 pixel size arround your content. There is a lot of possibilities with CSS so start learning CSS, it's easy!

    Here is another examples:
    HTML Code:
    <div style="border:1px dashed #999; padding:4px;">Content Here!</div>
    
    <div style="border-top:1px dashed #ccc; border-bottom:1px dashed #369; padding:4px;">Content Here!</div>
    Copy & paste this codes and see them in action!

    Good luck
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Tomato
    Hello !
    Thank you verry much for your quick reply ! But could you explain it a little bit more ? Is this a CSS-stylle or something ? and the "code-part", what language is that ? Is it also HTML ? Where do I have to paste this code ?
    Thx very much !!!!!!
    Tomato
    The first code block is CSS. You can put it in the <head> of your document (in a <style> tag), or you can place that code in an external file and use the <link> tag to tell the browser where the stylesheet is located. The second block of code is HTML. That <div> should be wrapped around whatever area you want bordered.

  6. #6
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    how come that the size of the border is that one? How could you choose a defined size? sorry for hijackin...

  7. #7
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is the navy word in the definition? Is it called an element or... errr... what?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Quote Originally Posted by duuudie
    how come that the size of the border is that one
    Not sure what you mean as it sounds a bit obvious unless I've mis-interpreted something .

    The 1px tells the border to be 1px
    border: 1px solid navy;
    How could you choose a defined size
    Do you mean choose a defined size for the border? -You just change the 1px to whatever you want e.g. 2px. (Or you can use one of the allowed keywords such as thin, medium or thick.)

    what is the navy word in the definition?
    Thats the colour of the border. You can use one of the allowed keywords for colour such as red, white, black etc. (look them up on the w3c site mentioned above). Usually the colour is a hex number e.g. #FFFFFF.

    Hope that's what you meant

    Paul

  9. #9
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot Paul,
    about the size: how could I make the same cell be 180x230px for example?


  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by duuudie
    thanks a lot Paul,
    about the size: how could I make the same cell be 180x230px for example?

    Code:
    .content {
      border: 1px solid navy;
      width: 180px;
      height: 320px;
    }

  11. #11
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh... it's that easy...

    thanks


  12. #12
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS is more easy that you think Just check http://www.w3schools.com/css/
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.


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
  •