locked
PLEASE HELP -- C#.NET Responsive Hyperlink RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User362646341 posted

    Hi everyone, I am trying to figure out the best way to implement a 'responsive' CSS format to switch format based on the page width, to switch between desktop, tablet, mobile platforms for my site. Right now I am just trying to make a simple, two column set of cells with an hyperlink/image in each, to scale up and down appropriately. Right now I have this:

    CSS

    /*  GRID OF TWO  */
.span_1_of_2 {
	width: 49.2%;
}

.span_2_of_2 {
	width: 100%;
}

    HTML / C#.net

    <center>
        <div class="section group">
            <div align="left" class="col span_1_of_2">

                <%-- Top Left Hyperlink --%>
                <asp:HyperLink ID="hypMiddleLeft" runat="server" />
                
            </div>
            <div align="right" class="col span_1_of_2">

                <%-- Top Right Hyperlink --%>
                <asp:HyperLink ID="hypMiddleRight" runat="server" />

            </div>
        </div>
    </center>

    This works for the most part, but unfortunately the Hyperlink image does not scale with when I define the width (CSS above). For some reason if I use an ImageButton instead of a hyper link, the image scales, but then clicking on the link, the page does a PostBack and acts like a form when I click submit. I don't want this to post to the server like a form, I simply want a couple of hyperlink/images that scale up and down appropriately, when the browser size changes.

    Someone has to know how to do this, anyone? Any information would be greatly appreciated.

    Thanks group!

    Thursday, October 18, 2018 3:42 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi JEREMER,

    It seems you don't want the image to post back.

    If so you could write your code as follows.Because I don't have your css col, I use bootstrap to simulate your responsive css.  row and col class is bootstrap's css style.

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"  />
    <style>

        .span_1_of_2 {
	width: 49.2%;
}

.span_2_of_2 {
	width: 100%;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <div class="row">
      
            <div align="left" class="col span_1_of_2" >

                <asp:ImageButton ID="ImageButton1" runat="server" PostBackUrl="javascript:;" ImageUrl="~/images/messager_icons.png" Width="100%" />
                
            </div>
            <div align="right"  class="col span_1_of_2">

               
                <asp:ImageButton ID="ImageButton2" runat="server" PostBackUrl="javascript:;" ImageUrl="~/images/spinner_arrows.png" Width="100%" />

            </div>
        </div>

    </form>

    The result.

    Best regards,

    Ackerly Xu

    Thursday, October 18, 2018 6:21 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User362646341 posted

    Ackerly,

    Thank you for the help, but is there a way to make a "Hyperlink" tag scale appropriately, rather than using an "Imagebutton" and an odd JavaScript function as a work-around? What does that little bit of code do anyway?

    Thanks -- J

    Saturday, October 20, 2018 11:33 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User379720387 posted

    getbootstrap.com

    Sunday, October 21, 2018 2:15 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User409696431 posted

    Styling the width of a div does not style an image inside the div.  If you have a hyperlink with an Image URL it renders in the HTML as an <img> tag inside an <a> tag.

    To style it you would assign the width style to the div, and also apply that width to the img tag inside the a tag inside elements you assign the class to.

    .span_1_of_2, .span_1_2 a img {
	width: 49.2%;
}

.span_2_of_2, .span_2_of_2 a img {
	width: 100%;
}

    Sunday, October 21, 2018 5:47 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User362646341 posted

    Kathy,

    I am using the CSS Width property to control the width of the Hyperlink (image) or ImageButton also:

            hypTopRight.Width = Unit.Percentage(100);

    The problem with this though, is that this does not work for a Hyperlink, but it does work for the ImageButton. Do you know why this would not work to adjust the Hyperlink width?

    Sunday, October 21, 2018 5:54 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User409696431 posted

    The width of a hyperlink (the resulting a tag) does not constrain an image (img tag) inside of it.   Use the CSS I've shown.

    Sunday, October 21, 2018 8:20 PM