TechQA.

Styling a map with CSS and HTML

1.2k views Asked by At

I have a CSS map of Brazil that I want to make have yellow borders: enter image description here

Can you inform me how I make the borders yellow so my map looks more similar to this: enter image description here

I also want to know how to make the black background larger since the map is larger than the background. The relevant HTML and CSS is:

    <div class="main_container" style="padding-top: 15px; padding-left: 15px; padding-bottom: 15px; height: 450px;width: 912px;"><form name="cse" action="/buscar" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-7211665888260307:9230854672" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Buscar" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com.br/coop/cse/brand?form=cse-search-box&amp;lang=pt"></script>
    <div class="map_left map map_container" style="margin-top: -11px;">
        <div id="area_image" class="map sprite-map_new sprite-background">
            <div class="" id="area_highlight" style="z-index: 0;position:absolute;"></div><img style="z-index: 999; position: absolute;" src="/static/montaonegocio_files/transparent.gif" alt="" usemap="#indexmap" width="500" height="480">

        </div>
    </div>
    <div id="site-description" style="height: 220px;">
        <h1 style="padding-top: 10px;"><a href="/">Anúncios</a> no site Montao.com.br:</h1>
        <h2>são colocados manualmente pelo usuário aqui.</h2>

    </div>

    <div id="info_tips" style="padding-top: 0px; height: 215px; margin-top: -5px;">
        <h3 style="margin-bottom: 0px; padding-top: 18px;">Todos os anúncios são revistos pela equipe do Montao.com.br</h3>
        <ul style="margin-top: 13px;">
            <li><img src="/static/montaonegocio_files/transparent.gif" class="sprite-square_1 sprite-background">O anúncio será visível durante dois messes. </li>
            <li><img src="/static/montaonegocio_files/transparent.gif" class="sprite-square_2 sprite-background"><strong class="OrangeText">Grátis!</strong> </li>
            <li><img src="/static/montaonegocio_files/transparent.gif" class="sprite-square_3 sprite-background"></li>
        </ul>

    </div>
    <a class="logo " style="text-decoration: none;" href="/.htm?ca=11_s"><img class="sprite-logo_new sprite-background" alt="Montao.com.br" src="/static/montaonegocio_files/transparent.gif" border="0"></a>
    </div>




body {
    font-family:  'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
    font-size: 12px;
    margin: 0px;
    color:#2C4F66;
    background-color:#000000;
    line-height:1.3;
}

div#footer {
    clear: both;
    float: none;
    padding: 0;
    margin: 5px 0 0 15px;
    width: 940px;
}
#footer a:link,
#footer a:hover,
#footer a:visited { color: #999 }
#footer .footer_item {
    display: inline;
    font-weight: normal;
    font-size: 10px;
    color: #999;
}
#footer .footer_right {
    float: right;
    width: 50%;
    text-align: right;
    vertical-align: right;
}
#footer .footer_left {
    float: left;
    width: 50%;
    text-align: left;
    vertical-align: left;
}
a:hover { text-decoration: none }
.Container {
    width: 960px;
    position: relative;
    background-color:#ffffef;
    margin: 5px 0 0 20px;
    padding: 40px 0 0 0;
}
.IndexContainer { padding: 5px 0 0 10px }
.BannerShadow { margin: 0 }
.map {
    width: 500px;
    height: 480px;
}
.map_container {
    float: right;
    clear: both;
    margin: 7px 0;
}
.show_state_name {
    left: 780px;
    width: 125px;
    font-size: 1.1em;
    text-align: center;
    position: absolute;
    top: 120px;
    background: #d4d4d4;
    color: #000;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.AreaList {
    background: #fff7db;
    border: 1px solid #e5dec5;
    float: left;
    padding: 5px 10px;
    width: 300px;
    margin: 18px 0;
}
.expl_container {
    width: 100%;
    height: 60px;
    margin-top: -20px;
    display: block;
}
.Explanation {
    display: block;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    line-height: 1.65em;
    margin: 0 0 0 713px;
    padding: 0 0 0 15px;
    font-weight: normal;
    text-transform: lowercase;
}
.main_container {
    width: 903px;
    height: 472px;
    margin: 0;
    padding: 25px 10px 25px 25px;
    background: #000000;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#site-description h1,
#site-description h2,
#site-description h3 {
    display: block;
    font-weight: normal;
    color: #666;
    margin: 0;
}
#site-description h1 {
    font-weight: bold;
    font-size: 2.2em;
    color: #000;
}
#site-description h2 { font-size: 2.2em }
#site-description h3 {
    font-size: 1.6em;
    margin: 1.6em 0 0 0;
}
#info_tips,
#site-description {
    width: 300px;
    height: 216px;
    border: 1px solid #e5e5e5;
    background: #fff;
    margin-bottom: 20px;
    padding: 5px 18px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.small_txt {
    font-size: .8em;
    font-weight: normal;
}
#info_tips h3 {
    font-size: 1.6em;
    margin: 0 0 40px 0;
}
#info_tips ul {
    font-size: 1.6em;
    list-style-type: none;
    padding: 0;
    margin: 0;
    _margin-top: 40px;
}
#info_tips li {
    line-height: 2.2em;
    _height: 2.2em;
}
#info_tips img {
    width: 30px;
    height: 26px;
    vertical-align: middle;
    margin: 0 10px 0 0;
}
.logo {
    position: absolute;
    left: 0;
    top: 0;
}

