Make a Hover in CSS

I have this logo in my css and I want to have it produce the Hover on mouseover.
Below is the code:
.LogoTop {
    background-image: url(/Image/logo1c%20124.jpg);
    width: 124px;
    background-repeat: no-repeat;
    height: 124px;
    float: left;
    margin-left: 25px;
    margin-top: 2px;
    display: inline;
I have tried using cursor but it will not appear

Changing the selector to .LogoTop:hover should work. However, Internet Explorer 6 and earlier only lets you use :hover on links, so you could wrap the code inside the LogoTop class inside a link and then the selector .LogoTop a:hover would work in IE as well

Similar Messages

Color example on mouseover/hover within CSS file?

(Please tell me I somehow missed this in the settings because I can't believe it's not in DW CS5.)
I there something that lets me do the following?
When I hover over a color value (eg #1c1c1c) in a CSS file, I would like a small window to pop up that is filled with that color.
(like Firebug does, but then instantly from inside Dreamweaver CS5).

highwaykind wrote:
Thanks. I often don't have the CSS panel open - and that method doesn't seem to work for background color (shows hex value here, not the color?).
But for 'color' it works, so it's something..
Although I'd much prefer a quick popup in the code window itself.
Really weird that something like this is not has not been built into DW yet.
Guess I'll have to load the page in Mozilla, turn Firebug on, and reload on every change I make (*aaaargh!*) like I've been doing, until Adobe builds it into DW, or some genius creates a (preferably free) extension.
I think I know what you are talking about that the color picker shows the hex value and not necessarily the color in the box. There is a confirmed bug that Randy confirmed back around the release of CS5 on the Mac side. However, 3 patches later it still isn't fixed (and yes, I have submitted bug reports after the patches). If you are on the Windows side and this is a bug you may need to report it: Adobe - Feature Request/Bug Report Form .
For more information please see: http://forums.adobe.com/thread/650242

Is there a way to make an HTML or CSS Dreamweaver template (not a website template)?

This might be confusing. I'm not looking for a way to create a website template but a layout/DocType template that has an HTML skeleton in place. The reason I'm asking is that I do a lot of email designs in Dreamweaver and I want to get a template in place but all I've found are these time-consuming website template tutorials that don't serve my needs.
What I want is to be able to create something like the DW's default DocType templates that have the initial <html><head></head><body></body></html> etc.... because I can then just start adding in content and change the HTML/CSS attributes (emails require a lot of inline css) as needed.
So far, I've been using an HTML document that I'd like to make into a template but sometimes I end up saving over it and then have to recreate it...which gets old real fast. This is why having an initial template would eliminate the worry of saving over my makeshift HTML template. Any insight or advice would be greatly appreciated!
Thanks for the help!

Snippets is a good idea. But you can also do this with a template. Each time you use FILE | New > Page from Template, as you would to create a new child page, you have the option to enable or disable an option called "Update page when template changes". If that option is DISABLED (i.e., unchecked), then the child page will be created but with NO TEMPLATE MARKUP (i.e., no editable/non-editable regions)! Seems that's exactly what you want, no?

How do I add "a:hover" into CSS panel? DW says "no punctuation" allowed....

When I use "Create a new CSS rule" and attempt to add "a:hover" tag rule into my CSS panel, DW gives me an error message that no puntucation is allowed in the name. But if I manually create the rule in the CSS style sheet itself, then it works just fine, and the rule will then appear in the CSS panel.
What the heck am I missing? Is this just something that has to be lived with? Or is there a way to create the "a:hover" rule by using the "Create a new CSS rule"?
Thanks for any help........................

It's not the most intuitive CSS panel.
In the Selector Type dropdown for Class/ID/Tag/Compound, select Compound
In the Selector Name dropdown, you'll then see body, a:link, a:visited, a:hover, a:active.
Select a:hover and you're on your way.

Af:commandLink : hover & active CSS not working

Hi ,
I am using JDeveloper 11.1.1.6
My scenario is need to change the color in <af:commandLink> at that time of active.I tried the below CSS styles ,
+af|commandLink :active{+
background-color: #7FFFD4;
+}+
+af|commandLink :hover{+
background-color: #FFCCFF;
+}+
But it's not working .I followed this http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/commandLink.jspx URL .

Hi Lait,
Thanks for the replay.
I tried with hover it's working fine but still selected and activate properties are not working .I am using below Style & I am testing in IE 8.
af|commandLink
+{+
color: Lime;
+}+
af|commandLink:active
+{+
color: Gray;
+}+
af|commandLink:hover
+{+
color: Red;
+}+
af|commandLink:visited
+{+
color: White;
+}+
af|commandLink :selected
+{+
color: Yellow;
+}+
Thanks ,
David.

How do I make a hover object stay on screen?

I have a CSS image gallery, and am struggling to finish it off (I originally intended to find a js example but couldn't find what I wanted despite extensive trawling).
Hovering over the thumbs brings up the large image as required, but I need the image to then stay on screen until the user hovers over another thumb. I'm pretty sure this is possible, but can't work out how to do it.
Here's the link: http://www.stereosociety.com/lenegallery1979-2006.shtml
Any help would be much appreciated!

Start over with Fancybox. It's very simple to implement. See code below for a working example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
body {
    background: silver;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#wrapper {
    width: 90%;
    margin: 0 auto;
    background: #FFF;
    overflow: hidden;
/**left sidebar**/
aside {
    float: left;
    width: 25%;
    border-right: 1px dotted #999;
    min-height: 400px;
    padding: 2%
/**this styles image container**/
#thumbs {
    float: left;
    width: 75%
#thumbs li {
    list-style: none;
    float: left;
    width: 160px;
    margin: 10px 1% 0 1%; /**space between containers**/
/**recommend using same size images**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: ".";
    clear: left;
    font-size: 0px;
    line-height: 0;
    display: block;
    visibility: hidden;
</style>
</head>
<body>
<div id="wrapper">
<aside> Left Sidebar </aside>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Image Viewer</h1>

<ul id="thumbs">
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
</ul>

</div>


<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
</script>
</body>
</html>
That's all there is to it.
Nancy O.

Is .class-active:hover good css?

I ran across some code for a menu that has this in the css:
.ddmx .item1,
.ddmx .item1:hover,
.ddmx .item1-active,
.ddmx .item1-active:hover { position:relative; display:block; padding:3px 10px 3px 10px; font:20px arial; background-color:#5B7893; color:#BECBD6; font-weight:bold; text-decoration:none; white-space:nowrap; width:195px; }
I understand what .item1 and .item1:hover are but I've can't find any tutorial that shows something like .item1-active and .item1-active:hover.
Is this legit css and if so what does it mean?
Thanks
Tom

I understand what .item1 and .item1:hover are but I've can't find any tutorial that shows something like .item1-active and .item1-active:hover.
Is this legit css and if so what does it mean?
Yes, it's legit.
.item1-active would refer to an item with that as a class assignment -
<a class="item1-active" href="whatever.html">
.item1-active:hover would refer to the hover state of that same item.

How can I make use of the CSS feature?

<p>Hi </p><p>I am using Cr4E to design a report that will be deployed over the web both as an html page and in PDF format. I now want to assign styles to the fields in the report so that the PDF and the HTML version look differently . </p><p>My questions:</p><p>1) Is there a short explanation on how to that properly?<br /></p><p>2) I assume that the CSS styles will only be used in the HTML version and will be ignored in the PDF. Is that correct and - if not - is there another way to apply different styles to the PDF and HTML? </p><p> </p><p>As always any suggestions are highly appreciated!</p><p>Peter Buchmann from a rainy Zurich, Switzerland </p><p> </p>

<p>Hi Peter, </p><p>Ok, I learned something new on this one as well. It appears that the JRC has not yet been updated to include CSS support. As you mentioned, the CSS feature will enable specific output when rendered in our HTML viewer. So to answer your question, yes, if this was indeed supported, it would provide a different output when viewed over the web as opposed to PDF format.</p><p>Now, I know the next question you have is "If it is not supported, then why is it exposed?". There are actually 2 reasons for this:</p><ol><li>This same Designer is also bundled with IBM Rational Application Developer. With the RAD integration we include an Enterprise Repository Explorer view which will allow users to publish reports to a BusinessObjects Enterprise or Crystal Reports Server system. On these systems the CSS field will work.<br /><br /></li><li> Backwards-compatibility - if you open an existing report designed by the external designer then you will need to ensure that all of the properties are re-saved when the report is saved in the CR4E designer. Users can still modify these values, it's just that they will not be honored by the runtime engine.</li></ol><p>The good news is that we should have support for this feature in the next full release of Crystal Reports for Eclipse. Unfortunately, I don't think I can officially comment on timelines until early next year, once I get some resource commitments. </p><p>Regards,<br />Sean Johnson (CR4E Product Manager) </p><p>P.S.</p><p>Did I mention I live in Vancouver? We have 2 seasons in Vancouver...the rainy season and August. </p><p> <strong><a href="http://www.eclipseplugincentral.com/Web_Links-index-req-ratelink-lid-639.html">Rate this plugin @ Eclipse Plugin Central</a></strong> </p>

Make messageTextInput readonly using CSS

HI,
Is there any ways of making a textfield/MessageTextInput as readonly mode by applying any kind of CSS.
In normal html forms its possible.Is this possible in OAF.DOes OAF has this kind of CSS stuff,handling textfield to readonly or user not allowed to edit the text field.
Thanks

I don't think OAF supports readonly option through the CSS. Could not find this mentioned anywhere in CSS docs. Moreover if this property gets handled both through the OAF and CSS, the output is not predictable or defined anywhere in docs. You might want to raise a TAR on this issue if it is very critical to you.
--Shiv

Using templates with css in mx

Hi,
I'm sure I'm being stupid but it's driving me insane - I'm
weaning myself off table based layout and using css (for the first
time) in mx. I'm (finally) happy with my stylesheet and how it's
all looking but can't seem to use css with a template - when I save
the page as a template and preview the style sheet does not seem to
be attached.
Any help MUCH appreciated,
Katy

> Good to know about mx as I was thinking about upgrading
to 8 - does it
> make
> like easier with css?
Very definitely!
Good grief - your stylesheet is ... big. Usually so many
custom classes
mean that the stylesheet is WAY overengineered.....
I'll take a look though.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"katyoj" <[email protected]> wrote in
message
news:[email protected]...
> Thanks -
>
> I've uploaded it here :
>
>
>
http://kateortonjohnson.bulldoghome.com/pages/kateortonjohnson_bulldoghome_com/i
> ndex.html
> & have attached the style sheet to the message
>
> Good to know about mx as I was thinking about upgrading
to 8 - does it
> make
> like easier with css?
>
> Anyway thanks again
>
> Kate
>
> /* CSS Document */
>
> BODY {
> margin:0px;
> padding:0px;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> color: #000;
> background: #FFF;
> }
>
> /* Link properties */
>
> A:link {
> color: #333;
> text-decoration: none;
>
> }
>
> A:visited {
> color: #913c87;
> text-decoration: none;
>
> }
>
> A:active {
> color: #913c87;
> text-decoration: none;
>
> }
>
> A:hover {
> color: #913c87;
> text-decoration: none;
>
> }
>
> /* Main text headings */
>
> h1
> {font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:11px;
> color:#333;
> text-decoration:none;
> font-weight:bold;
> margin:3px 5px 5px 3px;}
>
> h2
> {font-family: tahoma, Arial, Helvetica,
sans-serif;font-size:11px;
> color:#154669;
> text-decoration:none;
> font-weight:bold;
> margin:0px 5px 5px 3px;
> padding:5px 0px 0px 5px;}
>
> h3
> {font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:11px;
> color:#525E6A;
> text-decoration:none;
> font-weight:bold;
> margin:5px 5px 5px 3px;
> text-align:right;
> }
>
> /* Footer text */
>
> .footertext {
> font-family: tahoma, Arial, Helvetica, sans-serif;
> margin:0px;padding:15px 0px 5px 0px;
> font-size:10px;
> color:#666;
> }
>
> /* Titles */
>
> .t3 {
> font-family:tahoma, Arial, Helvetica, sans-serif;
> font-size:20px;
> color:#154669;
> text-decoration:none;
> font-weight:bold;
> }
> .t2 {
> font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:14px;
> color:#96968A;
> text-decoration:none;
> font-weight:bold;
> }
>
> /* Main body */
>
> .maincontent {
> border-top-style
otted;
> border-top-width:1px;
> border-top-color:#989898;
> margin:3px 10px 30px 0px;
> padding:0px 10px 5px 10px;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> color:#333;
>
> } .maincontent img {float:left;margin:5px 5px 5px 0px;}
>
> .maincontent2 {
> border-top-style
otted;
> border-top-width:1px;
> border-top-color:#989898;
> margin:3px 220px 0px 0px;
> padding:0px 10px 5px 10px;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> color:#333;
> }
>
> .maincontent2 img {float:right;margin:5px 0px 5px 5px;}
>
> .lwrap {
> width:182px;
> margin-top:15px;
> margin-bottom:0px;
> margin-right:auto;
> margin-left:auto;
> padding:0px;
> }
>
>
> /* Left content */
>
> .lcontent {
> border-left-style:solid;
> border-left-color:#C5C5C5;
> border-left-width:5px;
> width:172px;
> margin:0px 0px 0px 0px;
> font-family: Arial, Helvetica,
sans-serif;font-size:11px;
> color:#666666;
> text-decoration:none;
> text-align:left;
> font-weight:normal;
> padding:5px 3px 10px 5px;
> background-color: #EEE;
> }
>
> .leftshadow {
> width:182px;
> height:6px;
> padding:0px;
> margin-top:0px;
>
> }
> .leftshadow img {padding:0px;margin:0px;float:right;}
>
> .separator {
> border-top-width:1px;
> border-top-style
otted;
> border-top-color:#989898;
> margin-right:5px;
> margin-left:5px;
> margin-top:10px;
> }
>
> /* News boxes */
>
> .newsheader{
> background-image:url(images/left_subh.gif);
> background-position:top;
> background-repeat:no-repeat;
> width:182px;
> margin-left:auto; margin-right:auto;
margin-top:15px;margin-bottom:0px;
> height:17px;
> text-align:right;
> padding:1px 5px 0px 0px;
> font-family: tahoma, Arial, Helvetica,
sans-serif;font-size:10px;
> color:#333;
> font-weight:bold;
> }
> .newscell{
> background-color:#EEE;
> width:182px;
> margin-left:auto; margin-right:auto;
margin-top:-1px;margin-bottom:0px;
> min-height:30px;
> font-family: Arial, Helvetica, sans-serif;
> font-size:11px;
> color:#666;
>
> }
>
> .newscell p {padding:5px 5px 15px 10px;margin-top:0px;}
>
> /* Right content */
>
> .rcontent {
> background-color:#EEE;
> width:168px;
> margin-left:auto;
> margin-right:auto;
> border-left-style:solid;
> border-left-width:5px;
> border-left-color:#C5C5C5;
> min-height:30px;
> margin-top:18px; margin-bottom:0px;
> font-family: tahoma, Arial, Helvetica, sans-serif;
> font-size:10px;
> color:#666;
> padding:5px 3px 10px 5px;
> text-align: left;
> }
>
> .rightshadow {
> text-align:right;
> width:168px;
> height:7px;
> padding:0px;
> margin-top:0px;
> margin-bottom:15px;
> float:right;
> }
> .rightshadow img {padding:0px;margin:0px;float:right;}
>
> /* Bullet list */
>
> ul {
> list-style-image:url(images/bullet.gif);
> list-style-type:none;
> }
>
> p img {margin-left:5px;}
>
>
> #wrap{
> margin:0px;
> padding:0px;
> width:100%;
> }
>
> /* Header section */
>
> #header{
>
> background:#EEE;
> margin:0px 0px 0px 0px;
> font-size: 11px;
> font-family : Verdana, Arial, Helvetica, sans-serif;
> color : #000000;
> border-bottom: solid #C5C5C5;
> }
>
> /* Top navigation */
>
> #topnav ul
> {
> padding-left: 0;
> margin-left: 5px;
> margin:0px 0px 0px 0px;
> background-color: #913c87;
> color: White;
> float: left;
> width: 100%;
> font-family: arial, helvetica, sans-serif;
> font-size: 11px;
> font-weight: bold;
> height: 18px;
> }
>
> #topnav ul li { display: inline; }
>
> #topnav ul li a
> {
> padding: 0.2em 1em;
> background-color: #913c87;
> color: White;
> text-decoration: none;
> float: left;
> border-right: 1px solid #EEE;
> }
>
> #topnav ul li a:hover
> {
> background-color: #C5C5C5;
> color: #fff;
> }
>
>
> /* Left positioning */
>
> #left {
> width:191px;
> margin:0px 0px 10px 0px;
> padding:0px 0px 20px 0px;
> background-color:#EBE8DE;
> border-right-width:3px;
> border-bottom-width:3px;
> border-left-width:5px;
> border-top-width:0px;
> border-style:solid;
> border-right-color:#EFEEEE;
> border-bottom-color:#EFEEEE;
> border-left-color:#fff;
> float:left;
> min-height:15px;}
>
> /* Right positioning */
>
> #right {
> margin-left:196px;
> background-color:#fff;
> min-height:30px;
> text-align:left;
> padding:10px 10px 15px 15px;
> min-width:560px;
>
> }
>
> /* Footer positioning */
>
> #footer {
> background-image:url(images/footer2.gif);
> height:55px;
> margin:0px 0px 0px 0px;padding:0px;
> width:100%;
> min-width:760px;
> overflow:hidden;
> clear:both;
> }
>
> #footer img {padding:0px;margin:0px;float:left;}
>
> #footer a {
> text-decoration:none;}
>
> /* Right positioning */
>
> #rightcol {
> width:180px;
> float:right;
> min-height:30px;
> background-color:#fff;
> margin:0px 0px 0px 20px;
> padding:0px;
> text-align:center;
> }
> /** BOX3 */
>
> #box3 {
> clear: both;
> margin-top: 20px;
> padding: 10px 0px;
> }
>
> #box3A {
> float: left;
> width: 200px;
> padding: 0px 13px 0px 43px;
> background: url(/csstemplatetts/images/homepage20.gif)
repeat-y right
> top;
> }
>
> #box3B {
> float: left;
> width: 200px;
> padding: 0px 50px 0px 11px;
> }
>
> #stretch {width:760px;height:1px;clear:both;margin:0px
0px 10px
> 0px;padding:0px;}
>

A:hover with "open browser window" behavior?

Hi,
Is it possible to make a text link follow the a:hover style (CSS?) with the behavior of "open browser window"?
I've been using the "OnClick" option (for behaviors), but the cursor doesn't turn into the little hand symbol so I feel like people won't know that you can click on it. If I could make it change color like it does when it is a direct link, or if i could make the hand symbol appear, that would be great.
Thank you in advance!!

We'd need to see your code but I'm guessing you did not highlight the link text and make it a null link.
http://alt-web.blogspot.com/2010/02/making-pop-up-window-in-dreamweaver.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Can't create separate hover div tags

Basically, in my website, I have a nav bar with border-radius: 20px; added, whereas the hover looks don't- so on the first tab (Home) when I hover over it, I lose the roundness. To fix this, I made two things:
-css element
-and then the HTML bit
I placed the new element called "home" inside the navigation <div>. It looks like this:
                    <div id="navigation">
                           <div id="home">
                                    <ul>
                                      <li>
                                        <a href="../home.html.html">Home</a>
                                      </li>
                                    </ul>
                              </div>
                            <ul>
                                <li><a href="../about.html.html">About</a></li>                     
                                <li><a href="../tutorials.html">Tutorials</a></li>
                                <li><a href="../contact me.html">Contact me</a></li>
                            </ul>
                     </div>
And this, in design view, shows the menu exactly as before, except for code-wise the home button is separate. So I thought, to the CSS of it, just add border-radius. I did this and nothing. I then figured out that all the buttons were still linked to <a> so I thought, make <a2> in the css, with the same properties as a, but with border radius:
                           <div id="home">
                                    <ul>
                                      <li>
                                        <a2 href="../home.html.html">Home</a2>
                                      </li>
                                    </ul>
                            </div>
And this is where the problems start. as soon as I do this, the Home button loses the looks of the other buttons and hovers above, but it does have the desired rounding effect.
Please help, I am very confused and am new to this

Right, so now I've changed the HTML to this:
                           <div id="home">
                                    <ul>
                                      <li>
                                        <a id="home_hover" href="../home.html.html">Home</a>
                                      </li>
                                    </ul>
                            </div>
And the CSS to this:
#home_hover
background: #383;
border-radius: 20px;
This does work, but my Home button is constantly "hovered over" with rounded edges. So how would I get it so that it only does this when hovering?
Thanks for your help

Submenu links:how to make

I used multiple CSS on my page.want to make a hover-popup
submenu links to
one of the text navigation link .sth like the
adobe-community-forum".
I saw the codes behind the websites of my wish but a bit
confusing.i want
the code and how and where to insert it.i wish the submenu
links be
stretched horizontally.
Sure you can help.
Many Thanks.
****

http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
regards
k
"heynock" <[email protected]> wrote in
message
news:f2jsqq$kth$[email protected]..
>I used multiple CSS on my page.want to make a hover-popup
submenu links to
> one of the text navigation link .sth like the
adobe-community-forum".
> I saw the codes behind the websites of my wish but a bit
confusing.i want
> the code and how and where to insert it.i wish the
submenu links be
> stretched horizontally.
> Sure you can help.
> Many Thanks.
> ****
>

CSS Changes not showing in Design View

I'm just coming over from GoLive (and their layout grid) so
I'm not entirely familiar with DreamWeaver CS3 and CSS.
However, whenever I make changes in a CSS sheet (and save
them) they are not immediately rendered in the Design View. They
show up just fine if I "Preview in Browser" though. I can even
close the html page and reopen it and sometimes they will show up,
but not usually. Oh, and the "Refresh Design View" button is greyed
out and doesn't do anything.
Thanks,
Dan

Yes, that seems to be the case. I ran a validation check on
the html page (it was coded in XHTML 1.0 strict) and came up with 2
errors related to the CSS features I was trying to use.
Thanks!

Jquery mobile - how to create multiple CSS files?

I've been researching this heavily, and can't seem to find anyone discuss this. I'm a CS4 user, and understand 5.5 now includes builtin support for jquery mobile. I've watched the videos on how you set the sizes for phone, tablet, desktop, point each to the appropriate CSS file. Great, wonderful.
However, nobody is discussing how you get the three separate CSS files! I want to add a mobile version of an existing site. I have just the one .css file. How do I make the other 2 .css files? Do I duplicate the desktop file, and start somehow altering each item? Is there some type of automatic system to tweak the main .css file?
Seems like this step is critical. Any insights?

I built this page with CSS Media Queries. If you resize viewport to less than 480px, it changes layouts.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
I made the Desktop.css first.
http://alt-web.com/Styles/Desktop.css
Then I removed the Desktop.css link from my HTML document and replaced it with the iphone.css link.
http://alt-web.com/Styles/iphone.css
After fine tuning the iphone layout, I re-attached the desktop.css link and added the following code to the head of my document.
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link href="../Styles/Desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:481px)" />
<link rel="stylesheet" type="text/css" href="../Styles/iphone.css" media="only screen and (min-width: 0px) and (max-width: 480px)"/>


Do you have to literally go in and manually change the wraps, floats, whatever for everything?
Yes. If you examine the comments in my iphone.css code, you'll see I changed some things to display:none, float:none, etc...
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Make a Hover in CSS

Similar Messages

Maybe you are looking for