I'm working on a web app (C# backend) project that's similar to a diff tool. In one view, I have two versions of the same text in left and right columns. They will have all of the same section headers, but not necessarily the same text in the paragraphs.
I have this section in a div, and then each column in its own div. A friend suggested that I might be able to use some sort of offset-from-the-top CSS property, but I haven't figured out a way to make that workable. I can't just add a calculated number of new lines (or hardcoded margin adjustments) because each set of data will have different offsets, as well as each screen size.
This is a jsfiddle with a simplified example of what I have: http://jsfiddle.net/#&togetherjs=79sTr7vnDR
I see in your comment you can't split the data up horizontally. Can you add classes to each side, splitting them vertically? For example, could you wrap the <h1>s and their corresponding <p> elements in a <div class="subsection1"> on each side? (I attached a fiddle here with an example)
Because if you can, you could use some jquery to calculate the lowest positions of the same classes on each side and set the vertical offset to be equal to the lowest one, and continue. I'd be happy to help you with an example, but I just want to make sure it's viable before I do :P Hope that helps!
Here's the code I put together.
<div class="side-by-side-wrapper">
<div class="content-block">
<div class="side1">HEre is your header</div>
<div class="side2">Here is your header from the other side.<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
</div>
<div class="content-block">
<div class="side1">HEre is content from block 1<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
<div class="side2">Here is content from block 2 <p>test</p><p>test</p><p>test</p>
</div>
<div class="content-block">
<div class="side1">HEre is footer from block 1<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
<div class="side2">Here is footer from block 2 <p>test</p><p>test</p><p>test</p>
</div>
</div>
And the CSS
.side-by-side-wrapper
{
border: 1px solid red;
overflow: hidden;
}
.side-by-side-wrapper .content-block
{
clear: both;
border-bottom: 1px solid red;
}
.content-block .side1, .content-block .side2
{
float: left;
width: 50%;
}
If you wrap each section (in my example, content-block) in a wrapper, you can use floating and clearing to make them have the same height. I used some generic styles to prove the point, but the core of this functionality is floating with clearing around each pair (left and right side) of content sections.
Related
I have tried various ways to get a vertical scroll bar to show for my GridView when there are to many rows.
I have tried adding a DIV around the GridView and it looks horrible as its padding like 20px away from my GridView. I there a way so when the information is coming from the database when the GridView hits its maximum height (200px) the GridView will have a scroll bar?
I also don't want my Headers and Rows to have really big Heights when i do this because when i tried setting a height for my GridView they went bigger if there was on 1 piece of data.
CODE:
#gv_AcceptedRequests, #gv_PendingRequests, #gv_DeclinedRequests {
position:absolute;
margin-top: 120px;
margin-left: 60px;
width: 480px;
font-family: Arial;
font-size: 12px;
border-color: orange;
overflow: auto;
}
Attempt1:
For some reason the DIV isnt startingat the top of the datagrid?
Can you provide code (html & css) of what you allready made up.
You can place a surrounding DIV around the GridView. The code below places a DIV around your gridview. With a CSS (preferred external CSS file) of overflow-y (shows a vertical scrollbar) and zero padding. If there's still padding left, then there's an issue with the CSS on the page.
<div id='scrolldiv' style='position:absolute;border:1px solid black;height:100px;width:650px;overflow-y:scroll;margin-top:120px;margin-left:60px;'>
<div id='gv_AcceptedRequests' style='position:absolute;width:480px;font-family:Arial;font-size:12px;border-color:orange;overflow:auto;'>
//gridview
</div>
</div>
Please place grid view inside DIV tag and apply style height,width and overflow to DIV.
<div style="height: 100px;overflow:auto">
<asp:gridview id="grid" >
</<asp:gridview>
</div>
Hope this helps
Here is my default browser size.And my QR code is at right place.
When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.
I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.
Here is my code.Thanks in advance.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
</table>px; width: 75%">
<table width= "75%" style="margin-left:1%">
<tr>
<td>
#Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">#TempData["ErrorMessage"]</div>
</td>
<td>
<div id="qrcode" style="width: 200px; display: none">
<img src="#Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('#this.Model.ShortUrl')"/>
</div>
</td>
</tr>
</table>
</div>
Is this what you need?
<div class="container">
<div class="captcha"></div>
<div class="qrcode"></div>
</div>
.captcha{
float:left;
width:200px;
height:100px;
background:#123;
}
.qrcode{
float:left;
width:200px;
height:100px;
background:#456;
}
DEMO: http://jsfiddle.net/fWAg5/
Capta and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!
The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.
So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.
I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.
Here is my default browser size.And my QR code is at right place.
When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.
I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.
Here is my code.Thanks in advance.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
</table>px; width: 75%">
<table width= "75%" style="margin-left:1%">
<tr>
<td>
#Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">#TempData["ErrorMessage"]</div>
</td>
<td>
<div id="qrcode" style="width: 200px; display: none">
<img src="#Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('#this.Model.ShortUrl')"/>
</div>
</td>
</tr>
</table>
</div>
Is this what you need?
<div class="container">
<div class="captcha"></div>
<div class="qrcode"></div>
</div>
.captcha{
float:left;
width:200px;
height:100px;
background:#123;
}
.qrcode{
float:left;
width:200px;
height:100px;
background:#456;
}
DEMO: http://jsfiddle.net/fWAg5/
Capta and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!
The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.
So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.
I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.
The following is the record which I am getting from the database:
"Dear:Thank you for applying to school. We have received your application to the program.As of today,we have received the following for your application:"
I am trying to put the above value into a label. My label looks like the following:
<div id="secondd" style="float:left;width:50%;background-color:#C0D5F2;">
<asp:Label id="valueIntroduction" Cssclass="labelarea" runat="server"> </asp:Label>
<div class="line"></div>
My problem is value is not getting fitted into the label. How to make it as a multi line label?
Here is the HTML that contains this div:
<div id="first" style="float:left;width:50%;background-color:#C0D5F2">
<div id="second" style="float:left;width:50%;background-color:#C0D5F2">
<div id="Introduction" style="float:left;width:100%" class="wote">
Introduction:
</div>
<div class="line"></div>
</div>
<div id="secondd" style="float:left;width:50%;background-color:#C0D5F2;">
<asp:Literal id="valueIntroduction" runat="server"> </asp:Literal>
<div class="line"></div>
</div>
If you want the text to wrap based on the in-line style of your outer <div>, you can change the <asp:label> to an <asp:literal> and use CSS to style the outer <div>.
The difference is that a Literal does not render any HTML markup, whereas a Label will be wrapped in a element. The Literal just inserts the exact text you have, letting your existing HTML and CSS do the styling.
An example of a different style would be:
Less percentage, note 20% instead of 50% for the width attribute:
<div id="secondd" style="float:left;width:20%;background-color:#C0D5F2;">
Or, use a dedicated value of pixels (denoted by the px)
<div id="secondd" style="float:left;width:150px;background-color:#C0D5F2;">
You can even indent the text, using text-indent. I suggest to google some basic CSS and just try different things out, it is the best way to learn.
You just have to play with it to see how it fits in your webpage. Once you get the hang of it, note for future reference that you can use style sheets for this stuff which will make your code cleaner and allow you to create reusable, easily editable styles for your application.
I am writing a webPage using asp.net and c#.
I want to divide my webpage into 2 columns such as in one I will have buttons that change the view in the other column, without "stepping on" the content of the first column.
example:
button 1 | :) a picture...
button 2 |
I tried to use divisions but I think I'm not using them properly.
any help would be great!
thanks!!!
Or code the divs like so:
<div class="wrapper">
<div class="left">
button 1
button 2
</div>
<div class="right">
a picture
</div>
</div>
Then the css is:
.wrapper {
width: 800px;
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 600px;
}
You can change the widths to whatever you want, just make sure that .left width + .right width isn't greater than .wrapper width. Also make sure that the content of the columns doesn't make them wider (i.e. if your picture is wider than 600px, it'll also break the layout).
You might try posting a bit of code so that we can see what is going on. It sounds like a css problem which is more general than asp.net and c#.
if you divide your page to two web page then you use frame in javascript
for it's refrence go to www.w3schools.com
You want a table :)
<table>
<tr>
<td>button 1</td>
<td>a picture</td>
</tr>
<tr>
<td>button 2</td>
<td>...</td>
</tr>
</table>