containers in percentage widths

I built my application using scripts so that I can import xml in text boxes, panels etc content. What I want, it's 100% to my Panel so that it fills the space and if I move the HDividedBox he only put in a scroll bar. It works for a fixed width:

myPanel.width = 700;

But if I enter

myPanel.width = 100%; or
myPanel.width = "100%";

It does not work. Any ideas?

Have you use the percentWidth and percentHeight properties if you want to percentages.

Tags: Flex

Similar Questions

Increasing the percentage width via ActionScript component?

Hello
I made a Custom Component of Serach result of the textInput.
I am building this component dynamically. The condition is that under certain conditions, I want to make its width to 100%.
I tried this way, but his does not work
If (viewName is FIELD)
searchVuiewNode.width=100%;

Please tell me how can I increase width percentage wise dynamicallly?
Thank you.

searchVuiewNode.percentWidth = 100;

Image with width percentage causes the offset Y

When I put an image spark or mx on a percentage width, or 30%, the image is shifted location Y expected / desired. I have the Image in a HBox and I wait until it is flush with the top, but it seems to keep the same focus as the image full-size adding padding to the top.
Any suggestions?

Try to do the following:
1. PaddingTop set to the myBox 0
2. PaddingLeft set to the myBox 0
Image of the spark isn't horizontalAlign and verticalAlign, if the steps above don't work, try with a mx Image and setting the horizontalAlign and verticalAlign on the image for the top and left. Looking at your picture, it seems that it is the scale of the image horizontally and vertically and the pixels of the image of drawing in the vertical center of the Image. You must specify the Image in order to align the top and left.

How to adjust column widths individual classic SQL report

Hello
I use Oracle APEX v4.2 with IE8 browser and basically tries to adjust widths of individual columns in my classic SQL report. Basically, I have three columns I want to spacing, so that the width of the entire region for the report is used, but am not sure how to proceed.
I drilled in individual columns and specified the column widths as the element, but in vain.
Would appreciate help on how to do this for each column and hope that I do not need to change the model of report (if possible).
Thank you.
Tony.

Tony F. says:

I use Oracle APEX v4.2 with IE8 browser and basically tries to adjust widths of individual columns in my classic SQL report. Basically, I have three columns I want to spacing, so that the width of the entire region for the report is used, but am not sure how to proceed.

There is an element of uncertainty in what we suggest as well, because you have not specified the theme and the report of model that is used. This information is required for any question of formatting or the visual layout.

I drilled in individual columns and specified the column widths as the element, but in vain.

Report in some themes templates may be missing in the #COLUMN_WIDTH substitution string # required for use of the declarative column widths, as shown here: Re: width of column in reports

I don't know why it would be missing from a theme of so-called "modern" (perhaps the lack of documentation affects even the Oracle theme designers), but you can add it to the models listed in this thread.

Width of the element applies only to controls on a form in a table.

Would appreciate help on how to do this for each column and hope that I do not need to change the model of report (if possible).

This can be done using selectors CSS attribute (for the themes of quirks mode non-traditional, because you are using a legacy version of IE). Add a style sheet in CSS Inline property page:
```
#ALIAS,
td[headers="ALIAS"] {
width: 40%;
}
```
where the ALIAS value in the attribute selector matches the required column alias, and the width property specifies the column dimension required and the units.

Note that the percentage widths will be compared to the width of the report table. Therefore, it may be necessary to also specify widths (100%) for the table of report and its components. Exactly how is based on the report, the region and the page templates and theme used, information that was not provided.

Newbie question: could not get the widths equal object

I have two paths of rectangle in my document. I don't remember exactly how I created the, but as far as I know, they are very similar, same fill, none related. They are the two vertical sides of a rectangular border around the perimiter of my doc.
I would like to change the widths to be the same. Percentage width/height constraints are disabled. I enter the width of an object in the field of the width of the other and of width, but a number of unpredictable changes. I put in a new issue again and the width changes into something new but not what I want. I tried to use different units, same result. I have no problem changing the heights of horizontal paths corresponding to be the numbers I want.
There is a visible difference between the paths: when the disturbing path is selected, the blue outline around it is wider than the other tracks.
I ended up throwing the path of boredom and the copy of that good as a workaround. But I would like to know what is happening, I guess I'm missing something basic.
I hope someone can help.

It's 'Use Preview Bounds' enabled. If you want to know the details you should read "Why the Transform Palette will do what I ask?" by http://tpettit.best.vwh.net/adobe/index.html

The part of report of a report region table setting to fill the region

I need to make them with any part of the report, the section of report fills the width of the region, the column spacing all also in the entire region.
The screenshot below shows the report occupies only a small part of the region. I need the region to this width to maintain the page layout consistency between pages.
I can change the CSS so that it affects
. Report-standard-alternatingrowcolors {}
Width: 750px;
}
And then the same set the columns to specific width, but this application is displayed on a number of different resolutions, thereby affecting the specific widths is not all good.
If I value percentage widths it does not.
Any ideas?
The following screenshot shows what I want to achieve, even if it made specific widths specifying, in px, which means that it is not scalable for different resolutions.

The external table that contains the table of standard report also must be set to 100% width. Change the CSS rule:
```
table[id^="report_"],
.report-standard {
  width: 100%;
}
```

Content not lining up

Can someone tell me why this is happening?
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"
<!-TemplateBeginEditable name = "doctitle"-->
< title > Untitled Document < /title >
<! - TemplateEndEditable - >
<!-TemplateBeginEditable name = "head"->
<! - TemplateEndEditable - >
< style type = "text/css" >
 < / head >
< body >
< div class = "container" >
< div class = "sidebar1″" >
< ul class = "nav" >
< li >
"< div align ="center"> < a href ="... / 1 "> ULTRA (STARTS @ $300) < /a > < / div >
< /li >
< li >
"< div align ="center"> < a href ="... / 2 "> PREMIUM (STARTS @ $165) < /a > < / div >
< /li >
< li >
"< div align ="center"> < a href ="... / 3 "> ADVANCED (STARTS @ $115) < /a > < / div >
< /li >
< li >
"< div align ="center"> < a href ="... / 4 "> EXPRESS (STARTS @ $65) < /a > < / div >
< /li >
< li >
"< div align ="center"> < a href ="... / 5 "> BASIC (STARTS @ $40) < /a > < / div >
< /li >
< li >
"< div align ="center"> < a href ="... / 6 "> BUDGET (STARTS @ $30) < /a > < / div >
< /li >
< li >
"< div align ="center"> < a href ="... / 7 "> EXTERIOR or INTERIOR ONLY (STARTS @ $100) < /a > < / div >
< /li >
< /ul >
< p > price includes all services. Before detailing us your car through us a detailed list and define each service needs of your car. Any additional services that may be needed will be negotiated before the retail. We have our confidence in our work and the Foundation of our commitment to quality. Your vehicle is an extension of yourself, so that we will strive to exceed your expectations! < br / >
< br / >
< br / >
< br / >
< br / >
< br / >
< br / >
< br / >
< /p >
< / div >
< div class = "content" >
Outdoor ULTRA PACKAGE RETAILER < h1 > < / h1 >
< p > ULTRA PREMIUM DETAIL & amp; WAX < br / >
Our most complete indoor and outdoor retailer package to restore your vehicle to its best possible condition. < br / >
< strong > GO $300 < facilities > < br / >
< Em > SERVICES OUTSIDE < /em > < / p >
< ul >
< li > we come to you! < /li >
< li > Complete off washing < /li >
< /li > < li > hand dry
< li > clean and degrease the rims and tires < /li >
Polish wheels < /li > < li >
< li > Apply-tires / wheels dressing < /li >
< li > clean all amounts of door and trunk seals < /li >
Windows < li > inside and outside cleaning < /li >
contaminants dangerous < /li > < li > bar clay all painted surfaces to remove
< li > quality to apply wax to the hand on all painted surfaces < /li >
< li > dressing outside of plastics < /li >
< /li > < li > low engine compartment wipe
paint several stages of polishing/buffing < /li > < li >
< li > < /li > sealer paint
< li > headlights restore if necessary. < /li >
< /ul >
< / div >
< div class = "container" >
< div class = "content" >
Outdoor ULTRA PACKAGE RETAILER < h1 > < / h1 >
< p > ULTRA PREMIUM DETAIL & amp; WAX < br / >
Our most complete indoor and outdoor retailer package to restore your vehicle to its best possible condition. < br / >
< strong > GO $300 < facilities > < br / >
< Em > INTERIOR SERVICES < /em > < / p >
< ul >
trunk carpet and floor < li > empty seats, carpet, < /li >
Clean all interior surfaces < /li > < li >
< li > UV protector apply to all inner surfaces hard to restore the shine and luster < /li >
< li > wipe down all leather and apply a conditioner. < /li >
< li > Interior carpet shampoo, trunk and floor < /li >
< li > Deep clean and condition leather seats OR deep clean and shampoo fabric seats < /li >
Clean < /li > < li > seat covering
< li > Service time: 4 hours * < /li >
< /ul >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< / body >
< / html >

Remove the highlighted line
Outdoor ULTRA DETAIL PACKAGE

WAX & ULTRA PREMIUM RETAIL

Our most complete indoor and outdoor retailer package to restore your vehicle to its best possible condition.

STARTING AT $ 300

INTERIORS SERVICES
- Seats, carpet, trunk mat and vacuum floor
- Wipe the inner surfaces
- Apply UV Protector for all inner surfaces hard to restore the shine and luster
- Wipe all surfaces in leather and apply a conditioner.
- Shampoo Interior carpets, trunk and floor mats
- Deep clean and condition leather upholstery OR deep clean and shampoo seats cloth
- Coating head
- Service hours: 4 hours *.

The combination of multiple provisions of external reflow

Is there a way to combine the multiple external reflow provisions into one?

Hi Dave.

You * can * do what you say, all masks for screen sizes in a single project of reflow. My answer was combining multiple files into a single rflw file rflw.

I don't want get into web design adaptive vs reactive, but with reflow, you use media queries, CSS and percentage widths and * no * generally use available predefined sizes.

Design for different screen sizes in the reflow, the basic workflow is to start at one extreme (say 'broad' or office) and ask the elements of the way in which you want to display. Then manually change width canvas of reflow with the capture card and see where the design 'breaks '. (For example, this may seem very well until you get to, say, 600px wide.) Then you add a breakpoint at this width, which adds a media query, and change in appearance of things for this width & closer, by changing the CSS values, perhaps to hide elements, etc.. Keep this and you'll end up with a unique design allowing to adjusts the width of the screen of whatever you put it on.

Hope that helps!

VIC

Incompibilities alignment browser

I am trying to Center a form on my page using css text-align: center. This works very well in internet explore. In firefox, however, the form remains on the left.
Here are two photos:
Internet Explorer:
Firefox:
==================================================================================
Here is my html code:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
"< html xmlns ="http://www.w3.org/1999/xhtml"> <!-InstanceBegin template="/Templates/cliffsteele.dwt ' codeOutsideHTMLIsLocked = 'false'->
< head >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<!-InstanceBeginEditable name = "doctitle"-->
Cliff < /title > < title > home page
<! - InstanceEndEditable - >
< style type = "text/css" >

< link href = "cliff.css" rel = "stylesheet" type = "text/css" / > "
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "
<!-InstanceBeginEditable name = "head"->
< style type = "text/css" >
. Container content div div {}
text-align: center;
}
< / style >
<! - InstanceEndEditable - >
< / head >
< body >

< div class = "container" >
< div class = "header" > < img src = "Pictures/logo.gif" alt = "Logo" name = "Insert_logo" width = "81" height = "63" id = "Insert_logo" style ="background: #8090AB; Display: block; "/ >

<! - end .header - > < / div >

< div class = "sidebar1″" > <!-InstanceBeginEditable name = "sidebar"-> < img src = "Pictures/back1.jpg" width = "72" height = "72" / > "
< style p = "do-size: larger;" font family: "Comic Sans MS", cursive "> contact me by mail, telephone or electronic mail < /p >"
< p > < img src = "Pictures/back1.jpg" width = "72" height = "72" / > < / p > "
< p > < img src = "Pictures/back1.jpg" width = "72" height = "72" / > < / p > "
<! - InstanceEndEditable - >
<! - end .sidebar - > < / div >

< div class = "content" >

< div > < ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < a href = "cliffsteele.html" > home < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Resort
< ul >
< li > < a href = "facilities.html" > our facilities < /a > < /li > ""
< li > < a href = "Kennel.html" > Boarding & amp; "" Daycare < /a > < /li >
< li > < a href = "spa.html" > grooming < /a > < /li > ""
< li > < a href = "#" > rates < /a > < /li >
< /ul >
< /li >
< li > < a class = "MenuBarItemSubmenu" href = "#" > view < /a > handling
< ul >
< li > < a href = "#" > news < /a > < /li >
< li > < a href = "#" > rates < /a > < /li >
< li > < a href = "calendar.html" > annex < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > photo library < /a > < /li >
< li > < a href = "#" > about me < /a > < /li >
< li > < a href = "#" > please < /a > < /li >
< /ul > < / div >

< br / >
<!-InstanceBeginEditable name = "title"->
< h1 style = "margin: 10px;" Clear: both; text-align: center; font size: xx-large. do-family: Georgia, "Times New Roman", Times, serif; padding-top: 20px; "> Please < / h1 >
<! - InstanceEndEditable - >

< div > <!-name = 'content'-> InstanceBeginEditable
< div style = "text-align: center;" font-size: medium; do-family: Georgia, "Times New Roman", Times, serif; padding-bottom: 20px; ">
1395 RT. 6 < br / >
Carmel, NY 10512-1627 < br / >
United States < br / >
pH: (845) 225-2463 < br / >
Cell: (845) 661-0010 < br / >
< style p = "" margin-bottom: 20px; "> < / p >"
< / div >

< div class = 'form' ' > '.
< name of the form = "contact form" method = "post" action = "send_form_email.php" > "

< table width = "450px" >

< b >

< td valign = "top" >

< label for = "FirstName" > name * < / label >

< table >

< td valign = "top" >

< input type = "text" name = "FirstName" maxlength = "50" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" ">"

< label for = "name" > family name * < / label >

< table >

< td valign = "top" >

< input type = "text" name = "name" maxlength = "50" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" >

< label for 'email' = > E-mail address * < / label >

< table >

< td valign = "top" >

< input type = "text" name = "email" maxlength = "80" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" >

< label for = 'phone' > phone number < / label >

< table >

< td valign = "top" >

< input type = "text" name = "phone" maxlength = "30" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" >

Comments of < label for 'comments' = > * < / label >

< table >

< td valign = "top" >

< name textarea = "comments" maxlength = "1000" cols = "25" lines = "6" > < / textarea >

< table >

< /tr >

< b >

< td colspan = "2" style = "text-align: center" >

"" < input type = "submit" value = "Submit" > < a href = "Email" _mce_href = "http://www.freecontactform.com/email_form.php" > Email "> http://www.freecontactfo rm.com/email_form.php" > Email form < /a >

