Question

I’ve been trying to figure this out for hours, so thought I should ask you guys.

So I have a site, were I have a box with some content: images, text…

This is how it looks in the index.html:

    <div id="aust-agder">
    <!-- agent address in the first region -->
    <p style="  background: #111;
                background: rgba(0,0,0,.8);
                color: #eee;
                position:absolute;
                z-index:95;
                top:500px;
                left:1050px;
                font: normal 20px 'Lucida Grande',Arial,sans-serif;
                padding: 0.6em 1.2em;
                text-shadow: 0 1px 0 #000;
                -moz-border-radius: 1.6em;
                -ms-border-radius: 1.6em;
                -o-border-radius: 1.6em;
                -webkit-border-radius: 1.6em;
                border-radius: .6em; ">
  Lillesand - Kjøreskole<br>
  Vi vil gratulere A4 Trafikkskole med Digital Skiltløsning<br>
  A4 Trafikkskole<br>
  A: <a href=http://g.co/maps/xybpd>Elvegata 2A, 4608 Kristiansand S</a><br>
  T: 38 02 56 00<br>
  E: <a href=mailto:[e-mail]>[e-mail]</a><br>
  Besøk hjemmesiden til <a href=http://www.a-4.no/>A4 Trafikkskole</a><br>

  <img src=images/test.jpg>
    </p>
  </div>

When I have this in the html the site looks like this:
http://iseeit.no/maptest/working/

If I remove it from the html and put it in the css file which looks like this if I’m correct:

.aust-agder{
    background: #111;
    background: rgba(0,0,0,.8);
    color: #eee;
    position:absolute;
    z-index:95;
    top:500px;
    left:1050px;
    font: normal 20px 'Lucida Grande',Arial,sans-serif;
    padding: 0.6em 1.2em;
    text-shadow: 0 1px 0 #000;
    -moz-border-radius: 1.6em;
    -ms-border-radius: 1.6em;
    -o-border-radius: 1.6em;
    -webkit-border-radius: 1.6em;
    border-radius: .6em; 
}

and in the index.html:

    <div id="aust-agder">
    <!-- agent address in the first region -->
  Lillesand - Kjøreskole<br>
  Vi vil gratulere A4 Trafikkskole med Digital Skiltløsning<br>
  A4 Trafikkskole<br>
  A: <a href=http://g.co/maps/xybpd>Elvegata 2A, 4608 Kristiansand S</a><br>
  T: 38 02 56 00<br>
  E: <a href=mailto:[e-mail]>[e-mail]</a><br>
  Besøk hjemmesiden til <a href=http://www.a-4.no/>A4 Trafikkskole</a><br>

  <img src=images/test.jpg>
    </p>
  </div>

The site then looks like this:
http://iseeit.no/maptest/not/

I’m not an expert with css, so I might have been doing it all wrong.

Hope I made the problem clear to you, if not don’t hesitate to ask, also sorry for my bad english 🙂

Also, I can’t seem to remove the link colors, with text-decoration: none; any solution for that?

Answer 1

Try to use # ,not . in your css:

#aust-agder{
   background: #111;
   .....

. is used for styling classes.For styling elements with specific id, see this link: http://www.w3.org/TR/CSS2/selector.html#id-selectors