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

**wildguy2** · 04-15-2012 07:24 PM

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.

**spufi** · 04-15-2012 10:44 PM

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;
}

**wildguy2** · 04-16-2012 04:12 PM

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.

**spufi** · 04-17-2012 08:12 AM

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

**PBSWebDesign** · 04-18-2012 10:28 AM

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: Colour dissappears etc, when placing the position: absolute attribute in the div id.

Thread Tools

Display

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

Thanks spufi, still not working. read below.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions