Column height control with css?

If I have a design with 3 columns, is there a way that all 3
columns have the same height even if 1 or 2 columns have less
content than the 3rd? Right now each column ends where the content
ends which gives it a funny look.

Check PVII for an equal column height extension -
http://www.projectseven.com/
It would have to be done with javascript, or with faux
columns (Google
that).
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
==================
"OBJ" <[email protected]> wrote in message
news:e9r783$91j$[email protected]..
> If I have a design with 3 columns, is there a way that
all 3 columns have
> the
> same height even if 1 or 2 columns have less content
than the 3rd? Right
> now
> each column ends where the content ends which gives it a
funny look.
>

Similar Messages

Setting width/height of a control with CSS

Hi,
I am styling a button a button in CSS and set a background-image for the button in my stylesheet.
The problem is, that the button should scale to the width/height of the image.
I added:
-fx-width: 32px;
-fx-height: 32px;
but it has no effect.
I also tried it with
-fx-min-width: 32px;
-fx-min-height: 32px;
If I use setMinWidth(32); in Java, it works.
But I rather want to set it in my stylesheets, because the image can change, if we use another skin.

CSS documentation (http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html) states:
"JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code."
I thought you might be able to do something using the -fx-shape property, but the shape does not affect the size of the button - so that didn't work.
I had more luck with the -fx-graphic property - you could try to enhance the stylesheet below to get what you want.
.root   { -fx-background-color: azure; -fx-padding: 20; }
#smurf-button { -fx-graphic: url("http://bluebuddies.com/smurf_fun/smurf_race/jpg/Smurf_Race_100x100.jpg"); -fx-background-color: transparent; }
#smurf-button:hover { -fx-effect: dropshadow( three-pass-box , rgba(184,134,11,0.6) , 20, 0.0 , 0 , 0 ); }
#smurf-button:armed { -fx-effect: innershadow( three-pass-box , rgba(0,200,0,0.6) , 30, 0.0 , 0 , 0 ); }
public class ButtonStyle extends Application {
public static void main(String[] args) throws Exception { launch(args); }
public void start(final Stage stage) throws Exception {
    final Button button = new Button();
    button.setId("smurf-button");
    final Scene scene = new Scene(StackPaneBuilder.create().children(button).build());
    scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
}

Changing the color of the text in a Menu control with CSS

I want to change the text color of the Menu control in JavaFX. When I create a MenuBar in Scene Builder - it comes with 3 Menu controls by default ("*File*", "*Options*", "*Help*"). I have tried assigning a separate CSS id for each Menu control and using various combinations of properties to influence the text color, but can't seem to get it right whatsoever. What I want to achieve is, i.e., display *"File*" in black, instead of default white.
FXML here:
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
<children>
    <MenuBar id="modBar" layoutX="176.0" layoutY="122.0" styleClass="modBar">
      <menus>
        <Menu id="modItem" mnemonicParsing="false" styleClass="modItem" text="File" />
      </menus>
      <stylesheets>
        <URL value="test.css" />
      </stylesheets>
    </MenuBar>
</children>
</AnchorPane>CSS here:
.modBar
    -fx-background-color: white;
.modItem
    -fx-color: black;
}I have also tried extracting the caspian CSS and playing with various properties related to *.menu* and *.menu-bar*, but still can't see the one responsible for the color of the text in menu controls?
Any help would be greatly appreciated.

I think I have found the answer (just sad that it took me half a day):
.menu .label
     -fx-text-fill: black;
}

Tool Tip with column Height in CL_GUI_CHART_ENGINE

Dear All,
I am generating Columns chart using the class CL_GUI_CHART_ENGINE. I would like to display the column height of every column as tooltip for that column. How can i achieve it ??
The following is the transformation that i am using -
<?sap.transform simple?>
<tt:transform xmlns:tt="http://www.sap.com/transformation-templates">
<tt:root name="CATEGORIES"/>
<tt:root name="SERIES"/>
<tt:template>
<ChartData>
<Categories>
<tt:loop ref="CATEGORIES">
   <Category>
    <tt:value/>
   </Category>
</tt:loop>
</Categories>
<tt:loop ref="SERIES">
    <Series>
       <tt:attribute name="label"><tt:value ref ="LABEL"/></tt:attribute>
       <tt:attribute name="customizing"><tt:value ref ="ID"/></tt:attribute>
       <tt:loop ref="VALUES">
     <Point extension="alt='Capacity'"><Value type="y">
       <tt:value/>
     </Value></Point>
       </tt:loop>
     </Series>
</tt:loop>
</ChartData>
</tt:template>
</tt:transform>
Now for all the Columns, the tool tip is same (Capacity). I want to display the column height also along with it. Thank you.
Regards,
kartik

