I have created a jsfiddle here:
http://jsfiddle.net/sawaira/owkvq9bo/8/
<table>
<tr>
<td class="navbar-text">RunAs:</td>
<td>
<input type="text" id="RunAs" class="form-control" value="" onchange="onchangeRunAs()" onkeypress="searchKeyPress(event)" />
</td>
<td>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">
</li>
<li>
Sign out
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="float:left; background-color:#222222; height:100%; width:70px; position:fixed;">
<br />
<center><img src="../../Content/images/.png" title="abc" /></center><br /><br />
<center><img src="../../Content/images/time.png" title="adfa-Balance" /></center><r />
/>
/>
</div>
</div>
<div class="container body-content" id="content" style="margin-left:70px;width:1700px">
<table cellpadding="0">
<tr valign="bottom">
<td><img src="../../Content/images/cal48.png"></td>
<td><h2><span class="label label-primary">My Personal Dashboard</span></h2></td>
</tr>
</table>
<body>
<div >
<!-- This is the HTML element that will be used to render the KeyLines component -->
<div id="page" class="pagestyle">
</div>
<div style="position:relative;height:700px; width:1500px;">
<div id="loading" style="position:absolute;height:700px; width:1200px;">
<marquee id="loading-image" behavior="alternate" scrollamount="30">Initializing</marquee>
</div>
<div id="kl" style="position:relative;height:700px; width:1200px;float:left;border: 2px solid #0094ff;overflow:hidden" class="listControl" >
<div style="clear:both;"></div>
</div>
Essentially, on scrolling the blue borders overlap with the nav bar. I do not want this to happen, but not sure what is the cause.
I cannot change the height/width to be auto, as it has to meet some requirements.Otherwise the page does not display the contents properly.
All help will be greatly appreciated.
Related
Every time I try to add an id to an image in my html script, for my google site, and save the changes it disappears from the html script. Here is an example of what I want:
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto">
<table cellspacing="0">
<tbody>
<tr>
<td style="background-color:rgb(243,243,243);width:320px;height:131px"> Welcome!<br>
<hr style="color:#f3f3f3;background-color:#00b0f0;height:2px;width:100%">
<ol><li>Introduction</li>
<li>Contacts & Their Roles</li>
<li>Regular Tasks & Deadlines</li>
<li>Priorities/Initiatives of 2017</li>
<li>AMERA Finance & Accounting Guidelines</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto"><br>
</div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto"><img id="intro" border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center"></div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto">
<div style="text-align:center"><br>
</div>
<img id="contacts" border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center">
<div></div>
<br>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto"></div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto">
<div style="text-align:center"></div>
<div style="text-align:center">
<div style="text-align:left">
<img id="tasks" border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center"></div>
<div style="text-align:left"><br>
</div>
</div>
<img id="initiatives" border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center">
<br>
</div>
<br>
<div><br>
</div>
</div>
The issue is that when I enter that into my html script it comes out as this:
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto">
<table cellspacing="0">
<tbody>
<tr>
<td style="background-color:rgb(243,243,243);width:320px;height:131px"> Welcome!<br>
<hr style="color:#f3f3f3;background-color:#00b0f0;height:2px;width:100%">
<ol><li>Introduction</li>
<li>Contacts & Their Roles</li>
<li>Regular Tasks & Deadlines</li>
<li>Priorities/Initiatives of 2017</li>
<li>AMERA Finance & Accounting Guidelines</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto"><br>
</div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto"><img border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center"></div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto">
<div style="text-align:center"><br>
</div>
<img border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center">
<div></div>
<br>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto"></div>
<div style="text-align:left;display:block;margin-right:auto;margin-left:auto">
<div style="text-align:center"></div>
<div style="text-align:center">
<div style="text-align:left">
<img border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center"></div>
<div style="text-align:left"><br>
</div>
</div>
<img border="0" src="https://sites.google.com/imagelink" style="display:block;margin-right:auto;margin-left:auto;text-align:center">
<br>
</div>
<br>
<div><br>
</div>
</div>
I don't know why it does this, I am probably making a basic mistake and could really use any help!
I have solved the issue with the help of a friend. To solve this issue you just add a section before your <img> with <a name="anchorname"></a>. As an id="anchorname" doesn't work in Google Sites.
Then you just need to make the hyperlink for this section be https://sitename.com/pagename#anchorname
Hope this helps anybody needing the answer to my previous question.
I took our signature desing and turned it to a HTML code with my amateurish skills.
But when i put it to outlook, it looks broken.
Can someone show me how to do it or directly fix my code?
<div style="float:left;" id="renlogo">
<img src="http://i.imgur.com/bs6yRbO.png">
</div>
<div style="float:left;" id="colorline">
<div class="green" style="background-color: #67b32e;width: 4px; height: 52px;">
</div>
<div class="pink" style="background-color: #e61e47;width: 4px; height: 52px;">
</div>
<div class="blue" style="background-color: #51bec7;width: 4px; height: 52px;">
</div>
<div class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;">
</div>
</div>
<div id="card" style="float:left;margin-top:20px;margin-left:12px;">
<div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
Burçak ÇELİK
</div>
<div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
Co-Founder & Managing Partner
</div>
<br/>
<div>
<div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
</div>
<div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">E-mail:</span> burcak.celik#renunion.com
</div>
<div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Website:</span> http://renunion.com
</div>
<div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
</div>
</div>
Fiddle: https://jsfiddle.net/m46zx0oc/
<table>
<tr>
<td>
<div id="renlogo">
<img src="http://i.imgur.com/bs6yRbO.png" width="159" height="208">
</div>
</td>
<td>
<table style="border: none;
border-collapse: collapse;
padding: 0;
margin: 0;">
<tr>
<td class="green" style="background-color: #67b32e;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="pink" style="background-color: #e61e47;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="blue" style="background-color: #51bec7;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;"></td>
</tr>
</table>
</td>
<td>
<div id="card" style="margin-top:20px;margin-left:12px;">
<div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
Burçak ÇELİK
</div>
<div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
Co-Founder & Managing Partner
</div>
<br/>
<div>
<div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
</div>
<div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">E-mail:</span> burcak.celik#renunion.com
</div>
<div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Website:</span> http://renunion.com
</div>
<div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
</div>
</div>
</div>
</td>
</tr>
</table>
Instead of using float:left, use table instead. Outlook does not really handle float pretty well. Note that I added an extra <td></td> to create extra margin, feel free to add more for extra spacing.
Edit: Fixed the vertical colorline in Outlook. Also used a table for this to make it.
So I have this code:
<body bgcolor="#FFF">
<table class="body-wrap">
<tr>
<td class="container">
<div class="content">
<div id="logo">
<img src="https://example.com/images/pic.png" />
</div>
<form action=""style="text-align:center;">
<input type="button" value="News"> <input type="button" value="Twitter"> <input type="button" value="Issues"> <input type="button" value="Info">
</form>
<td class ="container">
<div class="content">
<div id="feed"></div>
<img src="http://example.com/images/icon_twitter.png" alt=""> Follow us on Twitter
</div>
</td>
<td class ="container">
<div class="content">
<div id="feed"></div>
<img src="http://example.com/images/icon_twitter.png" alt=""> Follow us on Twitter
</div>
</td>
</div>
</td>
</tr>
</table>
</body>
And I need a way switch between the two containers that are next to one another by clicking the buttons News and Twitter. (I have intentionally left them identical for this example) Later I will add containers for Issues and Info as well. If anyone knows how to do this I would appreciate it if you would tell me. I'm fairly new to HTML so if you could keep your explanations simple that would help as well. Also I would prefer to keep all the code in one HTML file
I have html script as below
<header>
<div id="header">
<table class="headertable">
<tr>
<td>
<table class="headertable">
<tr>
<td colspan="2">
<div id="site-title" class="site-title">
<img src="~/Images/site-title.gif" alt="site-title", title="site-title" id="img-site-title" style="display:block" />
</div>
</td>
</tr>
<tr>
<td>
<div id="fullbannerad" class="fullbannerad">
<img src="~/Images/fullbanner.gif" alt="fullbannerad", title="fullbannerad" id="img-fullbannerad" />
</div>
</td>
<td>
<div id="halfbannerad" class="halfbannerad">
<img src="~/Images/halfbanner.gif" alt="halfbannerad", title="halfbannerad" id="img-halfbannerad" />
</div>
</td>
</tr>
</table>
</td>
<td>
<div class="site-logo">
<img src="~/Images/site-logo.gif" alt="site-logo", title="site-logo" id="img-site-logo" />
</div>
</td>
</tr>
</table>
</div>
</header>
below is the css
table.headertable {
border-spacing: 0;
border-collapse:collapse;}
.headertable td {
padding:0;}
There is a space added between td & table(nested table) elements to the page in the code below (this I checked in chrome debugger)
<td>
<table class="headertable">
How can I resolve this issue? Please suggest.
Extra whitepsace in your document should be ignored by the browser. If you having problems with your page layout, it won't be due to extra spaces in that position.
I resolved this issue by making use of nested divs with float property. HTML5 does not encourage nested tables for layout design. Ref to this link for more details. Thanks Jennifer, you made my day.
Below is my code changes
<div id="header" class="clearfix">
<div id="sitetitle" style="float:left">
<a href="/Publication/Config/title">
<img src="/images/site-title.gif" alt="site-title" , title="site-title" id="img-site-title" />
</a>
</div>
<div id="logo" style="float:right">
<a href="/Publication/Config/logo">
<img src="/images/site-logo.gif" alt="site-logo" , title="site-logo" id="img-site-logo" />
</a>
</div>
<div id="bannerad" style="float:left">
<a href="/Publication/Config/fullbanner">
<img src="/images/fullbanner.gif" alt="fullbannerad" , title="fullbannerad" id="img-fullbannerad" />
</a>
</div>
<div id="halfbannerad" style="float:right">
<a href="/Publication/Config/halfbanner">
<img src="/images/halfbanner.gif" alt="halfbannerad" , title="halfbannerad" id="img-halfbannerad" />
</a>
</div>
</div>
attached is an image.
I am trying to get the text format as shown at the right-most end. i.e. within the height of the thumbnail (36px) name, time, date have to be shown vertically aligned. I am having problem showing the text vertically aligned. Here's my code -
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div id='name' style="float:right; font-size:11px">Peter</div>
<div id='time' style="float:right;font-size:11px;">19:23</div>
<div id='date' style="float:right;font-size:11px;">23 Dec'10</div>
</div>
</div>
To be accurate, I want the div ids 'name', 'time', 'date' to be aligned like in the image. how?
Also note that the div with id="0" is one of the results, there'll be 10 such in a page all under <div id="sresults">
Here's what you want: http://www.bravegnuworld.com/rjune/test.html
Notice encapsulating the name, etc in a div that is floated right? You have three divs(block elements, they'll automatically stack). Put those inside another div, and you now have a block element with three stacked blocks inside it. You can either use "float:right" or "display:inline-block" to make the div display on the same level. as the rest of the line.
<div id="sresults" style="position:absolute;top:120px; left:36%; background:yellow">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both; background:red">
<div id="content0" style="float:left; font-size:13px; background:blue">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right; background:green">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div style="float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
You can use table instead of div it's seems more logical to me:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<table id="meta0" style="float:right;">
<tr>
<td>
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"/>
</td>
<td style="text-align:right;">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</td>
</tr>
</table>
</div>
</div>
UPD
Here is code with divs:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="id0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts' style="float: left;"/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter" style="float: left;"/>
<div style="text-align:right; float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
</div>