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>
Related
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.
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.
I have a list view with 10 columns and I want each row to be the exact same size.
The problem is that while the 9 columns are made up of 1-2 words, 1 columns can be made up of an unknown amount of words meaning the format of each row will be different, therefore screwing up the view.
I have tried formatting the odd column's <td> like width="200" height="50" style="overflow:scroll" but still, that shows the scrollbars (including on cells which don't need it) and it is actually still expanding the height to accommodate all text (the scrollbars are visible but not usable)
How to format that cell to be the same for each row?
overflow:auto will only show scroll bars when they are needed
table-layout:fixed will stop your cells resizing
Also overflow-y:scroll;overflow-x:hidden for CSS3 depending what support. I know it works on IE8 and firefox, chrome etc. But these allow you to specify just vertical scroll
If you are looking for wrapping the text, the you can do that using CSS. Apply the CSS class to your .
Allow long words to be able to break and wrap onto the next line:
.wrapText {word-wrap:break-word;}
or
.wrapText {word-wrap:normal;}
normal - Break words only at allowed break points break-word - Allows unbreakable words to be broken
Eg.
<td class="wrapText"></td>
OR
<td style="word-wrap:break-word;"></td>
First set-up your table:
table
{
width: 0px;
table-layout: fixed;
}
The 0 pixel width will be ignored because we'll specify a width for the cells but it's needed to make the fixed layout work (as alternative you may use the right width). Then you have to apply some formatting to the cells:
table td
{
width: 200px;
height: 100px;
}
table td div
{
width: 200px;
height: 100px;
overflow: auto;
}
And your cell must be like this:
<tr>
<td></td>
<td><div>Here the long content</div></td>
</tr>
Set overflow: hidden to truncate the text when it overflow actual height
try this
<table border="1" style="height:50px;width:200px;table-layout:fixed">
<tr>
<td style="height:50px; width: 100px;">
Test
</td>
<td style="height:50px; width: 100px;overflow:hidden;border-collapse:collapse;" nowrap>
<nobr> This is a long tex to show how the cell trancate a text, can you see it ?</nobr>
</td>
</tr>
</table>
The easiest way around this an asp:TextBox it seems, just created so it looks like a label.
All of the answers above work on an individually created table but I'm just not too familiar with the listView format and probably not setting something somewhere right.
I have a <td> like this
<td valign="middle" class="table_td td top" style="width: 347px">
<div id="Style" style="position:absolute;">
<img src="images/additional-keywords-image.gif" style="background: middle right;">
</div>
<span class="feature_text" style="cursor:pointer;" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)" id="a1"> Featured Merchant Ad </span><br />
<span class="feature_text_small">(Merchant Ad in Home Page,<br /> for valuable Site Exposure)</span>
Div id="Style" has image bigger than the <td>. AIm is to show the image in div when the moveover happens on the first span. The image shows up fine. But, i want the vertical center of div picture to be at the span with id= "feature_text" and has text "Featured Merchant Ad". I have tried but could not succeed. Where am i doing wrong?
I am not sure if i understod your question correctly, if you want to center the image in the div#style
You dont need this in img
style="background: middle right;"
Try
style="margin:auto;";
and adding this to div#style (div with id style)
style="vertical-align:middle; text-align:center;
Try with:
<div id="Style" style="position:absolute;">
<img src="images/additional-keywords-image.gif" style="background: middle right; position: relative; top: -20px;">
</div>
You are gonna have to play with the top value to get the vertical centering just right (the amount depends on the height of img).