.index_regions span {
    margin: 10px 0 0 0;
    color: #999;
}
.index_regions .regions_links {
    text-align: right;
    vertical-align: right;
    display: inline;
    float: right;
    padding-right: 20px;
}
.index_regions a {
    padding-left: 5px;
    color: #999;
    font-weight: normal;
}
#header-line {
    float: left;
    padding-top: 12px;
    margin-top: 20px;
    width: 710px;
    height: 2px;
}
#header-payoff {
    clear: right;
    float: left;
    font-size: 13px;
    color: #e00c16;
    margin-top: 20px;
    padding-left: 15px;
    font-weight: bold;
}
#AdRight {
    vertical-align: top;
    padding-top: 200px;
}
#AdRight img {
    margin: 0;
    padding: 0;
}
.handheld_tip { display: none }
#AdRight .right-campaign {
    padding-right: 0;
    padding-left: 10px;
}
#News {
    font-size: 10px;
    white-space: nowrap;
}
#News a { font-size: 12px }
#News .pipe {
    color: #999;
    padding: 0 5px 0 5px;
}
.news_large { width: 930px }
* html .news_large { width: 941px }
*+html .news_large { width: 935px }
.news_small { width: 728px }
#startpage_ie {
    position: absolute;
    margin: 88px 0 0 326px;
    text-align: center;
    z-index: 40000;
}
#startpage_ff {
    position: absolute;
    margin: 88px 0 0 326px;
    text-align: center;
    z-index: 40000;
    line-height: 110%;
}
#startpage_ff_info #ff2_fix {
    position: absolute;
    height: 35px;
    width: 35px;
    margin-left: -50px;
}
#startpage_ff_info {
    position: absolute;
    background: transparent url(/img/startpage_ff.png) no-repeat;
    width: 232px;
    height: 180px;
    margin: 20px 0 0 315px;
    text-align: center;
    z-index: 40001;
}
#startpage_ff_info .logo { padding: 30px 0 0 0 }
#startpage_ff_info .icon {
    border: 2px dashed #b5af83;
    margin-right: 7px;
}
#startpage_ff_info .infotext {
    text-align: left;
    padding: 7px 20px 0 20px;
}
#startpage_ff_info .logo img { padding: 5px }
#startpage_ff_info .close {
    text-align: right;
    margin: 12px 20px 0 0;
}
#startpage_sf {
    position: absolute;
    margin: 20px 0 0 315px;
    text-align: center;
}
.StateList td {
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
}
.StateList a:visited { color: #936 }
#AdTop {
    margin-top: 4px;
    height: 90px;
}
#AdSquare td {
    vertical-align: bottom;
    text-align: center;
}
#AdSquare .LeftCol,
#AdSquare .RightCol { padding: 5px 0 0 0 }
#AdSquare .LeftCol {
    padding-left: 5px;
    width: 150px;
}
#AdSquare .RightCol { padding-right: 12px }
#AdSquare {
    width: 283px;
    margin: 8px 0 0 12px;
}
#AdSquare .Ad .Empty { margin: 0 }
#AdSquare .Jobb24 { margin: 0 0 12px 0 }
#AdSquare .Jobb24Text { padding-bottom: 1px }
#AdSquare .MatchLink {
    margin: 0;
    padding: 0;
    text-align: center;
}
#AdSquare .Sesam {
    margin: 1px 0 0 13px;
    padding: 0;
}
#AdSquare .Sesam form {
    margin: 0;
    padding: 0;
}
#AdSquare .AdBottom { margin: 10px 0 0 0 }
#AdSquare .AdBottom {
    height: 120px;
    background-repeat: no-repeat;
    font-family: verdana;
    padding: 12px 0 0 12px;
    margin: 0;
}
#AdSquare .AdBottom {
    float: right;
    margin-right: 12px;
}
#AdSquare .AdBottom .Text {
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;
    width: 230px;
    line-height: 105%;
    margin: 0 0 0 12px;
}
#AdSquare .AdBottom .TextBoxWho {
    width: 140px;
    font-family: verdana,arial,helvetica;
    font-size: 11px;
}
#AdSquare .AdBottom .TextBoxWhere {
    width: 140px;
    font-family: verdana,arial,helvetica;
    font-size: 11px;
}
#AdSquare .MatchText {
    margin: 9px 0 -4px 0;
    position: relative;
}
.clean_table,
.clean_table td {
    padding: 0;
    margin: 0;
    height: 0;
    border: 0;
}
.shadowed_thumb .middle_left {
    background: url(/img/thumb_border_left.gif) repeat-y;
    width: 2px;
}
.shadowed_thumb .top_middle {
    background: url(/img/thumb_border_top.gif) repeat-x;
    height: 2px;
}
.shadowed_thumb .extra_middle_right {
    background: url(/img/thumb_extra_border_right.gif) repeat-y;
    width: 6px;
}
.shadowed_thumb .extra_bottom_center {
    background: url(/img/thumb_extra_border_bottom.gif) repeat-x;
    height: 6px;
}
.shadowed_thumb .single_middle_right {
    background: url(/img/thumb_single_border_right.gif) repeat-y;
    width: 6px;
}
.shadowed_thumb .single_bottom_center {
    background: url(/img/thumb_single_border_bottom.gif) repeat-x;
    height: 6px;
}
.Front {
    margin: 9px 0 0 0;
    font-size: 14px;
    line-height: 18px;
}
.RedText { color: #c00 }
.OrangeText { color: #fe7b07 }
.AdsNow { margin: 14px 0 0 0 }
.sprite-background { background: url(http://www.montao.com.br/_/img/montao_sprites.gif) no-repeat scroll transparent }
.sprite-balcao_logo_new {
    background-position: -50px -265px;
    width: 133px;
    height: 48px;
}
.sprite-insert_ad {
    background-position: -13px -145px;
    width: 227px;
    height: 38px;
}
.sprite-logo_new {
    background-position: -11px -25px;
    width: 421px;
    height: 81px;
}
.sprite-map_new {
    background-position: -465px 0;
    width: 457px;
    height: 469px;
}
.sprite-orange_arrow {
    background-position: -65px -213px;
    width: 30px;
    height: 13px;
}
.sprite-state_1 {
    background-position: -7572px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_10 {
    background-position: -3597px -165px;
    width: 457px;
    height: 469px;
}
.sprite-state_11 {
    background-position: -5483px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_12 {
    background-position: -4298px -3px;
    width: 457px;
    height: 369px;
}
.sprite-state_13 {
    background-position: -3390px -1px;
    width: 457px;
    height: 268px;
}
.sprite-state_14 {
    background-position: -5080px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_15 {
    background-position: -3389px -259px;
    width: 457px;
    height: 469px;
}
.sprite-state_16 {
    background-position: -2934px -1px;
    width: 457px;
    height: 320px;
}
.sprite-state_17 {
    background-position: -2934px -259px;
    width: 457px;
    height: 469px;
}
.sprite-state_18 {
    background-position: -2346px -283px;
    width: 457px;
    height: 469px;
}
.sprite-state_19 {
    background-position: -2659px -1px;
    width: 457px;
    height: 369px;
}
.sprite-state_2 {
    background-position: -7176px -3px;
    width: 457px;
    height: 469px;
}
.sprite-state_20 {
    background-position: -2344px -2px;
    width: 457px;
    height: 369px;
}
.sprite-state_21 {
    background-position: -2077px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_22 {
    background-position: -1637px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_23 {
    background-position: -1102px -174px;
    width: 457px;
    height: 469px;
}
.sprite-state_24 {
    background-position: -1306px -71px;
    width: 457px;
    height: 469px;
}
.sprite-state_25 {
    background-position: -1015px -251px;
    width: 157px;
    height: 469px;
}
.sprite-state_26 {
    background-position: 83px -380px;
    width: 457px;
    height: 469px;
}
.sprite-state_27 {
    background-position: -989px -1px;
    width: 457px;
    height: 169px;
}
.sprite-state_3 {
    background-position: -6791px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_4 {
    background-position: -6364px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_5 {
    background-position: -6082px -1px;
    width: 457px;
    height: 469px;
}
.sprite-state_6 {
    background-position: -5781px -3px;
    width: 457px;
    height: 469px;
}
.sprite-state_7 {
    background-position: -4623px -2px;
    width: 457px;
    height: 469px;
}
.sprite-state_8 {
    background-position: -3971px -311px;
    width: 457px;
    height: 469px;
}
.sprite-state_9 {
    background-position: -3972px -2px;
    width: 457px;
    height: 269px;
}
.sprite-square_1 {
    background-position: -296px -150px;
    width: 30px;
    height: 26px;
}
.sprite-square_2 {
    background-position: -332px -150px;
    width: 30px;
    height: 26px;
}
.sprite-square_3 {
    background-position: -366px -150px;
    width: 30px;
    height: 26px;
}
html { height: 100% }
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #FFF;
    color: #000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
#TableContainer {
    width: 100%;
    height: 100%;
}
#Page {
    width: 960px;
    vertical-align: top;
    padding: 6px 0 0 40px;
}
td,
tr,
table {
    font-size: 12px;
    padding: 0;
    margin: 0;
}
img {
    border: 0;
    margin: 0;
    padding: 0;
}
ul,
ol { margin-top: 0 }
a {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #144678;
    text-decoration: none;
    outline: 0;
}
a:hover { text-decoration: underline }
html css image-editing
Original Q&A
1

There are 1 answers

0
ToddBFisher On BEST ANSWER

The source of the image is found here according to your page: http://www.montao.com.br/_/img/montao_sprites.gif

Unless there is something I'm missing, If you download that file you should be able to use Photoshop or something to add yellow borders manually.

Related Questions in HTML

Related Questions in CSS

Related Questions in IMAGE-EDITING

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions