Preview css code without html??
I am learning CSS and very slowly.
I would like to know if there is any way that I can "see" if my css code is working the way I want it to.
Since there is no display in CSS , only html, I'm guessing I have to link the CSS to the html in order to see
if the CSS code is working the way I want.
Is there an easier way to "try out" css code?
Perhaps another way to get it to display without linking it to an html file?
Maybe there is another program that will let one "view" css code?
Maybe something online that will do this?
I really could use something like this.
Otherwise, can someone tell me, in the most basic, simple terms, how I can link my Css code page
to an html page, so i can preview if my CSS code is doing what it's supposed to?
thanks!!!!!
I hope this makes sense. thanks again!
Not really. I don't understand the workflow you're attempting.
CSS formats HTML pages. I link one external CSS stylesheet to all my HTML pages then tweak the CSS in the external CSS file and "see" the results of my tweaks on the HTML page I'm actually formatting.
In other words, I preview my changes on the HTML page which is actually linked to the CSS stylesheet.
You seem to be wanting to set up your CSS in isolation to your HTML page then, when you've got it right, you want to apply the CSS to the actual HTML page.
Am I missing something?
These are some of the ways I think might work:
<td><span style=”background-color:yellow”>Breakfast</span>..</td>
<td style=”background-color:yellow”>Breakfast</span>...</td>
<td><span style=”bgcolor:yellow”>Breakfast</span>..</td>
<td><span style=”color:yellow”>Breakfast</span>..</td>
but I need to try them all to see which is the one that will give me the desired result (highlight the word Breakfast in yellow).
You've lost me here I'm afraid. Why not let DW do the coding for you?
e.g. <span style=”bgcolor:yellow”> is invalid CSS code. DW will code it for you.
Avoid inline styles <td style=”background-color:yellow”> and <span>s wherever possible. Use them in an emergency only when no other option exists. Otherwise, every time you tweak a color, you have to update every single affected <td> and <span> tag which defeats the reason for using CSS in the first place.
CSS can be applied in several ways. In order of preference:
1) External, linked styesheet (preferred option every time)
2) Embedded stylesheet (rules grouped into the <head> section of a HTML page)
3) Inline styles (CSS inline with the HTML code scattered throughout the page) - emergencies only or where no other options exist such as HTML email formatting
You're starting with option 3) and making life hard for yourself.
It's more powerful and efficient to define a CSS class for a highlighted table cell - in an external stylesheet which is linked to the HTML page:
e.g.
Separate CSS file
td.highlight {
background-color: yellow;
HTML (with CSS file linked to it)
<td class="highlight">Breakfast</td>
You can do this for all highlighted <td>s on all HTML pages on your website - be it one or 1000.
Later, if you want to change yellow to green, you change the CSS rule in the external CSS stylesheet (you don't have to touch the HTML file at all):
td.highlight {
background-color: green;
upload that one tiny stylesheet file to the server and your entire website (all 1000 pages) is instantly updated.
Similar Messages
-
How to apply html css code in ADF pages
I have the css code for all html components like buttons , text box, tabs etcc.. I want same look and feel in adf, I want to apply same css in ADF pages without/with minimal changes,
I need very urgently,
plz do needful ASAP.
Thanks & Regards,
Ram.Hi..
Also this will helpful
http://technology.amis.nl/blog/5722/using-adf-faces-11g-skinning-for-setting-the-styles-of-specific-component-instances-or-groups-of-instances -
Separate the html code and CSS code
is there any setting where I can separate html Coden with CSS code?
okej, so if I want to get them in separate files I need to do it b myself?
If you want the content separate from the CSS, you would have to create the page's HTML and CSS yourself. There is no way (other than a tedious manual process) to take an existing page with embedded CSS and then give DW a command to separate the CSS from the content. Now - the extent of the effort to do this manually would depend on the complexity of the page. Can you post a link to one of your pages - we can tell you how big a job this would be by examining the code. -
Html code without be interpreted
Hi,
How can I write html code without be interpreted. I want to write a header like:
* @param html A text like <div>hello</div>
and I want that JavaDoc doen't interprets <div> as HTML.
How can I do it?
Thanks a lot for helping me :)
CheersTwo options that I can think of:
& lt;div& gt;hello& lt;/div& gt; (spaces were added so that the text is rendered)
{@literal <div>hello</div>} (if you are using java 1.5 or newer) -
How can I convert my css code into table format?
Wasn't sure how to word the title, but what I am trying to do is post my html code generated with Dreamweaver CS4 into craigslist for an advertisement I designed. Craigslist seems to only accept "TABLE FORMAT". I just learned enough to design this AD using css, now do I have to go back and learn table cell coding? Is there something I am not aware of like a conversion or something that will work?
Thank you very much for any help, I am very anxious to get my ad placed.Example of the accepted code:
<table border="0" cellpadding="5" cellspacing="0" width="100%" id="table4" align="center">
<tr><td width="125"><b><font size="2" face="Verdana">Contact Name:</font></b></td><td><font face="Verdana" size="2">Patrick</font></td></tr>
You must have an old HTML editor because that isn't INLINE CSS CODE. It's deprecated HTML code. It might work OK on Craig's List... but <font> tags won't pass W3C validation in XHTML doc types.
To express what you have above using inline CSS styles without tables would like this:
<p style="font:16px Verdana, Arial, Helvetica, Sans-serif; text-align:center"><strong>Contact Name:</strong> Patrick</p>
http://www.w3schools.com/CSS/css_howto.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
CSS code completely fouled up by CSS designer
I'm having a bunch of bugs with Dreamewaver CC. Inserting images in code view or in design view always places them in the wrong place. For example inserting an image using Cmnd/Ctrl + Alt/Option + i with the cursor placed before paragraph 1 will insert the image after the last paragraph in the document or some other random place in the page. The only thing that kind of works is that the insert stays in the right div.
That's not the worst of it. I made a few edits to a fluid layout using the new CSS design panel and all of the line feeds and line breaks have dissapeared making the code extremely hard to read, troubleshoot and edit. Has anyone seen this?
Here's what the code looks like now:
@charset "UTF-8";
/* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */
img, object, embed, video { max-width: 95%; margin-left: auto; margin-right: auto; display: block;}/* IE 6 does not support max-width so default to width 100% */.ie6 img { width:100%; }/* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 4;dw-num-cols-tablet: 8;dw-num-cols-desktop: 14;dw-gutter-percentage: 15;Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/*/body { background:#333; }.fluid { clear: both; margin-left: 0; width: 100%; float: left; display: block; }.fluidList { list-style:none; list-style-image:none; margin:0; padding:0; } /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 96.7391%; padding-left: 1.6304%; padding-right: 1.6304%; clear: none; float: none;}#mainHeader { width: 100%; border-bottom: thin dotted #666666; background-color: #FFFFFF;} #headerHome { width: 100%; margin-left: 0; } #mainTitle { width: 100%; margin-left: 0; clear: both; display: none; }#mainNav { width: 100%; clear: both; margin-left: 0; }#mainNavList { width: 100%; margin-left: 0; }.manNavBtn { width: 48.3146%; clear: none; margin-left: 3.3707%; }#sideNav { width: 100%; background-color: #FFFFFF; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;}#mainArticle {
width: 100%;
clear: both;
background-color: #FFFFFF;
}#adSide { width: 100%; clear: both; margin-left: 0; background-color: #FFFFFF;}# mainFooter {}#footer {}.zeroMargin_mobile {margin-left: 0; }.hide_mobile {display: none; }/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */@media only screen and (min-width: 481px) {.gridContainer { width: 93.451%; padding-left: 0.7744%; padding-right: 0.7744%; clear: none; float: none; margin-left: auto; }# div1 {}#mainHeader { width: 100%; border-bottom: thin dotted #666666; }#headerHome {width: 36.464%; margin-left: 0; }#mainTitle {width: 61.8784%; clear: none; margin-left: 1.6574%; display: block; }#mainNav { width: 61.8784%; margin-left: 1.6574%; clear: none; float: right; }#mainNavList {width: 100%; margin-left: 0; }.manNavBtn {width: 17.8571%; margin-left: 2.6785%; clear: none; }#sideNav {width: 11.0497%; }#mainArticle {width: 61.8784%; margin-left: 1.6574%; clear: none; }#adSide {width: 23.7569%; margin-left: 1.6574%; clear: none; }#mainFooter {}#footer {}.hide_tablet {display: none; }.zeroMargin_tablet {margin-left: 0; }}/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */@media only screen and (min-width: 769px) {.gridContainer { width: 94.1149%; max-width: 1000px; padding-left: 0.4425%; padding-right: 0.4425%; margin: auto; clear: none; float: none; margin-left: auto; }#div1 {}#mainHeader {width: 100%; }#headerHome {width: 20.6896%; margin-left: 0; }#mainTitle {width: 78.3699%; clear: none; margin-left: 0.9404%; display: block; }#mainNav { width: 78.3699%; clear: none; margin-left: 0.9404%; float: right; }#mainNavList {width: 100%; margin-left: 0; }.manNavBtn {width: 17.2%; clear: none; margin-left: 1.2%; }#sideNav {width: 20.6896%; }#mainArticle {width: 49.5297%; clear: none; margin-left: 0.9404%; }#adSide {width: 27.8996%; clear: none; margin-left: 0.9404%; }#mainFooter {}#footer {}.zeroMargin_desktop {margin-left: 0; }.hide_desktop {display: none; }}#mainArticle img { border: thin solid #333333; border-radius: 6px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; padding: 5px 5px 8px; background-color: #E9E9E9;}
Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
Mac, OSX 10.8.4, Dreamweaver 13.0 Build 6391
NOTE: If I use something like Styleneat to clean up this code it seems to break the styles for the Mobile and Tablet layouts and causes Dreamweaver to crash every time I turn on or off the fluid grid layout display.Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
mg, object, embed, video { max-width : 95%;
margin-left : auto;
margin-right : auto;
display : block;
.ie6 img {
width : 100%;
body {
background : #333;
.fluid {
clear : both;
margin-left : 0;
width : 100%;
float : left;
display : block;
.fluidList {
list-style : none;
list-style-image : none;
margin : 0;
padding : 0;
.gridContainer {
margin-left : auto;
margin-right : auto;
width : 96.7391%;
padding-left : 1.6304%;
padding-right : 1.6304%;
clear : none;
float : none;
#mainHeader {
width : 100%;
border-bottom : thin dotted #666666;
background-color : #FFFFFF;
#headerHome {
width : 100%;
margin-left : 0;
#mainTitle {
width : 100%;
margin-left : 0;
clear : both;
display : none;
#mainNav {
width : 100%;
clear : both;
margin-left : 0;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 48.3146%;
clear : none;
margin-left : 3.3707%;
#sideNav {
width : 100%;
background-color : #FFFFFF;
border-bottom-right-radius : 4px;
border-bottom-left-radius : 4px;
#mainArticle {
width : 100%;
clear : both;
background-color : #FFFFFF;
.zeroMargin_mobile {
margin-left : 0;
.hide_mobile {
display : none;
@media only screen and (min-width:481px) {
#mainHeader { width : 100%;
border-bottom : thin dotted #666666;
#headerHome {
width : 36.464%;
margin-left : 0;
#mainTitle {
width : 61.8784%;
clear : none;
margin-left : 1.6574%;
display : block;
#mainNav {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
float : right;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 17.8571%;
margin-left : 2.6785%;
clear : none;
#sideNav {
width : 11.0497%;
#mainArticle {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
#adSide {
width : 23.7569%;
margin-left : 1.6574%;
clear : none;
.hide_tablet {
display : none;
.zeroMargin_tablet {
margin-left : 0;
@media only screen and (min-width:769px) {
.gridContainer { width : 94.1149%;
max-width : 1000px;
padding-left : 0.4425%;
padding-right : 0.4425%;
margin : auto;
clear : none;
float : none;
margin-left : auto;
#mainHeader {
width : 100%;
#headerHome {
width : 20.6896%;
margin-left : 0;
#mainTitle {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
display : block;
#mainNav {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
float : right;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 17.2%;
clear : none;
margin-left : 1.2%;
#sideNav {
width : 20.6896%;
#mainArticle {
width : 49.5297%;
clear : none;
margin-left : 0.9404%;
#adSide {
width : 27.8996%;
clear : none;
margin-left : 0.9404%;
.zeroMargin_desktop {
margin-left : 0;
.hide_desktop {
display : none;
#mainArticle img { border : #333333 solid thin;
border-radius : 6px;
box-shadow : 0 0;
padding : 5px 5px 8px;
background-color : #E9E9E9; -
Problem with PHP, CSS & Code Navigator in CS4
Hi,
I've got al little problem with code navigator. To show the problem, I created this 3 files:
test1.html
The CSS-Definition is defined static, with simple HTML.
<html>
<head>
<style type="text/css">
@import "test.css";
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
test2.php
The CSS-Definition is defined dynamic, with PHP-Code.
<html>
<head>
<style type="text/css">
<? echo "@import \"test.css\";\n"; ?>
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
test.css
The CSS-File which is imported in test1.html and test2.php
p {
font-size:20px;
The Problem in Dreamweaver CS4
When opening the test.html - File in Dreamweaver CS4, I can easily see the CSS-Definition of the <p>-Tag in Code Navigator. To edit these definition I can simple open the test.css by clicking on the definition in Code navigator. For a complex webpage this is a greate feature. Sadly, this does not work, when I open the test2.php. Although when going to Live View and selecting the <p>-Tag I can see the CSS-Definition and the file in which it is defined in Code Navigator. But by clicking on the definition the test.css DOES NOT OPEN!
Has anybody a solution? Because many of our projects have dynamic CSS-Definitions, it would be a shame, if this would not work.
Tanks for help! :-)I've done some testing, which might point you in the direction of an interim solution.
This is the code for related_files.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Related files test</title>
<?php include('include.css'); ?>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
This is the code for include.css:
<style type="text/css">
p {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#F00;
</style>
Note that the include file contains the opening and closing style tags.
By including your styles like this in a PHP include file, Dreamweaver applies the CSS in Design view (you don't need to turn on Live View). Holding down the Alt key while clicking in Design view brings up the Code Navigator with all the details of the CSS. The one missing link in the chain is that clicking the style selector in the Code Navigator does not open the CSS file. However...
The file that contains the CSS is listed in the Related Files toolbar, so you can edit it in Split view, and see the results in Design view in exactly the same way as with an HTML page and ordinary style sheet.
As I say, not the full solution that you wanted, but it might be something worth experimenting with. -
Hi, my name alper,
I want to design a web page for my girlfriend. The CSS code to do with them, but I have no knowledge about how much information will be used. please I can do with the edge you please assign a mail program code using Turkish...You can do this with Edge Code/Brackets but the web design bit is a bit beyond these forums. I'd suggest checking out something like this course - HTML/CSS: Making webpages | Computer programming | Khan Academy - on Khan Academy to get started.
=Ryan
[email protected] -
Modifying CSS code to customize a theme
Hello:
I'm trying to change some CSS code to customize a theme for an application. I make my change, upload, and the change takes into effect. I make additional changes, click Apply Changes, and the changes do not take affect.
I then go back to my CSS file, make the additional changes, upload the file, and the changes do not take into effect.
My issue is that some of the time when I make a change to the CSS code, the changes take into effect. Other times, they do not.
I installed Firebug which lets me print the HTML and CSS code for a page that is being currently viewed on the screen. I reviewed the HTML and found the "id" that I want to change. I make my changes, upload the CSS file, and the changes do not take into effect.
What is the secret with the CSS code in these themes that will not take my changes?
Here's an example of what happens:
I change the background color for a table. I then want to change the font-color. Instead of displaying both changes; my page reverts to the original colors of the theme.
I am at a complete loss. I have experience in CSS coding and I just don't understand why these changes aren't working all the time.
Can someone give me some insight as to the secret of customizing these themes?
Thanks,Hi,
You can find your uploaded file in the table APEX_APPLICATION_FILES (or HTMLDB_APPLICATION_FILES in older versions of Apex) - search for your css filename in the FILENAME column.
I tend to upload custom stylesheets through Shared Components, Cascading Style Sheets and then replace the existing LINK tag in the page template with:
<link rel="stylesheet" href="#WORKSPACE_IMAGES#MyThemeFileName.css" type="text/css"/>Then, when I need to change the css, I do so using a text editor, delete the file through Shared Components and add in the new version. Sometimes the browser's cache holds an old copy of the stylesheet, but clearing the cache sorts that out. Otherwise, I've not had any problems doing it this way.
The css files you're seeing in your images folder will be referenced within the page templates. As these may be updated with any upgrade to Apex, you should avoid updating these.
Andy -
Using MAC with DW CS4. Sometime back it was possible to view the css code behind a webpage from within Firefox, is that still possible and how with Firefox on a MAC? Or is there another way within Safari.
Thank you.Get the web developer toolbar for Firefox.
https://addons.mozilla.org/en-US/firefox/addon/60
I can't live without it.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
How to break up string of css code properly?
Is there a way to take css code that looks like this mess
(which I got elsewhere) and break it into its legible/workable
parts without going through it and hitting enter after every
closing } ? There are about 1000 lines of this stuff like
this...this is just a small bit of it...is there any easy way in DW
to break it up properly?
Thanks in advance...
Laura
#car .roundbox .topleft{background:no-repeat top
left;width:auto;}#car .roundbox .topright{background:no-repeat top
right;padding:0;}#car .roundbox .infobody{margin:-10px 0
0;padding:0 10px;}#car .roundbox .botleft{background:no-repeat
bottom left;}#car .roundbox .botright{background:no-repeat bottom
right;}#content #popupBody #carTypes #totals
td.totalLine{border-bottom:1px solid #eee;}#car
#rate-content{display:block;}#car #rate-content
#tally{width:706px;float:left;margin-top:8px;}#car #rate-content
#tally td.fee{padding:.25em 0 0 0;}#car #rate-content #tally
hr.hr{display:none;}#car #rate-content #tally
td.price{text-align:right;padding:.25em 0 0 1.2em;}#car
#rate-content #tally
td.legend{width:60%;text-align:right;padding-right:23px;}#car
#rate-content #tally td.legend
img.greenIcon{height:14px;width:13px;margin-right:8px;}#car
#rate-content #tally
span.total{font-size:1.2em;font-weight:bold;}#car #rate-content
#tally tr.hilite td{padding-top:.25em;}#car #rate-content #tally
tr.hilite div.hr-tally{border-top:1px solid #999;}#car
#rate-content #upsell .img{padding:0;margin:0;}#car #rate-content
#rate-disc{width:54%;float:left;border-left:1px solid
#ccc;margin:8px 0 0 18px;padding-left:18px;}#car #rate-content
#rate-disc div{width:11em;float:left;}#car #rate-content #rate-disc
input{width:10em;}#car table#upsell{width:706px;border-right:1px
solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid
#ccc;margin-top:20px;margin-bottom:4px;}#car table#upsell
td{border-top:1px solid #ccc;padding:0 4px;}#car table#upsell
tr.selected{background:#eaeaea;}#car table#upsell
td.upsell-hd{background:#ccc;padding:4px;font-size:1.1em;font-weight:700;text-align:cente r;}#car
table#upsell td.img{width:120px;}#car table#upsell
td.price{padding:4px;font-weight:700;cursor:pointer;font-size:1.2em;}#car
table#upsell
img.greenIcon{height:14px;width:13px;margin-left:8px;}#car
#spcl-opt{margin:20px 0;width:100%;}#car #spcl-opt
ul{width:30%;float:left;margin:0;padding:0;}#car #spcl-opt
li{list-style-type:none;}#car #spcl-opt
img{vertical-align:middle;}#car-rules
#links{width:180px;float:left;background:#e7ebf0;margin:12px 20px 0
0;}#car-rules #links-content{padding:4px 8px 8px 8px;}#car-rules
#links h4{padding:0;}#car-rules #links ul{margin:0 0 0
14px;padding:0;}#car-rules #links li{margin:2px
0;padding:0;}#car-rules
#policies{width:504px;float:left;margin-top:8px;}#car-rules
#policies h4{margin:8px 0 0;padding:4px 0 2px;}#car-rules #policies
th{padding:6px 12px 0 0;border-bottom:1px solid
#eaeaea;font-weight:bold;empty-cells:show;vertical-align:bottom;}#car-rules
#policies td{padding:6px 12px 0 0;border-bottom:1px solid
#eaeaea;empty-cells:show;}#car-rules p{margin:4px 0;}#location-map
p{margin:4px 0 8px;}#location-map
#map-main{width:705px;height:530px;}#location-map #map-main
ul{padding:0;list-style:none;}#location-map #map-main ul
li{padding:0;list-style:none;}#car #workspace
#nav-btn-hr{width:auto;text-align:center;}#about-content
p{margin:4px 0;}.vendOpts
span{font-size:1.1em;font-weight:700;}#car .recapad{padding:8px 8px
8px 0;position:absolute;right:8px;top:24px;width:315px;}#car
.recapad img{float:right;}#titleRecap.wb_noad #recap{margin:0
8px;}.recap_promo{float:right;text-align:center;width:34%;margin-top:8px;padding-right:8p x;}.recap_promo{width:28%;}.promo_box{background-color:#ffc;border:1px
solid #06c;padding:4px
8px;margin-bottom:6px;}.recap_emph,.pagin_emph,.rev_emph,.gen_emph{font-weight:bold;color :#000;}#content
.promo_box .pkgprice,#content .svgswrap
.pkgprice{font-size:1.27em;font-weight:bold;}.smfont{color:#666;text-align:center;}#hotel Recap{margin-bottom:1em;}#sCase{border:1px
solid #c8d1b6;background:#fff;color:#000;position:relative;}#sCase
h2{background:#c8d1b6;padding:5px;border:0;color:#53574c;font-size:1.3em;}#sCase
#carRecap{margin:5px 10px;}#sCase
.mod_search_link{margin-left:10px;}.carVendor a.shuttle{padding:3px
0 2px 17px;background-repeat:no-repeat;background-position:center
left;}#content #shuttleLegend{display:none;width:338px;padding:8px
0;background-color:#FFF;border:#5f7896 1px solid;}#content
#shuttleLegend h2{margin-left:8px;}#content #shuttleLegend
ul{margin:-7px 0 0 -16px;}#content #shuttleLegend
li{padding-left:28px;background-repeat:no-repeat;background-position:8px
3px;line-height:1.5em;list-style-type:none;}#content #shuttleLegend
li.highlight{background-color:#d5e2eb;font-weight:bold;}#snappy{margin:8px
0;position:relative;}#snappy
.tfArrow{font-size:1.1em;font-weight:900;padding-left:10px;height:35px;}#snappy
#arrow1{position:absolute;left:-1px;top:4px;z-index:1;}#snappy
#arrowText{position:absolute;left:0;top:14px;z-index:3;}#snappy
.snappy_scroll{position:relative;left:110px;height:41px;width:612px;overflow:hidden;z-ind ex:0;padding-top:1px;background:#fff;border-width:1px;border-style:solid;border-color:#036
#959f80 #036 #959f80;}#snappy .snappy_scroll
span{font-size:1.5em;font-weight:900;color:#cb6732;vertical-align:middle;}#snappy
.snappy_scroll img{vertical-align:middle;margin-left:20px;}#snappy
.snappy_scroll span
span{font-size:.69em;font-weight:400;color:#000;}#snappy
.snappy_scroll
#ha_logo{margin-top:3px;margin-right:4px;padding-top:2px;}#advSearch
.stepcontent #pu,#advSearch .stepcontent #do{width:50%;}#advSearch
.stepcontent .sel_loc_off{border-right:solid 1px
#959F80;border-top:solid 1px #fff;border-left:solid 1px
#fff;border-bottom:solid 1px
#959F80;background:#FFE7D0;cursor:pointer;padding:3px 0;Open in CS4 and use Commands > Apply Source Formatting
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Lvanhoff" <[email protected]> wrote in
message
news:[email protected]...
> Is there a way to take css code that looks like this
mess (which I got
> elsewhere) and break it into its legible/workable parts
without going
> through
> it and hitting enter after every closing } ? There are
about 1000 lines of
> this
> stuff like this...this is just a small bit of it...is
there any easy way
> in DW
> to break it up properly?
> Thanks in advance...
> Laura
>
> #car .roundbox .topleft{background:no-repeat top
left;width:auto;}#car
> .roundbox .topright{background:no-repeat top
right;padding:0;}#car
> .roundbox
> .infobody{margin:-10px 0 0;padding:0 10px;}#car
.roundbox
> .botleft{background:no-repeat bottom left;}#car
.roundbox
> .botright{background:no-repeat bottom right;}#content
#popupBody #carTypes
> #totals td.totalLine{border-bottom:1px solid #eee;}#car
> #rate-content{display:block;}#car #rate-content
> #tally{width:706px;float:left;margin-top:8px;}#car
#rate-content #tally
> td.fee{padding:.25em 0 0 0;}#car #rate-content #tally
> hr.hr{display:none;}#car
> #rate-content #tally
td.price{text-align:right;padding:.25em 0 0
> 1.2em;}#car
> #rate-content #tally
>
td.legend{width:60%;text-align:right;padding-right:23px;}#car
> #rate-content
> #tally td.legend
>
img.greenIcon{height:14px;width:13px;margin-right:8px;}#car
> #rate-content #tally
span.total{font-size:1.2em;font-weight:bold;}#car
> #rate-content #tally tr.hilite
td{padding-top:.25em;}#car #rate-content
> #tally
> tr.hilite div.hr-tally{border-top:1px solid #999;}#car
#rate-content
> #upsell
> .img{padding:0;margin:0;}#car #rate-content
> #rate-disc{width:54%;float:left;border-left:1px solid
#ccc;margin:8px 0 0
> 18px;padding-left:18px;}#car #rate-content #rate-disc
> div{width:11em;float:left;}#car #rate-content #rate-disc
> input{width:10em;}#car
> table#upsell{width:706px;border-right:1px solid
#ccc;border-bottom:1px
> solid
> #ccc;border-left:1px solid
#ccc;margin-top:20px;margin-bottom:4px;}#car
> table#upsell td{border-top:1px solid #ccc;padding:0
4px;}#car table#upsell
> tr.selected{background:#eaeaea;}#car table#upsell
>
td.upsell-hd{background:#ccc;padding:4px;font-size:1.1em;font-weight:700;text-al
> ign:center;}#car table#upsell td.img{width:120px;}#car
table#upsell
>
td.price{padding:4px;font-weight:700;cursor:pointer;font-size:1.2em;}#car
> table#upsell
img.greenIcon{height:14px;width:13px;margin-left:8px;}#car
> #spcl-opt{margin:20px 0;width:100%;}#car #spcl-opt
> ul{width:30%;float:left;margin:0;padding:0;}#car
#spcl-opt
> li{list-style-type:none;}#car #spcl-opt
> img{vertical-align:middle;}#car-rules
>
#links{width:180px;float:left;background:#e7ebf0;margin:12px 20px 0
> 0;}#car-rules #links-content{padding:4px 8px 8px
8px;}#car-rules #links
> h4{padding:0;}#car-rules #links ul{margin:0 0 0
14px;padding:0;}#car-rules
> #links li{margin:2px 0;padding:0;}#car-rules
>
#policies{width:504px;float:left;margin-top:8px;}#car-rules
#policies
> h4{margin:8px 0 0;padding:4px 0 2px;}#car-rules
#policies th{padding:6px
> 12px 0
> 0;border-bottom:1px solid
>
#eaeaea;font-weight:bold;empty-cells:show;vertical-align:bottom;}#car-rules
> #policies td{padding:6px 12px 0 0;border-bottom:1px
solid
> #eaeaea;empty-cells:show;}#car-rules p{margin:4px
0;}#location-map
> p{margin:4px
> 0 8px;}#location-map
#map-main{width:705px;height:530px;}#location-map
> #map-main ul{padding:0;list-style:none;}#location-map
#map-main ul
> li{padding:0;list-style:none;}#car #workspace
> #nav-btn-hr{width:auto;text-align:center;}#about-content
p{margin:4px
> 0;}.vendOpts span{font-size:1.1em;font-weight:700;}#car
> .recapad{padding:8px
> 8px 8px
0;position:absolute;right:8px;top:24px;width:315px;}#car .recapad
> img{float:right;}#titleRecap.wb_noad #recap{margin:0
>
8px;}.recap_promo{float:right;text-align:center;width:34%;margin-top:8px;padding
>
-right:8px;}.recap_promo{width:28%;}.promo_box{background-color:#ffc;border:1px
> solid #06c;padding:4px
>
8px;margin-bottom:6px;}.recap_emph,.pagin_emph,.rev_emph,.gen_emph{font-weight:b
> old;color:#000;}#content .promo_box .pkgprice,#content
.svgswrap
>
.pkgprice{font-size:1.27em;font-weight:bold;}.smfont{color:#666;text-align:cente
> r;}#hotelRecap{margin-bottom:1em;}#sCase{border:1px
solid
>
#c8d1b6;background:#fff;color:#000;position:relative;}#sCase
>
h2{background:#c8d1b6;padding:5px;border:0;color:#53574c;font-size:1.3em;}#sCase
> #carRecap{margin:5px 10px;}#sCase
> .mod_search_link{margin-left:10px;}.carVendor
a.shuttle{padding:3px 0 2px
>
17px;background-repeat:no-repeat;background-position:center
left;}#content
> #shuttleLegend{display:none;width:338px;padding:8px
> 0;background-color:#FFF;border:#5f7896 1px
solid;}#content #shuttleLegend
> h2{margin-left:8px;}#content #shuttleLegend
ul{margin:-7px 0
> 0 -16px;}#content
> #shuttleLegend
>
li{padding-left:28px;background-repeat:no-repeat;background-position:8px
> 3px;line-height:1.5em;list-style-type:none;}#content
#shuttleLegend
>
li.highlight{background-color:#d5e2eb;font-weight:bold;}#snappy{margin:8px
> 0;position:relative;}#snappy
>
.tfArrow{font-size:1.1em;font-weight:900;padding-left:10px;height:35px;}#snappy
>
#arrow1{position:absolute;left:-1px;top:4px;z-index:1;}#snappy
>
#arrowText{position:absolute;left:0;top:14px;z-index:3;}#snappy
>
.snappy_scroll{position:relative;left:110px;height:41px;width:612px;overflow:hid
>
den;z-index:0;padding-top:1px;background:#fff;border-width:1px;border-style:soli
> d;border-color:#036 #959f80 #036 #959f80;}#snappy
.snappy_scroll
>
span{font-size:1.5em;font-weight:900;color:#cb6732;vertical-align:middle;}#snapp
> y .snappy_scroll
img{vertical-align:middle;margin-left:20px;}#snappy
> .snappy_scroll span
> span{font-size:.69em;font-weight:400;color:#000;}#snappy
> .snappy_scroll
>
#ha_logo{margin-top:3px;margin-right:4px;padding-top:2px;}#advSearch
> .stepcontent #pu,#advSearch .stepcontent
#do{width:50%;}#advSearch
> .stepcontent
> .sel_loc_off{border-right:solid 1px
#959F80;border-top:solid 1px
> #fff;border-left:solid 1px #fff;border-bottom:solid 1px
> #959F80;background:#FFE7D0;cursor:pointer;padding:3px 0;
> -
CSS code to change cursor to magnify symbol on hover over specific images
Hi to you experts out there! I'm having a problem getting my CSS code to work. (I'm using Adobe CS4 Design Premium)
The web pages I'm working on are a gallery of images, with linked thumb images to the left which when clicked show the complete image on the right of the page. All 'main images' can also be clicked on to link to the next main image along, corresponding to the order of the thumbs. However, some 'main images' when clicked on are linked to larger, full page versions of an image. In this instance I want the user to see the pointer/cursor to change from the little hand to a magnify symbol when hovering over these specific main images. This is where I can't get the css code to work/achieve this.
For your info the main images reside in '#main_image' div. There is a compound CSS Rule for the main image pic called 'main_image a img', for a 2px, white border. There is then a hover state for this 'main_image a img:hover' where the border changes colour. (the main pic is assigned the ID 'img')
I have created a new compound CSS Rule for specific main images, where I want the cursor to change to a magnify symbol, again corresponding to the '#main_image' div, named 'main_image a zoomin' and also a hover state, 'main_image a zoomin:hover'. These two still have the same border attributes as above, 'a img' and 'a img:hover' (these main pics have been assigned the ID 'zoomin'). However, this is where I have also added CSS code for the cursor change. I have tried 15 or so variations of the following, without success:
#main_image a zoomin {
cursor: url ('images/magnify.cur'), pointer;
[then the border attributes...]
and...
#main_image a zoomin {
cursor: url ('images/magnify.cur'), -moz-zoom-in, auto;
[then the border attributes...]
What am I doing wrong? This can't be difficult! Would welcome some help please!
(Within the root directory: WinVista(C)/local_sites/sjcillustration/images' there are two files 'magnify.cur' (a downloaded img) and 'magnify.png' (my custom img - created in Illustrator, which I would actually prefer to use, but can't export as a .cur file). )Call me Capt. Obvious, but why can't you put a "magnify" icon next to or below the thumbnail image along with the words "Click to Zoom?"
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Hello,
I am trying to insert a HTML5 fullscreen ivdeo backround to my website.
I use the following code:
<div id="container">
<video width="100%" preload="auto" autoplay="true" loop="loop">
<source src="assets/video.webm" type="video/webm" />
<source src="assets/video.mp4" type="video/mp4" />
</video>
</div>
body{
margin: 0 0 0 0;
padding: 0 0 0 0;
#container{
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
The upper part works fine. But the it seems the CSS code is beeing ignored.
This is what I want to achieve:
"Here we use CSS to make the video’s container always be the size of the browser window, and make sure that it stays in its spot when scrolling through the HTML content, and a negative z-index value to keep it below our HTML content."
And here is the link: www.mhgrafikdesign.de/new/printdesign
Any tipps?You would need to know CSS. If you need to change Muse CSS you can use Firebug in Firefox to find the element ID. Then you would need to add your custom CSS to the head section in your page properties.
-
can you write an if statement in your css code that if the name of a particular web page is something, apply one css style otherwise apply another.
No. If statements are used in PHP & JavaScript; not CSS.
Use External style sheets for your site wide styles. Use Embedded CSS for page specific styles inside the document's <head> tags.
<head>
<style>
page specific styles go here....
</style>
</head>
Nancy O. -
How to change the profile value in the pl/sql code without making change in the database
How to change the profile value in the pl/sql code without making change in the database.
I have program ,where if the profiles 'printer and nunber of copies ' are set at the user level, by default when the report completes the O/p will be sent to the printer mentioned in the set-up. but what user wants is
if these Profiles are set for the user running this program automatic printing should not be done.
Maybe you are looking for
-
i have previously had computers authorised for itunes but all have been thrown away or are now so broken that they do not even turn on! Please can someone tell me how I can de-authourise them and authorise at least 1 new computer? I have lost alot of
-
How to stop report updating the records
Morning all, I have created a report which calculates reworked jobs according to a group (reason code). I later on added a sub report which calculates all the jobs (that is all the processed jobs). The sub report is linked with main report by Reason
-
Hi I am trying to execute a synchronous scenario of file to RFC. Actualy it worked in XI 7.0. I am trying to do the same thing in PI 7.1 I have done all the configurations, yet it shows the error. Worst part is, it is not shown in sxmb_moni. The stat
-
HT2729 Have loaded music into library from a CD,How do I get it on my IPod Touch
Have loaded music into library from CD,how do I get it from there to my IPod touch,I am new at this and am old
-
Trying to use my iPod as a hard disk
The iTunes tutorial, under "Other ways to use your iPod," gives specific instructions for enabling "your iPod to work as a portable hard disk," but the instructions do not follow what I see on my screen ("Select your iPod in the iTunes Source list" i