I am devoloping a struts 2 project in which layout page is creating an unwanted border over it. I tried to remove it by putting padding and border as 0 px. but still it is coming.
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:insertAttribute name="title" ignore="true" /></title>
<%-- Internal style elements --%>
<style type="text/css">
.basestyle { /*style which is given for the main DIV which includes entire base layout body */
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}
.headstyle { /* style which is given for the DIV which includes header part */
margin:0px;
width: 100%;
height: 10%;
vertical-align: middle;
text-align: center;
background-color: #476D9E;
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}
.vericalscroll { /* style which is given for the DIV which includes vertical menu part */
overflow-y:auto; overflow-x:hidden;
height:100%;
width:153px;
background-color: #476D9E;
vertical-align:top;
margin-right:1px;
padding-right:5px;
}
.bodystyle { /* style which is given for the DIV which includes body part */
padding: 0px,0px,0px,0px;
border-bottom:0px;
border-left:0px;
border-right:0px;
border-top:1px #DBDFEC;
font-family: Calibri;
font-weight: lighter;
height:565px;
overflow-y: auto;
overflow-x: auto;
width:100%;
/*text-align: center;*/
}
.footstyle { /* style which is given for the DIV which includes footer part */
width: 100%;
background-color: #476D9E;
height: 10px;
bgcolor:#eeeeee;
vertical-align: middle;
text-align: center;
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}
</style>
</head>
<body >
<div class="basestyle" >
<div class="headstyle" >
<tiles:insertAttribute name="header" /> <%-- including header --%>
</div>
<table border="0" width=100% height=87% style="margin: 0px; padding: 0px;">
<tr>
<td width=153 align="left" valign="top">
<div class="vericalscroll" >
<tiles:insertAttribute name="menu" /> <%-- including menu --%>
</div> </td>
<td valign="top" align="left" width=88% >
<div class="bodystyle" align="center" >
<tiles:insertAttribute name="body" /> <%-- including body --%>
</div> </td>
</tr>
</table>
<div class="footstyle" >
<tiles:insertAttribute name="footer" /> <%-- including footer --%>
</div>
</div>
</body>
</html>
Red color background is given for identifying body part
remove "border-top:1px #DBDFEC" from ".bodystyle" and even instead of all border in your .bodystyle just write border:none;
although i could not see the border in your attached image.
Add this option in the tile tag theme="css_xhtml". Then it will be simply treated as HTML tag in view.
Related
I`m having this issue when I am viewing the email using Gmail App (Mobile):
The table columns are stacking on mobile on all email clients except the Gmail App
I noticed that the styles are not working on google, but if i put the CSS using inline (Ex. style="background-color:red") it works.
I saw a lot of articles saying that the does not works on gmail, but another saying that works if you put it inside the tag.
Main Layout:
#using Sitecore.Mvc.Analytics.Extensions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<!-- Used for storing title of the email -->
#Html.Sitecore().Field("Subject")
</title>
<!-- The VisitorIdentification control ensures that people viewing this page with a traditional web browser will be classified as humans not bots. This control is not required if people only view messages using Email clients -->
#Html.Sitecore().VisitorIdentification()
#if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<link href="~/Assets/5-Components.min.css" rel="stylesheet" />
}
<style type="text/css">
body {
margin: 0px !important;
padding: 0px !important;
}
.wrapper > tbody > tr > td {
box-sizing: border-box;
}
##media only screen and (max-width:720px) {
.wrapper {
width: 90% !important;
margin: auto;
}
.templateColumnContainer {
display: block !important;
/* padding: 0 !important; */
width: 100% !important;
}
.marginBtm {
margin-bottom: 0px;
}
.footerLeft {
border-right: 5px #c2c2c2 solid;
border-bottom: 0px #c2c2c2 solid !important;
}
.footerRight {
border-left: 5px #c2c2c2 solid;
border-top: 0px #c2c2c2 solid !important;
}
}
</style>
</head>
<body style="min-height: 97vh; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box" class="#((Sitecore.Context.PageMode.IsExperienceEditorEditing) ? "edit-mode" : string.Empty)">
<div style="min-height: 97vh; margin:0; padding-top: 16px; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box">
<center>
#Html.Sitecore().Placeholder("mail-body")
</center>
</div>
</body>
</html>
Component Placeholder:
#model XX.Project.EXM.Models.ColumnComponent
<table width="600" cellpadding="0" cellspacing="0" class="wrapper">
<tbody>
<tr>
<td width="50%" class="templateColumnContainer marginBtm" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-left-double-column")
</td>
<td width="50%" class="templateColumnContainer" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-right-double-column")
</td>
</tr>
</tbody>
</table>
When GMail encounters an error in your CSS, it will remove the entire <style> block from the head.
You have 2 # symbols in front of your media query.
##media only screen and (max-width:720px) {
I have three boxes/containers on a single row of my webpage.
The first box, the blue box is 2px away from the browser edge on the left, while the last box, the purple box is 2px when I inspect element.
image of boxes
However it does not look like this on the web page and looks uneven:
http://jamesbsite-com.stackstaging.com/
I have read all about the box-model but I am still unable to get equal spacing even though I have set a 2px margin on both the left and right.
Please advise as to what is causing this?
The .call-outs-container is the parent container and the .call-out is the child
and they are being applied to these divs:
#
amendment
complete code below
#
<!doctype html>
<html>
<head>
<title>James' page!</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
hr {height:1px; border:none; color:#000; background-color:#000;}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited{
color:green;
}
body { margin: 0;}
.ClearFloat {
clear: both;
}
.call-outs-container
{
max-width: 2000px;
margin: 1px 1px 1px 1px
}
.call-out {
padding: 5px;
margin-left: 2px; margin-top: 40px; margin-right: 2px; margin-bottom: -5px;;
width:30%;
float:left;
}
.call-out:nth-child(1) {background-color: #c0dbe2;}
.call-out:nth-child(2) {background-color: #cdf1c3;}
.call-out:nth-child(3) {background-color: #ccb9da;}
.call-out:nth-child(5) {background-color: #c0dbe2;}
.box{
border:10px solid #CC3F85;
width:400px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/NkyEOrQiGMQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen target = "test1"></iframe>
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Feature2</h4>
<p>Nanking</p>
<p>new tab</p>
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
<div class = "ClearFloat"></div>
<div class="call-out">
<h1>James's page!</h1>
</div>
</div>
<div class = "ClearFloat"></div>
<h2>A few facts about me</h2>
<img src="me.jpeg" width="400">
<p>I like web desigm.</p>
</body>
</html>
div{
text-align:center;}
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 50px;
margin: 20px;
float: right;
}
</style>
</head>
<body>
<div>Welcome Page</div>
<div>Welcome Page2</div>
</body>
</html>
I would recommend using flexbox in this situation. It will make controlling things much easier. No need for float.
First, you need to add display: flex to .call-outs-container.
Next, specify that the items will fill the axis evenly by adding flex: 1 1 0 to .call-out
.call-outs-container {
display: flex;
}
.call-out {
padding: 5px;
margin-right: 2px;
flex: 1 1 0;
/* margin-left: 2px;
margin-top: 40px;
margin-bottom: -5px;
width: 30%;
float: left; */
}
.call-out:nth-child(1) {
background-color: #c0dbe2;
}
.call-out:nth-child(2) {
background-color: #cdf1c3;
}
.call-out:nth-child(3) {
background-color: #ccb9da;
}
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Nanking</h4>
new tab
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
</div>
I am programming a website for work (have almost no coding experience, so I might be missing crucial info - will update as needed). DOCTYPE html Public, link href="includes/style.css" rel="stylesheet" type="text/css" media="all"
<div id="main">
<table border="1" style="width:100%">
<...>
</table>
</body>
</html>
</div><!--#main -->
I've set up a table of names using following formatting in the .html doc:
<div id="main">
<table border="1" style="width:100%">
<...>
</table>
</body>
</html>
</div><!--#main -->
Now, in style.css, tables are defined as follows
table.hist-table {
width:98%;
border: 1px solid #CCC;
font-size:12px;
border-spacing:0px;
}
.hist-table tr{
border:1px solid #CCC;
}
.hist-table .row1 td {
padding: 4px;
margin: 3px;
border: 0px solid #ccc;
vertical-align: text-top;
background-color: #eff0f1;
}
.his-table th {
padding:4px;
text-align: left;
background-color: #00274c;
color: #FFF;
font-weight: bold;
}
#header {
margin-top: 30px;
clear:both;
background: #536a93;
background: #00274c;
padding: 0px 0 10px 60px;
margin: 0 4.6%
font-size: 11px;
max-width: 1000px;
}
For some reason, when opening the .html webpage, the table does not include a border, so it is very difficult to distinguish the rows of text from one another. Does anyone have a possible solution?
You're .html document should be set up as follows,
<...DOCTYPE etc...>
<html>
<head>
</head>
<body>
<div id="main">
<table>
Table contents...
</table>
</div>
</body>
</html>
This is because your tags should encompas almost all of your document. The and tags should both be encompased by the tag. Then within your tag should be all of your external links to your css files, external fonts etc.
Inside of your tag should be all of the , , and all of the other tags.
I hope this helps. I may not have understood all of your points but it looks the be the arrangement of your html document that is the problem. :)
Hi I am developing a Resume in HTML. I am having problem with my inline-block as both the div that are required to be placed with each other using inline-block are not showing the expected results one of the div slightly moved downwards.
It seemed to be some sort of positioning issue but I am unable to figure it out.
The div are concerned with S-boxes and L-boxes style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8/>
<title>HELLO STRICT</title>
<style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
display: block;
}
h1{
color: #906;
font-family: "Arial Black", Gadget, sans-serif;
margin-bottom: 0px;
}
h4{
margin-bottom: 0px;
margin-top: o;
}
<style>
time
{
font-style: italic;
}
li {
padding-left: 0px;
text-indent: 0em;
}
div.S-boxes{
width: 200px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
text-align: right;
}
div.L-boxes{
width: 500px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
}
p.inbox{
margin-top:16px;
}
</style>
</head>
<body>
<h1>Muhammad Qais</h1>
<div>
<ul style="list-style: none; padding-left: 0px;">
<li>Village Sooj Bahadar, P.O. Mandra.
<li>Tehsil Gujarkhan
<li>District Rawalpindi
<li>Pakistan
</ul>
<table>
<tr>
<td>
<img src="Telephone-icon-1-.gif" width="27" height="27">
</td>
<td>
: +92-347-9714967
</td>
</tr>
<tr>
<td>
<img src="letter_closed.png" width="27" height="27">
</td>
<td>
: muhammadqais32#yahoo.com
</td>
</tr>
</table>
</div>
<div class="S-boxes">
<h4>Objective</h4>
</div>
<div class="L-boxes">
<p class="inbox">Seeking a challenging opportunity where I will be able to utilize my strong organizational skills, educational background, and ability to work well with people, which will allow me to grow personally and professionally. I am self-motivated and able to work both independently and as collaborative team member.</p>
</div>
</body>
</html>
display: inline-block; helps us here to render two square gray boxes next to each other. Awesome, right? However, with varying content, we need to add the property vertical-align: top to make sure everything is aligned to the top.
div.S-boxes{
width: 200px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
vertical-align:top;
text-align: right;
}
div.S-boxes{
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div.L-boxes{
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place.
I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below?
Here's my HTML code:
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
Here's my CSS code:
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}
Try closing your BODY and HTML tags? Also, doctype "htmls"?