How to design an ASP.NET page with automatic-image-slider at left and details at right side of the page? Do I have to divide the div or what?

Question

1.00/5 (3 votes)

See more:

Just like in ebay.in, i want the automatic image slider at left & details at right as soon as the user clicks the item in the Datalist. Please Assist.

What I have tried:

I tried nothing because i am a beginner. I just Added a 'WebForm with Master Page' in my Project. That's all.

Posted 31-Mar-16 7:27am

gerrey

Updated 31-Mar-16 11:52am

Afzaal Ahmad Zeeshan

v2

Add a Solution

Comments

ZurdoDev 31-Mar-16 13:37pm

Yes, probably use divs. I suggest googling for 2 column layout or find some example of what you want.

F-ES Sitecore 31-Mar-16 13:43pm

You can't learn such a complicated and board thing such as programming a website from asking questions on a forum. Buy a book on asp.net and go through it to learn the basics. That will get you started and when you are stuck you can ask specific questions about specific problems.

Sergey Alexandrovich Kryukov 31-Mar-16 17:36pm

Yes. And you can do it fully in CSS, without using JavaScript. Give one inner div certain length, possibly in %, full remaining room to another one. My approach would be using CSS display "table" and "table-cell", which is a very reliable way. Then one or both cells width can be defined by the width of its inner content, both taking 100% of width.
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-03-31T11:52:00

Please see my comment to the question. This is the simple illustration of the idea:

HTML

<html>
   <head>
      <title>Two-column demo</title>
      <style type="text/css">
         div { padding: 2em; }
         div.debug { border: thin solid red; }
         div.outer { display: table; width: 90%; }
         div.left { display: table-cell; width: 1; }
         div.right { display: table-cell; text-align: center; vertical-align: middle; font-size: 160%; }
      </style>
   </head>
<body>

<div class="outer">
<div class="left"><img src="http://www.codeproject.com/script/Membership/ProfileImages/%7B8b7ec440-05c1-492f-9e09-7d256dbd32d6%7D.jpg"/></div>
<div class="right">I can see you…</div>
</div>

</body>
</html>

Note that I use the class "debug" for debugging. Normally, you don't want to see those red borders. But to check up the layout, you can quickly add them by replacing class="left" and class="right" with class="left debug" and class="right debug".

See also: display — CSS | MDN[^].

—SA