• Locked
1 reply [Last post]
Mon, 2014-04-14 00:41
paulyfisher
Offline
newbie
Last seen: 5 years 1 week ago
Timezone: GMT+4
Joined: 2014-04-14
Posts: 1
Points: 2

I'm just want to place three circles the way I'm showing in the picture below. My code works in firefox. but not in chrome and ie. please help me!!! it can be not svg circles, css if it's easier. the other thing i want it's the the circles shoulb be resizeble thanks in advance

http://s018.radikal.ru/i520/1404/c3/1b4d6471e31d.jpg

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
    body {
                background-color: #0E1115;
                width: 100%;
                padding-bottom: 0px;
            margin-bottom: 0px;
 
            }
            h1 {
                color: #050607;
            }
            h1 f {
                font-family: solid;
            }
            .logo {
                position: absolute;
                margin-right: 0px;
                margin-left: 10%;
                width: 80%;
                float: right;
                bottom:0;
                padding-bottom: 0px;
            margin-bottom: 0px;
            }
        .first{
            position: absolute;
            bottom: 0;
            width: 47%;
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
        .second{
            position: absolute;
            margin-top: 2%;
            margin-left: 50%;
            width: 30%;
        }
        .third{
        position: absolute;
        margin-left: 81%;
        width: 18%;
        margin-right: 1%;
        margin-top: 20%;
 
        }
 
        </style>
    </head>
 
    <body>
 
        <div class="first"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
          viewBox="0 0 336.65 336.65" style="enable-background:new 0 0 336.65 336.65;"
         xml:space="preserve">
    <circle  style="opacity:0.8;fill:#99C45A;" cx="168.15" cy="168.15" r="168.5"/></circle>
    </svg></div>
 
 
        <div class="second"><svg  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
          viewBox="0 0 336.65 336.65" style="enable-background:new 0 0 336.65 336.524;"
         xml:space="preserve">
    <circle  style="opacity:0.8;fill:#2F6268;" cx="168.5" cy="168.5" r="168.5"/></circle>
    </svg></div>
 
        <div class="third"><svg  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
          viewBox="0 0 336.65 336.65" style="enable-background:new 0 0 336.65 336.524;"
         xml:space="preserve">
    <circle  style="opacity:0.8;fill:#6B1232;" cx="168.5" cy="168.5" r="168.5"/></circle>
    </svg></div>
 
    </body>
    </html>

Top
Tags:
Tue, 2014-05-27 10:53
#1
diyaldin
diyaldin's picture
Offline
newbie
Dubai, UAE
Last seen: 4 years 46 weeks ago
Dubai, UAE
Timezone: GMT+5
Joined: 2014-05-27
Posts: 0
Points: 1

RE

I am not sure but you have mistaken somewhere in CSS style file

Go through again your web design site CSS file.

Top
  • Locked