Images or css images

heyall,
how is best to simply update your index.jsp file to and bring in some images to your web page? is it better practice to create new .jsp files for this? is there any rules to follow?
Thanks

Fast prototypes can be done with HTML and Images export, additional tweaking in DW will require some planning ahead, or attempting the prototype as a CSS and Images export.
David Hogue has some excellent articles and videos on Adobe.com about the prototyping process, including how to add things like Google Maps and custom JavaScript. Can't recall if he used CSS or HTML export, though.
Jim Babbage

Similar Messages

How do I scale a lot of images using CSS in HTML5 and CSS3

I have a CSS image gallery that displays a larger photo with descriptive text below it, when a thumbnail image is hovered on.
Each photo has code like that following:
<a class="thumbnail" >
<img src="thumbs1/paradethumbs/DSC_0073.jpg" alt="thumbnail picture" />
<span><img src="pics1/paradepics/DSC_0073.jpg" alt=" " /><br /> 19 - a black faced sheep.</span>
</a>
The first source is a thumbnail, image stored at a size of 72 by 48.
The second source is an image stored at 600 x 400.
When the thunbnail is hovered on, the larger photo is displayed at its full size using css.
There are 20 or so thumbnails in this gallery, and different numbers in other galleries that use the same code.
The example above is number 19 from 20.
This works fine on tablets and larger displays.
When I wish to show it on an Iphone or similar, with a display that is 480 or less wide, I need to scale the larger photo down to 300 wide.
As the Iphone will have a lower quality of image than a larger display, it will not matter too much if the 600x400 photo is scaled down, and having tried it by giving it an ID with CSS like
#imagescale{ width:300px; } it looks acceptable. However, as IDs are supposed to be unique, then thats a no go area for the remaining photos.
My problem is how do I select the second image source shown in bold above, and scale it and the span text by 50%.
The text is not too important as it can be changed to fit - the image is the main problem.
I need someting like "if the display is less than 600 and the image is in the pics directory, display it at 300 wide".
The browser will hopefully take care of the height.
Any suggestiosn would be appreciated.
Howard Walker

Thanks Nancy. The general idea and the link to the article helped a lot.
However, the css using using a percentage had unpredictable results when selecting repeated images.
The first one scales to 50% and then the next scales to 50% of the last one (25%) and so on ad infinitum, unless you click on another object that is not an image.
Using a pixel size like 280px rather than a percentage did the trick, but it also involved changing lots of other items before I could get everything to fit.
Now I have a better knowledge of media queries and how to set them up.
Best of all, all my image galleries work fine just using css and html. Never thought that would happen.
Take five stars!
And the same to David Powers for his great article.
Howard Walker

How to load images from css file in JavaFX 8

I have this css file which loads images in JavaFX 8 application:
#pill-left {
    -fx-padding: 5;
     -fx-border-image-source: url("/com/dx57dc/images/left-btn.png");
    -fx-border-image-slice: 4 4 4 4 fill;
    -fx-border-image-width: 4 4 4 4;
    -fx-border-image-insets: 0;
    -fx-border-image-repeat: stretch;
     -fx-background-color: null !important;
#pill-left:selected { -fx-border-image-source: url("/com/dx57dc/images/left-btn-selected.png"); }
#pill-left .label {
    -fx-text-fill: #d3d3d3;
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.75) , 0, 0.0 , 0 , -1 );
#pill-left:selected .label {
    /* -fx-text-fill: black; */
    -fx-text-fill: white;
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
#pill-center {
    -fx-padding: 5;
     -fx-border-image-source: url("/com/dx57dc/images/center-btn.png");
    -fx-border-image-slice: 4 4 4 4 fill;
    -fx-border-image-width: 4 4 4 4;
    -fx-border-image-insets: 0;
    -fx-border-image-repeat: stretch;
     -fx-background-color: null !important;
#pill-center:selected { -fx-border-image-source: url("/com/dx57dc/images/center-btn-selected.png"); }
#pill-center .label {
    -fx-text-fill: #d3d3d3;
     -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.75) , 0, 0.0 , 0 , -1 );
#pill-center:selected .label {
    -fx-text-fill: black;
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
#pill-right {
    -fx-padding: 5;
    -fx-border-image-source: url("/com/dx57dc/images/right-btn.png");
    -fx-border-image-slice: 4 4 4 4 fill;
    -fx-border-image-width: 4 4 4 4;
    -fx-border-image-insets: 0;
     -fx-border-image-repeat: stretch;
    -fx-background-color: null !important;
#pill-right:selected { -fx-border-image-source: url("/com/dx57dc/images/right-btn-selected.png"); }
#pill-right .label {
     -fx-text-fill: #d3d3d3;
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.75) , 0, 0.0 , 0 , -1 );
#pill-right:selected .label {
    -fx-text-fill: black;
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
The images are located at the Java package com.dx57dc.images
In Java 7_25 this code works as expected but in JavaFX 8 b99 I get this error:
ava.lang.NullPointerException
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:1129)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:1598)
at com.sun.javafx.sg.prism.NGNode.render(NGNode.java:1520)
at com.sun.javafx.sg.prism.NGGroup.renderChildren(NGGroup.java:233)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:199)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:1249)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:1598)
at com.sun.javafx.sg.prism.NGNode.render(NGNode.java:1520)
at com.sun.javafx.sg.prism.NGGroup.renderChildren(NGGroup.java:233)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:199)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:1249)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:1598)
at com.sun.javafx.sg.prism.NGNode.render(NGNode.java:1520)
at com.sun.javafx.tk.quantum.ViewPainter.doPaint(ViewPainter.java:99)
at com.sun.javafx.tk.quantum.AbstractPainter.paintImpl(AbstractPainter.java:210)
at com.sun.javafx.tk.quantum.PresentingPainter.run(PresentingPainter.java:95)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:471)
at java.util.concurrent.FutureTask.runAndReset(FutureTask.java:304)
at com.sun.javafx.tk.RenderJob.run(RenderJob.java:58)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at com.sun.javafx.tk.quantum.QuantumRenderer$PipelineRunnable.run(QuantumRenderer.java:129)
at java.lang.Thread.run(Thread.java:724)
D3D Vram Pool: 13,331,480 used (5.0%), 13,331,480 managed (5.0%), 268,435,456 total
20 total resources being managed
4 permanent resources (20.0%)
1 resources locked (5.0%)
7 resources contain interesting data (35.0%)
0 resources disappeared (0.0%)
D3D Vram Pool: 13,331,480 used (5.0%), 13,331,480 managed (5.0%), 268,435,456 total
20 total resources being managed
4 permanent resources (20.0%)
1 resources locked (5.0%)
7 resources contain interesting data (35.0%)
0 resources disappeared (0.0%)
D3D Vram Pool: 13,331,480 used (5.0%), 13,331,480 managed (5.0%), 268,435,456 total
20 total resources being managed
4 permanent resources (20.0%)
1 resources locked (5.0%)
7 resources contain interesting data (35.0%)
0 resources disappeared (0.0%)
What is the proper way to load images from css in Java 8?
Ref
How to load images from css file in JavaFX 8 - Stack Overflow

There is nothing special to do - you execute the statement from your program just like any other SQL statement. The only thing to be aware of are the privilege/permission issues:
When loading from a file on a client computer:
READ CLIENT FILE privilege is also required for the database user.
Read privileges are required on the directory being read from.
The allow_read_client_file database option must be enabled.
The read_client_file secure feature must be enabled.
Revoking these privileges is also the only way you can prevent a user from executing the statement.

Multiple CSS image rollovers on a page