Hi,
Have you consider using SVG ?
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
Regards.
From here:
http://bost.ocks.org/mike/bar/2/
Code:
<!DOCTYPE html>
<style>
.chart rect {
fill: steelblue;
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
</style>
<svg class="chart" width="420" height="120">
<g transform="translate(0,0)">
    <rect width="40" height="19"></rect>
    <text x="37" y="9.5" dy=".35em">4</text>
</g>
<g transform="translate(0,20)">
    <rect width="80" height="19"></rect>
    <text x="77" y="9.5" dy=".35em">8</text>
</g>
<g transform="translate(0,40)">
    <rect width="150" height="19"></rect>
    <text x="147" y="9.5" dy=".35em">15</text>
</g>
<g transform="translate(0,60)">
    <rect width="160" height="19"></rect>
    <text x="157" y="9.5" dy=".35em">16</text>
</g>
<g transform="translate(0,80)">
    <rect width="230" height="19"></rect>
    <text x="227" y="9.5" dy=".35em">23</text>
</g>
<g transform="translate(0,100)">
    <rect width="420" height="19"></rect>
    <text x="417" y="9.5" dy=".35em">42</text>
</g>
</svg>
Result:

Table Control with default values for a Column

Hi,
I have a table Control with fields kschl    kbetr    konwa    mark
i have created a range for KSCHL
now i need to pass this to the table column
Kindly suggest how can i handle this?
BEGIN OF y_condition,
kschl       TYPE kscha,
kbetr       TYPE kbetr_kond,
konwa       TYPE konwa,
mark        TYPE char1,
END OF y_condition,
t_cost TYPE STANDARD TABLE OF y_condition,
MODULE mo_tc_cost_init OUTPUT.
IF w_tc_cost_c IS INITIAL.
    REFRESH CONTROL c_tc_cost FROM SCREEN c_scr2000.
    REFRESH t_cost.
    MOVE c_select TO w_tc_cost_c.
    FREE r_kschl.
    MOVE: c_i    TO r_kschl-sign,
          c_eq   TO r_kschl-option,
          c_zhb1 TO r_kschl-low.
    APPEND r_kschl.
    MOVE: c_i    TO r_kschl-sign,
          c_eq   TO r_kschl-option,
          c_zhb2 TO r_kschl-low.
    APPEND r_kschl.
    MOVE: c_i    TO r_kschl-sign,
          c_eq   TO r_kschl-option,
          c_zhb3 TO r_kschl-low.
    APPEND r_kschl.
ENDIF.

Can you clarify please?... you say have a table control containing the following columns:
kschl TYPE kscha,
kbetr TYPE kbetr_kond,
konwa TYPE konwa,
mark TYPE char1
so where do you expect the range table "r_kschl" to appear? ... did you want a second table control on the screen?
Jonathan

How can I control the FAQ title with CSS when using the Ajax effect

I am calling the FAQ module with the Ajax effect.
I would like to set different states with CSS to the title;
I have tried to use :hover, :active and :focus on the div.
It would be nice with a different styling when the item is "open"
(I know there is a problem with the stacking, but I posted that in another thread)
link

Hi
There is one thing You might miss in iDVD - So do I - the ability to re-arrange in the DVD map (block diagram)
The order things will be pplayed or addrssed is same as the order each item is introduced into iDVD.
To my knowledge ther is no way around this.
Yours Bengt W

Changing specific column heights.

hi basically on my site i have two columns, a left column of 550px wide and a right column of 250px wide. These columns are made using div tags and contain text and pictures. (i am using an external style sheet) I then have a footer below these two columns. On my pages my left column doesn't have a height so it also expands as i add information to it. As my right column has a background color of grey i have had to set a height to the column so that they grey background travels all of the way down to match up with the left column. This is fine for my home page but as i am using an external style sheet it effects my other pages also. So on my 'about us' page for example which has less text there is empty space in the columns.
So what im asking is, is there a way to change/remove the column heights on the 'about us' pages without it effecting the home pages columns?
sorry if this is confusing. any help will be greatly appreciated.

i cant upload it at the moment but here is the code for the home page
<!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>K Cox Landscapes | Winterbourne | Landscaping</title>
<meta name="keywords" content="landscape, gardener, winterbourne, landscaping, design, company" />
<meta name="description" content="K cox landscapes are a landscaping company based in winterbourne. Gardens from design to completion in areas including bradley stoke and frampton cotterell. K cox landscapes have been designing gardens for over 30 years in the winterbourne area." />
<style type="text/css">
body {
    background-color: #CCC;
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="shaddow">
<div id="wrapper">
    <div id="logo"><a href="index.html"><img src="images/Kcoxlogo.gif" width="450" height="85" /></a></div>
    <div id="navigation"><a href="index.html">Home</a> <a href="aboutus.html">About Us</a> <a href="gallery.html">Gallery</a> <a href="feedback.html">Feedback</a> <a href="contact.html">Contact</a></div>
    <div id="headerImg"></div>
    <div id="bodyArea">
      <div id="left">
      <h1>Garden Landscaping and Design</h1>
        <p>K Cox Landscapes are a garden landscaping company based in Winterbourne Down. We at K Cox Landscapes cover all the Bristol and South Gloucestershire areas. Our work includes designing gardens and building them to our customers needs and desire.</p>
      <img src="images/landscaping.jpg" />
      <p>Whether it's simply a patio, a new lawn, tree and shrub planting or a full garden redesign K Cox Landscapes can accomodate your needs with over 30 years experience behind us.</p>
      <p><a href="aboutus.html">more info</a></p>
      <img src="images/landscaper-winterbourne.jpg" />
      <h2>Customer Feedback</h2>
      <p><a href="feedback.html">Dear Mr.Cox,
      </a>
      <p><a href="feedback.html">We would like to thank you for the fantastic job you and your team have done on our back garden. You have changed what was previously an unused (and mostly unusuable!) space into a really pleasant area to spend time in - we are so pleased the way it looks and works.
      </a>
      <p><a href="feedback.html">the work was carried out quickly, professionally and all on time as promised and the team were very friendly and professional.
      </a>
      <p><a href="feedback.html">we would happily reccommend your services to anyone else.
      </a>
      <p><a href="feedback.html">thanks again
      </a>
      <p><a href="feedback.html">Richard and Kate Turton
      </a></div>
      <div id="right">
      <img src="images/patio.jpg" />
      <h3>Services</h3>
      <h4>Landscaping</h4>
      <h4>Garden Redesign</h4>
      <h4>Patios</h4>
      <h4>Planting</h4>
      <h4>Turfing</h4>
      <h4>Decking</h4>
      <h4>Block Paving</h4>
      <h5>Contact:<br />01454 774292 or<br />
      07747 385681      </h5>
      </div>
      <div id="footer">Copyright © K Cox Landscapes. All Rights Reserved</div>
    </div>
</div>
</div>
</body>
</html>
and the css file
    margin: 0px;
    padding: 0px;
#wrapper {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #999;
    border-left-color: #999;
#wrapper #logo {
    height: 100px;
    background-color: #FFF;
a img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
#wrapper #navigation {
    height: 35px;
    background-image: url(../images/ronavbarbg.jpg);
    background-repeat: repeat-x;
#wrapper #headerImg {
    height: 250px;
    background-image: url(../images/flowerHpImg.jpg);
    background-repeat: no-repeat;
#wrapper #bodyArea #right {
    float: right;
    width: 250px;
#wrapper #bodyArea #left {
    float: left;
    width: 550px;
    background-color: #FFF;
#wrapper #bodyArea #footer {
    clear: both;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 30px;
#wrapper #navigation a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #175206;
    text-decoration: none;
    display: block;
    height: 35px;
    width: 100px;
    float: left;
    text-align: center;
    line-height: 32px;
    background-image: url(../images/ro.jpg);
    background-repeat: no-repeat;
    background-position: left top;
#wrapper #navigation a:hover {
    background-image: url((URL));
    background-position: bottom;
#shaddow {
    width: 840px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/dropshaddow.jpg);
    background-repeat: repeat-y;
#shaddow #wrapper #bodyArea #left img {
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-left: 20px;
    border: 8px solid #999;
#shaddow #wrapper #bodyArea #right img {
    border: 8px solid #999;
    margin-top: 20px;
    margin-right: 10px;
    margin-left: 10px;
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666;
    margin: 20px;
p a {
    text-decoration: none;
h1 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin: 20px;
    font-weight: bold;
    color: #333;
h2 {
    margin: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #333;
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    text-decoration: underline;
h4 {
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666;
h5 {
    color: #999;
    font-size: 16px;
    margin-right: 10px;
    margin-left: 10px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
.imageHolder {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    background-color: #e7e7e7;
    height: 600px;
.imageHolder img {
    margin-top: 60px;
    margin-right: 45px;
    margin-left: 45px;
    border: 5px solid #999;
.imageHolder img:hover {
    margin-top: 60px;
    margin-right: 45px;
    margin-left: 45px;
    border: 5px solid #333;
thanks

Why can't i change row and column height in tables?

a mind-boggling problem to be sure. For some odd reason, I can't use the inspector to type in row/column heights for tables. I can use the up/down arrows, but those only work in increments of 1. I can manually adjust them one by one but as soon as I edit text in a different table cell, I have to start all over again. Does anyone else have this problem?

Hi Gerry & Ric
I had already tried both of your suggestions without any luck but I appreciate the help anyway. I should've been a bit more specific: I can actually type in the column/row height windows, but when I press return or tab, Pages ignores the numbers. I've tried using both the number pad and the regular keyboard numbers and every manner of clicking, enter, tab, control, alt......there must be some setting with my computer that is causing an incompatibility with Pages. Boh!
Susie

Help with CSS Page Layout

I guess I am "old school" in that I have always used tables
to lay out my web pages. I decided I must learn to do it with CSS,
but I'm having a terrible time (and it shouldn't be so hard!). I
understand how to define the styles, add divs, etc. Here's what I'm
having trouble with:
How do I specify the normal page width to be 800 pixels,
however I want it to be relative to the browser (i.e., 100% of 800
pixels).
I understand the "float" tag, but if I have a right-hand
sidebar, I can't seem to get the text to the left (in a div called
"maincontent") to stop at the sidebar and wrap to the next line. I
tried specifying "Hidden" as my textbook suggests, but that has no
effect.
I can easily do all of this with tables, so do I really need
to abandon them?
Thanks!

Hi Jane,
I'll try to answer all your questions, then a tip or two to
stop the main
content from dropping when the browser window size is
reduced.
- " I didn't realize that
margin-top: 0px;
margin-right: auto;
is not the same as margin: 0px auto;
That's right.
margin: 0px auto; is actaully saying make the top margin 0,
the right margin
auto, the bottom margin 0 and the left margin auto.
It's just CSS shorthand.
For example, you might have:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left:15px;
You could just use margin: {10px 20px 5px 15px;}
Think of a clock to remember the directions.
12:00 top, 3:00 right, 6:00 bottom, 9:00 left.
If any of the values are the same, you can shorten it more.
For example, if top is 10, right is 20, bottom is 5 and left
is 20, it's
margin: {10px 20px 5px;}
If the 4th location (left) is missing a value, it makes it
the same as what
you have for right.
If top and bottom are 10px, and left and right are 20px,
it's:
margin {10px 20px;}
If the last two positions ( bottom and left vlaues ) are
missing, then it
will use the top value for the bottom, and the right value
for the left.
What auto right and left is doing is subtracting your content
width (the
container width) from the browser window width, and then
dividing the
remainder in 2 and applying each value to each side of the
container.
-"I found that they all took on the font of the maincontent
and I had to fix
them
individually. "
The only text that should be Time is the text in your main
content, where
you have that font defined. Everything else should be Arial
if you define
the body as such. I'll post a link at the end of this.
- "I put my bold sentence (Friendship, Fun, etc.) in h1, but
I had to change
the
color & size, so that added another style element. "
You don't need to give the h1 a class. You can actually just
style the h1
tag:
h1 {
margin: 10px 10px 2px;
font-size: larger;
color: #941238;
You can only use h1 once on a page.
You can use h2, h3, h4, etc, as many times as you would like,
and you can
style these just like the h1 style above.
- "I don't quite understand the .rightsidebar p { and
container p{
I am assigning the spacing to the <p> tag? What exactly
is that doing?"
That is saying, give all the <p> tags inside the
rightsidebar container the
follwing style.
So, in this example:
.rightsidebar p {
font-size: 18px;
margin: 2px 10px;
it's saying give all the <p> tags in this container a
size of 18 and margin
of 2px top and bottom, and 10px left and right.
It's a lot easier than giving a class to every <p> tag
- "I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div
class="footer">"
You could, if the footer was in the container. It just needs
to be the final
element before the close of a container that contains the
float(s).
-Do you use the <div class="container"> technique all
the time?
Yes, most of the time. I usually put everything in it, and
use the
margin:0px auto; to center it.
That way, I don't have to try to get a number of different
elements to align
with the right and left sides by applying values to all of
them, which can
get tricky quickly.
-"If you'll indulge me one more question, I wonder if it's
possible to put a
graphic (say, of a putting green) underneath my
rightsidebar? I would want
the sidebar to lay on top of the putting green for an
interesting artistic
touch.
Yes, you can give that div a background image. You just need
to make the div
the same size as the image so you see it all (or vice-versa).
Now, to make that maincontent not drop like it does you can
remove the width
in the CSS. Now it will expand over to the left edge of the
rightsidebar.
You can control how close it gets by giving the right sidebar
a bigger left
margin. The point is, with no width assigned, the maincontent
will shrink
down to the longest word in it before it drops.
Here's what it looks like:
http://tnsgraphics.com/test2.htm
Let me know if you have any questions.
Take care,
Tim
"janeinpa" <[email protected]> wrote in
message
news:[email protected]...
> Hi, Tim...
>
> You have been very kind to help me learn CSS! I very
much appreciate it
> and
> am really delighted to have gained a better
understanding of this. I
> studied
> all your suggestions and started the page from scratch.
Take a look here:
>
http://www.allisonwebcreations.com/ewga_site/good_page/indexgood.htm
I'm
> very
> pleased with it. I discovered a couple of things:
>
> I didn't realize that
> margin-top: 0px;
> margin-right: auto;
>
> is not the same as margin: 0px auto;
>
> are they two different codes? Anyway, it didn't center
until I fixed
> that.
>
> I understand what you're saying about the font codes
being redundant,
> however
> I found that they all took on the font of the
maincontent and I had to fix
> them
> individually. This must be an error in how I'm coding
it. Is the order
> in
> which I did them to blame? I put it in the order that
I'm reading it, but
> perhaps I should do it differently.
>
> I also couldn't get the footer to move left to the
margin. I'm not sure
> why,
> since I think I followed all your suggestions.
>
> I put my bold sentence (Friendship, Fun, etc.) in h1,
but I had to change
> the
> color & size, so that added another style element.
I'm afraid that
> probably
> isn't correct. I also couldn't have my normal content
text follow
> immediately
> on the same line. Maybe that isn't possible.
>
> I don't quite understand the .rightsidebar p { and
container p{
> I am assigning the spacing to the <p> tag? What
exactly is that doing?
>
> I also don't quite understand the .clear {
> Why not just choose clear:both on the next section
<div class="footer"> ?
>
> Do you use the <div class="container"> technique
all the time? How do you
> decide what goes in it -- just floating items or can I
think of it as a
> table
> that holds all my main blocks of info? Why not include
the footer in it?
>
> If you'll indulge me one more question, I wonder if it's
possible to put a
> graphic (say, of a putting green) underneath my
rightsidebar? I would
> want the
> sidebar to lay on top of the putting green for an
interesting artistic
> touch.
>
> Thank you, thank you, thank you again. Here are my css
codes (which I
> have in
> an external file. Is it better to import or link to the
file?)
>
> Have a wonderful New Year.
>
>
>
>
>
>
> .body {
> padding: 0px;
> margin-top: 0px;
> font-family: Arial, Helvetica, sans-serif;
> }
> .masthead {
> width: 780px;
> margin: 0px auto;
> padding-top: 10px;
> padding-right: 0px;
> }
> .maincontent {
> background-color: #FFFFFF;
> text-align: left;
> width: 60%;
> margin-top: 0px;
> padding-top: 10px;
> padding-right: 0px;
> font-family: "Times New Roman", Times, serif;
> font-size: medium;
> color: #000000;
> }
> .maincontent p{
> margin-top: 2px;
> margin-right: 10px;
>
> }
> .rightsidebar {
> font-size: small;
> background-color: #DEEBE4;
> text-align: center;
> float: right;
> width: 250px;
> margin-top: 10px;
> margin-left: 20px;
> border: thick solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
>
> }
> .leftbox {
> font-size: small;
> font-style: italic;
> color: #336600;
> background-color: #DEEBE4;
> text-align: center;
> clear: both;
> width: 300px;
> margin-top: 50px;
> border: thin solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
> }
> .footer {
> font-size: small;
> margin: 100px;
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-style: normal;
> }
> .container {
> width: 90%;
> margin: 0px auto;
> }
> .clear {
> font-size: 1px;
> line-height: 0px;
> clear: both;
> height: 0px;
> }
> .event {
> font-size: 24px;
> font-weight: bold;
> color: #00493E;
> }
> .upcomingdate {
> font-size: 20px;
> color: #990134;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> .eventitem {
> font-size: 18px;
> color: #000000;
> font-weight: bold;
> margin: 0px;
> }
> .eventlink {
> font-size: 14px;
> font-style: italic;
> margin: 0px;
> }
> .smallboxhead {
> font-size: large;
> color: #00493E;
> font-style: normal;
> font-weight: bold;
> }
> .companyname {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: small;
> font-style: italic;
> color: 990134;
> }
>

Help with CSS positioning of menu

Hello.
Am slowly making some progress following recent difficulties
with CSS.
At the moment things are finally looking the same on
different browsers EXCEPT the menu bar to the right of the movie:
http://www.notjustthenews.co.uk/page2_movies.html
Basically in Internet Explorer it's where I want it to be,
level with the top of the movie, but in Safari it drops down much
lower.
Is there anything I can do to stop this happening?
This is the CSS I'm using for the menu:
width: 300px;
height: 160px;
float: left;
margin-top: 40px;
margin-bottom: 0px;
margin-left: 85px;
display: block;
clear: none;

There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
     <header>logo and menu goes here </header>
          <section>
               <aside>left column content</aside>
               <aside>right column content<aside>
          </section>
      <footer>footer goes here </footer>
</body>
Nancy O.

Help with CSS modifications...

Hi!
Finally got this up online for temporary testing. Here are
the items I'd like to modify...not sure how to tweak the code/css.
1) for starters, the links on the left hand continously move
down when I hit return in order to add more content on the page.
I'd like for everything in the left hand panel to be completely
static, and so the links fit into that transparency block within
the background image. (they are in a table now, before I had them
outside of a table, but I had a difficulty controlling them) When
we correct these to move up, the contact phone #, etc, will move up
where they should be positioned as well.
2) if you click on one of the links, the remainder of the
links all receive the 'visited' state visual; it's reading as one
cohesive element. That should not be, as they are independent.
3) I'm trying to control the "join our mailing list" to move
up into the sign up box, and in turn, this will bring up my main
paragraph closer to the top of this cell.
As you will see, I'm attempting to control this with CSS as
much as I can.
Thank you for your help; I really appreciate it!
www.fasttag.com/prestige-lane-testing-phase

> 1) for starters, the links on the left hand continously
move down when I
> hit
> return in order to add more content on the page. I'd
like for everything
> in the
> left hand panel to be completely static, and so the
links fit into that
> transparency block within the background image. (they
are in a table now,
> before I had them outside of a table, but I had a
difficulty controlling
> them)
> When we correct these to move up, the contact phone #,
etc, will move up
> where
> they should be positioned as well.
They are moving because a) they are in a table that is nested
in a table
cell, b) the table cell in which that table is nested has no
vertical
alignment specified, c) with no vertical alignment specified,
you get the
default, which is MIDDLE, and d) as the outer table grows in
height, the
middle point of the cell in which the navigation table is
nested also
migrates lower.
The solution is to assign the CSS style vertical-align:top to
td.navlinks.
> 2) if you click on one of the links, the remainder of
the links all
> receive
> the 'visited' state visual; it's reading as one cohesive
element. That
> should
> not be, as they are independent.
This is because they are all linking to the same target.
Visit one, and all
become visited.
<tr>
<td><a href="
http://www.fasttag.com">FastTag</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Greenlight
Keycard</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Pocket
Concierge</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Other
Hotel Products</a></td>
> 3) I'm trying to control the "join our mailing list" to
move up into the
> sign
> up box, and in turn, this will bring up my main
paragraph closer to the
> top of
> this cell.
The " " is not a layout tool. Don't use it as if it
were -
<h1
class="signup"> SIGN
UP!</h1>
If you want that content spaced over from the left, use a
padding-left style
on the .signup class.
Do not use background-attachment on that <h1> -
.signup {
height: 50px;
width: 99px;
border: 1px solid #C5C19D;
margin-top: 20px;
margin-left: 420px;
margin-right: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #591F00;
font-size: 13px;
background-image: url(images/signup-gradient.jpg);
background-repeat: repeat-y;
background-position: 10px;
background-attachment: fixed;
Replace your markup for that <h1> and <td> with
this -
<td width="546" height="261" valign="top"><h1
class="signup"
style="padding-left:10px;width:89px;">SIGN UP!<br>
<span class="joinmailinglist"
style="margin-left:0;">Join our
<br>mailing list</span></h1>
Finally, validate your page, and fix the errors. You have
table heights,
for example....
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
==================
"r_tist" <[email protected]> wrote in
message
news:[email protected]...
> Hi!
>
> Finally got this up online for temporary testing. Here
are the items I'd
> like
> to modify...not sure how to tweak the code/css.
>
> 1) for starters, the links on the left hand continously
move down when I
> hit
> return in order to add more content on the page. I'd
like for everything
> in the
> left hand panel to be completely static, and so the
links fit into that
> transparency block within the background image. (they
are in a table now,
> before I had them outside of a table, but I had a
difficulty controlling
> them)
> When we correct these to move up, the contact phone #,
etc, will move up
> where
> they should be positioned as well.
>
> 2) if you click on one of the links, the remainder of
the links all
> receive
> the 'visited' state visual; it's reading as one cohesive
element. That
> should
> not be, as they are independent.
>
> 3) I'm trying to control the "join our mailing list" to
move up into the
> sign
> up box, and in turn, this will bring up my main
paragraph closer to the
> top of
> this cell.
>
> As you will see, I'm attempting to control this with CSS
as much as I can.
>
> Thank you for your help; I really appreciate it!
> www.fasttag.com/prestige-lane-testing-phase
>
>
>

Help with CSS & Firefox

Could anyone help with the query below. I posted this last
friday but never
got a reply. The original message that i posted is also
below. It might be
easier to read from the bottom up.
Thanks
James
----------------------------------->
Thanks for your reply.
I've changed my code as you suggested & now the content
div is coming about
half way down the page- so were getting somewhere. There are
floated
elements so I have added the 'clearthefloats' div. There are
no absolutely
positioned elements, but I tried making the content div
position:relative
anyway but it had no effect.
I also added some text into the 'clearthefloats' div so i
could see where it
was on the page & it is halfway down the page itself,
even though it is
below the other elements in the page.
Thanks,
James
"typist" <[email protected]> wrote in
message
news:[email protected]...
> How are you positioning what is inside your contentdiv?
Are the elements
> floated?
> IE will surround your floated elements, Firefox will not
unless you put a
> non-floated element after the floated ones, and clear
it.
>
> <div class="clearthefloats"> </div> (I just put a comment in to
> hold
> the div)
>
> div.clearthefloats {clear:both:} (look up "Stylin' with
CSS" by Charles
> Wyke-Smith for more)
>
> But if you are putting absolutely positioned elements
into your div, then
> you
> need to make your content div position:relative. This
will make the
> elements
> position in the context of the content div instead of
the body.
>
ORIGINAL MESSAGE:
>>Hi,
>>I've got a page with css controlled div's. One of
them ('content') not
>>very
>>surprisingly contains all the page elements. For some
reason though, when
>>viewed in firefox the content div does not wrap round
it's contents (the
>>bg
>>of the page has a light purple color and the content
div is white). There
>>is
>>just a thin strip of white at the top where it
begins. It looks fine in
>>ie.
>>Here's the code for the content div:
>>#content {width:760px;
>> margin:0px auto;
>> background-image:url(images/logostrip.jpg);
>> background-position:top;
>> background-repeat:no-repeat;
>> background-color:#FFFFFF;
>> padding-bottom:10px }
>>I have tried defining the height, which works in
firefox, but then in ie
>>there is about 100px space at the bottom of the
content div. For some
>>reason
>>1000px in firefox is shorter than 1000px in ie???
>>Is there anything i am missing?
>>Thanks,
>>James

Yes I have tried setting the height. It should wrap round the
whole page
content not just the graphic. I tried setting the height till
it looked
right in firefox but then in ie there was about 150px extra
at the bottom.
(this was on another page which is a lot longer). Plus if i
set the height
to be right on the homepage, the other pages will be wrong. I
would have to
use seperate style sheets, or give the div's different id's.
Surely there is a way to get the div that all the contents
are in, to simply
wrap round them.
Thanks
"Nadia : **AdobeCommunityExpert**"
<[email protected]> wrote
in message news:[email protected]...
> Setting a height of 306px on that container, revealed
the whole graphic as
> per the visual in IE.
> I did this using the FFox edit CSS tool - but it should
work.
>
> --
> Nadia
> Adobe� Community Expert : Dreamweaver
> --------------------------------------------
>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
> --------------------------------------------
>
http://www.perrelink.com.au
- Web Dev
>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>
http://www.adobe.com/devnet/dreamweaver/css.html
> -------------------------------------------------
> "Nadia : **AdobeCommunityExpert**"
<[email protected]>
> wrote in message
news:[email protected]...
>> Is that the graphics in the #container?
>> Have you tried setting a height on that container to
the height of your
>> header image?
>>
>> --
>> Nadia
>> Adobe� Community Expert : Dreamweaver
>> --------------------------------------------
>>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
>> --------------------------------------------
>>
http://www.perrelink.com.au
- Web Dev
>>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>>
http://www.adobe.com/devnet/dreamweaver/css.html
>> -------------------------------------------------
>> "James D" <[email protected]> wrote
in message
>> news:[email protected]...
>>> Ok,
>>>
>>> please visit
http://www.beta-design.co.uk/ivesys_home_white/home.html
to
>>> see
>>> the page.
>>>
>>> If you view it in Firefox you will see a thin
white strip at the top.
>>> This
>>> should wrap round the page contents. It works in
IE. If you cannot
>>> access
>>> the css which is in an external file then please
repost and i will paste
>>> it
>>> all into a reply.
>>>
>>> Thanks
>>>
>>>
>>>
>>>
>>>
>>> "Osgood" <[email protected]>
wrote in message
>>> news:[email protected]...
>>>> James D wrote:
>>>>
>>>>> Could anyone help with the query below.
I posted this last friday but
>>>>> never
>>>>> got a reply. The original message that i
posted is also below. It
>>>>> might be
>>>>> easier to read from the bottom up.
>>>>
>>>> Its better to link to the complete page
rather than just supplying half
>>>> the story. If you do that its going to be
easier to identify the issue.
>>>> With the little information you have
supplied its not going to be
>>>> possible.
>>>>
>>>
>>>
>>
>>
>
>

Vertical Menu with CSS

Hi there.
I have been working through the excellent tuturial posted by
Adrian Senior and its the Designing with CSS – Part 4:
Creating a Two-Column Layout one.
I'm happy with doing all that and have successfully completed
what he has done, but I want to know how to stretch the left
floating horizontal menu so that the height is the same as the
content.
I want to be able to create a page with a menu and content,
exactly as the tuturial, but with the background colour of the menu
actually going to the bottom of the page, so however long the
content happens to be.
If anyone can help, I would be very grateful!
Thanks in advance,
Craig Shaw

Google "faux column".
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
==================
"craig_shaw" <[email protected]> wrote in
message
news:etr29e$nsj$[email protected]..
> Hi there.
>
> I have been working through the excellent tuturial
posted by Adrian Senior
> and
> its the Designing with CSS ? Part 4: Creating a
Two-Column Layout one.
>
> I'm happy with doing all that and have successfully
completed what he has
> done, but I want to know how to stretch the left
floating horizontal menu
> so
> that the height is the same as the content.
>
> I want to be able to create a page with a menu and
content, exactly as the
> tuturial, but with the background colour of the menu
actually going to the
> bottom of the page, so however long the content happens
to be.
>
> If anyone can help, I would be very grateful!
>
> Thanks in advance,
>
> Craig Shaw
>

