[Solved] Button overlaps Image on page resize

Last Reply 10 months ago By pandeyism

Posted 10 months ago

referring  https://www.w3schools.com/css/css3_buttons.asp

on reszing the page the button control overlaps image control all other controls on page gets aligned one below another only issue with this 2 how to prevent overlapping

<div class="container">
        <div id="red" class="span6" style="width:40%;float:left;margin-right:5%;">
            <div>
                <h4 class="text-center">
                    <img src="~/images/main.jpg " height="600px" style=" border: 2px solid black; padding:0px;"
                         alt="main" width="440px" />

                    </h4>
                </div>
        </div>
        <div id="blue" class="span6 " style="width:50%;float:left;">
            
                <a href="@Url.Action("Index", "Details",new {  FirstName = "Test", LastName = "Test"} )">
               &nbsp;   &nbsp;    <button id="details" onclick="location.href=parentNode.href" style="background-color:blue ;  box-shadow: 0 8px 16px 0 rgba(4,0,3,0.2), 0 6px 20px 0 rgba(2,4,2,2.19);width: 100%;  "  class="button button4 ">
                        Welcome to the test
                        <br />test1
                        <br />or test2
                        <h3 class="btn-info ">
                            <span class="xlarge-text bold">
                                Choose Your <span style="text-decoration: underline;">Test</span>
                                </span>
                        </h3>
                           
                    
                        Receive Info
                        <br />Services
                        <br />Thankyou
                    </button>
                </a>

</div>
 

 

Posted 10 months ago

Hi svibuk,

Refer below example.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div
        {
            margin: 0px;
            padding: 0px;
            font-family: 'Trebuchet MS';
        }        
        .Container
        {
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="red" class="span6" style="width: auto; float: left; margin-right: 5%;">
            <div>
                <h4 class="text-center">
                    <img src="https://i.imgur.com/6LLBMoM.jpg" height="600px" style="border: 2px solid black; padding: 0px;"
                        alt="main" width="440px" />
                </h4>
            </div>
        </div>
        <div id="blue" class="span6 " style="width: auto; float: left;">
            <a href="">&nbsp; &nbsp;
                <button id="details" onclick="location.href=parentNode.href" style="background-color: blue;
                    box-shadow: 0 8px 16px 0 rgba(4,0,3,0.2), 0 6px 20px 0 rgba(2,4,2,2.19); width: 100%;"
                    class="button">
                    Welcome to the test
                    <br />
                    test1
                    <br />
                    or test2
                    <h3 class="btn-info ">
                        <span class="xlarge-text bold">Choose Your <span style="text-decoration: underline;">
                            Test</span> </span>
                    </h3>
                    Receive Info
                    <br />
                    Services
                    <br />
                    Thankyou
                </button>
            </a>
        </div>
    </div>
</body>
</html>

Demo