< table >

< /tr >

< /table >

< / make >

< / div >
<! - InstanceEndEditable - > < / div >
<! - end content - > < / div >

< div class = "footer" >

< div style = "float: right" >
"< p > < a href ="MAILTO:[email protected]"> Site designed by Fredric M. Zipser < /a > < br / >"

< /p >
< / div >

< div class = "clearfloatleft" >
< p > Clifford W. Steele professional manager < br / >
1395 RT. 6 < br / >
Carmel, NY 10512-1627 < br / >
United States < br / >
pH: (845) 225-2463 < br / >
Cell: (845) 661-0010 < br / >
"< a href ="MAILTO:[email protected]">[email protected]< /a > < /p > "
< / div >

<! - end .footer - > < / div >

<! - end .container - > < / div >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
< /script >
< / body >
<! - InstanceEnd - >
========================================================================
Here is my externel Css page:
@charset "utf-8";
{body
Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.
background: #4E5869;
margin: 0;
padding: 0;
Color: #000;
}
/ * ~ ~ Tag of the element selectors ~ ~ *.
UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
H1, h2, h3, h4, h5, h6 {p}
margin-top: 0; / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
padding-right: 15px;
padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
do-size: x-small;
color: #FFF;
}
an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
border: none;
}
/ * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
a: link {}
color: #414958;
text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
}
a: visited {}
color: #4E5869;
text-decoration: underline;
}
a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
text-decoration: none;
color: #0033ff;
font-size: medium;
do-family: "Comic Sans MS", cursive;
}
/ * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.
. Container {}
Width: 80%;
Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */
min-width: 780px; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */
height: 80%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
left margin: auto;
background-color: #93A5C4;
}
. Container .footer #fMisc div p {}
do-family: Verdana, Geneva, without serif.
do-size: x-small;
color: #FFF;
}
/ * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
. Header {}
background: #6F7D94;
}
/ * ~ ~ These are the columns for page layout. ~~
(1) padding is only placed on the top and/or bottom of the divs. The elements contained in these divs have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.
(2) no margin was given to the columns, because they all floated. If you need to add the margin, avoid placing on the side you're floating into (for example: a right margin on a div set to float to the right). Many times, padding can be used instead. For divs where this rule needs to be broken, you must add a statement of ' display: inline ' to the rule of the div to tame a bug where some versions of Internet Explorer double the margin.
(3) given that the classes can be used several times in a document (and an element can also have several classes applied), the columns have received the names of classes instead of IDs. For example, two sidebar div could be stacked if necessary. These can easily be changed to the ID if that's your preference, as long as you don't use them once per document.
(4) If you prefer your nav on the left instead of the right, just float those columns the opposite direction (to the left instead of all rights), and they will return in reverse order. There is no need to move the div in the HTML source code.
*/
{.sidebar1}
float: right;
Width: 20%;
padding-bottom: 64px;
height: 100%;
do-family: "Comic Sans MS", cursive;
make-weight: bolder;
font-size: medium;
border-top-width: 0%;
border-right-width: 0%;
border-bottom-width: 0%;
border-left-width: 0%;
background-color: #93A5C4;
background-repeat: repeat;
margin: 0px;
overflow: hidden;
}
. Happy {}
Width: 80%;
float: right;
background-image: url (back1.gif);
background-repeat: repeat;
background-color: #93A5C4;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 70px;
padding-left: 0px;
height: 100%;
overflow: hidden;
}
/ * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.
. Content ul, ol {} content
padding: 0 15px 15px 40px; / * This padding reflects the right padding in the titles and the paragraph above net. Padding was placed on the bottom for the space between the other elements in the lists and on the left to create the withdrawal. These can be adjusted as desired. */
}
. Container content #MenuBar1 {}
background-image: url (back1.gif);
background-repeat: repeat;
margin left: 6%;
}

/ * ~ ~ The list of navigation styles (can be removed if you choose to use a contextual menu premade as Spry) ~ ~ * /.
UL. NAV {}
list-style: none; / * This command deletes the list marker * /.
border-top: 1px solid #666; / * This creates the top border for the links - all the others are placed using a bottom border on the LI * /.
margin-bottom: 15px; / * This creates space between the following content browsing * /.
}
{ul li. NAV
border-bottom: 1px solid #666; / * This creates separation button * /.
}
UL. NAV, the ul.nav: visited {/ * these selectors of grouping allows you to ensure that your links to retain their look button even after the ongoing visit * /}
padding: 5px 5px 5px 15px;
display: block; / * Gives the link properties block causing it to fill the whole container LI. This causes the entire area responds to a mouse click. */
text-decoration: none;
background: #8090AB;
Color: #000;
}
UL. NAV a: hover, ul.nav one: ul.nav active,: focus {/ * this changes the background and color of text for browsers of the mouse and the keyboard * /}
background: #6F7D94;
color: #FFF;
}
/ * ~ ~ Footer ~ ~ * /.
.footer {}
background: #6F7D94;
position: relative; / * This gives hasLayout IE6 to well clear * /.
Clear: both; / * This clear property forces the .container to understand where the columns end up and contain them * /.
font size: xx-small;
Color: #000;
margin: 0px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
/ * ~ ~ various float/clear classes ~ ~ * /.
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
float: left;
right margin: 8px;
}
{.faclines}
do-family: Georgia, "Times New Roman", Times, serif;
font size: large;
}
.clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
a {}
color: #FFF;
}
. Container .footer #fMisc div p {}
color: #FFF;
}
. Container .footer div p {}
do-family: Verdana, Geneva, without serif.
do-size: x-small;
color: #FFF;
Clear: left;
}
. Container .footer div p {}
color: #FFF;
}
{p}
font size: xx-large.
}
{p}
Color: #000;
font-size: XL;
do-family: Georgia, "Times New Roman", Times, serif;
}
. .Footer #fMisc {} div container
do-size: x-small;
}
. .Footer #fMisc {} div container
color: #FFF;
}
. Container content h1 {}
do-family: Verdana, Geneva, without serif.
font-size: XL;
make-weight: bold;
Color: #000;
}
{.clearfloatleft}
Clear: left;
}
.container {} a .sidebar1 p
font-size: medium;
Color: #00F;
}
p.Heading a: hover, p.heading a: active, p.heading a: focus {/ * this changes the color background and text for browsers of keyboard and mouse * /}
font-size: XL;
do-family: Verdana, Geneva, without serif.
Color: #00F;
}
{p.Heading}
font-size: XL;
do-family: Verdana, Geneva, without serif.
Color: #000;
}
. Container content div div {}
text-align: center;
}
. Container content div div {}
text-align: center;
font size: small;
}
{div. Form}
text-align: center;
font size: small;

border: 0;
white-space: nowrap;
}

-Change

on this subject.

and this-

{div. Form}

text-align: center;

font size: small;

border: 0;

white-space: nowrap;

}

on this subject.

{div. Form}

Width: 450px;

Auto margin: 0;

font size: small;

border: 0;

white-space: nowrap;

}

Need help - gap between the copyright & footer

I have a white space between the orange walk and the black box of the fair copyright above. I changed the 10 px 0 px and back to 10 px padding when he did nothing.

I know I'm missing something simple. Can someone take a look and help out. Thank you.
HTML code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"
<!-TemplateBeginEditable name = "doctitle"-->
< title > Untitled Document < /title >
<! - TemplateEndEditable - >
<!-TemplateBeginEditable name = "head"->
<! - TemplateEndEditable - >
< style type = "text/css" >

< /p >
<!-TemplateBeginEditable name = 'content'->
< /p > < p > content
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
<! - TemplateEndEditable - >
< p > < / p >
< div class = "copyrightblack" >
< div align = "center" > © 2013 NDP < / div >
< / div >
< / div >
< div class = "footer" >
< p > < / p >
<! - end .footer - > < / div >
<! - end .container - > < / div >
< / body >
< / html >

It is the padding here

. Happy {}

color: #FFFFFF;

padding: 10px 0;

}

You should also reduce the width of 1260 here to 805

{.copyrightblack}

background-color: #000000;

bottom: 0;

do-family: "Helvetica Neue";

do-size: 16px;

make-weight: bold;

height: 50px;

position: relative;

text-decoration: none;

text-transform: uppercase;

vertical-align: middle;

Width: 1260px;

How to refine the design of a whole Page

Hello
I have worked on this problem for a while and still have no answer. I use Dreamweaver CS5.5. I am new to write html code.
My question is: how to set the width to a setting more shrunk my entire design which is currently focused on my page. This would allow more of the background (sky) to show on the left and the right of my page. Is it even possible at this late date after filling the Web site.
You can see how my Web page looks like now.
www.lanisakai.com
Can I change a code to achieve this effect in the index.html page or in the "twoColLiqLtHdr.css" page, or both?
Here is the code for both pages.
The Index.html Page
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > Lani Sakai Pastel Pet Portraits < /title >
< link href = "twoColLiqLtHdr.css" rel = "stylesheet" type = "text/css" / > <!-[if lte IE 7] > "
< style >
. Happy {right margin:-1px ;} / * this negative margin of 1px can be placed on any of the columns in this layout with the same corrective effect.} */
UL. NAV a {zoom: 1 ;}} / * the property zoom gives IE the hasLayout trigger to fix additional whiltespace between the links * /.
< / style >
<! [endif]-->
< style type = "text/css" >
. Container content p .introduction {strong}
Color: #000;
}
. Container content .introduction {}
Color: #000;
}
{body
background-image: url(Logo/sky1.jpg);
background-position: Center;
background-attachment: fixed;
}
< / style >
< / head >
< body bgcolor = "#FFFFCC" >
< div class = "container" >
< div class = "header" > <! - end .header - >
" < div align ="center"> < a href =" http://www.lanisakai.com/ "> < img src = Logo/Logo3.jpg" "width ="805"height ="172"border ="0"/ > < /a > < / div >
< / div >
< div class = "sidebar1″" >
< ul class = "nav" >
" < li > < a href =" http://www.lanisakai.com/ "> Home < /a > < /li > .
" < li > < a href =" http://www.lanisakai.com/previousworks.html "> < /A > < /li > previous works .
" < li > < a href =" http://www.lanisakai.com/aboutme.html "> about me < /a > < /li > .
" < li > < a href =" http://www.lanisakai.com/feedback.html "> Please < /a > < /li > .
< li > < a href = "sitemap.html" > < /a > < /li > Site map ""
" < li > < a href =" http://www.lanisakaimobie.bugs3.com/ "> Smartphone Version < /a > < /li > .
< li > < /li >
< /ul >
< p > <!-end .sidebar1-> < /p >
< / div >
< div class = "content" >
< h1 > < / h1 >
< h1 > < img src = "Original drawings/DSCN4352 - 2.jpg" width = "260" height = "216" hspace = "20" hspace = "25" / > < img src = "Original drawings/DSCN9152 - 2.jpg" width = "210" height = "266" hspace = "40" / > < / h1 >
< h2 class = "introduction" > < strong > < em > reasons why you want to have the portrait of your pet drawn... < /em > < / strong > < / h2 >
< p > < / p >
< p > < img src = "Drawings/untitled2.jpg" width = "275" height = "214" hspace = "125" / > < / p > "
< p > < / p >
< p align = "center" > < / p >
< p > < / p >
< / div >
< div class = "footer" >
< p align = "center" > copyright & copy; 2013 < script >
(function(i,s,o,g,r,a,m) {I ['GoogleAnalyticsObject'] = r; i [r] = [r] i: function() {}})
(.q i [r] = [r] i .q |) ([]) .push (arguments)}, l i [r] = 1 * new Date (); a = s.createElement (o),
m = s.GetElementsByTagName (o) [0]; a.Async = 1; a.SRC = g; m.parentNode.InsertBefore (a, m)
}) (window, document, 'script','/ / www.google-analytics.com/analytics.js', 'ga');
GA ('create', 'UA-40745099-1', 'lanisakai.com');
GA ('send', 'consultation');
< /script >
< script >
(function(i,s,o,g,r,a,m) {I ['GoogleAnalyticsObject'] = r; i [r] = [r] i: function() {}})
(.q i [r] = [r] i .q |) ([]) .push (arguments)}, l i [r] = 1 * new Date (); a = s.createElement (o),
m = s.GetElementsByTagName (o) [0]; a.Async = 1; a.SRC = g; m.parentNode.InsertBefore (a, m)
}) (window, document, 'script','/ / www.google-analytics.com/analytics.js', 'ga');
GA ('create', 'UA-41801281-1', 'lanisakai.com');
GA ('send', 'consultation');
< /script >
Lani Sakai Portraits in Pastel Pet < /p >
<! - end .footer - > < / div >
<! - end .container - > < / div >
< / body >
< / html >
Page twoColLiqLtHdr.css
@charset "utf-8";
{body
Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.
margin: 50;
padding: 0;
Color: #000;
background-image: url(images/sky1.jpg);
background-position: left down.
}
/ * ~ ~ Tag of the element selectors ~ ~ *.
UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
H1, h2, h3, h4, h5, h6 {p}
margin-top: 0; / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
padding-right: 15px;
padding-left: 20px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
font-size: medium;
}
an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
border: none;
}
/ * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
a: link {}
Color: #000000;
text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
}
a: visited {}
Color: #000000;
text-decoration: underline;
}
a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
text-decoration: none;
Color: #000;
}
/ * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.
. Container {}
Width: 100%;
Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */
min-width: 780px; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */
do-size: 100%;
background-color: #6FF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
left margin: auto;
}
/ * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
. Header {}
background: #6F7D94;
font-size: XL;
}
/ * ~ ~ These are the columns for page layout. ~~
(1) padding is only placed on the top and/or bottom of the divs. The elements contained in these divs have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.
(2) no margin was given to the columns, because they all floated. If you need to add the margin, avoid placing on the side you're floating into (for example: a right margin on a div set to float to the right). Many times, padding can be used instead. For divs where this rule needs to be broken, you must add a statement of ' display: inline ' to the rule of the div to tame a bug where some versions of Internet Explorer double the margin.
(3) given that the classes can be used several times in a document (and an element can also have several classes applied), the columns have received the names of classes instead of IDs. For example, two sidebar div could be stacked if necessary. These can easily be changed to the ID if that's your preference, as long as you don't use them once per document.
(4) If you prefer your nav on the right instead of the left, simply float those columns as the opposite direction (straight instead of left all) and they will return in reverse order. There is no need to move the div in the HTML source code.
*/
{.sidebar1}
float: left;
Width: 20%;
padding-bottom: 10px;
background-color: #66FFFF;
font-size: medium;
}
. Happy {}
padding: 10px 0;
Width: 80%;
float: left;
do-size: 14px;
}
/ * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.
. Content ul, ol {} content
padding: 0 15px 15px 40px; / * This padding reflects the right padding in the titles and the paragraph above net. Padding was placed on the bottom for the space between the other elements in the lists and on the left to create the withdrawal. These can be adjusted as desired. */
}
/ * ~ ~ The list of navigation styles (can be removed if you choose to use a contextual menu premade as Spry) ~ ~ * /.
UL. NAV {}
list-style: none; / * This command deletes the list marker * /.
border-top: 1px solid #666; / * This creates the top border for the links - all the others are placed using a bottom border on the LI * /.
margin-bottom: 15px; / * This creates space between the following content browsing * /.
}
{ul li. NAV
border-bottom: 1px solid #666; / * This creates separation button * /.
}
UL. NAV, the ul.nav: visited {/ * these selectors of grouping allows you to ensure that your links to retain their look button even after the ongoing visit * /}
padding: 5px 5px 5px 15px;
display: block; / * Gives the link properties block causing it to fill the whole container LI. This causes the entire area responds to a mouse click. */
text-decoration: none;
background: #8090AB;
Color: #000;
}
UL. NAV a: hover, ul.nav one: ul.nav active,: focus {/ * this changes the background and color of text for browsers of the mouse and the keyboard * /}
color: #FFF;
do-size: 100%;
background-color: #66CCFF;
}
/ * ~ ~ Footer ~ ~ * /.
.footer {}
padding: 10px 0;
position: relative; / * This gives hasLayout IE6 to well clear * /.
Clear: both; / * This clear property forces the .container to understand where the columns end up and contain them * /.
background-color: #66FFFF;
font size: small;
}
/ * ~ ~ various float/clear classes ~ ~ * /.
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
float: left;
right margin: 8px;
}
.clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
} {.logo
height: 262px;
Width: 1088px;
margin-right: auto;
}
.logo {}
height: 417px;
Width: 761px;
margin-right: auto;
left margin: auto;
}
. Introduction {}
font-size: XL;
make-style: normal;
make-weight: lighter;
color: #0033CC;
}
.logo {}
Width: 770px;
margin-right: auto;
left margin: auto;
}
. Introduction {}
do-family: Verdana, Geneva, without serif.
}
{.nameofpage}
do-size: 200%;
make-weight: bold;
}
. {PictureTitle}
font-size: medium;
}
{.formby}
font size: 25%;
}
{.formby}
font size: 12%;
}
< script >
(function(i,s,o,g,r,a,m) {I ['GoogleAnalyticsObject'] = r; i [r] = [r] i: function() {}})
(.q i [r] = [r] i .q |) ([]) .push (arguments)}, l i [r] = 1 * new Date (); a = s.createElement (o),
m = s.GetElementsByTagName (o) [0]; a.Async = 1; a.SRC = g; m.parentNode.InsertBefore (a, m)
}) (window, document, 'script','/ / www.google-analytics.com/analytics.js', 'ga');
GA ('create', 'UA-41801281-1', 'lanisakai.com');
GA ('send', 'consultation');
< /script >
I have to start all over again?
Any suggestion would be appreciated.
Thank you
Mobie Boy

