difficulty with content insertion in asp/css/html

Hi everyone, I seem to be experiencing an issue with my content placeholder:

Even though my content is supposed to be inside the placeholder in my ASP code, it appears outside:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <%--<div class="workout-article-table">--%>
    <asp:Panel ID="Panel1" CssClass="workout-article-table" runat="server"> <%--takes place of div--%>
    <asp:Panel ID="Panel2" CssClass="workout-article-table-column" runat="server"> <%--takes place of span--%>
    <%--<span class="workout-article-table-column">--%>

    <div class="workout-article-table-blue">
        <div class="workout-article-table-title">beginner workout programs »</div>
    </div>
    <div class="workout-article-table-link-black">
        <div class="workout-article-table-link"><a href="#">Beginning Bodybuilding Comprehensive Guide</a></div>
    </div>
    <div class="workout-article-table-link-gray">
        <div class="workout-article-table-link"><a href="#">Resistance-Training For Total Beginners!</a></div>
    </div>
    <div class="workout-article-table-link-black">
        <div class="workout-article-table-link"><a href="#">Best Mass-Building Workout For Beginners</a></div>
    </div>
    <div class="workout-article-table-link-black">
        <div align="center"><span class="workout-blue-links"><a href="#">View All Beginner Programs »</a></span></div>
    </div>
    <%--</span>--%>
     </asp:Panel> <%--takes place of inner span--%>



    <asp:Panel ID="Panel3" CssClass="workout-article-table-column2" runat="server"> <%--takes place of span--%>
    <%--<span class="workout-article-table-column2">--%>

    <div class="workout-article-table-blue">
        <div class="workout-article-table-title">intermediate workout programs »</div>
    </div>
    <div class="workout-article-table-link-black">
        <div class="workout-article-table-link"><a href="#">No Longer A Beginner</a></div>
    </div>
    <div class="workout-article-table-link-gray">
        <div class="workout-article-table-link"><a href="#">You're Not A 'Newbie' Anymore!</a></div>
    </div>
    <div class="workout-article-table-link-black">
        <div class="workout-article-table-link"><a href="#">Novice Intermediate Workout!</a></div>
    </div>
    <div class="workout-article-table-link-black">
        <div align="center"><span class="workout-blue-links"><a href="#">View More Workout Programs »</a></span></div>
    </div>

    <%--</span>--%>
    </asp:Panel> <%--takes the place of inner span--%>
    </asp:Panel> <%--takes the place of div--%>
</asp:Content>

CSS:

.workout-article-table {
    height: 40px;
    position: relative;
    width: 483pxpx
}
.workout-article-table-column {
    float: left;
    left: 0;
    position: absolute;
    top: 0;
    width: 229px
}
.workout-article-table-column2 {
    float: left;
    left: 254px;
    position: absolute;
    top: 0;
    width: 229px
}
.workout-article-table-blue {
    background-color: #0F709B;
    height: 40px;
    width: 229px
}
.workout-article-table-blue-wide {
    background-color: #0F709B;
    height: 40px;
    margin-bottom: 10px;
    width: 483px
}
.workout-article-table-link-black {
    background-color: #000000;
    height: 40px;
    width: 229px
}
.workout-article-table-link-gray {
    background-color: #27282A;
    height: 40px;
    width: 229px
}

Answer №1

Everything is all good now. I had to adjust Panel 1's spacing underneath manually since it wasn't aligning with the other panels due to copying and pasting.

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

What is preventing the buttons from filling the entire space of the parent element in this case?

https://i.stack.imgur.com/kbiWi.png I'm trying to figure out how to make the Repos and Stars buttons fill the entire height of their parent container, similar to the Github icon. Unfortunately, the code below is not achieving this effect. I attempted ...

Moving a DOM element within AngularJS to a new location

