I am wondering it is possible to place html/javascript/etc in a .ashx file. I tried doing this, and I am getting the error "A namespace cannot directly contain members such as fields or methods"
The reason I want to do this, is because I am trying to implement photoswipe (http://www.photoswipe.com). Photoswipe needs some special CSS, which I think I am losing when I go into the .ashx file. I want to be able to add some HTML to it to point at the CSS file that I think I am losing.
Edit: here is an example of what my markup looks like. When I click on the href, I am brought to a new page with ".ashx?QueryStringParms=blah" in the browser. Here is where I believe I am losing my CSS.
<div style="text-align:center;" class="gallery-page" data-role="content">
<ul id="gallery" class="gallery" style="max-height: 75%;">
<li style="height: 120px; width: 93px; padding-bottom: 2px;"><img src="../Utilities/ImageHandler.ashx?QueryStringParms=blah" /></li></ul></div>
Thanks
Your code should look like this :
<div style="text-align:center;" class="gallery-page" data-role="content">
<ul id="gallery" class="gallery" style="max-height: 75%;">
<li style="height: 120px; width: 93px; padding-bottom: 2px;"><img src="../Utilities/ImageHandler.ashx?QueryStringParms=blah" /></li></ul></div>
and then, in your bigimage.aspx file, you'd have some HTML (the CSS and javascript you may need) + an image tag :
<img src="../Utilities/ImageHandler.ashx?QueryStringParms=blah" />
I presume the querystring params indicate which image you want and the needed size
Related
**Note all <> tags have been removed to allow code to display
**
i have been playing around with this for hours and am not really getting it to work without using a workaround at the design end of things (ie Corel draw)
*Before i go any further,
First, website URL is AdventistAviation.com.au
Second, can i just say...i know this can be done with style sheets...however, in this case...i am not doing it that way!!! (so please dont bother pestering me with that option unless there is absolutely no way the method below can work)
Third, a workaround to my problem below, is to create the image already centered in its own background (the same size as the logo next to it) then import it (this is a bad idea because if in the future someone changes the main header background to a different color other than white...its gonna look awful!)
First i add the image (this works no problem)
However because the Logo on the left in the avada theme is approx 250×250 square, Tagline text is no longer centered in the header (as you can imagine comparing above with logo below)
I am using the themeforest AVADA Theme. In theme options>Banner Code For Header #4…
I would like to add the following inline css styling in an iframe for example, to vertically centre the Tagline (ie bring it down level with the middle of the logo)
style="vertical-align: middle;"
<iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe>
This doesnt seem to do anything different to the method in 1.
<div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div>
I was hoping that if i place the iframe inside a tag containing the styling i might achieve my goal...alas it still doesnt work.
I have got to the point where my head is so full of nonworking methods i cant progress further.
Can someone help with this one?
p.s i have tried to find some inline css styling tutorials (specifically about vertical alignment styling) for the tag in html 5 without any luck.
damn w3c for depreciating the html vertical alignment method in html5!
# adam:
A simple solution is to change this code:
<div id="header-banner">
<div style="vertical-align: middle;" height="170" width="500">
<img src="https://googledrive.com/host/...etc..." width="400" height="200">
</div>
</div>
To just this:
<div id="header-banner" style="margin-top: 70px;">
<img src="https://googledrive.com/host/...." width="400" height="200">
</div>
There's no good reason to use inline styles for this, but anyhow, I've edited a chunk of your HTML with inline styles that will get what I think you want:
<div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%">
<div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;">
<a href="http://adventistaviation.com.au">
<img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo">
</a>
</div>
<div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;">
<div style="/* vertical-align: middle; */" height="170" width="500">
<img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200">
</div>
</div>
</div>
I am trying to apply a different theme to panels I have displayed on different pages. I am not not that accustomed to working with css and javascript so some help would be appreciated.
<div id="rules" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="back:'DASHBOARD',moveTo:'general'" class="style1">
REALTIME-COUNTS
</h1>
<center>
<div dojoType="dojox.mobile.RoundRect" style="width: 1200px;
height: 400px;" shadow="true">
<h4>TOTAL DAILY RESULTS</h4>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div id="chartdiv" style="width: 70%; height:342px;"></div>
</div>
</div>
</center>
Now I have a theme.css file added into the project but not sure how to do this. I want to apply to the panel/view above named 'rules'. Is this possible or am I way off here?
What does your theme.css file look like? If you're just trying to apply styles to the "rules" panel and not any other panel at all, then you can do something like this:
#rules {
width: 100%;
}
but if you were trying to reuse this CSS elsewhere then just add a class to your div (with id rules) like this:
<div id="rules" class="mobileView" data-dojo-type="dojox.mobile.View">
and then add a css rule like this:
.mobileView {
width: 100%;
}
Not sure if this is what you're looking for but I could probably help you a little better if you put something into JSFiddle.
Hey guys I'm trying to implement Paper unfoding effect in a webpage of a wesite I'm developing. Im using the pfold jquery plugin, but I want a text to appear on hover and I did it many times but doesnt work. Here is my code:
HTML:
<div class="uc-container">
<div class="uc-initial-content">
<!--<img src="fm.png" alt="FM" /> -->
<img src="fm.png" alt="Fm" title="Fm" id="hoverFm">
<p class="textSponsor">92.7 BIG FM</p>
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="fm.png" alt="FM" />
<div class="title"><h4>FM</h4> </div>
<span class="icon-cancel"></span>
</div>
</div>
And This is the CSS For same:
#hoverFm .textSponsor{
position: relative;
margin-right: auto;
margin-left: auto;
visibility: hidden;
}
#hoverFm:hover .textSponsor{
visibility: visible;
}
When Im doing this the text just simply comes below my picture . I'm not getting where I'm going wrong. And when I'm creating a new div which contains only <img> and <p> tag then my image is getting small (I guess its because of the code I wrote for resizing and paper folding effect which is gettin hampered due to this and then also text on hover is not coming)
If you guys wanna see what actually I'm making :
The link to the demo site is: http://tympanus.net/Development/PFold/index3.html
and the code for same is available at link: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779
And the github link for code is: https://github.com/codrops/PFold
I tried it a lot to figure out but was unable so please help someone. It will really be appreciated. Thanks in Advance!!
#hoverFm:hover .textSponsor
This does never really happen, because .textSponsor is not a child of #hoverGM, it is a sibling. You need to use the next selector, which is +:
#hoverFm:hover + .textSponsor
You could also change the structure to
<div class="uc-initial-content" id="hoverFm">
<img src="fm.png" alt="Fm" title="Fm">
<p class="textSponsor">92.7 BIG FM</p>
Then your original selector would work because now it really is a child.
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>
Which method is best?
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<h1>slogan of company</h1>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<p>slogan of company</p>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<span>slogan of company</span>
</div>
<div id="header">
<div id="logo">
<img width="172" height="80" src="logo.jpg" alt="Clevex logo">
slogan of company
</div>
</div>
I would think a better approach would be to have the slogan as a span. The slogan is not truly the first header of your document. Think if it were a table of contents would you see the slogan as the first entry?
The slogan is probably subject to some design rules (e.g. the position relative to the logo). As the slogan probably makes little sense in a content / SEO way anyway, and it's more important it looks right, I would recommend putting the slogan into the image.
Looks good, apart from the fact that a slogan isn't really a heading, hence a <span> or something without semantic meaning should be used instead of <h1>
I guess not;
It's better to do it like this:
<h1 onclick="document.location='/';"><span>CompanyName</span></h1>
<h2>Slogan here</h2>
Since your logo is part of the layout and not a image in context (for example a product picture) you should put it in the h1 background.
Do your CSS like this:
h1 {
background-image: url(logo.png);
width: 200px;
height: 80px;
cursor: pointer;
}
h1 span {
display: none;
}
This way it is both readable for the and user and a search engine.
No, something like the following would be better:
<div id="header">
<h1>Company</h1>
<h2>Slogan</h2>
</div>
h1 { text-indent: -90000px; background: transparent url(/img/logo.png) no-repeat left top; width: 172px; height: 80px; }
h1 a { display: block; width: 172px; height: 80px; }
The h1 is only used once, for the company itself. Then you replace that logo text with an image using CSS. This way you keep the markup within your CSS.
In general, I think you'll see everyone's slogan as an image rather than text (with the text as the alt attribute). And href="#" means "go to the top of this page." It should probably be a link to the home page instead.
...As long as you use alt, search engines will index it properly. If this is the home page, that might justify having the name and slogan in h1 and h2 elements, but elsewhere it's probably not necessary. It's probably better to drive traffic based on the actual content of the page and not try to make every page the same in the eyes of search engine spiders. The company name is probably already in the url, which is plenty.