Hello

Thank you very much for your help. What looks I wanted now after following your advice.

I am new to write code and I'm amazed that one small change can affect an entire Web site!

Sincerely,

Mobie Boy

Disjoint content bearing fixed spot

I'm doing a disjointed rollover, but after I have a grid of thumbnails, I want my enlargemnt be contained in a specific area. I have this case it's the right saide sidebar. I found a good tutorial that got me this far, but can't seem to find how to make the next step. I don't want the enlargemnt compared to thumbnai. I want it in a fixed position.
Here is my code so far:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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" >

"< script type =" text/javascript"src="includes/jQueryGallery/gallery.extend.js "> < / script >
"< script type =" text/javascript"src="includes/jQueryGallery/jQueryGallery.js "> < / script >
"< script type =" text/javascript"src="includes/jQueryGallery/jQueryGallery21.js "> < / script >
"< link href="includes/jQueryGallery/jQueryGallery21.css "rel ="stylesheet"type =" text/css"/ >
< / head >
< body >
< div class = "container" >
< div class = "header" > < a href = "#" > < img src = "" alt = "Insert here the Logo" name = "Insert_logo" width = "20%" height = "90" id = "Insert_logo" style = "background-color: #8090AB; Display: block; "/ > < / a >
<! - end .header - > < / div >
< div class = "sidebar1″" >
< ul class = "nav" >
< li > < a href = "#" > link a < /a > < /li >
< li > < a href = "#" > connect two < /a > < /li >
< li > < a href = "#" > link three < /a > < /li >
< li > < a href = "#" > link four < /a > < /li >
< /ul >
< p > the links above demonstrate a basic navigation structure using a style with CSS unordered list. Use it as a starting point and modify properties to produce your own unique look. If you have need of flyouts, create your own by using a Spry menu, a menu widget from Adobe Exchange or a variety of other javascript or CSS solutions. < /p >
< p > if you want the navigation along the top, simply move the ul.nav to the top of the page and recreate the style. < /p >
<! - end .sidebar1 - > < / div >
< div class = "content" >
< h1 > < / h1 > < div id = "reversal" >
< p >
"< a href =" # "> < img src =" file:///C|/GSLD site Web/images/Civic/Civic Adjustments/a2mclobb_thumb.jpg"width ="81"height ="78"/ > / > < span > < img src =" file:///C|/GSLD site Web, images, Civic, Civic Adjustments/bloomfieldexterior.jpg "width ="768"height ="532"/ > < br / >
Legend option #1 </span > < /a >
"< a href =" # "> < img src =" SmallIcons/image.png"alt =" "/ > < span > < img src =" FullSize/image.jpg"alt =" "/ > < br / > legend #2 optionally </span > < /a >
"< a href =" # "> < img src =" SmallIcons/image.png"alt =" "/ > < span > < img src =" FullSize/image.jpg"alt =" "/ > < br / > legend #3 optionally </span > < /a >
< /p >
< / div > < / p >
< p > note that if you use the property inspector to access your image of the logo using the field of the CBC (instead of remove and replace the placeholder), you need to remove inline background and view properties. These inline styles only serve to make the placeholder logo displays in browsers for demonstration purposes. < /p >
< p > to remove the inline styles, make sure that your CSS Styles Panel is updated. Select the image and in the properties of the CSS Styles Panel pane, right-click and delete the display and background properties. (Of course, you can always go directly in the code and remove the image inline styles or placeholder there.) < /p >
< h4 > Internet Explorer conditional comments < / h4 >
< p > these liquid page layouts contain an Internet Explorer conditional comment (CICE) to correct two problems. < /p >
< ol >
< li > browsers are inconsistent in the way which they circle sizes in percent layouts div. If the browser must make a number like 144.5px or 564.5px, so round up to integer closest. Safari and Opera round, rounds up to Internet Explorer and Firefox rounds a column upwards and the other downwards to fill the tank completely. These rounding problems can lead to inconsistencies in some layouts. In the IECC there is a negative margin of 1px to fix IE. You can move to one of the columns (and on the left or right) to meet your needs for layout. < /li >
< li > the zoom property has been added to the anchor in the navigation list since, in some cases, the extra space will be rendered in IE6 and IE7. Zoom gives IE its property hasLayout exclusive to correct this problem. < /li >
< /ol >
<! - end content - >
< / div >
< div class = 'sidebar2' >
Background < h4 > < / h4 >
< p > by nature, will show the background color to any div for the length of the content. If you want a line instead of a color, place a border on the side of the content div (but only if it will contain more content). < /p >
<! - end .sidebar2 - > < / div >
< div class = "footer" >
< p > this .footer contains the statement of position: relative; giving hasLayout in Internet Explorer 6 for the .footer and it erase properly. If you are not required to support IE6, you can remove it. < /p >
<! - end .footer - > < / div >
<! - end .container - > < / div >
< / body >
< / html >

Here's the concept:
1. Create a page with two pictures on it
2. Give each image a name attribute (use the name field in the property inspector)
3. Select the first image and apply the swap image behavior
4. By filling in the details of the behavior, select the SECOND image in the field called "Images".
5. Complete the behavior by navigating to the incoming image you want to REPLACE THE SECOND image
Get it? This approach requires that you already have a picture of "detention" on the page that will be replaced by the enlarged image of the behaviour of swap.

Question of the accordion Spry tabs

Hello
I am trying to create a menu accordion spry for a navigation bar and have some difficulty.
This is the first time I tried it, so I'd appreciate any help.
The customer wants the tabs to be:
Home
Students
The high school students
College students
Professionals of the
Parents/carers
Seminars
Bio
Q & a Blog
Testimonials
So what they want high school students and college students in child tabs under the parent tabs and all the other tabs parent.
They asked a spry accordion.
They want the navigation bar on the left.
Here is the link to the online site:
http://www.elynncohen.com/index2spry2.html#
and here are my questions:
1. the spry accordion has a box around it on the mouse down, but I can't understand how get rid of it. I checked all of the CSS rules for the spry accordion and none of them seem to have rules that surround them.
2. all tabs have an area of content under them, and we want only the content tab of the student areas. You see what happens when you click on one of the tabs, you get a little thing that says content 1, 2, etc. I tried to delete them in the code and the page becomes completely crazy when I do and nav bar areas stretching all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under the students who say high school and college) to have two tabs. You will see that there no tab high school here now. When I try to cut and paste the code to try to get two tabs, it doesn't. The spry malaccaaccordian framework only creates a content under each tab area.
4. I would like the tabs of the child to be narrower than the parent tabs height and be indented so that they clearly will switch off and different than parent tabs.
Any help would be appreciated!
Thank you!!!
Here is my code:
<! DOCTYPE HTML >
< html >
< head >
< meta charset = "UTF-8" >
< title > your career guidance and college Counseling < /title >
< meta name = "Keywords" content = "career guidance, College orientation, job search, career choices, College options, options career, work, jobs, opportunities, change career, new career, new job" / >
< name meta = "Description" content = "" your career guidance: career and College Counseling ""Given your choice of college & career options"'Preparation for the world of work after College' 'Looking for a new job to pursue your career'"
'In transition, and taking into account new opportunities '.
"Search for a career important and significant change" / >
< meta content = "Publisher" name = "Your career orientation, LLC" / >
< name meta = 'Copyright' content = 'Copyright 2012, your career guidance, LLC. All rights reserved. "/ >
< meta content = "Author" name = "Lisa Mark" / >
< name meta = "Language" content = "en-US" / >
< name meta = 'distribution' content = 'global' / >
< meta content = "revisit-after" name = 'ten days' / >
< name meta = "Robots" content = "All" / >
< link rel = "Index" href = "index.html" / > "
< link rel = "Site map" href = "sitemap.html" / > "
"< script type =" text/javascript"src="//use.typekit.net/ifb2bte.js "> < / script >
< script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "
< script type = "text/javascript" > try {Typekit.load () ;} catch (e) {} < /script >}
< style type = "text/css" >

< link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" > "
< / head >
< body > < script type = "text/javascript" >
function pageWidth() {}
return window.innerWidth! = null? window.innerWidth: document.documentElement & & document.documentElement.clientWidth? document.documentElement.clientWidth: document.body! = null? document.body.clientWidth: null;
}
function pageHeight() {}
return window.innerHeight! = null? window.innerHeight: document.documentElement & & document.documentElement.clientHeight? document.documentElement.clientHeight: document.body! = null? document.body.clientHeight: null;
}
< /script >
< div class = "container" >
< div class = "header" > <! - end .header - >
< class p = 'clearfloat' > < a href = "" #index.html ' id = 'Insert_logo2' "> < img src="images/YCD-logo-tag-RGB-web-SM.gif "alt ="Logo of your career branch"name ="Insert_logo"width ="50% "id ="Insert_logo2"style =" background: #FFF ""
; Display: block; "/ > < /a > < /p >
< div id = "Quote" > < img src = "images/quote.gif" alt = "choose a job you love" width = "355" height = "81" > < / div > "
< class p = 'clearfloat' > < / p >
< / div >
< div class = "sidebar1″" >
< ul class = "nav" >
< li >
< div id = "Accordion1" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > home < /a > < / div >
< div class = "AccordionPanelContent" > content 1 < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > students < /a > < / div >
< div class = "AccordionPanelContent" > < a href = "#" > school < /a > < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Professional < /a > < / div >
< div class = "AccordionPanelContent" > 3 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Parent/educator < /a > < / div >
< div class = "AccordionPanelContent" > 4 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > seminars < /a > < / div >
< div class = "AccordionPanelContent" > content 5 < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Bio < /a > < / div >
< div class = "AccordionPanelContent" > 6 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Q & amp; A Blog < /a > < / div >
< div class = "AccordionPanelContent" > 7 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > stories < /a > < / div >
< div class = "AccordionPanelContent" > 8 content < / div >
< / div >
< / div >
< /li >
< /ul >
< / div >
< div class = "content" >
< p > given today's competitive job market, the global economy and has changed the corporate culture.
is no longer, we rely on others to ensure our professional future. Choose or
change your career guidance requires personal reflection, career education and an action plan. < /p >
< img src = "images/if-you-are-.gif" alt = "If you consider your choice of college and career options" width = "197" height = "31" align = "left" >
< ul >
< br > < br > < li > < strong > given your choice of college & amp; career < facilities > options < /li >
< li > < strong > preparation for the world of work after College < facilities > < /li >
< li > < strong > looking for a new job to pursue your career < / strong > < /li >
< li > < strong > transition and given opportunities < facilities > < /li >
< li > < strong > seeking to make an important and significant career < facilities > < strong change > < / strong > < /li >
< /ul >
< img src = "images/Onethingisforsureraster.gif" width = "352" height = "49" alt = "one thing is sure, we all run our own careers, our own lives!" > "
< Br > < p > building a successful and rewarding career requires linking your interests, education and experience of the trends in employment, growth industries and a career choice. It takes smart decisions on your college major, professional training and training options. With enthusiasm, persistence and unparalleled job search techniques, you can succeed in finding a path to the career that suits you. < /p >
< p > we are your lawyer. We listen, assess, strategize, inspire, counsel and network on your behalf. With a personalized and comprehensive approach, we will work with you to help you create a plan of action; a path designed for you to get where you want to go and become what you want to be. < /p >
< img src = "images/yourcareerourpassionraster.gif" width = "441" height = "20" alt = "Your career guidance, YOUR career is our passion!" > < / div > "
< div class = 'sidebar2' >
< p > < img src = "images/Counselingastudent.gif" width = "100%" alt = 'Lisa Mark advising a student' > < / p > "
< p > our mission is to help you to discover, choose and create your direction for a challenging and rewarding career path < /p >
< p > integrate us our experience with the work force today and advice expertise with your passions and career interests. We will introduce new career ideas yourself, target companies and generate opportunities for job and internship for you. < /p >
< p > guide us step by step to ensure your success when applying for college, job interview
and decision making process.
< /p >
< / div >
< div class = "footer" >
< div id = "footer" >
< h6 align = "left" > your career guidance, LLC • 96 Harvard Avenue, Maplewood, New Jersey 07040 • (973) 996-0207 • [email protected] < / h6 >
< / div >
< p > < / p >
<! - end .footer - > < / div >
<! - end .container - > < / div >
< script type = "text/javascript" >
var Accordion1 = new Spry.Widget.Accordion ("Accordion1");
< /script >
< / body >
< / html >

1. the spry accordion has a box around it on the mouse down, but I can't understand how get rid of it. I checked all of the CSS rules for the spry accordion and none of them seem to have rules that surround them.

2. all tabs have an area of content under them, and we want only the content tab of the student areas. You see what happens when you click on one of the tabs, you get a little thing that says content 1, 2, etc. I tried to delete them in the code and the page becomes completely crazy when I do and nav bar areas stretching all the way across the page.

3. I can't figure out how to get the child tabs (which would be the tabs under the students who say high school and college) to have two tabs. You will see that there no tab high school here now. When I try to cut and paste the code to try to get two tabs, it doesn't. The spry malaccaaccordian framework only creates a content under each tab area.

4. I would like the tabs of the child to be narrower than the parent tabs height and be indented so that they clearly will switch off and different than parent tabs.

1 line 454

style = "" outline: none; " " >

2 & 3. Change your line code 455-491:

#"> Home".

#"> Students.

#"> High school.
College

#"> Professional.

#"> Parent/educator.

#"> Seminars»

#">Bio

#"> Q & a Blog.

#"> Testimonials»

4. Add your HTML code for tabs child like this:

ID 'submenu' =>#"> high school.

Create a new css #submenu rule in your CSS document and set the style as you wish.

Help with gallery lightbox widget

Hello
I built a website for my photography business and used the Gallery lightbox widget. I'm not massively HTML mind so I tend to build in design mode and just edit HTML.
The Gallery is here: http://www.emmarichards.co.uk/gallery.html
When you click on one of the photos, it does not work properly, need you just to another Web page with just the image. It worked fine in live view. I looking at it in IE, do not know what version, but a pretty up to date I think. I also checked by using the Mozilla browser and having the same problem. How can I fix this please? The code of the pages is as follows:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > Barnsley wedding photographer - Emma Richards < /title >
< style type = "text/css" >
<!--
{body
Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.
background: #4E5869;
margin: 0;
padding: 0;
Color: #000;
background-color: #99BADB;
}
/ * ~ ~ Tag of the element selectors ~ ~ *.
UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
H1, h2, h3, h4, h5, h6 {p}
margin-top: 0; / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
padding-right: 15px;
padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
}
an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
border: none;
}
/ * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
a: link {}
color: #414958;
text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
}
a: visited {}
color: #4E5869;
text-decoration: underline;
}
a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
text-decoration: none;
background-color: #FFFFFF;
}
/ * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.
. Container {}
Width: 80%;
Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */
min-width: 780px; / * a min-width may be desirable to keep this provision to become too narrow. This keeps the more readable line length in the side columns. IE6 does not respect this statement. */
Background: #FFF;
margin: 0 auto; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */
}
/ * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
. Header {}
background-color: #ffffff;
}
/ * ~ ~ It's layout information. ~~
(1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.
*/
. Happy {}
padding: 10px 0;
}
/ * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.
. Content ul, ol {} content
padding: 0 15px 15px 40px; / * This padding reflects the right padding in the titles and the paragraph above net. Padding was placed on the bottom for the space between the other elements in the lists and on the left to create the withdrawal. These can be adjusted as desired. */
}
/ * ~ ~ Footer ~ ~ * /.
.footer {}
padding: 10px 0;
background-color: #ffffff;
}
/ * ~ ~ various float/clear classes ~ ~ * /.
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
float: left;
right margin: 8px;
}
.clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
body, td, th {}
do-family: Tahoma, Geneva, without serif.
}
->
< / style >
< script src = "scripts/jquery.js" type = "text/javascript" > < / script > "
< script src = "scripts/lightbox.js" type = "text/javascript" > < / script > "
< link href = "css/lightbox.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/sample_lightbox_layout.css" rel = "stylesheet" type = "text/css" / > "
< style type = "text/css" >
/ * BeginOAWidget_Instance_2127022: #gallery * /.
{.lbGallery}
/ * Gallery container parameters * /.
background-color: #ffffff;
padding-left: 180px;
padding-top: 20px;
padding-right: 180px;
padding-bottom: 20px;
Width: 900px;
height: auto;
text-align: center;
}
.lbGallery ul {list-style: none; margin: 0; padding: 0 ;}}
.lbGallery ul li {display: inline; margin: 0; padding: 0 ;}}
.lbGallery ul li a {text-decoration: none ;}}

.lbGallery ul li a {img
/ * border color, width and margin for images * /.
border-color: #ffffff;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px:
}

.lbGallery ul li a: hover {img
/ * background color on the hover.
border-color: #ffffff;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}

{#lightbox-container-image-box}
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}

{#lightbox - container - picture - data - box}
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
/ * EndOAWidget_Instance_2127022 * /.
< / style >
< script type = "text/xml" >
<!--
< oa:widgets >
< oa:widget wid = binding "2127022" = "#gallery" / >
< / oa:widgets >
->
< /script >
< / head >
< body bgcolor = "#FFFFFF" text = "#000000" link = "#000000" vlink = "#000000" alink = "#000000" >
< div class = "container" >
< div class = "header" >
< div align = "center" >
< p > < img src = "1TITRE 2.png" alt = "wedding of emma richards barnsley photographer" width = '1144' height = '368' / > < / p >
"< p > < a href ="about.html"> < img src =" 1.png"alt ="about emma richards wedding photographer barnsley"width ="143"height ="46"border ="0"/ > < /a > < a href =" weddings.html "> < img src =" 1.weddings.png "alt ="wedding information barnsley photographer"width ="162"height ="46"border ="0"/ > < /a > < a href ="gallery.html"> < img src =" 1.gallery.png"alt ="Image of barnsley wedding photographer Gallery"width ="162"height =" "" "" 46"border = '0' / > < / has > < a href ="pricing.html"> < img src =" 1.pricing.png"alt ="barnsley price information wedding photographer"width ="162"height ="46"border ="0"/ > < /a > < a href =" engagements.html "> < img src =" 1.engage.png "alt ="engagement photography couples pull barnsley"width ="221"height ="46"border ="0"/ > < /a > < a href ="http://emmarichardsuk.blogspot.com "> < img src ="1 blgo.png"alt =" emma richards blog photography marriage"width ="105"height ="45"border ="0"/ > < /a > < a href ="contact.html"> < img src ="1 contact.png"alt =" contact emma richards"width ="162"height ="46"border ="0"/ > < /a > < /p >"
< / div >

<! - end .header - > < / div >
< div class = "content" >
< div id = 'Gallery' class = "lbGallery" >
< div align = "center" >
< ul >
"< li > < a href ="2.ABBIE AND KID.jpg"width ="600"height ="400"title =" "> < img src =" 2.ABBIE AND KID.jpg "width ="150"height ="100"alt ="Barnsley wedding photography"/ > < / a >
"< li > < a href =" 2.R AND M CAKE.jpg CUP"title =" "> < img src =" 2.R AND M CAKE.jpg CUTTING "width ="150"height ="100"alt ="Wedding at Park Inn""wath' 'barnsley' "photograph" / > < / has >
"< li > < a href =" alex laura 1 (5) .jpg"title =" "> < img src =" alex laura 1 (5) .jpg "width ="150"height ="100"alt ="barnsley wedding photographer"/ > < / has >
< li > < a href = "alex laura 1 (8) .jpg" > < img src = "alex laura 1 (8) .jpg" width = "150" height = "100" alt = "whitley hall" "sheffield" 'barnsley wedding photographer' "wedding" / > < /a > < /li > "
< li > < a href = 'tree closer.jpg' width = "600px" height = "400px" title = "" > < img src = "tree closer.jpg" width = "150" height = "100" alt = "" / > < /a > < /li > < br / > "
"< li > < a href ="11.jpg"width ="600"height ="400"title =" "> < img src =" 11.jpg "width ="150"height ="100"alt ="Barnsley wedding photography"/ > < / a >
"< li > < a href ="10.jpg"title =" "> < img src =" 10.jpg "width ="150"height ="100"alt ="Barnsley wedding photography"/ > < / a >
< li > < a href = "James Ruth Church128.jpg" title = "" > < img src = "James Ruth Church128.jpg" width = "150" height = "100" alt = "whitley hall" "sheffield" 'barnsley wedding photographer' "wedding" / > < / has >
< li > < a href = "2.ABBIE GROUP.jpg" > < img src = "2.ABBIE GROUP.jpg" width = "150" height = "100" alt = "barnsley wedding photographer" / > < / a > < /li > "
< li > < a href = "12 - 5.jpg" width = "600px" height = "400px" title = "" > < img src = "12 - 5.jpg" width = "150" height = "100" alt = "Barnsley wedding photography" / > < /a > < /li > < br / >
"< li > < a href =" alex laura 1 (3) .jpg"width ="600"height ="400"title =" "> < img src =" alex laura 1 (3) .jpg "width ="150"height ="100"alt ="Barnsley wedding photography"/ > < / has >
< li > < a href = "confetti crop.jpg" title = "" > < img src = "confetti crop.jpg" width = "150" height = "100" alt = "barnsley wedding photographer" / > < / a >
< li > < a href = "Mark & amp; Rachel 025.jpg"title =" "> < img src ="Mark & amp; Rachel 025.jpg"width ="150"height ="100"alt ="park inn wedding""wath' 'barnsley' "photograph" / > < / a >
< li > < a href = "Abbie Ben 0336.jpg" > < img src = "Abbie Ben 0336.jpg" width = "150" height = "100" alt = "barnsley wedding photographer" / > < / a > < /li >
< li > < a href = "Abbie Ben 0309.jpg" width = "600px" height = "400px" title = "" > < img src = "Abbie Ben 0309.jpg" width = "150" height = "100" alt = 'first kiss' "barnsley wedding photographer" / > < /a > < /li > < br / >
< li > < a href = "laughing 2.png" width = "600" height = "400" title = "" > < img src = "laugh 2.png" width = "150" height = "100" alt = "whitley hall" "sheffield wedding photography wedding" / > < / has >
"< li > < a href ="2.double.jpg"title =" "> < img src =" 2.double.jpg "width ="150"height ="100"alt ="Wedding at Park Inn""wath' 'barnsley' "photograph" / > < / has >
"< li > < a href ="132.jpg"title =" "> < img src =" 132.jpg "width ="150"height ="100"alt ="whitley hall""sheffield"'barnsley wedding photographer'"wedding"/ > < / has >
< li > < a href = 'Abbie and Ben 0621.jpg' > < img src = "Abbie and Ben 0621.jpg" width = "150" height = "100" alt = "barnsley wedding photography" / > < /a > < /li >
< li > < a href = "Abbie Ben 0320.jpg" width = "600px" height = "400px" title = "" > < img src = "Abbie Ben 0320.jpg" width = "150" height = "100" alt = "barnsley wedding photography" / > < /a > < /li > < br / >
< li > < a href = "Abbie Ben 0011 copy.jpg" width = "600" height = "400" title = "" > < img src = "Abbie Ben 0011 copy.jpg" width = "150" height = "100" alt = "bouquet", "barnsley wedding photographer" / > < / a >
< li > < a href = "James & amp; Title Ruth0202.jpg"=" "> < img src ="James & amp; Ruth0202.jpg"width ="150"height ="100"alt ="barnsley wedding photographer"/ > < / a >
"< li > < a href =" alex laura 1 (4) .jpg"title =" "> < img src =" alex laura 1 (4) .jpg "width ="150"height ="100"alt ="barnsley wedding photographer"/ > < / has >
< li > < a href = "123.jpg" > < img src = "123.jpg" width = "150" height = "100" alt = "rotherham" "wedding at park inn" "wath' 'barnsley'"photograph"/ > < /a > < /li >"
< li > < a href = "Mark & amp; Rachel 311.jpg"width ="600px"height ="400px"title =" "> < img src ="Mark & amp; Rachel 311.jpg"width ="150"height ="100"alt ="rotherham"'Marriage Park Inn' 'wath' 'barnsley'"photograph"/ > < / a > < /li > < br / >
< /ul >
< / div >
< / div >
< div align = "center" >
< script type = "text/javascript" >
BeginOAWidget_Instance_2127022: #gallery
$(function() {})
$('#gallery_a').lightBox ({}
imageLoading: ' / images/lightbox/lightbox-ico-loading.gif', / / (string) path and the name of the loading icon
imageBtnPrev: ' / images/lightbox/lightbox-btn-prev.gif', / / (string) path and the name of the picture of the previous button
imageBtnNext: ' / images/lightbox/lightbox-btn-next.gif', / / (string) path and the name of the next button image
imageBtnClose: ' / images/lightbox/lightbox-btn-close.gif', / / (string) path and the name of the narrow btn
imageBlank: ' / images/lightbox/lightbox-blank.gif', / / (string) path and the name of an empty image (pixel)
fixedNavigation: false, / / Boolean (Boolean) which informs if the navigation (next and prev button) will be set in the interface or not.
containerResizeSpeed: 400, / / specify the duration of the container image resizing. These numbers are milliseconds. default is 400.
overlayBgColor: "#ffffff", / / (string) the background color of overlay; inform a hexadecimal as value: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue color values.
overlayOpacity: 0, / / the value of opacity (whole) to overlay; inform: 0.X. Where X is a number from 0 to 9
txtImage: 'Image', //Default text from the image
txtOf: "from".
});
});

EndOAWidget_Instance_2127022
< /script > <! - end content - > < / div >
< / div >
< div class = "footer" >
< hr / >
< p align = 'right' class = 'container' > 07794 430 229 / / [email protected] </p>
<! - end .footer - > < / div >
<! - end .container - > < / div >
< / body >
< / html >

emmarichards4 wrote:

What do I have to have the same path as in my root folder, for example in my Public folder with my host, have a "script file, then put the"jquery.js"file in that or this should not matter?"

All roads (road of the file relative to the dependent file) are essential.

If the path is not correct, the required file will be not considered and effect will not work.

There is no need to download files individually and place them manually in the remote folders. DW manages all the paths of files and folders for you if you use the files Panel.

For example, http://www.emmarichards.co.uk/scripts/lightbox.js = 404 error. The file does not yet exist on the server at this location.

You should be able to click on folders css and scripts locally, click Put and all files in those folders will be downloaded correctly.

Image overlapping on the sidebar

Hi guys,.
The Images on my Web page are overlapping on the navigation bar when the size of browser window is minimized.
Can someone please advise on how to remedy this. A link as below
http://www.radhapurrealestate.com/layout.html
Thank you
Knockaert

Change the width of the container min
at 900px (as shown below). Might need to be a little wider, to test and see.

/ * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.

. Container {}

Width: 80%;

Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */

min-width: 900px; / * a min-width may be desirable to keep this provision to become too narrow. This keeps the more readable line length in the side columns. IE6 does not respect this statement. */

Background: #FFF;

margin: 0 auto; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */

background-color: #333;

}

containers in percentage widths

Similar Questions

Outdoor ULTRA DETAIL PACKAGE

Maybe you are looking for