Hi there,
So, I have miraculously managed to create my first ever CSS image rollover navigation button on my webpage. This page is an online art gallery so there will be several small image rollover buttons linking to different pages of art.
My question is now that I've created one CSS rollover, do I have to create a brand new one for each additional button or is there a way to change the image and name of the existing button?
Here is my CSS and HTML for the existing image rollover:
/** Declaration for the a.singleRollover selector **/
a.singleRollover {
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
    text-indent: 0px;
    font-size: 0px;
    line-height: 0px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
/** Declaration for the additional states of the a.singleRollover selector **/
a:hover.singleRollover {
    background-position: 0 -90px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
<div id="smallBox01a"><a class="singleRollover" title="Tobi rollover" href="Images/CSS Rollover/ButtonTOBI.jpg"></a></div>
The problem is that the background image is already set as ButtonTOBI. Is there a way to specify the image in the HTML each time individually rather than in the main a.singleRollover item? It seems very repetitive to have to go in and create lots of individual CSS rollover buttons.
Thanks in advance for any help.

Go here -
http://www.alistapart.com/articles/sprites
http://www.tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.a sp
Read about how to use a single image for all of your menu 'rollovers'. It works great!

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
This is just a picture of colours in a swirl effect.</span>
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

Send HTML Email with Embedded Images and CSS

Hi All,
I have a html page. I want to send that html page(not with attachment) with all images and css. i search and try but I cant find a good solution. can any one help... plz..........
Thank You.....

If you want to send the html page and have it
reference the images and css files on your web
site, that's pretty easy. Just create a message
with text/html content that is your html page.
If you want to include all the images and css files
in your message along with the html page, you'll
need to create a multipart/related message and
you'll need to change all the html to reference the
images and css files using "cid:" references.

CSS images not loading

ALl when I had my images in the same package as the class. And the following css statements
-fx-background-image: url("image.png");
But now I want to package my images and css into a directory structure.
So when running inside eclipse I have the css and images in bin
so
bin/name.css
bin/images/image.png
So I change the url to
-fx-background-image: url("images/image.png");
It does not load.

Checked it in my own project (eclipse too), its working for me!
Is your CSS actually loading?
Maybe you can provide the code, where you are loading the CSS?
In your case it should look somethink like that:
scene.getStylesheets().add("name.css");But I wont suggest to add the images and css directly into the bin folder, because the next "Project clean" will delete your files!
I would suggest to add another source folder to your Build Path. I have my java source files in "src/main/java" and the resources (images, css, fxml ...) in "src/main/resources"!
than you can load your css by the following code:
scene.getStylesheets().add(this.getClass().getResource("/name.css").toExternalForm());Edited by: BurnedToast on 01.02.2012 10:52

Project Structure Images from css not showing in subfolders....

Hi, I'm a newbe to JSF but really want to learn how to use it as Im currently doing a college project with Hibernate, and the JSF managed beans seems ideal for projects like this, anyways here's my prob...
Im using Netbeans 6.8 for a web-project with the normal folder structure, so in the Web Pages folder, i've an
index.xhtml intro page
css folder
js folder
images folder
pages folder for rest of pages
and obviously to access the css in the index page i'd include:
<link href=css/style.css rel=stylesheet type=text/css />and then to access and add images to the index pages from the css, i the style.css file I have e.g.,
body{
     font-family:sans-serif, Ariel;
     font-size:12px;
     background: url(../images/bg.png) top left repeat-x;
} and so on for all the js and ajax stuff which all works fine.
However in the pages subfolder say I've a page called solar.xhtml well then while it is possible for to access the css's by using ../ as in
    <link href=../css/style.css rel=stylesheet type=text/css />which adds the colour scheme and font types etc.so it's 100% getting this, however the images from the images folder are not being displayed, which I really can't understand as if I change the page to solar.jsp then it works fine also all the files inthe js folder are being accessed from the subfolder with ../ just not the images.
Would really appreciate any help or advice you could give me....
Many Regards
Pat Nevin

Hi - I've found the solution, so thanks anyway for anyway who was gona help!

Unable to install supporting objects(custom CSS/Images) through SQL

4.2.1
Hi there,
we have a Apex app which uses custom CSS/images loaded into shared objects CSS and image folders respectively. I followed the steps
http://nerd.net.au/29-apex-application-express/general-application/122-include-images-with-supporting-objects-on-apex-export-import
Now, this works fine when we manually import the application through application builder, it "prompts" if we want to install supporting objects, when yes is selected, everything gets installed.
MY problem is we have an automated patching process where the .sql application file gets installed but the supporting objects are not. So I tried bundling the supporting object as a separate .sql file but got an error
Testing options PL/SQL procedure successfully completed. declare * ERROR at line 1: ORA-20001: Package variable g_security_group_id must be set. ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 11 ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 31 ORA-06512: at
The supporting object is a button. Do I need to set the application id or security group id or something else?
begin
wwv_flow_api.g_varchar2_table := wwv_flow_api.empty_varchar2_table;
wwv_flow_api.g_varchar2_table(1) := '89504E470D0A1A0A0000000D494844520000009600000051080600000030EC5FEE000000097048597300000B1300000B1301009A9C1800000A4D6943435050686F746F73686F70204943432070726F66696C65000078DA9D53775893F7163EDFF7650F56';
wwv_flow_api.g_varchar2_table(2) := '42D8F0B1976C81002223AC08C81059A21092006184101240C585880A561415119C4855C482D50A489D88E2A028B867418A885A8B555C38EE1FDCA7B57D7AEFEDEDFBD7FBBCE79CE7FCCE79CF0F8011122691E6A26A003952853C3AD81F8F4F48C4C9BD80';
wwv_flow_api.g_varchar2_table(3) := '021548E0042010E6CBC26705C50000F00379787E74B03FFC01AF6F00020070D52E2412C7E1FF83BA50265700209100E02212E70B01905200C82E54C81400C81800B053B3640A009400006C797C422200AA0D00ECF4493E0500D8A993DC1700D8A21CA908';
wwv_flow_api.g_varchar2_table(4) := '008D0100992847240240BB00605581522C02C0C200A0AC40222E04C0AE018059B632470280BD0500768E58900F4060008099422CCC0020380200431E13CD03204C03A030D2BFE0A95F7085B8480100C0CB95CD974BD23314B895D01A77F2F0E0E221E2C2';
wwv_flow_api.g_varchar2_table(5) := '6CB142611729106609E4229C979B231348E7034CCE0C00001AF9D1C1FE383F90E7E6E4E1E666E76CEFF4C5A2FE6BF06F223E21F1DFFEBC8C020400104ECFEFDA5FE5E5D60370C701B075BF6BA95B00DA560068DFF95D33DB09A05A0AD07AF98B7938FC40';
wwv_flow_api.g_varchar2_table(6) := '1E9EA150C83C1D1C0A0B0BED2562A1BD30E38B3EFF33E16FE08B7EF6FC401EFEDB7AF000719A4099ADC0A383FD71616E76AE528EE7CB0442316EF7E723FEC7857FFD8E29D1E234B15C2C158AF15889B850224DC779B952914421C995E212E97F32F11F96';
wwv_flow_api.g_varchar2_table(7) := 'FD0993770D00AC864FC04EB607B5CB6CC07EEE01028B0E58D27600407EF32D8C1A0B91001067343279F7000093BFF98F402B0100CD97A4E30000BCE8185CA894174CC608000044A0812AB041070CC114ACC00E9CC11DBCC01702610644400C24C03C1042';
wwv_flow_api.g_varchar2_table(8) := '06E4801C0AA11896411954C03AD804B5B0031AA0119AE110B4C131380DE7E0125C81EB70170660189EC218BC86090441C8081361213A8811628ED822CE0817998E04226148349280A420E988145122C5C872A402A9426A915D4823F22D7214398D5C40FA';
wwv_flow_api.g_varchar2_table(147) := 'A514B7B6B6EA5AADA60B8582EAECEC54511471BD5EE7BEBE3EBF4E108FCA58FE9601580A68199FDAF12F8D1DDB5E3386221ADD8E3AF3CEC772A73505D60820C32BF0238E6DAF5D508DBAFFF2CFACE20C3E9A03E2789F3430B68D6DAF641BF33D8D6D63C0';
wwv_flow_api.g_varchar2_table(148) := '1ADBC68035B68D016B6C1BDBC68035B6BD46B6FF3B0074B1DD40306DC6CD0000000049454E44AE426082';
end;
declare
    l_name   varchar2(255);
begin
    l_name := 'logo.png';
wwv_flow_api.create_or_remove_file(
     p_name=> l_name,
     p_varchar2_table=> wwv_flow_api.g_varchar2_table,
     p_mimetype=> 'image/png',
     p_location=> 'WORKSPACE',
     p_nlang=> '0',
     p_mode=> 'CREATE_OR_REPLACE',
     p_type=> 'IMAGE');
end;
/

Thanks Fac586! I did follow the process on those lines and was able to successfully get the images, application installed. The CSS which just had
body {
     background-color:#000000;
}Was also applied. However, it for some reason does not work. Looks like the CSS is not getting loaded. When I delete the CSS and upload it again through the shared components->CSS folder, it works fine. Not sure what the solution is!
Oh and by the way, thanks a ton for helping everyone!
Cheers,
Ryan

Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!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>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

How reference images in css

Hi Everybody,
how can i reference images in css of a JspDynPage? Until now i used the following piece of code which only works if i put the css inside my jsp file. What could be the reason? When i put the css part in a seperate file the images are not referenced.
index.jsp:
<%     String mimeUrl = componentRequest.getWebResourcePath(); %>
<link rel="stylesheet" href='<%=mimeUrl+"/css/myStyle.css"%>' type="text/css" />
<ul class="glossymenu">
     <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
     <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
</ul>
myStyle.css:
<style>
.glossymenu{
     position: relative;
     padding: 0 0 0 34px;
     margin: 0 auto 0 auto;
     background: url(<%=mimeUrl%>/images/menub_bg.gif) repeat-x;
     height: 46px;
     list-style: none;
</style>
regards,
Seed
Edited by: seed_mopo on Aug 18, 2008 10:42 AM

Hi,
the jsp code in your css file is never executed by the server. This line of code in your css file will remain the same (check by accessing the css file via your browser):
url(<%=mimeUrl%>/images/menub_bg.gif)
your options are:
- add the full path in your css file (add the <%=mimeUrl%>/images/menub_bg.gif as a temporary printout to your jsp and view the full path)
- put this section or all of the css definition locally in your jsp file
- create a jsp file with all the css definitions that is included as a jsp file
JSP code will only execute within jsp pages which are rendered by the application server. Any code added to external files such as js or css files will not render.
Cheers,
Dion

Centering Images using CSS but having links on the Images

Hi all,
I have a problem on centering an image using CSS. I read on many forums that you have to use margin-left , margin-right and set to auto. and also set the display:block which I had done.
The problem is if I want to have a link from the image. Because I have set the display to block, the link will span the entire container containing it! How do I resolve that? I only want the image to be linkable and not the entire container!
Thanks for reading!

Murray *ACP* wrote:
Because I have set the display to block, the link will span the entire container containing it!
That's incorrect. If the display:block is applied to only the IMAGE, the anchor tag will be exactly the same dimensions as the image and will not fill the container.
Hi Murray,
Weirdly it does in my experiments. (code below). Even if I set the 'a' tag to the width of the image it still makes the whole <div> container clickable:
<!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>Untitled Document</title>
<style type="text/css">
#imgWrapper {
    width: 900px;
    margin: 0 auto;
    border: 1px solid #000;
#imgWrapper img {
    margin: 0 auto;
    display: block;
</style>
</head>
<body>
<div id="imgWrapper">
<a href="http://www.bbc.co.uk"><img src="slice_2.jpg" width="595" height="130" /></a></div>
</body>
</html>

How to reference images from CSS for a portal component

how can I reference an image stored in the standard "/images" folder in a .PAR file from a CSS file?
I tried
.myHTMLelement {
   background-image: url('/images/TAB.bmp ') }
but it does not work (the image can't be found).
I don't want to use the API
request.getWebResourcePath() + "/images/saplogo.gif
in my JSP because this needs to get into a CSS file.

Hmmm,
When project is deployed, the JSP's are usually located in private section:
<i>\usr\sap\EED\JC00\j2ee\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\WEB-INF\portal\portalapps\projectname\pagelet\someJSP.jsp</i>
but the CSS is in public section:
<i>Z:\usr\sap\EED\JC00\j2ee\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\portalapps\projectname\css\someCSS.css</i>
Now if you want to include the CSS in JSP I think you HAVE TO use the <i>getWebResourcePath</i> method:
<link rel="stylesheet" href='<%=componentRequest.getWebResourcePath()+"/css/someCSS.css"%>' type="text/css" />
or directly define the style:
<style type="text/css">

</style>
Just check your deployment and fit it to your needs...
Hope this helps,
Romano
PS: for example look at this:
<i>\usr\sap\EED\JC00\j2ee\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\WEB-INF\portal\portalapps\com.sap.pct.pdk.htmlbcontrols\pagelet\all_examples.jsp</i>

CSS Images

Hi,
Is there anyway to find out the CSS images delivered with SAP Portals.
For ex. I am trying to customize the light detailed tree delivered with Portal.
When I downloaded lightdetailed tree from Portal and imported into NWDS, CSS images in the /dist/css folders are missing.
Can anybody tell me from where I can get these css files.
P.S : I do not hv access to login to server via remotely.
Best Regards,
Ravi Kumar.

Hi,
The best way to change the look and fill of the portal is to use the theme editor.
you can change there the icons of the light detailed navigation tree as well, you can check this link for info:
http://help.sap.com/saphelp_nw04/helpdata/en/1a/d7c1617dd29e4d85064b467636fada/content.htm
You need to navigate to System Administration -> Portal Display,
choose your theme.
then the theme editor will be opened, and you need to choose the light Detailed Navigation iView, and then you will be able to change the images you want.
Hope its help,
Avi

To load image in css

i have one problem:
if i want to load an image from a rightcontext i do it so:
<h:graphicImage url="<%=request.getContextPath() %>/img/myImage.gif"/>now i would like to use css (styleClass) and image should be loaded there:
unfortunately no one of these possibilities works
.myImage
     background: url('img/myImage.gif');
     background: url('<%=request.getContextPath() %>img/myImage.gif');
     background: url('<%=request.getContextPath() %>'+'img/myImage.gif');
}how can i load the image in css with right context?

You don't need to specify request.getContextPath() in your CSS file simply provide a path in your CSS like background: url(relative path w.r.t. your context root).
E.g. background-image: url("btnbg.bmp"); if the image is in the current directory as the CSS.
Please ensure that you have linked the CSS into your JSF page with a
<portlet:defineObjects />
<LINK rel="stylesheet" type="text/css"
     href='<%= renderResponse.encodeURL(renderRequest.getContextPath() + "/theme/stylesheet.css") %>'
     title="Style">

Images or css images

Similar Messages

Maybe you are looking for