I have created an angular directive that functions like a carousel. To keep the dom element count low, I delete elements from the dom and then re-insert them using angular.element to select, remove, and insert items as shown below: app.directive('myD ...

unable to make changes to user in asp.net

Within my Account.aspx file, the following code is present: <table> <tr> <td> <asp:Label ID="user_lbl" runat="server" Text="Username:"></asp:Label> </td&g ...

Tips on identifying HTML email input validation using JavaScript?

Just like when you can determine whether an input element with a required attribute was successfully validated, try using the following code: if($('input[type="email"]').val() && $('input[type="email"]').val().includes('@') & ...

Event not being raised by Button within Repeater

Whenever I utilize the tab Ajax control in my work, there is a scenario where I have a Repeater within one tab. Here's an example of how it's coded: <asp:Repeater runat="server" ID="rp1" onitemcommand="rp1_ItemCommand"> Within the code be ...

Could anyone provide some insight into the reason behind this occurrence?

I just came across the most peculiar situation I've ever experienced. Check out this unique test page: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script language=javascript> fun ...

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

Deselecting options using jQuery

Currently, I am facing a challenge with jQuery in deselecting a select option element. Let me explain my situation: I have 3 select options: [ Select 1 ] [ Select 2 ] [ Select 3 ] Situation: Initially, Select 1 is populated with data retrieved from ...

Is there a way to execute Typescript tests using JasmineKarma within a TFS Build Process?

My current setup involves a web application using Angular 1.5 with bower/npm/gulp written in Typescript for our build process. The back end is a c# .net WebApi2, and both are built and deployed on TFS2015. Integrating my c# NUnit tests into the build proce ...

What is the best way to position a div below a sticky navbar?

I have implemented a sticky navbar on my index page along with JavaScript code that adjusts the navbar position based on screen height. When scrolling, the navbar sticks to the top of the page, but the flipping cube overlaps with the sticky navbar. How can ...

Unable to extract all elements using simple HTML dom when parsing RSS feed

I've been attempting to extract various details like titles, descriptions, links, images, and dates from an RSS feed located at . However, for some reason, I am unable to retrieve the link tag and image source within the feed. The rest of the data ext ...

When you click on the Print or Export buttons in Crystal Report, it will automatically direct you to

My approach included creating an empty DataSet and a table named "DataTable1". I then proceeded to generate a Crystal Report using this DataSet and setting the data source for the DataSet in the code behind. Dim dt As DataTable dt = busine ...

Is it possible to organize multiple tables within a single JSON structure without relying on JArray?

I am currently developing a program similar to IMDB, where I am showcasing individuals with a filmography, discography, and more. After setting up my view in MVVM, I am now working on serializing my JSON data to align with it. At the moment, I am consolida ...

Creating a dynamic navigation bar featuring an interactive search option

I am currently working on creating a responsive navigation bar with bootstrap, similar to the one shown in this example. However, I am facing issues with aligning the search button correctly and ensuring that the tabs remain intact when collapsed. Instead ...

Is it common for the `col` class in Bootstrap 4 Grid System to have no padding?

This is my first time using Bootstrap version 4. Currently, I have a footer that utilizes the new flex col classes. It looks great on desktop, but on mobile, the columns are stacked so closely together that there is no vertical margin or padding. Is this ...

What is the best way to incorporate polling into the code provided below? I specifically need to retrieve data from the given URL every 60 seconds. How should I go about achieving this

Can you assist me in integrating polling into the code below? <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"> ...

Is it possible to represent a recursive variable using CSS?

When it comes to the html structure: <body> <div> <div> <div> ... </div> </div> </div> </body> Is there a method to create recursive variables that utilize their parent's value: body ...

Scroll bar for multiple selection select tag without using div element (not supported in firefox)

.selector select[multiple="multiple"] { border-radius: 0; height: 200px; margin: 0 0 0 -1px; max-width: 368px !important; padding-left: 3px; width: 368px !important; } <select id="id_included_packages_from" class="filtered" multiple="multipl ...

Achieve the sticky effect for text in a HTML div using CSS to keep it anchored to the

Seeking advice on how to create a floating box that remains in the bottom right corner of a div using CSS. Any tips or suggestions are appreciated! (Here's an example of what I'm aiming for: https://i.stack.imgur.com/DkD5C.png) ...

What are the solutions for addressing popping behavior during hover effects?

Hello everyone, I am experiencing an issue with the image hover effect on my website. How can I make it enlarge smoothly instead of just fading in and out? To better demonstrate, I have provided a helpful example https://i.stack.imgur.com/TcZKy.jpg Any as ...