How Do You Populate A Spark List Control With An Array?

Hello, all,
Sorry to come accross so frustrated, but how in the name of God do you populate a Spark list control with the data in an array? You used to be able to do this with the mx:List control, but the guys developing Flex just had to make things more difficult than they need to be! I am more of a code purist and prefer doing things the way they have been done for decades, but apparently nothing can ever stay simple!
I simply want to populate a list control with an array and this shouldn't be rocket science! I found out that I must use a "collection" element, so I decided that an arrayCollection would be best. However, after searching Adobe's documentation about arrayCollections, I am lost in a black hole of data binding, extra lines of code just to add a new element, the need to sort it, etc...!
Here is my code:
var pendingArray:ArrayCollection = new ArrayCollection();
for ( var i:int = 0 ; i < queue.length ; i++ )
     var item:UserQueueItem = queue[i] as UserQueueItem ;
     if ( item.status == UserQueueItem.STATUS_PENDING )
     pendingArray.addItem({label:item.descriptor.displayName,descriptor:item.descriptor});
Here is the relevant MXML:
<s:VGroup>
     <s:List id="knockingList" width="110" height="100"/>
</s:VGroup>
I'm not getting any errors, but the list is not populating.
I have seen several examples where the arrayCollection is declared and populated in MXML:
        <mx:ArrayCollection id="myAC">
            
            <fx:Array id="myArray">
                <fx:Object label="MI" data="Lansing"/>
                <fx:Object label="MO" data="Jefferson City"/>
                <fx:Object label="MA" data="Boston"/>
                etc...
           </fx:Array>
        </mx:ArrayCollection>
