I am trying to put two banners on top of a navigation bar with everything nicely centered. I can get the two banners to nicely sit by one another but when I make the browser window smaller the first banner goes on top of the second!
Is there a code where I can prevent this? If so please let me know.
This is what I have so far:
<center>
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
<BR>
You can set a min-width on the container of the banners.
Edit based on your comment:
<center> <!-- *shudder* -->
<div style="min-width: 860px;"> <!-- inline only for example purposes -->
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
</div> <!-- ditch the BR -->
...
</center>
Related
I have set up a simple table on my website - I used HTML code for the table - but I cannot figure out why the padding isn't working - I am using CSS and JS for the modal (I am a beginner). I even set the padding to 1000 and it doesn't do anything - the images stay right next to eachother. Here is my code:
<table width="500" border="0" cellpadding="5">
<tr>
<td align="center" valign="center">
<img id="myImg" src="table/first time home buyer.jpg" alt="First Time Home Buyer Ontario" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>First Time Home Buyer Program<b>
</td>
<td align="center" valign="center">
<img id="myImg" src="table/renewing your mortgage.jpg" alt="Renewing Your Mortgage" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>Renewing Your Mortgage<b>
</td>
<td align="center" valign="center">
<img id="myImg" src="table/guide to getting a mortgage.jpg" alt="Guide to Getting a Mortgage in London Ontario" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>Guide to Getting a Mortgage<b>
</td>
</tr>
</table>
If anyone could offer any suggestions it would be much appreciated.
Thank you
For table you can't give padding., for 'div' and other element such as "P, span" you can give padding. For table use cellpadding. (If you want to see just put border value as 1 then you can see padding with border.)
I would suggest you to set margin for the table rather than padding and i hope that it might work...
Yes use margin rather than padding and visit this site to know more about them:
http://www.htmldog.com/references/css/properties/padding/
I have put a banner at the top of my website and I have tried to add a hyperlink to the whole div as follows:
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;">
It doesn't work but you can see it here: http://www.heavenlygardens.org.uk/maps/6/index3_new.html
Any ideas?
To achieve expected result,use below option
1.Stack banner front using z-index:9999
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;z-index:9999">
This works for me:
<div onclick="location.href='http://www.google.com/';" style="cursor:pointer;">
<img src="//path-to-image.jpg" alt="description of image" />
</div>
However, unless you have a good reason for doing this in JavaScript, plain HTML would be a better option.
<a href="http://www.google.com">
<img src="//path-to-image" alt="description of image"/>
</a>
I would like my div be clickable. but I have tested multi ways that is possible, but it doesn't work fine :
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
Your html is wrong Please used to this
and define your a tag display inline-block;
a{display:inline-block;vertical-align:top;}
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
2nd option is your can used to this valid HTML
#mob_link a{display:block;}
<div id="mob_link" class="home_right_banner_mob">
<a href="https://www.telegram.me/shadyab_deal">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</a>
</div>
Wrapping block level elements with links is allowed in HTML 5. Just do this.
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
In Chrome image and the text link is aligned properly. However, when I check it on IE8, I noticed that image and text link is not align properly.
Here is the code I use. this is a code I use in Wordpress wpfilebase templates.
<td style="width:350px;padding-left:20px;">
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
</a>
<span style="width:200px;float:right;vertical-align:text-top;">
%file_display_name%</span>
</td>
Chrome renders properly, but not IE. How to fix this? If I need to use conditional CSS for IE, what is the correct code for IE?
Your 'span' tag closes before you close your 'a' tag. Corrected Code:
<td style="width:350px;padding-left:20px;">
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
</a>
<span style="width:200px;float:right;vertical-align:text-top;">
%file_display_name%
</span>
</td>
Try this,
<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
</a>
<span style="width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
%file_display_name%<!--anchor tag should be closed here-->
</span>
</td>
Use padding-left in span element and remove float property from it.
Using div tag instead of span, solved my issue.
<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
<div style="float:left;"><a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
</a></div>
<div style="max-width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
%file_display_name%<!--anchor tag should be closed here-->
</div>
</td>
I have an instance of CKEditor running to edit small parts of a website. The original HTML is:
<div class="slide slideleft">
<a href="#" class="slidelefta">
<img src="img/left.png" alt="previous" />
</a>
</div>
<div class="slide slidemid noauto" style="height: auto; text-align: center;">
<a href="#" class="sliderighta">
<img src="img/main_item.png" alt="item" />
</a>
</div>
<div class="slide slideright">
<a href="#" class="sliderighta">
<img src="img/right.png" alt="next" />
</a>
</div>
now, when I load it into CKEdit (inside a <textarea>, all correctly encoded with PHP's htmlspecialchars() method), it replaces all my carefully crafted DIVs and styles with the following:
<p><img alt="previous" src="img/left.png" /></p>
<p><img alt="burg.ring1" src="img/main_item.png" /></p>
<p><img alt="next" src="img/right.png" /></p>
which of course totally ruins the page's layout. Can CKEditor somehow be set to not do that?
Thank you!
Since CKEditor 4.1 the Advanced Content Filter feature is enabled. You need to configure it in order to have your HTML passing the validation. See my previous answer here: CKEditor strips inline attributes.