RE: Css question

[Mike Jackson]

Hmm, ok, except I couldn't find some of the css (base-selected and
base-not-selected).  That's still a mystery to me.  I've built a tab menu
widget for tiles, I'll see about generating the svg/png's on the fly for it.
Thanks for the information.

--mikej
-=-
mike jackson
[EMAIL PROTECTED]


 -Original Message-
 From: Addi [mailto:[EMAIL PROTECTED] 
 Sent: Friday, June 24, 2005 1:27 PM
 To: user@forrest.apache.org
 Subject: Re: Css question
 
 
 When an image is set as background-image in the css, you 
 won't be able 
 to get the image from clicking on it because there is no direct 
 reference to its location on the server as there is when the 
 image is in 
 the html itself.  Your browser can not see where the image is 
 to save 
 as.  You can get the image in your browser (and save it) by 
 looking up 
 the full name in the css and then direct your browser to 
 forrest_site_url/skin/images/name_of_the_image. (e.g. 
 http://156.132.92.4/skin/images/rc-b-r-5-1header-2tab-selected
 -3tab-selected.png).
 
 - Addi
 
 
 Mike Jackson wrote:
 
 Hmm, that all makes sense but then (when in IE) why don't get I the 
 save as highlighted for the image?  Perhaps png or svg aren't 
 supported for that.  I've done the rounded images before but I was 
 hoping that they had a better way so I won't have to 
 generate the image files.
 
 --mikej
 -=-
 mike jackson
 [EMAIL PROTECTED]
 
 
   
 
 -Original Message-
 From: Addi [mailto:[EMAIL PROTECTED]
 Sent: Friday, June 24, 2005 11:03 AM
 To: user@forrest.apache.org
 Subject: Re: Css question
 
 
 Ah.  Well I can't find the css either but I could find the
 transformation where base-selected and base-not-selected are 
 brought in, 
 which looks like it is part of the process for determining 
 which tab 
 gets which colors.  As for the tab look though, actually the 
 tabs *do* 
 use images.  The basic tab is just css color, but the 
 rounded corners 
 are small images that Forrest makes for you by using base svg 
 rounded 
 corner images, applying the correct colors and then 
 converting into png 
 images on the fly during the build.  If you look in 
 build\site\skin\images you will see the png corner images 
 (all starting 
 with rc-).
 
 You should probably read the HowTo on Tab Corners if you
 haven't already. 
 http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
 
 There are also a number of css tutorials on the net if you
 look for css 
 rounded corners.  There are a few methods that folks employ, 
 depending 
 on situation and all of the ones that I have encountered have 
 required 
 at least a small image.
 
 HTH
 Addi
 
 Mike Jackson wrote:
 
 
 
 Hmm, I don't get it, but then I don't do anything really complex in
 css. Anyhow, I see a reference to a style of base-selected 
   
 
 within the
 
 
 href and a current in tne li for them tab menu.  I can't find
 base-selected anywhere in the static site except in html 
   
 
 files here
 
 
 it's in use.  What I'm really interested in is seeing how
   
 
 the rounded
 
 
 corners are managed without using images.  I figure it has
   
 
 something to
 
 
 do with the css on the li. Here's the section of the
   
 
 generated html
 
 
 I'm looking at:
 
 ul id=tabs
 li class=current
 a class=base-selected href=index.htmlHome/a
 /li
 li
 a class=base-not-selected href=samples/sample.htmlSamples/a
 /li
 li
 a class=base-not-selected 
 href=http://xml.apache.org;Apache XML
 Projects/a /li
 li
 a class=base-not-selected
 href=pluginDocs/plugins_0_70/index.htmlPlugins/a
 /li
 /ul
 
 --mikej
 -=-
 mike jackson
 [EMAIL PROTECTED]
 
 
 
 
 
 
  
 
   
 
 
 
 
 
 
 
 
 
   
 
 
 
 

Re: Css question

[Addi]

Mike Jackson wrote:


I built the sample site using forrest and everything is ok.  My question is
about the tab menu at the top of the page.  I can't seem to find the css for
base-selected or base-not-selected anywhere and would like to know where
it's coming from.  I'd really like to lift this into a tiles project I'm
working on.

 

It is located in {projectdir}/build/site/skin/profile.css.  Tab selected 
is #top .header .current and unselected is #tabs.  It's not terribly 
clear when looking at that file but if you go look at profile.css.xslt 
you can see that's how it is mapped:


xsl:template match=[EMAIL PROTECTED]'tab-selected']
#top .header .current { background-color: xsl:value-of select=@value/;}
#top .header .current a:link {  color: xsl:value-of select=@link/;  }
#top .header .current a:visited { color: xsl:value-of select=@vlink/; }
#top .header .current a:hover { color: xsl:value-of select=@hlink/; }
/xsl:template

xsl:template match=[EMAIL PROTECTED]'tab-unselected']
#tabs li  { background-color: xsl:value-of select=@value/ ;}
#tabs li a:link {  color: xsl:value-of select=@link/;  }
#tabs li a:visited { color: xsl:value-of select=@vlink/; }
#tabs li a:hover { color: xsl:value-of select=@hlink/; }
/xsl:template

xsl:template match=[EMAIL PROTECTED]'subtab-selected']
#level2tabs   { background-color: xsl:value-of select=@value/ ;}
#level2tabs a:link {  color: xsl:value-of select=@link/;  }
#level2tabs a:visited { color: xsl:value-of select=@vlink/; }
#level2tabs a:hover { color: xsl:value-of select=@hlink/; }
/xsl:template

HTH
Addi

Re: css question

[Ferdinand Soethe]

Boynak, Dana Rose wrote:

 I added the code in extra-css

this is a good place to start and experiment.
But you have to be sure that your css is correct or else everything
that comes after your coding error is ignored.


 and the code is the
  following:
 
  img.floatleft {
 
  float: left
 
  margin: 10px 10px 0 0 ;
 
  }
 

Which seems to be the problem here. The missing semicolon after
'float: left' is probably the culprit as far as I can tell.


  Does anyone have any idea what to do or where to add the code?  Thanks
  so much.  Dana

;

--
Ferdinand Soethe