That may be fine for an example, but I think this is a rare situation. Most of the time I would image that the arrayCollection would be created and populated on the fly in ActionScript! How can I do this?
Thanks in advance for any help or advice anyone can give!
Matt

In your post it seemed like you were trying to take care of many considerations at once: optimization, design, architecture. I would suggest you get something up and running and then worry about everything else.
If I use data binding, then I will probably have to declare the arrayCollection as a global variable and then I'll have to write 100 or so extra lines of code to addItem(), removeItem(), sort(), etc... It just seems like too much overhead.
I believe you may have some misconceptions about databinding in general. You won't have to make it a global variable and you certainly won't need an extra 100 lines of code. If you did this forum would be a very , very quiet place.
I don't want to use data binding because the original array is refreshed often and there is one function called by an event that re-declares the arrayCollection each time, populates it with the array, and then sets it as the list's dataprovider.
That is the beauty of the ArrayCollection, it can handle the updates to its source Array. I don't know if you need to redeclare the ArrayCollection, resetting the source to the new Array allows everyone involved to keep their references so you don't have to worry about any "spooky" stuff going on.

How to Populate a Dropdown field for a table control with different keys

Hi All,
I have Table control with abt eight columns (fields). Out of these eight field one field is with dropdown list. In table control Project ID is Primary key column. Depending upon this Project ID value, i have different values which is to be populated in dropdown boxes. In table control if there is only one project ID value say 'P000715' i can populate it but when i have more than one project ID (P000715, p000716, P000717.....) in display in rows of table control i want to have different values in my dropdown field corresponding to that row of project id. Experts please tell me how to achieve this functionality.
Thankx in Advance
Rizwan Ahmad Siddiqui

The only way you may be able to do this is using
MODULE PROCESS ON VALUE-REQUEST. User-programmer F4 help
in your PAI routine.
In this routine you would build the list and get the returned value to update the field.
Something like this.
DATA: BEGIN OF value_tab OCCURS 0,
    field1 TYPE zlmltype,
    field2 TYPE zltypex,
END OF value_tab.
* Drop down values
REFRESH it_return_tab. CLEAR it_return_tab.
REFRESH value_tab. CLEAR value_tab.
SELECT ltype ltypex
    INTO TABLE value_tab
    FROM zlmltyp
    WHERE auth NE '9'.    "System Only
CALL FUNCTION 'F4IF_INT_TABLE_VALUE_REQUEST'
       EXPORTING
            retfield   = 'FIELD1'
            value_org = 'S'
       TABLES
            value_tab = value_tab[]
            return_tab = it_return_tab.
READ TABLE it_return_tab INDEX 1 INTO wa_return_tab.
CHECK sy-subrc EQ 0.
p_pleadtyp = wa_return_tab-fieldval.

Column height control with css?

Similar Messages

Maybe you are looking for