Issues with div and hyperlinks/forms

I am currently working on creating a left sidebar in my HTML code, but I am still new to this. In the div for the sidebar, I have three buttons. However, Weebly keeps notifying me of an issue with the <a> tag, and the second button's link appears in the right div as well. Any insights into what might be causing this would be greatly appreciated. Thank you.

<div id="left">
    <a href="https://www.twitter.com/racinbases"><img src="icon" height="50" width="50"></a>
    <a href="https://www.facebook.com/racinbases"><img src="icon" height="50"></a>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="display: inline-block;">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="encrypted" value="(removed for sanity)">
        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>   
</div>

<div id='right'>

</div>


#left 
{
width: 325px; height: 1000px; float: left; background-color: red;
}

#right 
{
float:right; width: 515px; height: 1000px; background-color: blue;
}

'

cssclasshtmlbutton

Answer №1

Just reviewed the code and it seems quite messy.

Make sure to close your <a> tags in your HTML, and don't forget to specify an image extension like jpg or png in the src tag as well.

I suggest using the BUTTON element instead of the INPUT type="image". The BUTTON element offers more flexibility, allowing you to include images and define it as a submit or reset button without the need for additional JavaScript.

Answer №2

Here is a similar code snippet for what you might be looking to achieve:

<div id='container'>
    <div class='leftSection red'>
        <a href="https://www.twitter.com/example"><img src="icon" height="50" width="50"></a>
        <a href="https://www.facebook.com/example"><img src="icon" height="50"></a>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="display:inline-block;">
            <input type="hidden" name="cmd" value="_s-xclick"/>
            <input type="hidden" name="encrypted" value="encrypted"/>
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif"/>
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"/>
        </form>
    </div>
    <div class='rightSection blue'>
    </div>
</div>
<style>
    .leftSection {
        width: 325px;
        height: 1000px;
        float: left;
    }
    
    .red {
        background-color: red;
    }
    
    .blue {
        background-color: blue;
    }
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"How to retrieve the height of an element within a flexslider component

I need some assistance with using JavaScript to determine the height of an element within a flexslider. There are two challenges I am facing. When I attempt to use a regular function getHeight(){ var h = document.getElementById("id-height").style.height; ...

javascriptjqueryhtmlcssflexslider

Bootstrap classes not aligning with individual elements

image My content is aligned with the text on the left and the form on the right, which is exactly what I intended. However, everything seems to be outside of my jumbotron container. Below is my HTML and CSS code. Your feedback is greatly appreciated. & ...

htmlcssbootstrap-4

MAC Safari is not registering input fields

I'm experiencing a small issue with a form that has two input fields for indicating time (in the format HH:mm) that are very close together, like this: Here is the HTML code snippet: <label> <span>Hour*</span> <input typ ...

htmlcsssafari

Growing the category beyond just an object

I'm dealing with some Python classes: class Window(object): def __init__(self, name): self.wind_name = name def getWindowName(self): return 'wnd' + self.wind_name class Control(object): def __init__(self, name, ...

pythonclass

text breaks free from the flex container when zooming in

Hi, I am attempting to design a user card-type div that includes images on the left and the username on the right. I have managed to create the layout, but when zooming in, the text is overflowing and escaping the flex container. Here is my code snippet. Y ...

htmlcssflexbox

Add the bootstrap class to the element only when the screen size meets certain criteria

Is there a method to add a CSS class to an HTML element solely at specific screen size while utilizing bootstrap? An instance would be to implement table-sm to <table> when the viewport is smaller than md size. At present, I have two separate table ...

cssbootstrap-4

drawImage - Maintain scale while resizing

I am currently working on resizing an image using drawImage while maintaining the scale. Here is what I have so far... window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext(" ...

javascripthtmlcssdrawimage

Creating dynamic animations for your elements with AJAX

How can I apply animation to an element as soon as it appears? I want others with the same properties to remain unaffected. Here is my approach: $.each(data, function(i, obj) { if(obj['Ping'] == "FALSE"){ ...

javascripthtmlajax

What are some successful methods for displaying extensive data lists to users in a meaningful and organized manner?

From dropdown lists to hover menus with fly-out options, there are various ways to present content on a website... I am managing a comprehensive list of U.S. military bases across the world for my website. This list includes both active and inactive bases ...

jquerycsslistmenu

Instructions for adding and deleting input text boxes on an ASP.NET master page

*I am currently facing an issue with adding and removing input textboxes for a CV form using ASP.NET in a master page. Whenever I click on the icon, it doesn't seem to work as intended. The idea is to have a textbox and an icon "+" to add more textbox ...

javascripthtmlcsswebforms

Creating an online bidding platform using ASP.Net, MVC 5, and Entity Framework

Having recently delved into the world of ASP.NET, I am in the process of developing a basic auction site for a charitable cause. Utilizing MVC 5 and Entity Framework with Code-First approach for database management. The core of this project is the Item mo ...

asp.netasp.net-mvchtmlentity-frameworkrazor

Does the default input default to text format?

I have a somewhat peculiar question. I'm currently experimenting with Javascript for a plugin and came across an interesting scenario. Let's say I have an input element that is structured like this: <input type='cc' id='cc&apo ...

javascripthtml

Only allow scrolling if the number of child elements exceeds a certain limit

I am looking to implement a scroll feature on the <ul> element when the number of <li>s exceeds a certain threshold. For example, if we have 12 children, I want to display only 7 of them and then scroll through the rest. This is my current app ...

javascriptjquerycss

changing the gradient color stops of an SVG on hover

Here's a CodePen I've been working on: https://codepen.io/naregjan/pen/MBzQWp Within this CodePen, I have an SVG container with four rectangles, two of which have gradients applied. My goal is to create a hover effect that transitions the gradie ...

htmlcsssvg

Revolutionary scroll-based navigation fill transition

I'm attempting to achieve an effect where the fill color of the "insticon" SVG changes from black to white based on the scroll position indicated in the jQuery code. I have made the necessary modifications in the if and else statements, but unlike "he ...

javascriptjqueryhtmlcsssvg

Is there a way for me to access the response from the PHP file I'm calling with Ajax?

I am just starting to explore ajax and jquery, and I recently found a code online that I'm tweaking for my own use. However, I am struggling with how to handle responses from PHP in this context. The current setup involves ajax POSTing to a php page ...

phpjavascriptjqueryhtmlajax

Adding space between the heading and the text underneath by placing a margin between h2

I am dealing with a situation where I have an <h2 class="landing-panel-title> containing a <span class="landing-panel-icon-right ion-ios-search-strong>. The second class on the span is from an icon font called ionicons. Despite this, it may not ...

htmlcss

Issue with responsive design: Media queries not applying max-width

GOAL I want the content of my page to adjust to screen sizes that are smaller than 600px wide. ISSUE When using the responsive tool in Chrome, preset screen sizes like iPhone X do not apply media queries properly. Even manually adjusting the screen size ...

htmlcssresponsive-designmedia-queriesresponsive

When I apply a percentage to the height of a div element, it shrinks down to a height

I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...

htmlcssflexbox

Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...

jqueryhtmlcsscheckbox