I am developing a site with Header, Main Menu, Body and Footer sections.
I am using a web page base layout _Layout.cshtml where I use the RenderPartial() method to render the Header, Main Menu and Footer. For the body, I am using the RenderBody() method.
In _Layout.cshtml I have the following code:
<body style="margin: 0">
<form name="FormStart" method="post" action="Start.aspx" id="FormStart">
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<td valign="top" width="1px"></td>
<td valign="top" align="center" width="972" bgcolor="#FFFFFF">
<table id="Table1" cellspacing="0" cellpadding="0" width="972" border="0" bordercolor="yellow">
<!-- HEADER -->
#{Html.RenderPartial("_Header");}
<!-- MAIN MENU -->
#{Html.RenderPartial("_Menu");}
<!-- CONTENT -->
#RenderBody()
</table>
<br />
<!-- FOOTER -->
#{Html.RenderPartial("_Footer");}
</td>
</tr>
</table>
</form>
</body>
On the other hand, I created a very simple view with the following code
#{
ViewBag.Title = "Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>You just clicked </h3><h1>NATURAL ALOE SECTION</h1>
The thing is, that the content of this simple view is displayed at the very top of the page, whereas the rest is on the bottom. Instead of displaying HEADER-MAINMENU-my site-FOOTER it displays it in the order of my site-HEADER-MAINMENU-FOOTER.
I am quite new with MVC all around; I have been reading here about the possibility of using RenderSection instead of RenderPartial in my main Layout site, but could this be the reason while it is displaying this way? Probably I am way off base, any advice is much appreciated.
Thanks in advance.
This might be happening because you render the header, menu and body inside a <table>. At least the body seems to be missing the row and cell tags (<tr><td>...</td></tr>). Therefore there are no rows and cells in your table which can lead to all sorts of rendering problems.
It would probably help if you didn't render into a table and use CSS for layout purposes instead.
This looks to be nothing to do with the MVC side of what you are doing - that looks perfectly fine.
The issue will be with your HTML. I would suggest having a look at the site using one of the browser developer tools (e.g. in Chrome or IE open your site and press F12) - you can use the features of these to examine how the visual elements on your page relate to the HTML. These tools are invaluable as an MVC programmer.
Using tables to control the layout of a web-page is discouraged in favour of using css for layout. You can find some basic css layout templates via Google to get started.
Related
I'm working in a responsive newsletter and I'm nearly finished. In the last two weeks I read about the issues and things to mess when coding a responsive newsletter.
My newsletter is ready to use and responsive but now I face some problem that I cant solve since two days.
I got an image that is responsive in Outlook:
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
and a table that is also responsive in Outlook:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
MASS-TEXT
</td>
</tr>
</table>
so far so good - it works great. BUT if I put the image in the table it isn't responsive anymore:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
</td>
</tr>
Anybody know a solution for this or know why it isn't working because it works as single elements?
I tried a few things like give the rows and columns a percentage width and so on... nothing working. I just want a responsive table with a responsive image inside working for outlook... someone experience with this?
Dont you think that the max-width should be static and width should be relative i.e. max-width:800px and width:96%;
The below code works well in the standard outlook version. Outlook responsive Image in table working.
<table width="600" >
<tr><td>
<img src="add image link"/>
</tr></td>
</table>
i have a j2ee written with spring framework and we are using tiles for templating.
overtime, developers have created numerous css styles and reuse them all over the jsp pages. for example we created a <table class="tablestyle blue ">, or <select class="style1 style2 style3"> and it is used in multiple pages. the problem i faced is that whenever we create a new table/select, we have to ensure we key in the correct css styles and this is cumbersome.
my question is, is it possible to put this <table> and <select> with its css class styles into a template and reuse it in other templates?
you can have this kind of tile for example it is the table
<table>
<thead>
<tr>
<c:foreach items="${tableColumn}" var="column">
<td><c:out value="${column}"/>
</c:foreach>
</tr>
</thead>
</table>
from the controller you will just put an column attribute to make it more flexible
and the select is all the same right?
<select>
<c:foreach items="${optionItems}" var="option">
<option><c:out value="${option}"/></option>
</c:foreach>
</select>
in this case you could reuse the table and option tile in every jsp you want it.
I am a newbee to selenium webdriver by using python
Below is the configuration:
Selenium WebDriver: selenium-2.40.0(Python bindings)
Python Version : Python 2.7
OS : Windows
I have tried hitting the mentioned control through the xpath and the css selector in my script but was unable to hit that control.I also crosschecked it in the xpath viewer with the xpath, it was showing it there .I also tried to hit the control with the css selector but it was not hitting it.I am able to access other controls that are there on the webpage using css selector and xpath.I have also attached the HTML code with the xpath and css selector syntax i am using in my code.
The Xpath I am using for the script is : find_element_by_xpath("//img[#title='Expand All' and #alt='Expand All']")
The css selector i am using in my script is : find_element_by_css_selector("a[class='lnk1'][onClick*='treeTable(expandAll)']")
<table width="" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td width="">
<a class="lnk1" onfocus="" onclick="this.style.cursor='wait';document.body.style.cursor='wait'; return doTblAjax('WTableForm_453ea28b', 'action_453ea28b', 'treeTable(expandAll)', 'tableTop_453ea28b', 'action_453ea28b', 'wh', 'wa', event);" onblur="" href="/hmc/bonsai/action/T56?wh=action_453ea28b&action_453ea28b=treeTable%28expandAll%29×tamp=144e404faf0#tableTop_453ea28b">
<img class="tbl9" width="32" border="0" align="top" height="32" title="Expand All" src="/wclres/wcl/images/tretbl1.gif" role="button" onmouseover="className='tbl10'" onmouseout="className='tbl9'" alt="Expand All">
</a>
Try with this CSS Selector
The Safe Method css=div.someClass'] a[contains(#onclick,'treeTable(expandAll)')] > img
This will be serving as unique xpath for Expand Button.
Thanks!
I'am currently creating a MVC Java Web App with Struts2.
One element of my app is searching for some results via form. When the user submits the form an Action gets the necessary values from the database and populates a Map:
Map<Integer,List<String>> values = new HashMap<Integer,List<String>>();
Which has a list of column values for each row.
By Following this approach I can have generic JSP for displaying the results of any resultbox:
<s:div cssClass='resultContainer'
cssStyle=' min-height: 150px; max-height:%{header}px; overflow: auto; %{display}; '
theme="qxhtml">
<table id='resultTable'>
<tr id='tableHeader'>
<s:iterator value="headers">
<th><s:property /></th>
</s:iterator>
</tr>
<s:iterator value="values">
<tr class='results'>
<s:iterator value="value">
<td><s:property escape="false" /></td>
</s:iterator>
</tr>
</s:iterator>
</table>
I feel now that this is a bad approach. Instead I should change the Map to a List of ResultBoxRow objects. Each ResultBox will have its own View Jsp instead of one generic one allowing me to iterate over the objects and output for example:
<s:iterator value="value">
<td><s:property name="firstname" /></td>
<td><s:property name="lastname" /></td>
etc.
In the case of the table headers I may need to give certain headers individual style properties. I feel these should be defined in the JSP itself rather than get the JSP to reference a value from the controller containing the style for that header.
I think my overall question is how much should the controller control the style/display of elements of the View? I feel it should just generate the individual elements displayed in the tags but not the values to put in the "style" tag of the row for example. Even if this does sacrifice a simple single JSP to handle every result box.
It would be great to get your opinions.
The controller should have nothing to do with the display mechanism: that's the point of MVC, to completely separate the data from its presentation.
You can still DRY up the view layer via custom tags, includes, templates, etc. Styles may be passed as attributes, while the underlying DOM would be created by a single page or template.
It also matters what the nature of the attributes you want to pass. If they're semantic that could logically from from the model or controller that's fine. If they're purely presentational, like colors, widths, etc. then it has no business in the model or controller.
Is it possible to have an image automatically embedded in an email, which when opened on a Blackberry will show by default without the user having to open it seperately?
I'm constructing a HTML email eshot that will be opened on Blackberry devices with the below HTML:
<html>
<style>
body {background-color: Black; color: #fff;}
</style>
<body>
<table align="center" cellpadding="4" cellspacing="4">
<tr>
<td><img src="cid:Eshot.jpg" /></td>
</tr>
</table>
</body>
</html>
This works when viewed Outlook but I'm not sure whether I can get it to render on Blackberry devices without it effectlvely being an attachment. I'm aware that Blackberry devices handle HTML emails in there own unique way, but the client it is being produced for has apparently had emails in the past where it has been embedded but I'm not sure what I can do if anything to force this.
I had a similar problem. You can find here how I solved it and try if it fits your needs. Shortly, you need to convert the image in a bytestream and include it in your html body as:
... <img src="data:image/bmp;base64,gzfddr56utggtlytlgg....jigkgfjytdjyr"></img> ...
where:
gzfddr56utggtlytlgg....jigkgfjytdjyr
is the encoded image bytestream.