CSS shorthand background problem
Like many of you I'm sure, I prefer to write shorthand CSS.
In
Preferences I have shorthand checked for all five options and
"When
editing CSS rules" set to "According to settings above."
However when I try to write a shorthand background rule it
doesn't work.
I prefer to write my background as:
background: #fff url(../images/quoteleft.jpg) left top
no-repeat;
I should be able to type:
background: c
...and have DW's color swatch functionality kick in, then
url, then
browse, etc. But the only options it gives me are:
background-color
background-attachment
background-image
background-position
background-repeat
inherit
Does anyone know how to get DW's CSS shorthand working
properly?
Have you tried right clicking at that point?
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
==================
"ryansebiz" <[email protected]> wrote in
message
news:errb96$od$[email protected]..
> Like many of you I'm sure, I prefer to write shorthand
CSS. In Preferences
> I have shorthand checked for all five options and "When
editing CSS rules"
> set to "According to settings above."
>
> However when I try to write a shorthand background rule
it doesn't work. I
> prefer to write my background as:
>
> background: #fff url(../images/quoteleft.jpg) left top
no-repeat;
>
> I should be able to type:
>
> background: c
>
> ...and have DW's color swatch functionality kick in,
then url, then
> browse, etc. But the only options it gives me are:
>
> background-color
> background-attachment
> background-image
> background-position
> background-repeat
> inherit
>
> Does anyone know how to get DW's CSS shorthand working
properly?
Similar Messages
-
I'm trying to do a simple masthead that will span the width
of the page. The masthead consists of a logo on the left, and a big
graphic on the right (it is a long story...). The left side of the
big graphic fades into the background, and the logo and .the
graphic move apart as the page is made wider.
Everything is fine as long as the browser window is wide
enough for both. As I shrink the window, however, the graphic drops
below the logo and the masthead is suddenly twice as high. What I
want to happen is for horizontal scroll bars to appear when the
extra space between the logo and the graphic has been squeezed out.
Here is the HTML:
<div id="masthead">
<div id="logo"><img src="images/logo.jpg"
/></div>
<div id="graphic"><img src="images/graphic.jpg"
/></div>
</div>
And the CSS:
#masthead {
background-image: url(images/masthead-bg.gif);
white-space: nowrap;
max-height: 89px;
#logo {
width: 148px;
height: 89px;
float: left;
#graphic {
width: 736px;
height: 89px;
float:right;
I'd be grateful for any suggestions.Luke,
Put the background image on the body. By default, it will
tile to fill
the entire browser window.
HTH,
Randy
> I'm trying to make a simple page that has a background
image at the top of the
> page that expands to fix 100% of the page. just under
that I have an area set
> at 960px width and is centered on the page.
>
> The problem I have is that is you make the window
smaller than 960px you will
> see the scroll bars, scrolling left you can see the rest
of the fixed width div
> area but the 100% area at the top stops repeating and
does not fill the page. -
Please translate these CSS shorthand values for me as I need to get it through my thick skull
background: none repeat scroll 0 0 green;
Much appreciatedI will tattoo it on my butt
Can't wait for the selfie .
Nancy O. -
I am trying to create a page using CSS. I have a background
image that tiles like I want it to. Here is the CSS:
padding: 0;
Margin: 0;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position:center;
I want some of my various other divs to lay on top of this
background but have a different background color that overlays the
page background image. Instead of taking the background color I
specify, the main page background above shows through. For example
below, the dark brown background doesn't show:
#nav {
margin-left: 4px;
width: 802px;
height: 26px;
background-color:#211400;
Thanks in advance for helping.This is what I did for mine:
background-image: url("../images/background.gif");
Erin
"Mike Dockray" <[email protected]> wrote:
>
Can u put floating background images in the CSS.
eg. background: #fff url(images/backgrd.jpg) bottom right no-repeat fixed;
if so what is the context, find the color but not the image, url is relative
to
what ????
(yes , i'm a newbie, first day on the case :) -
CSS - wierd margin/border/background problem
referring URL: dev.qwerbles.com
Is the behavior described below correct/normal? It seems to
me that the
"with border" result should be what the user sees regardless
... given
the following:
markup:
<div id="header_wrap">...</div>
<div id="content_wrap">
<div id="content"><p>foo</p></div>
</div>
<div id="footer_wrap">...</div>
css:
div#header_wrap {
background: #5775A2;
div#content_wrap {
background: url(../images/main_bg.png) repeat-y;
div#footer_wrap {
background: #41536F;
As is (tested in FF3 & IE7), I see (from top to bottom):
- a block of color (#5775A2)
- 1em of white space (the default top-margin for <p>)
- text "foo" with a background image
- 1em of white space (the default bottom-margin for
<p>)
- a block of color (#41536F)
If I add this css (border: 1px solid)to the #content_wrap
rule then the
#content_wrap background stretches all the way from the
#header_wrap to
the #footer_wrap. In other words, the white space (caused by
the <p>
tags default margin) was filled in by the background image of
#content_wrap. Why doesn't the bg img fill in the white space
in both cases?
AlexAlexander Ross wrote:
>
>> When you put a border on the content_wrap it
collapses the margin
>> which is still on the p tag.
>
>
> but <p> still has a 1em buffer (when the border is
set). I thought that
> if the margin was collapsed that the buffer should
disappear. No?
No, the border top and bottom on the content_wrap acts as a
barrier,
stopping it from collapsing. It there is no border then the
<p> margin
goes awol, outside of the content_wrap, causing the white
space top and
bottom of it. -
Spry vertical menu background problem in IE
The background of the <li> items show as white on the spry menu items here. http://www.steveelson.com/index.html. Menu items are .pngs, but I've used the iepngfix.htc fix, but still have the problem in IE 8 and 9. So I assume it's a css problem, but can't figure it out.
Save a copy of the css file as you have altered it, but under a new name. You might want to save a copy of your menu, too, so you'll have something to refer to. Then delete your menu widget and re-insert it.
You will most likely be very surprised at how easy it is to style it up (referring from time to time to your saved, former stylesheet).
If your page works without your menu, you should be successful inserting your menu to it.
Beth -
Spry horizontal menu: submenu background problem in IE7
Hello,
I am using the Spry horizontal menu in this website: http://www.isis-papyrus.com
It works perfectly on all current version browsers, but in IE7 the white submenu background only shows behind the actual text for each link and not to the border of the submenu box.
I modified the css to allow for dynamic sizing for each submenu (see below).
Any suggestions would be greatly appreciated.
Best, Oliver
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
float: none;
background-color: transparent;
color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff;
color: #339999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #339999;
color: #fff;
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;Thank you so much for your quick answer Beth!
You solved half my problem!
I added the bg-color to the li and ul styles of the submenus (css below) and now the white background shows correctly in IE7.
The only thing I still would like to resolve: The hover style for the menu items (inverse bg and text colors) only works for the actual text of the link and not for the entire width of the submenu box.
Any suggestions?
Thank you again.
Best, Oliver
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
float: none;
background-color: #fff;
color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
background-color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff;
color: #339999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #339999;
color: #fff;
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Hello
I have been recently working on a web project. In the project I have a css file Thats suppose to position the logo image.
This is the css code:
/** LOGO */
#logo {
width: 830px;
height: 90px;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
background: url(images/img04.jpg) no-repeat left top;
Margin-top moves the logo down and margin-left moves the logo in alignment. The problem is that when I view the
page on different screen sizes margin-left makes the logo image automatically move to the middle of the page.
Instead of staying in the required position.
Can any one help.
Thanks.Hi Thanks so much for the reply.
I want to add more information.
This is the css:
body {
margin: 0;
padding: 0;
background: url(images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #66665E;
h1, h2, h3 {
margin: 0;
text-transform: uppercase;
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #0C95C9;
h1 { font-size: 44px; }
h2 { font-size: 18px; }
h3 { }
p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
ul, ol { }
blockquote { }
a { color: #0C95C9; }
a:hover { text-decoration: none; }
a img {
border: none;
img.left {
float: left;
margin: 7px 30px 0 0;
img.right {
float: right;
margin: 7px 0 0 30px;
hr { display: none; }
.list1 {
.list1 li {
float: left;
line-height: normal;
.list1 li img {
margin: 0 30px 30px 0;
.list1 li.alt img {
margin-right: 0;
#wrapper {
/* Header */
#header-wrapper {
#header {
width: 920px;
height: 45px;
margin: 0 auto;
/* Menu */
#menu {
float: left;
width: 640px;
height: 45px;
#menu ul {
margin: 0;
padding: 10px 0px 0px 5px;
list-style: none;
line-height: normal;
#menu li {
display: block;
float: left;
#menu a {
display: block;
float: left;
margin-right: 3px;
padding: 3px 25px 2px 25px;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
#menu a:hover { text-decoration: underline; }
#menu .current_page_item a {
height: 20px;
background: #FEC200 url(images/img02.jpg) repeat-x left top;
color: #FFFFFF;
#menu .first {
background: none;
/* Search */
#search {
float: right;
width: 250px;
height: 45px;
#search form {
float: right;
margin: 0;
padding: 12px 30px 0 0;
#search fieldset {
margin: 0;
padding: 0;
border: none;
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
border: none;
#search-text {
width: 135px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #333333;
background: #ECF9E4;
color: #000000;
#search-submit {
height: 25px;
margin-left: 10px;
padding: 1px 10px;
background: #C0C0C0 url(images/bg_grey.jpg);
color: #000000;
/* Page */
#page {
width: 920px;
margin: 0 auto;
#page-bgtop {
padding-top: 30px;
/** LOGO */
#logo {
width: 920px;
height: 90px;
margin: 0 auto;
background: url(images/img04.jpg) no-repeat left top;
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
#logo p {
text-transform: lowercase;
font-size: 10px;
#logo h1 {
padding-top: 54px;
font-size: 34px;
#logo a {
text-decoration: none;
color: #FFFFFF;
/* Content */
#content {
float: center;
width: 920px;
height: 800px;
padding-top: 0px;
padding-right: 0px;
/* Post */
.post {
background: url(images/img07.jpg) repeat-x left bottom;
margin-bottom: 25px;
.post .title {
height: 30px;
color: #549900;
.post .title a {
text-decoration: none;
color: #585D60;
.post .date {
.post .meta {
margin-top: -10px;
padding: 2px 30px 2px 16px;
background: url(images/img03.gif) no-repeat left 8px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
color: #66665E;
.post .meta span {
display: block;
margin-top: -10px;
.post .meta a { }
.post .entry {
padding: 10px 0;
.post .links {
margin: 0 250px 0 0;
padding: 0 0 0 0px;
.post .links .comments {
.post .links .permalink {
padding-left: 17px;
/* Sidebar */
#sidebar {
float: left;
width: 177px;
padding-left: 22px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #585D60;
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
#sidebar li {
margin-bottom: 30px;
padding: 0 0 10px 0px;
#sidebar li ul {
#sidebar li li {
margin: 0;
padding: 7px 10px 10px 7px;
background: url(images/img07.jpg) repeat-x left bottom;
#sidebar p {
margin: 0;
padding: 0px 10px;
#sidebar h2 {
height: 26px;
margin: 0 0 10px 0px;
padding: 12px 0 2px 7px;
text-transform: capitalize;
font-size: 18px;
font-weight: normal;
color: #464F54;
#sidebar p {
line-height: 200%;
#sidebar a {
text-align: left;
text-decoration: none;
font-weight: normal;
color: #585D60;
/* Calendar */
#calendar {
#calendar caption {
padding-bottom: 5px;
font-weight: bold;
#calendar table {
width: 100%;
border-collapse: collapse;
border-bottom: 1px solid #24130F;
border-left: 1px solid #24130F;
border-right: 1px solid #24130F;
#calendar thead th {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
background: #24130F;
#calendar tbody td {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
#calendar tfoot td {
padding: 5px;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
#calendar tfoot #next {
border-top: 1px solid #24130F;
text-align: right;
#calendar tfoot #prev {
border-top: 1px solid #24130F;
#calendar .pad {
border-bottom: 1px solid #24130F;
#calendar #today {
background: #24130F;
/* Footer */
#footer {
width: 920px;
height: 49px;
margin: 0 auto;
padding-top: 50px;
#footer-bgcontent {
margin: 0px;
padding: 0px;
height: 99px;
background: #394144;
#footer p {
margin: 0;
text-align: center;
line-height: normal;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
#footer a {
color: #E5FFC4;
This is the Mainpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Uimodo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="logo">
</div>
<hr />
<!-- end #logo -->
<div id="header">
<div id="menu">
<ul>
<li><a href="Vidmin.php" class="first">Home</a></li>
<li><a href="Other.php">Other</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="search">
<form method="get" action="">
<fieldset>
<input type="button" id="search-submit" onclick="window.location.href='now.php'" value="UPLOAD NOW" />
</fieldset>
</form>
</div>
<!-- end #search -->
</div>
<!-- end #header -->
<!-- end #header-wrapper -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<table width="920" border="0" align="center" cellpadding="4">
<tr>
<td height="42" valign="top"><table width="415" height="41" align="right">
<tr>
<td width="215" height="35" align="center"> </td>
<td width="60" align="center"><a href="" target="_blank"><img src="../Logo/fblogo.png" alt="" width="34" height="33" /></a></td>
<td width="124"><a href="" target="_blank"><img src="../Logo/twitlogo.png" alt="" width="34" height="33" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="72" valign="top" align="center"><table width="859" height="72" border="0">
<tr>
<td width="293" height="49"><div align="center"><font size="5" color="#333333">Signup</font></div></td>
<td width="14"> </td>
<td width="296"><div align="center"><font size="5" color="#333333">Login</font></div></td>
</tr>
<tr>
<td height="17"><div align="center" id="register"></div></td>
<td> </td>
<td><div align="center" id="loginstatus"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="269" valign="top" align="center"><table width="908" height="291" border="0" align="center" cellpadding="3" bgcolor="#CCCCCC">
<tr>
<td width="401" height="287" align="center" valign="top"><form id="register_form" method="post" action="">
<table width="300" height="291" >
<tr>
<td height="23" colspan="2"> </td>
</tr>
<tr>
<td width="85" height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Username :</font> <br />
</div></td>
<td width="203"><input name="realname" id="realname" type="text" size="30" value='<?Php echo $profile['displayName'];?>'/></td>
</tr>
<tr>
<td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Email :</font> <br />
</div></td>
<td><div align="left">
<input name="email" id="email" type="text" size="30" value='<?Php echo $profile['email'];?>'/>
<input name="propic" id="propic" type="hidden" size="30" value='<?Php echo $profile['photo'];?>'/>
</div></td>
</tr>
<tr>
<td height="81"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Security :</font> <br />
</div></td>
<td><div align="center"><img src="CaptchaSecurityImages.php?width=150&height=40&characters=8" alt="captcha"/></div>
<p>
<input name="security_code" id="security_code" type="text" size="30" />
</p></td>
</tr>
<tr>
<td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password:</font> <br />
</div></td>
<td><div align="left">
<input name="password" id="password" type="text" size="30" />
</div></td>
</tr>
<tr>
<td height="45"> </td>
<td><div align="left">
<input type='submit' name="submit" id="submit" value='Sign Up'/>
</div></td>
</tr>
</table>
</form></td>
<td width="6" align="center"></td>
<td width="475" align="center" valign="top"><form method='post' id='login_form'>
<table width="300" height="176" >
<tr>
<td height="19" colspan="2"> </td>
</tr>
<tr>
<td height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif" >Email :</font> <br />
</div></td>
<td><div align="left">
<input name='emailenter' type='text' id='emailenter' size="25" />
</div></td>
</tr>
<tr>
<td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password :</font> <br />
</div></td>
<td><div align="left">
<input name='passcode' type='password' id='passcode' maxlength='15' size="25" />
</div></td>
</tr>
<tr>
<td height="45"> </td>
<td><div align="left">
<input type='submit' name='submit' value='Login'/>
<a href="ForgotPassword.php">Forgot Password?</a></div></td>
</tr>
</table>
</form></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23" valign="top" align="center" > </td>
</tr>
</table>
</div>
<!-- end #content -->
<div style="clear: both;"> </div>
</div>
</div>
<!-- end #page -->
<div id="footer-bgcontent">
<div id="footer">
<p>Copyright (c) . </p></div>
</div>
<!-- end #footer -->
</div>
</body>
</html>
Please just focus on the logo div. It suddenly moves to the middle on different screen size etc. Hope you can help. -
Facing some problem plz help me out:-
How to create rounded box with help of CSS 3.0Border radius (see below) this will not work in any IE browser lower than version 9. (so virtually useless in my opinion)
#wrapper {
width: 300px;
height: 300px;
background-color: #36F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; -
CSS Image loading problem by dynamically loading from fxml file?
h1. Introduction
The application I am developing loads an FXML file from a Controller. The FXML uses CSS and images for buttons are set in the CSS.
CSS directory structure
<package>.fxml
Images
<package>.fxml.resources.<subdir>
Example CSS Code
.buttonImage {
-fx-background-image: url("resources/subdir/image.png");
}Example loading fxml from controller code
URL location = getClass().getResource("/package/fxml/UI.fxml");
FXMLLoader fxmlLoader = new FXMLLoader(location);
fxmlLoader.setLocation(location);
fxmlLoader.setBuilderFactory(new JavaFXBuilderFactory());
Parent root = (Parent)fxmlLoader.load(location.openStream());
Controller = (Controller) fxmlLoader.getController();
newPane.getChildren().add(root);h1. Problem
The fxml file does not load and causes the following error:
javafx.fxml.LoadException: Page language not specified.Note, the fxml file loaded correctly before images were added.
Any ideas of what might be going wrong?
h1. Attempted
I have attempted the following: tried changing the url of the image as an absolute path.No Problem: Note, this is the actual FXML, my previous examples were simplifications of package names and class names in order to directly illustrate the problem. Note, I am using SceneBuilder to develop the FXML file.
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" prefHeight="396.0000999999975" prefWidth="350.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="com.monkygames.kbmaster.controller.ProfileUIController">
<children>
<Label layoutX="14.0" layoutY="14.0" text="Profiles">
<font>
<Font size="18.0" />
</font>
</Label>
<GridPane layoutX="15.0" layoutY="44.0" prefHeight="99.0" prefWidth="335.0">
<children>
<Label text="Type: " GridPane.columnIndex="0" GridPane.rowIndex="0" />
<ComboBox fx:id="typeCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="Item 1" />
<String fx:value="Item 2" />
<String fx:value="Item 3" />
</FXCollections>
</items>
</ComboBox>
<Label text="Program: " GridPane.columnIndex="0" GridPane.rowIndex="1" />
<ComboBox fx:id="programCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="Item 1" />
<String fx:value="Item 2" />
<String fx:value="Item 3" />
</FXCollections>
</items>
</ComboBox>
<Label text="Profile: " GridPane.columnIndex="0" GridPane.rowIndex="2" />
<ComboBox prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="Item 1" />
<String fx:value="Item 2" />
<String fx:value="Item 3" />
</FXCollections>
</items>
</ComboBox>
</children>
<columnConstraints>
<ColumnConstraints fillWidth="false" halignment="RIGHT" hgrow="NEVER" maxWidth="-Infinity" minWidth="10.0" prefWidth="80.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
<HBox layoutX="14.0" layoutY="150.0" prefHeight="159.0" prefWidth="335.0">
<children>
<Label text="Description: " />
<TextArea prefHeight="172.0" prefWidth="247.0" wrapText="true" />
</children>
</HBox>
<HBox alignment="CENTER" layoutX="11.0" layoutY="334.0" prefHeight="48.0" prefWidth="329.0">
<children>
<Button fx:id="newProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="newProfile" text="New Profile" />
<Button id="newProfileB" fx:id="cloneProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="cloneProfile" text="Clone Profile" />
<Button id="newProfileB" fx:id="importProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="importProfile" text="Import Profile" />
<Button id="newProfileB" fx:id="exportProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="exportProfile" text="Export Profile" />
<Button id="newProfileB" fx:id="printPDFB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="pdfProfile" text="Print to PDF" />
<Button id="newProfileB" fx:id="deleteProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="deleteProfile" text="Delete Profile" />
</children>
</HBox>
</children>
<stylesheets>
<URL value="@master.css" />
<URL value="@profile.css" />
</stylesheets>
</AnchorPane>Edited by: 960799 on Jan 4, 2013 8:58 PM
Edited by: 960799 on Jan 4, 2013 8:59 PM -
I am using the spry tabbed menu and currently I have the
background image of the entire header section set to a repeating
image. I left the tabbed menu div background color and image blank
so that the header section will come thru. It works fine in IE 7
but in FF the tabbed menu adds a white background... here is the
link to the test page...
http://afm.geofoam.com/homepage.asp
Any suggestions?Hi,
Try to add a fixed height for the header container. I added
for this css rule: .thrColFixHdr #header the height:105px and seems
to work also in FF.
Please let us know if this fixes your problem
Diana -
Is there a recommended "order" for displaying CSS shorthand attributes?
When using shorthand (for background tags, for example) is
there a
"preferred" or "recommended" order of displaying the
attributes?
background: url(filename.jpg) no-repeat left top fixed
background: no-repeat left fixed top url(filename.jpg)
etc.It's safer to assume that the order is important than to
assume that it's
not. Try giving the font style a random order, for example.
Or the list
style....
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
==================
"Jay" <[email protected]> wrote in message
news:evlt6n$mcm$[email protected]..
> "Murray *ACE*" <[email protected]>
wrote in message
> news:eviupm$t4o$[email protected]..
>> It does matter, in general. Make sure you check out
what the order
>> should be for the style you are using, in DW's
Reference panel.
>
> O'REILLY CSS Reference | Style: background
> Value: Any combination of the five background-style
attribute values, in
> any order.
> Example: body {background: url(watermark.jpg) repeat
fixed}
>
> I realize the order matters if you're specifying margins
or borders
> (left-right-top-bottom) but for the background selector
it doesn't appear
> to be a factor, according to DW's Reference panel.
> -
First, let me thank the two gentlemen who took time to look
at my previous post on this problem. As suggested, I renamed the
background jpg taking out the space which had previously resulted
in a 20% sign in the code. Dreamweaver automatically repointed the
pages to the renamed jpg. But ------- no luck. Same problem.
So, I decided to make another page with nothing on it but a
short text in color and a standard colored background instead of a
jpg image background. I was shocked to see that the page shows up
on the net as plain white with black text.
Here is the code for the trial page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #CCFF66;
body,td,th {
color: #3366FF;
.style1 {font-size: 36px}
-->
</style></head>
<body>
<span class="style1">This is text.
</span>
</body>
</html>
Here is the url: www.lonestarfold.com - go to the shipping
button. That takes you to the new trial page.
Still puzzled in Texas. Any suggestions??I get a 403 error when trying to access your website...
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Proud GAWDS Member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"arstart" <[email protected]> wrote in
message
news:eb4l7q$er4$[email protected]..
>
> First, let me thank the two gentlemen who took time to
look at my previous
> post on this problem. As suggested, I renamed the
background jpg taking
> out
> the space which had previously resulted in a 20% sign in
the code.
> Dreamweaver
> automatically repointed the pages to the renamed jpg.
But ------- no
> luck.
> Same problem.
>
> So, I decided to make another page with nothing on it
but a short text in
> color and a standard colored background instead of a jpg
image background.
> I
> was shocked to see that the page shows up on the net as
plain white with
> black
> text.
>
> Here is the code for the trial page:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
> "
http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <style type="text/css">
> <!--
> body {
> background-color: #CCFF66;
> }
> body,td,th {
> color: #3366FF;
> }
> .style1 {font-size: 36px}
>
> -->
> </style></head>
>
> <body>
> <span class="style1">This is text.
> </span>
> </body>
> </html>
>
> Here is the url: www.lonestarfold.com - go to the
shipping button. That
> takes
> you to the new trial page.
>
> Still puzzled in Texas. Any suggestions??
> -
Css text & background positioning in one statement ?
When I use the code below the text is not centered
vertically, but is more toward the top.
Can I move the text down without using 2 selectors? One for
the box and another for the text ?
thanksOK - let's try again.
<style type="text/css">
#info {
position:absolute;
top:50px;
left:0px;
width: 1024px;
height: 25px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
color: #FFFFFF;
background:#990000;
</style>
If you are not using a background image so that the
'background' shorthand
style contains information about the image and its position,
you would be
better off using 'background-color'. Using 'background', as
you have, will
reset all the other values implicit in that 'background'
style to their
default values, which may unexpectedly change the expression
of other rules.
To make the text appear vertically centered in the container,
modify the
rule -
<style type="text/css">
#info {
position:absolute;
top:50px;
left:0px;
width: 1024px;
height: 25px;
line-height:25px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
color: #FFFFFF;
background:#990000;
</style>
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
==================
"jerr3d" <[email protected]> wrote in
message
news:gf2hsc$o25$[email protected]..
> thanks, but unless I missed something that did not
really answer my
> question -
Spry Menubar-background problem
Hi,
I have tried to search for this problem, and though I have
found others with the same problem, there have been no answers
(probably so obvious I missed it and they figured it out.) And I
did update the Spry Menubar to the latest version.
The Spry Horizontal menubar works fine on Firefox, but on IE
7 the background is white as well as the submenus, not the intent.
The alignment and size is fine, just the designed background colors
don't work (on the menu itself, I want a transparent background, on
the submenus it is #777079.)
Website:
September
Entertainment Website
Style Sheet spry:
Spry
CSS
Thank you in advance for any help you can give me.
Cheers,
JanellHi,
Just found the problem for anyone that is having the same
thing happen. It is the hack at the bottom of
"SpryMenuBarHorizontal.css":
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: fff;
Where it says: "background:fff;" change it to whatever you
need, in my case, "background: transparent;"
Voila!!
Cheers,
Janell
Maybe you are looking for
-
Dynamic creation of Controls in JSF ??????
i just started on JSF...I've good experience with ASP.NET.... I have liked what I've seen so far in JSF.....It's pretty straight forward ...neat clean and simple... What I am looking for in JSF is a way to create controls in a page dynamically.... A
-
Photos not showing in media viewer
Hi.. I am using iweb 09 to build my website. However I cant view my photos that I have in Aperture, in the media viewer in iweb. I only have the one Aperture project on my laptop, and all of the non-edited... and edited photos within that project don
-
HT204053 I have two apple id's
I am trying to buy funds for a game that was bought with another Id is there a way to link the 2 ids together? Please help... The first Id was my brothers and he give it to me.. the second one is the one I set up to buy stuff. I can not buy stuff und
-
How do I get back my lost contacts in E51
It was the first time I tried out connecting my Nokia E51 to the PC.I was loading the CD and without reading much started downloading the new firmware. There was a warning about contents being lost some how i was so excited had started saying ok to t
-
Removing Key Date from variable input screen
Hi Experts, I am trying to remove the "key date" entry from the variable input screen so users dont see this value when they are trying to run a query. Can you please advise me on how to do this? Thanks in advance.