i have a side by side banner code ,the work fine on Firefox.IE,opera,. but not work on google chrome how do i solved this problem ?
<table border="0" width="100%">
<tr>
<td>my Banner</td>
<td> </td>
</tr>
</table>
Take them out of the table, and use CSS to float:left;each banner, inside a container div. As long as their width allows it, they should line up side by side, in Chrome as well.
using your example:
<div id='container'>
<img src='banner1.png' style='float:left;' />
<img src='banner2.png' style='float:left;' /></div>
The best way would be to use a .css stylesheet and a banner class to separate your html from your css, but this is just an example to get you started :)
EDIT: I don't use inline javascript really, ever..so this is just a guess if you can do this or not, but it's worth a try.
<div id='container'><span style='float:left;'>
<script language='JavaScript' type='text/javascript'
src='zarclick.ir/banner.php? uname=pitgo&type=2&rows=1' >
</script></span><span style='float:left;'><script language='JavaScript'
type='text/javascript' src='zarclick.ir/banner.php? uname=pitgo&type=2&rows=1'
></script></span></div>
Might work, I'd try it if I needed to do it.
You should read this tutorial on how to create tableless layouts as this is the standard used for web 2.0 pages. You should always seperate the content from the layout in your web page, which means that your HTML file/s should only display the content, while the CSS file/s will contain the layout, and the JS file/s will contain the HTML manipulation scripts.
http://webdesign.about.com/od/css/a/aa102102a.htm
Related
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I am really struggling to use css to make a new homepage for my smugmug website.
I've managed to get this done:
<html style="height:100%">
<body style="height:100%;margin:0;">
<table style="height:100%;width:100%;vertical-align:middle">
<tr>
<td>
<div style="width:100%;text-align:center">
<span style="display:inline-block">WEDDINGS</span><span style="display:inline-block;padding:0 100px">PORTAITS</span><span style="display:inline-block">COMMERCIAL</span>
</div>
</td>
</tr>
</table>
</body>
</html>
and I want to be able to add a link to each word selection. I can't get my head around it, could anyone please help?
Also if anyone is familiar with smugmug, I paste the code into the theme css box and nothing happens when updating my website.
Thank you.
If you were to add a link around the following line:
<span style="display:inline-block">WEDDINGS</span>
place the link tag in front and after it, link tag being
so it would look like this:
<span style="display:inline-block">WEDDINGS</span>
If clicked on, anything between the tag will redirect them to the page.
As a side note, if you wish to make the linked page open in a new tab, use "target=_blank", like this:
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb
I've got the following control working called Uploadify. So I've placed the control inside a table. Here's a rough example:
<tr>
<td>
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
</td>
<td> OTHER STUFF </td>
</tr>
<tr>
The control is placed in a div called "holdcontrol". It is not possible to use hide or attr to disable the uploadify control because of its flash content. The simple solution is to simply set the height of the div to zero.
So I used $(#holdcontrol).css("height", 0); - so this "disables" the control which really 'hides' the button.
The problem is that it only partially closes down on the Uploadify control - Half of it - Which means that I can see "half of the control button". When I want to use the control again, I issue the command:
$(#holdcontrol).css("height", null); - that rebounds and it works fine. It's the setting of the div height inside the table cell to "hide" or to "disable" the Uploadify control that is bugging me.
Any thoughts or tips to truly setting that div height value to 0?
thanks and Happy Holidays!
After uploadify is loaded it changes your HTML code using JavaScript. In one of my Projects it adds an object outside of #holdcontrol so hiding #holdcontrol won't do anything.
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
<object
width="226" height="24" type="application/x-shockwave-flash"
data="http://www.example.com/ext/flash/uploadify.swf"
id="flashfileUploader"
>
<!-- even more code-->
</object>
As you can see the object gets the id #flashfileUploader - so if you just try to change #flashfileUploader instead of #holdcontrol you should be fine.
You can find this kind of undocumented stuff using FireBug (https://addons.mozilla.org/de/firefox/addon/1843/).
so long,
Tim