www.webdeveloper.com
Results 1 to 5 of 5

Thread: Colour dissappears etc, when placing the position: absolute attribute in the div id.

  1. #1
    Join Date
    Apr 2012
    Posts
    110

    Colour dissappears etc, when placing the position: absolute attribute in the div id.

    Hi, Im battling with this, Im trying to put my div blocks on the webpage.
    <div id="container" style="width: 1000px: height: 900px; background-color: #120A2A;">
    <div id="header" style="width:400px; height: 200px; background-color: #81BEF7; text-align: center;">My ART</div>
    Everything is fine, but then I want to position the #81BEF7 div block to the far right, so I tried putting in the absolute postion attribute in, as it says I must do that when I read on the internet, but when I put it in, then my color dissppears etc.
    I dont know if Im using the right html. It says the strict version ontop on my window, but this seems like it is so strict, that even if a " is missing on something, my whole page is then messed up. Is their a solution or some advice, thanks.

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    Stick this within your <head> tag area

    Code:
    <link rel="stylesheet" type="text/css" href="styles.css" />
    Create a file named styles and save it as a .css file. You might need the Save As type to be All Files as if it is something like a Text file, it will be saved as styles.css.txt.

    Put this into it.
    Code:
    #container {
        width: 1000px:
        height: 900px;
        background-color: #120A2A;
    }
    #header {
        width:400px;
        height: 200px;
        background-color: #81BEF7;
        text-align: center;
        float:right;
    }
    <div> tags become
    Code:
    <div id="container">
    <div id="header">My ART</div>
    Note, if you really mean for the "My Art" part to be a header, it's best to define it as one.

    Code:
    <h1>My ART</h1>
    The CSS code drops the #header part and becomes
    Code:
    h1 {
        width:400px;
        height: 200px;
        background-color: #81BEF7;
        text-align: center;
        float:right;
    }

  3. #3
    Join Date
    Apr 2012
    Posts
    110

    Thanks spufi, still not working. read below.

    Hi Spufi,
    The styles.css. you cant save it as a .css file.

    I saved it to a word document(.wps)
    My other options in save as is works template(.wpt)
    rich text format(jtf)
    text file (*txt.csv)
    html doc(*htm*html*htx)
    word 6.0/95 (doc)
    word 97-2003(*doc)
    works4x(*wps)

    I put in container { width:1000px
    height: 900px
    background-color: #120A2A;

    header {
    width:400px. etc, etc, etc,

    then I put <div id="container">
    <div id="header">my art</div> I put this in the html doc, and put <link rel = "stylesheet" type="text/css "href="styles.css">under the head tag.

    But nothing works. Did I save the css in the right save as type. by just saving the container etc as above in the css file.

  4. #4
    Join Date
    Nov 2002
    Posts
    2,632
    Don't use Word to code for web pages. Eclipse is my preferred IDE to code pages in. There is one that's geared towards JavaScript or one geared towards PHP. Either should work.

    http://www.eclipse.org/downloads/index-helios.php

  5. #5
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Heck you can even use Notepad or Notepad++ for coding. I rather enjoy Eclipse and use it for Python and Web Development as well. Using one of these will allow you to save the file as .css

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles