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
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'm trying to implement a mobile view where the first column of the row goes on top of the second column.
Here's the code:
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/></div></div>
<div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div>
</div>
</div>
Now the thing is, I want the loginpart class to go on top of the col-md-8 when on mobile. I tried searching for answers but ended with nothing. I don't want it to stack on top of each other.
A | B = A goes on top of B
If the implementation or my understanding is faulty, please do educate me. Thanks!
Edit: I tried the push-pull bootstrap function, but all it does is put the second column under the first column (which isn't what I was hoping for), but instead overlap both columns when switched to mobile view, not stacked on top of each other.
Try position absolute with push. You can use Z-index to get the correct column on top.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="position: absolute; z-index: 1;">
<div class="loginpart">
<img id ="icon" src="" />
<h2 style="color: grey;">Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/>
</div>
</div>
<div class="col-md-8 col-md-push-4">
<img id="header" src="" />
<div class="mantra">
<h2 style="color: blue;">Go Wolves!</h2>
</div>
</div>
</div>
</div>
I'm trying to build a page with a lightbox gallery and an included menu down the side. When the menu is included it creates a large space between the gallery rows that I can't remove which goes away when the menu is removed.
<tr>
<td rowspan="10" id="body-text-other">
<span style="float:left;"><?php include("includes/header-store.html") ?></span>
<span style="width: 100px;"><?php include("includes_releasing/store_menu.html") ?></span>
<div>
<p id="body-text-lrg">Pledge Cards</p>
<div class="imageRow">
<div class="single">
<img src="images/art/gallery/Arise-thumbnail.png" alt="" />
</div>
<div class="single">
<img src="images/art/gallery/Reluctance-thumbnail.png" alt="" />
</div>
</div>
<div class="imageRow">
<div class="single">
<img src="images/art/gallery/Correlation-thumbnail.png" alt="" />
</div>
<div class="single">
<img src="images/art/gallery/Dissidence-thumbnail.png" alt="" />
</div>
</div>
Thanks
Welcome to SO. If you could provide more sample code we can take a better look at it. The problem may be that you are using tables and the default padding/margin are making it bigger.
If you could provide a JSFiddle we can help more.
Thanks and goodluck.
http://jsfiddle.net/
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>