Question

    I have written  code using HTML and CSS. It is working fine in browser but when I minimize or change the size of browser design collapses. Kindly help.

    Here is the code. The class which I am using.

        .container {
            position: relative;
            top: 100px;
            left: 100px;
            float: left;
            width: 100%;
         }


    This is for first dot:

         #first {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            border-radius: 25px;
            float: left;
         }

    For second dot:

         #second {
            width: 7.5%;
            height: 30px;
            float: left;
            border-bottom: 1px solid;
            border-top: 1px solid;
            position: relative;
            top: 10px;
            margin-left: -6px;
            background: white;
         }

    For third dot:

         #three {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            border-radius: 25px;
            float: left;
            margin-left: -5px;
         }

    This is for fourth dot:

         #four {
            width: 7.5%;
            height: 30px;
            float: left;
            border-bottom: 1px solid;
            border-top: 1px solid;
            position: relative;
            top: 10px;
            margin-left: -6px;
            background: white;
         }
         #five {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            border-radius: 25px;
            float: left;
            margin-left: -5px;
         }
         #six {
            width: 3.5%;
            height: 30px;
            float: left;
            border-bottom: 1px solid;
            border-top: 1px solid;
            position: relative;
            top: 10px;
            margin-left: -6px;
            background: white;
         }
         #seven {
            width: 7%;
            height: 30px;
            float: left;
            border-bottom: 1px solid;
            border-top: 1px solid;
            position: relative;
            top: -15px;
            margin-left: 1px;
            background: white;
            -webkit-transform: rotate(-30deg);
            -ms-transform: rotate(-30deg);
            -moz-transform: rotate(-30deg);
            -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
            z-index: 9;
         }
         #eight {
            width: 7%;
            height: 30px;
            float: left;
            border-bottom: 1px solid;
            border-top: 1px solid;
            position: relative;
            top: 36px;
            margin-left: -93px;
            background: white;
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
            z-index: 8;
         }
         #nine {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            border-radius: 25px;
            float: left;
            position: relative;
            top: -58px;
            right: 18px;
         }
         #ten {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            border-radius: 25px;
            float: left;
            position: relative;
            top: 60px;
            right: 67px;
         }
         .name {
            float: left;
            top: 60px;
            position: relative;
         }
         .new {
            width: 20px;
            height: 20px;
            background: white;
            position: absolute;
            left: 393px;
            top: 18px;
            z-index: 10;
         }
         .first_inside {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #000;
            top: 15px;
            left: 15px;
            border-radius: 15px;
            display: none;
         }
         .second_inside {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #000;
            top: 15px;
            left: 11.6%;
            border-radius: 15px;
            display: none; 
         }
         .third_inside {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #000;
            top: 15px;
            left: 22.2%;
            border-radius: 15px;
            display: none; 
            z-index: 15;
         }
         .four_inside {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #000;
            top: 15px;
            left: 15px;
            border-radius: 15px;
            display: none; 
         }
         .five_inside {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #000;
            top: 15px;
            left: 15px;
            border-radius: 15px;
            display: none; 
         }
         #connet_first_second {
            position: absolute;
            width: 10%;
            border: 1px solid;
            left: 2%;
            top: 23px;
            display: none;
         }
         #connet_second_third {
            position: absolute;
            width: 11%;
            border: 1px solid;
            left: 170px;
            top: 23px;
            display: none;
         }
         #connet_third_four_one {
            position: absolute;
            width: 6%;
            border: 1px solid;
            left: 23%;
            top: 22px;
            display: none;
            z-index: 11;
         }
         #connet_third_four_second {
            position: absolute;
            width: 7.5%;
            border: 1px solid;
            left: 28.5%;
            top: -4px;
            display: none;
            z-index: 11;
            -webkit-transform: rotate(-30deg);
            -ms-transform: rotate(-30deg);
            -o-transform: rotate(-30deg);
            -moz-transform: rotate(-30deg);
            transform: rotate(-30deg);
         }
          #connet_third_four_new {
            position: absolute;
            width: 5.5%;
            border: 1px solid;
            left: 23%;
            top: 26px;
            display: none;
            z-index: 11;
         }
          #connet_four_five {
            position: absolute;
            width: 8.5%;
            border: 1px solid;
            left: 28%;
            top: 55px;
            display: none;
            z-index: 11;
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg);
         }


    All the dots are connected as a pipeline and all is running fine too, but on minimizing the window things are collapsing.



    Here is the HTML code:-
    This is the html code in which i am using css as mentioned above.
    Kindly review and suggest something.
    It is working fine in browser but while minimizing all thing collapses.




    <!DOCTYPE html>
    <html>
    <head>
    <link href="style.css" rel="stylesheet" media="all">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        /*$("#first").click(function(){
            mystatus('OPENED');
            return false;
        });*/

        var status = '';

        status = 'RETURNED';

        if(status == 'RETURNED'){
            mystatus(status,'true');
        }

        function mystatus(input, string){
            status = ''+input+'';

            $(".first_inside").hide();
            $(".second_inside").hide();
            $("#connet_first_second").hide();
            $(".third_inside").hide();
            $("#connet_second_third").hide();
            $(".four_inside").hide();
            $(".five_inside").hide();
            $("#connet_third_four_one").hide();
            $("#connet_third_four_second").hide();
            $("#connet_four_five").hide();
            $("#connet_third_four_new").hide();

            if(status == 'OPENED') {
                $(".first_inside").show();
                $("#three").click(function(){
                    mystatus('INPROGRESS','false');
                    return false;
                });
                $("#first").unbind('click');
            }else if(status == 'INPROGRESS'){
                $(".first_inside").show();
                $(".second_inside").show();
                $("#connet_first_second").show();
                if(string == 'true'){
                    $("#five").click(function(){
                        mystatus('COMPLETED','false');
                        return false;
                    });
                }
                $("#first").unbind('click');
                $("#three").unbind('click');
                $("#nine").unbind('click');
            }else if(status == 'COMPLETED'){
                $(".first_inside").show();
                $(".second_inside").show();
                $("#connet_first_second").show();
                $(".third_inside").show();
                $("#connet_second_third").show();
                $(".third_inside").css({'background':'#000','border':'1px solid'});
                if(string == 'true'){
                    $("#nine").click(function(){
                        mystatus('CLOSED','false');
                        return false;
                    });
                    $("#ten").click(function(){
                        mystatus('RETURNED','false');
                        return false;
                    });
                }
                $("#first").unbind('click');
                $("#three").unbind('click');
                $("#five").unbind('click');
            }else if(status == 'CLOSED'){
                $(".first_inside").show();
                $(".second_inside").show();
                $("#connet_first_second").show();
                $(".third_inside").show();
                $("#connet_second_third").show();
                $(".four_inside").show();
                $("#connet_third_four_one").show();
                $("#connet_third_four_second").show();
                $("#first").unbind('click');
                $("#three").unbind('click');
                $("#five").unbind('click');
                $("#ten").unbind('click');
            }
            else if(status == 'RETURNED'){
                $(".first_inside").show();
                $(".second_inside").show();
                $("#connet_first_second").show();
                $(".third_inside").show();
                $("#connet_second_third").show();
                $(".four_inside").hide();
                $(".five_inside").show();
                $("#connet_third_four_one").hide();
                $("#connet_third_four_second").hide();
                $("#connet_four_five").show();
                $("#connet_third_four_new").show();
                $(".third_inside").css({'background':'#fff','border':'1px solid'});
                $("#five").click(function(){
                    mystatus('COMPLETED','true');
                    return false;
                });
                $("#first").unbind('click');
                $("#three").unbind('click');
                $("#nine").unbind('click');
            }

        }
    });
    </script>
    </head>
    <body>
        <div class="container">
            <div id="first"><span class="first_inside"></span><span class="name">open</span></div>
            <div id="second"></div>
            <div id="connet_first_second"></div>
            <div id="three"><span class="second_inside"></span><span class="name">In Progress</span></div>
            <div id="four"></div>
            <div id="connet_second_third"></div>
            <div id="five"><span class="third_inside"></span><span class="name">Fixed</span></div>
            <div id="six"></div>
            <div id="connet_third_four_one"></div>
            <div id="connet_third_four_new"></div>
            <div id="connet_third_four_second"></div>
            <div id="connet_four_five"></div>
            <div id="seven"></div>
            <span class="new"></span>
            <div id="eight"></div>
            <div id="nine"><span class="four_inside"></span><span class="name">Closed</span></div>
            <div id="ten"><span class="five_inside"></span><span class="name">Returned</span></div>
        </div>
    </body>
    </html>

这是我在上面提到的使用css的html代码。请审查并提出建议。它在浏览器中工作正常，但最小化所有事情崩溃。这是我在上面提到的使用css的html代码。请审查并提出建议。它在浏览器中工作正常但最小化所有事情都崩溃了。

Answer 1

这很难扩展，需要进行大量更改。我建议：

定位元素将position:absolute;或position:fixed;添加到元素中并使用top:x; left: x;调整其位置，以便它们位于页面上的固定位置。
使用SVG 使用 SVG 更改要完成的所有操作。虽然重做它是一项艰巨的任务，但它可能是最好的方法，可以用图形软件（例如Inkscape或Adobe Illustrator）绘制。

尝试在此http://jsfiddle.net/wtjg9set/1/调整结果窗口的大小，您会发现结果目前仅适用于特定尺寸。

在浏览器中正常工作。但在最小化或调整浏览器大小时崩溃

1 个答案: