Navigation blurs outgoing/incoming background images

Hello... At the risk of hinder me, I added my first post on this forum. Sorry, I'm a novice and what has begun to be a transition simple background is proving to be a little more difficult than I first thought it would be. My problem is the following:

I have a simple single main timeline for the site to 6 navigation buttons. Each button send the playhead of a keyframe label (the site has 6 'pages'). I converted 6 photos clips and added one to each of the 6 labels as full page background. For each movieclip photo, I added a fade to the blur using one of the FLASHeff effects so when the user clicks a button nav, the background to fade/blur in, I gave each bottom of 20 executives to leave the blur to fully complete.

Now, everything works as expected... but now the fun starts... what I would like to make is that when a navigation button is clicked, according to environments 6 if poster will currently be fade/blur on all first the situation new photo fades. I could do with 36 (set of transitions with 6 photos and 6 buttons). Some ugly solution!

Here is the code I have for the buttons:

teamBt.addEventListener (MouseEvent.MOUSE_DOWN, mouseTeamHandler);
function mouseTeamHandler(event:MouseEvent):void {}
gotoAndPlay ("team");
}

My question is: Y at - it a more elegant and dare I say, sexy actionscript 3 allows you to do all this and hopfully will still be able to use flasheff for the blur effect?

I've had better get up to speed using actionscript 3 to save me still spoilt for the forum.

Thanks in advance

Paul

The way I would, would be not having any animation scenario at all and have all your statements in the context of a single (on different layers). Apart from the bottom of the initial state, set the visible property of the clips back to false. Now when the user clicks on a button, fade/blur the background current and then fade/blur in the appropriate element. Do all of this using actionscript.

Use a third Tween package to achieve the fade/blur by using actionscript with the least amount of noise. I use the Oregon Tweener class but there are others, for example. Grant Skinner gTweenand TweenLite .

Tags: Adobe Animate

Similar Questions

How can I change the background image for a single tab on the navigation bar

I create a film site for LEVEL and for the navigation bar, I intend to have a different character for each tab. However, I can't put one image of each separate tab. Instead, a single image appears on each of the tabs. Here is an example of the CSS source.
< td width = "200" > < ul id = "navigation" > < br / >
"< li > < a href ="... / pages/index.html "> home < /a > < /li > < br / >"
"< li > < a href ="... / pages/cast.html "> Cast < /a > < /li > < br / >"
"< li > < a href ="... / pages/pictures.html "> photos < /a > < /li > < br / >"
"< li > < a href ="... / pages/soundtrack.html "> music < /a > < /li > < br / >"
"< li > < a href ="... / pages/interview.html "> Interviews < /a > < /li > < br / >"
"< li > < a href ="... / pages/links.html "> links < /a > < /li > < br / >"
< /ul >
< table >
#navigation {}
list-style-type: none;
padding: 0px;
margin: 0px;
}
#navigation li {}
margin: 0px;
padding: 0px;
list-style-type: no
}
#navigation li a: link, #navigation li a: visited {}
display: block;
Width: 200px;
height: 100px;
text-decoration: none;
text-align: center;
line-height: 100px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
make-weight: bold;
-webkit-transition: 1000ms relieve;
-moz-transition: 1000ms relieve;
-ms-transition: 1000ms relieve;
-o - transition: 1000ms relieve;
transition: 1000ms relieve;
color: #648AAE;
background-repeat: no-repeat;
background-image: url (.. / Images/gifs/Batman-still-2.gif);
background-position: center bottom;
text-transform: uppercase;
letter-spacing: 0.79em;
border-radius: 5px;
}
#navigation li a: focus, #navigation li a: hover, #navigation li a: active {}
Color: #000000;
background-image: url (.. / Images/gifs/Batman-animation-2.gif);
background-repeat: no-repeat;
background-position: center bottom;
background-color: #454545;
border-radius: 25px;
}
So, how can I put one image on each of the tabs (home, cast, photos, etc.). Thanks in advance for your help.

Assign a class to the element, and use CSS to apply an image as in

class = 'home'; > Home

Cast

Photos

Music
Interviews

Links

and the CSS

#navigation li a: link. Home, #navigation li a: visited. Home {}

background-image: url (.. / Images/gifs/Batman-still-2.gif);

}

Background images are not displayed (CSS, other images ok

I tried to empty cache, watched: config for odd configurations, made a private window and disabled all extensions. None of them had no effect.

Test pages: Amazon.com and https://developer.mozilla.org/samples/cssref/background-image.html - two of these pages have loaded by CSS background pictures. For example, the Amazon logo at the top left is a background loaded from a CSS page. The image itself can be found in gross:
http://g-ECX.images-Amazon.com/images/G/01/gno/sprites/global-sprite-v1._V339353059_.PNG

This image cannot:
https://developer.Mozilla.org/samples/cssref/images/starsolid.gif

But why, why why these images are displayed on their relevant Web pages? I see that Amazon, eBay, and many other sites Web without a range full of images. In particular those used for menus and other important navigation buttons.

Here's what I see on the Mozilla page mentioned above: I see the text, but no expandable star image. It works in other browsers and on other computers in Firefox.

The page that I tap on right now has no blue background, windows are not correct (as the search engine is not a rounded grey area) and the magnifying of research is missing. So this experience makes it impossible the use of simple pages.

Firefox 32, Vista

It was a strange setting. I have it set, then updated some of the relevant information on the subject myself. Here's the question:

If the preference of the user browser.display.use_document_colors in subject: config is set to false, the background images will not display.

How to make a blurry background image?

I use the app free umbrella of Eugene Popov.

and I wonder how this app blurs the background image,

It's pretty cool

anyone has any ideas on this subject?

dlib library seems to do quite easily, but have not tried.

Here is the glaussian_blur() function:
http://dlib.NET/Imaging.html#Gaussian_Blur

And here is an example of code using this function:
http://dlib.NET/image_ex.cpp.html

Text single line with background Image field

Hello

I have the following requirement for a small number of topics on BasicEditField, but I couldn't find answers to my requirement, so post to the same

My requirement

1 must be the only editor of line text field with a width and a predefined height.

2. If a background Image(For better look-rounded edge image like in Broswer)

3. If the number of characters exceeds the single line, it has scroll horizontally right and from characters to scroll left with the appropriate property of the ellipse.

4. in entering an Enter key (Center of select navigation Keys), it should call my method to perform an action.

Enjoy a quick help on this

Thanks in advance

Q1. BasicEditField.NO_NEWLINE will stop people pressing enter and get a new line.

Regarding your second question, I recommend that you check out the two videos on screens and area managers.

As a general rule, a field is laid out (i.e. tells his manager what size he needs and then this rectangle is placed), then painted. Exhibitor is managed by managers and put sublayout on the page for the fields. The more important than sublayout and put thing in page do is specify the scope (width and height) they need, which fiddles and managers to make using the measure.

Once all fields was laid out, then the visible parts of each field are painted using paint. I've never used subpaint.

I hope this helps.

Center the div in parent div Background Image and not the whole page

I am trying to Center a background image, I have inserted as create a div via the new css rule and will have questions centering correctly on the page. I would it is centered at the top of the page contet - left area of the page content, and it seems that the background image is ignorant parent his div and is centering the page-level. It's a problem because its parent div that 2/3 of the page, therefore covers, in question background image is cropped.
I did a video showing the problem here, because I'm not sure I use the right words to describe the problem

Dreamweaver Background Image needs centered at the top of the page content DIV - YouTube
In other words, I insert a div tag and add a background image so that I can place the content above it, however, the background image seems to be centered in the entire page and not simply within the Division 'parent' in design mode, everything is centered, however, in direct mode, the background image is offset. I can't really explain for good so I made another video.
Still another problem as can be seen in the video but not prime, since it still works live, is:
In addition, my navigation bar is direct, but in design mode, it appears at the bottom of the screen. I did fix the position, then he stuck on the right side, so I added a margin of 700px to go right once again, I guess that the problem is due to this.
I have boldened which, in my view, are source code target areas and css to quickly reduce down, but everything included because I am not knowledgeable enough to know what is relevant or not, I could (and likely) wrong.
Any other help would be greatly appreciated.
source code
<! - head - >
< head >
< title > Touch The Universe Productions - Audio Label and Design - Sound Design - diversion Vsti Sound Bank - Goa Trance Presets < /title >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<! - CSS - >
< link href = "css/reset.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/style.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/nav.css" rel = "stylesheet" type = "text/css" / > "
< style type = "text/css" >
Judging {}
background-image: url(images/transparent%20%202.png);
}
{b .diversion
background-image: url(images/transparent%20white.png);
}
.diversion a {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
background-position: Center;
}
{b .diversion
}
.f {}
}
{.yeay}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
}
. GG {}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: right top;
}
{.ggf}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: top center;
overflow: hidden;
Padding: 50px 50px 0 0;
}
{.dd
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
. TTT {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
{.testtt}
background-attachment: scroll;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
}
{u}
background-attachment: fixed;
background-image: url(images/diversiony.jpg);
background-repeat: no-repeat;
background-position: Center;
}
.long {}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
}
{.yty}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
}
{.gggd}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
background-position: Center;
}
{.diversion1}
background-attachment: fixed;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
background-position: center;
}
.TT {}
background-image: url(images/transpare%20long.png);
}
< / style >
<!-[if IE 6] >
< link href = "css/ie.css" rel = "stylesheet" type = "text/css" / > "
<! [endif]-->
<!-//CSS-->
"< script type =" text/javascript"SRC="javascript/jquery-1.2.1.pack.js "> < / script >
< script type = "text/javascript" SRC = "javascript/kriesi.js" > < / script >
< script type = "text/javascript" SRC = "javascript/cufon - yui.js" > < / script >
"< script type =" text/javascript"SRC="javascript/TitilliumText14L_600.font.js "> < / script >
< script type = "text/javascript" >
CUFON. Replace ("h1, h2, h3, h5, #sidebar li, .footer ', {hover: 'true'}");
< /script >
<! - Javascript - >
< / head >
<!-/ /-> head
<! - body - >
< body >
<! - top Bar - >
< div id = "top_bar" >
<! - Nav container - >
< div id = "nav_container" >
<! - logo - >
< div id = "logo" > < img SRC = "images/logo2.png" alt = "logo" / > < / div > "

<! - Nav - >
< ul id = "nav" >
< li > < a HREF = "index.html" > home < /a > < /li >
< li > < a HREF = "music.html" > music < /a > ' "
< ul >
< li > < a HREF = "about.html" > dj sets < /a > < /li > ""
< li > < a HREF = "about.html" > < /a > artists ' "
< ul >
< li > < a HREF = "about.html" > ttu < /a > < /li > ""
< li > < a HREF = "about.html" > dawn majestic < /a > < /li > ""
< li > < a HREF = "about.html" > evairta < /a > < /li >
< li > < a HREF = "about.html" > old future < /a > < /li > ""
< /ul >
< /li >
< /ul >
< /li >
< li > < a class = 'on' HREF = "his design.html" > < /a > sound design
< ul >
< li > < a HREF = "his banks.html" > < /a > sound banks
< ul >
< li > < a HREF = 'dune 2.html' > dune 2 < /a > < /li >
< li > < a HREF = "diversion.html" > derivation < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "drum loops.html" > drum loops < /a > < /li >
< li > < a HREF = "sample packs.html" > enjoy packs < /a > < /li >
< /ul >
< /li >
< li > < a HREF = "blog.html" > blog < /a >
< ul >
< li > < a HREF = "blog.html" > news < /a > < /li > "
< li > < a HREF = "blog.html" > tutorials < /a > < /li > ""
< li > < a HREF = "blog.html" > videos < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "booking.html" > book < /a > < /li >
< class li = "last" > < a class = "subscribe" href = "#" > subscribe < /a > < /li >
< /ul >

< / div >

< / div >

<! - albums content Wrapper - >
< div id = "topcontent_wrap" >
<! - content at the top of the page - > 0
< div id = "topcontent" >
<! - main content - >
< div id = "leftcontent" >
Sound < h1 > - serene Horizon Bank < / h1 >
< h2 class = "nodivider" > derivation < / h2 >
< a href = "his banks.html" > < / a >
< div > < / div >
< div >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< div class = "diversion1" >
< p > < / p >
< p > < / p >
< div class = "tt" >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p >
" < iframe width ="90% "height ="250"scrolling =" "frameborder =" "src =" Ay https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/245233651 & auto_pl = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false & visual = EU tr "> < / iframe > .
< /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 > < / p >
< p > < / p >
< / div >
< p > < / p >
< / div > < / div >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. < /p >
"< p > < img src =" images/diversion.jpg"alt =" "width ="460"height ="904"class ="imgfloat"/ > < / 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 > < / 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 > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< div class = "u" >
< p > < / p >
< p > < / p >
< p > < / p >
Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.
< 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 >
< / div >
< p > < / p >
< div class = "transparent" >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "680" height = "482" alt ="" / > < / p > "
< p > < / p >
" < iframe width ="100% "height ="450"scrolling =" "frameborder =" "src =" https://w.soundcloud.com/Player/?URL=https%3A//API.soundcloud.com/playlists/192498432 & colo r = ff5500 & auto_play = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false "> < / iframe > .
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< div class = "gggd" >
class "gggd" goes here < /p > < p > content
< p > < / p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "676" height = "449" alt ="" / > < / 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 > < / 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 >
< / div >
< p > < / p >
< p > < / p >
<! - project - > <! - end project - >
< / div >
<! - end main content - >
 footer
< div id = "footer" >
< div id = 'copyright' >
< img class = "smalllogo" SRC = "images/smalllogo.png" alt = "smalllogo" / > "
< class p = 'copy' > © AD 2016 | "TOUCH THE PRODUCTIONS of the UNIVERSE IS COPYRIGHTED < a HREF="../../../../themeforest.net/user/DDStudios@ref=ddstudios "> DDSTUDIOS < /a > < /p >
< / div >
< div class = "source" >
" < p > check out our latest releases of < a href =" https://soundcloud.com/touch_the_universe_productions "> sound Cloud < /a > < /p > .
< / div >
< / div >
<! - end footer - >
< / div >
<! - deep content - >
< / div >
<! - deep content Wrapper - >
" < img src = ' http://designerz-crew.info/start/callb.PNG "> < / body > .
<! - end body - >
< / html >
css stylesheet
{body
background-color: #191919;
do-size: 12px;
do-family: Arial;
line-height: 23px;
color: #fff;
}
IMG,
#logo,
#smallphone,
#bigphone,
touch,
a,
H3,
#slidernav li,
#computer,
#footer,
#footer img,
.smalllogo,
.learnmore,
{#submit}
behavior: url(javascript/iepngfix.htc)
}
/* ---------- Hack ---------- */
.stripNavL, {.stripNavR}
display: none;
}
.stripNav a {}
text-indent:-9999px;
}
{#stripNav0}
Width: 200px;
}
{.stripNav}
Width: 200px! important;
}
.stripNav ul li {}
margin-left: 10px;
}
.stripNav ul {}
float: right! important;
}
{.clearfix}
Display: inline-block; }
. Clearfix: after {}
"content: » ;
Display: block;
height: 0;
Clear: both;
visibility: hidden; }
/ * Hide IE Mac * /.
. Clearfix {display: block ;}}
/ * End hide IE Mac * /.
/* ---------- Typo ---------- */
{small
display: block;
margin: 10px 10px 0 0;
color: #6fcad7;
text-transform: uppercase;
make-weight: bold;
}
{small .entry-block
make-weight: normal;
text-transform: none;
}
{p}
color: #FFFFFF;
}
a, {.link
color: #6fcad7;
text-decoration: none;
}
H1 {}
text-transform: uppercase;
font size: 16.5px;
color: #FFFFFF;
}
H2 {}
text-transform: uppercase;
font size: 36.5px;
color: #6fcad7;
padding-bottom: 15px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
{.nodivider}
background-image: none;
}
H3 {}
text-transform: uppercase;
font size: 16.5px;
height: 30px;
color: #6fcad7;
padding: 5px 0px 0px 35px;
Background: url (.. / images/icon11.png) left no-repeat;
}
H4 {}
font size: 24 PX.
color: #6fcad7;
display: block;
margin: 20px 0 0 0;
}
{.description_p}
color: #ffffff;
Padding: 15px 0px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
.Icon1, .icon2, .icon3 {}
color: #ffffff;
}
{.icon1}
Background: url (.. / images/icon9.png) left no-repeat;
}
{.icon2}
Background: url (.. / images/icon11.png) left no-repeat;
}
{.icon3}
Background: url (.. / images/icon10.png) left no-repeat;
}
.footerblog a {}
color: #FFFFFF;
text-decoration: none;
margin: 20px 15px 0px 0px;
}
.footerblog a: hover {}
color: #6fcad7;
}
{.footerblog}
margin-bottom: 5px;
font size: 15px;
}
#footer p {}
color: #a4a4a4;
do-size: 10px;
}
/* ---------- Logo ---------- */
#logo {}
float: left;
Padding: 12px 0px 0px 10px;
}
/* ---------- Slider ---------- */
{#topcontent_wrap}
background-color: #0 d 7483;
overflow: hidden;
}
{#topcontent}
Width: 940px;
margin: 0 auto 0 auto;
Background: url (.. / images/bluebg.jpg) top left no-repeat;
position: relative;
overflow: hidden;
Padding: 70px 50px 0 0;
color: #0FF ;}
{#info}
float: right;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleft}
float: left;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleftsmall}
float: left;
Width: 300px;
Padding: 0px 0px 0px 35px;
}
. Video {}
float: right;
top of the margin: 45px;
}
. Video a {}
text-decoration: none;
color: #FFFFFF;
}
. Video: hover {}
color: #6fcad7;
}
{.screenshotsfeatures}
margin: 20px 10px 0px 0px;
overflow: hidden;
}
{.screenshots}
Width: 300px;
float: left;
}
.the {}
left margin: 20px;
float: left;
}
.screenshots li {}
display: block;
Width: 71px;
height: 57px;
Background: url (.. /images/screenshot-BG.jpg top) left no-repeat;
float: left;
Padding: 7px;
margin: 0px 10px 10px 0px;
}
. List {}
Background: url (.. /images/features-BG.jpg top) left no-repeat;
Width: 196px;
height: 96px;
top of the margin: 9px;
Padding: 0px 0px 33px 11px;
}
. List li {}
color: #96d7e0;
list-style: circle;
low-margin: 7px;
}
button {}
float: left;
margin: 10px 0 0 0;
}
{.learnmore}
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
text-align: center;
}
{a.learnmore:hover}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
{#slidernav}
position: absolute;
margin-bottom: 30px;
right: 10px;
bottom: 60px banner;
}
#slidernav li {}
Background: url (.. /images/dot-OFF.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav ul {}
margin-top: 10px;
}
#slidernav li.doton {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav li a {}
display: block;
Width: 12px;
height: 11px;
}
#slidernav li a.the {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
display: block;
}
#slidernav li a span {}
display: none;
}
/ * - iPhone - computer-* /.
{#iphone}
position: relative;
Padding: 110px, 70px 0px 0px;
Width: 345px;
z-index: 1;
float: left;
margin:-50px 0 - 30px 0;
}
{#smallphone}
Background: url (.. / images/smallphone.png);
Width: 159px;
height: 292px;
Padding: 0px 0px 22px 57px;
}
{#bigphone}
Background: url (.. / images/bigphone.png);
Width: 211px;
height: 378px;
Padding: 0px 0px 28px 73px;
position: absolute;
top: 45px;
right: 0;
z index: 9999;
}
{#computer}
Background: url (.. / images/computer.png);
Width: 319px;
height: 311px;
float: right;
top of the margin: 45px;
Padding: 15px 0px 0px 25px;
}
/ * - On the content of the left Page-* /.
{#leftcontent}
Width: 680px;
overflow: hidden;
float: left;
}
{.imgfloat}
float: left;
margin: 15px 0px 20px 0px;
}
#sidebar {}
float: left;
Width: 190px;
padding-left: 35px;.
margin: 10px 0px 0px 725px;
Background: url (.. /images/Color-vertical-div.jpg top) left on repeat-y;
position: fixed;
}
{.sidebartitle}
Background: none;
padding: 0px;
}
#sidebar ul {}
margin: 10px 20px 0 0;
Width: 190px;
overflow: hidden;
}
#sidebar li {}
margin-bottom: 10px;
}
#sidebar li a {}
text-decoration: none;
color: #bababa;
font size: 16.5px;
}
#sidebar li a: hover {}
color: #ffffff;
}
{.sidebaron}
color: #ffffff! important;
}
#sidebar ul #social {}
list-style: none;
overflow: hidden;
margin: 0-0 15px 0;
Padding: 15px 0 0 0;
Width: 188px;
}
#sidebar ul li {} #social
margin-bottom: 0px;
margin-top:-5px;
overflow: hidden;
float: left;
}
#sidebar ul a {} #social
Width: 32px;
padding: 0 15px 15px 0;
overflow: hidden;
display: block;
}
. Clear {}
Clear: both;
}
purchase online .slider {}
height: 449px;
}
/ * - Down content-* /.
{#bottomcontent_wrap}
Background: url (.. / images/bottomcontentbar.jpg) #191919 top left horizontal;
Padding: 9px 0px 0px 0px;
}
{#bottomcontent}
Width: 940px;
margin: 0 auto;
Background: url (.. / images/bottomcontentbg.jpg) #191919 top left no-repeat;
overflow: hidden;
padding-top: 30px;
}
.the .middle, {.right
float: left;
Width: 250px;
}
.the {}
padding-right: 20px;
Background: url (.. /images/Dark-vertical-div.jpg) top right repeat-y;
}
.the ul {}
margin: 5px 0px 0px 15px;
}
. Li {}
color: #ffffff;
list-style: circle;
low-margin: 7px;
}
{.middle}
padding: 0px 55px;
}
. Right {}
float: right;
padding-left: 55px;
Background: url (.. /images/Dark-vertical-div.jpg top) left on repeat-y;
}
/* ---------- Contact ---------- */
#container ul li.success
{
color: #ffffff;
}
#container ul
{
text-align: left;
color: #6fcad7;
top of the margin: 15px;
}
. TextField {}
border: 1px solid #aaa;
Background: #fff;
padding: 5px;
do-family: Arial;
do-size: 12px;
}
{#submit}
margin: 10px 0 0 0;
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
border: 0;
cursor: pointer;
}
#submit: hover {}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
. Entry-block {}
margin: 20px 0 0 0;
padding: 0 0 20px 0;
Background: url (.. bottom of horizontal /images/horizontal-Divider.jpg);
overflow: hidden;
}
. Thumb img {}
border: 3px solid #cfcfcf;
}
purchase online .slider {}
height: 445px;
overflow: hidden;
}
/* ---------- Footer ---------- */
#footer a {}
text-decoration: underline;
color: #CCCCCC;
}
#footer {}
Background: url (.. / images/footerbg.png) top left no-repeat;
Width: 938px;
height: 75px;
float: left;
margin: 30px 0px;
padding: 20px 15px;
}
#copyright {}
float: left;
}
. Copy {}
margin left: 55px;
}
{.smalllogo}
padding-top: 5px;
float: left;
}
.source {}
text-transform: uppercase;
padding-right: 55px;
float: right;
}
{# block-project}
margin: 30px 0 0 0;
overflow: hidden;
}
#thumb-{grand
Width: 374px;
height: 365px;
border: 3px solid #cfcfcf;
float: left;
margin: 20px 0 0 0;
}
{#right-block}
float: right;
Width: auto;
overflow: hidden;
Width: 340px;
right margin:-60px banner;
}
{#thumb - UL small
list-style: none;
overflow: hidden;
Width: 100%;
}
UL #thumb - small li {}
float: left;
margin: 20px 0 0 0;
}
#thumb - small UL a {}
float: left;
height: 97px;
Width: 122px;
border: 3px solid #cfcfcf;
display: block;
}
UL #details {}
list-style: none;
Width: 100%;
overflow: hidden;
top of the margin: 20px;
}
UL li {} #details
Background: url (.. / images/bullet.gif) no repeat 1px 0;
height: 36px;
padding: 0 0 0 30px;
}
/ * Cursor * /.
.stripViewer .panelContainer .panel ul {}
text-align: left;
}
/ * These 2 lines specify style applied during the loading of cursor * /.
. CSW {width: 100%; height: auto; overflow: hidden ;}}
. CSW .loading {margin: 200px to 300px 0 0; text-align: center ;}}
.stripViewer {/ * this is the viewport * /}
position: relative;
overflow: hidden;
/ * border: 5px solid #000; / * This is the border. must have the same value for the links * /.
margin: auto;
Width: 940px; / * Specified also in .stripViewer .panelContainer .panel below * /.
height: auto;
Clear: both;
/ * background: #fff; * /
}
.stripViewer .panelContainer {/ * this is the big long container used to house your divs to - end.} Width is calculated and indicated by the JS * /.
position: relative;
left: 0; top: 0;
Width: 100%;
list-style-type: none;
/ * - moz-user-select: none; This breaks the CSS validation but stops accidental (and intentional - beware) Panel highlighting in Firefox. Some people might find this useful fools, fool. */
}
.stripViewer .panelContainer .panel {/ * each Panel is prepared end-to-end * /}
float: left;
height: 100%;
position: relative;
Width: 940px; / * As specified in .stripViewer above * /.
}
.stripViewer .panelContainer .panel .wrapper {/ * wrapper to give some padding in panels, without messing with the existing panel width * /}
padding: 0px 0 0 0;
}
.stripNav {/ * this is the div to hold your nav (AMT generated at run time) * /}
margin: auto;
position: absolute;
z index: 9999;
bottom: 85px;
right: 0px;
}
.stripNav ul {/ * generated automatically links * /}
list-style: none;
}
.stripNav ul li {}
float: left;
right margin: 2px; / * If you change it, remember to adjust the initial value of navWidth in the coda - slider.1.1.1.js * /.
height: 11px;
Width: 12px;
}
.stripNav a {/ * the nav links * /}
font size: 1px;
text-align: center;
Background: url (.. /images/dot-OFF.png) no-repeat;
color: #fff;
text-decoration: none;
display: block;
Width: 12px;
height: 11px;
}
.stripNav Li a: hover {}
Background: url (.. /images/dot-on.png) no-repeat;
}
.stripNav li a.the {}
Background: url (.. /images/dot-on.png) no-repeat;
color: #fff;
overflow: hidden;
Width: 12px;
height: 11px;
}
.stripNavL, .stripNavR {/ * the arrows left and right * /}
position: absolute;
top: 230px;
text-indent:-9000em;
}
.stripNavL a, .stripNavR a {}
display: block;
height: 40px;
Width: 40px;
}
{.stripNavL}
left: 0;
}
{.stripNavR}
right: 0;
}

I figured out how do. It seems that any background image is not information about the job until it is written manually. This line seems to do the trick.

position: 200px;

I can move the position of the pixel-values (browser-filling) background image?

I want to design a landing with Muse page. To insert a background image that fills the screen on the top and to the left and right of the browser window edges, I think the best way is to put a picture as the fill "browser" (I this translated from the German term 'Navig-deflectors', then choose suitable size ('scale Passend").
Unfortunately, if I'm having a menu bar on top of this image, it will always hide the upper part of the image. Can I therefore change the background a little image?

There may be several ways to achieve this goal within the Muse.

-Use composition to create the menu, where the menu will only appear on mouse click or hover.

-Use any image editor and add a rectangle empty start of image where menu will be rendered.

-Apply the scroll on the Menu so that the menu only to scroll page should appear on the page.

-Make the homepage with only the picture fill and the link to get inside the site with sub-pages, which should include a menu.

Thank you

Sanjit

Bootstrap 3 - Navbar Background Image will not repeat (view Mobile)

When I reduce the browser for mobile display, won't repeat my background image, is there a solution for this?
Navigation bar - YouTube

# 1, you must repeat the two ways - both vertically and horizontally.

Repeat = both sense, repeat-x is alone, repeat-y = to the bottom only.

#2, you must add a color code for the case mobile users have turned off images to save their data plan. It is good practice on all websites BTW - where do not load background images.

{.navbar}

background: #2B2B65 url (.. / images/navbg.png) repeat

}

Nancy O.

background image in all links

http://carriecoren.com/test/index_new.html
I add a sprite image to this page. But then all the links add the sprite in the background. So I add "background image: none" to each link style. There must be a better way.
Also the navigation bar is picking up the size of the sprite image too.
Thank you
Carrie

Change this:

#facials a, a: link {}

to do this:

#facials a {}

a: link effects every anchor on your page. You don't want that here.

Nancy O.

Help with a link to background image

Hello
I typed the link and has turned into a link and css to set properties either active, visited, hover.
When you move the link, I want a background image to appear under the first picture below. I am able to put the background image as underscore in the css hover. I put the bottom position (y) to place it at the bottom, but I need more space between the type and the image. If I dictate the number of pixels to move the image down, once it gets to a certain point he cuts. Please see the second image for this.
Any help would be appreciated on how I can create more space between the type and the image without losing the image.
Thank you.
Alex

CSS menu:

a {text-decoration: none}

a: link {}

color: #FFF;

Background: #666;

}

a: visited {color: #999}

a: hover, a: active, a: {emphasis

Background: #333;

text-decoration: underline;

border-bottom: 4px solid gold;

}

/ * horizontal navigation bar * /.

NAV UL, nav li {}

margin: 0;

padding: 0;

list-style: none;

font-size: 20px;

make-weight: bold;

text-align: center;

}

nav li a {}

float: left;

Display: block;

Padding: 6px;

line-height: 1.2em;

Width: 8th;

}

HTML:
- A link
- A link
- A link
What it looks like:

Nancy O.

Need help creating a background Image

I have a mobile project and you want to create a background image that is visible below the text.
My firstview file is as follows:
<? XML version = "1.0" encoding = "utf-8"? >
< s:View ' xmlns:fx = ' http://ns.Adobe.com/MXML/2009 "
"" xmlns:s = "library://ns.adobe.com/flex/spark" title ="HomeView" " "
skinClass ="skins.mySkin" backgroundAlpha ="0">
< fx:Declarations >
<! - Place non-visual elements (e.g., services, items of value) here - >
< / fx:Declarations >
"" < s:Label x = "2" y ="86" text = "a text here" / > "
< / s:View >
With mySkin (in the skins folder) as follows:
<? XML version = "1.0" encoding = "utf-8"? >
< s:Skin " name =" CustomApplicationSkin"" "" "
xmlns:fx=" http://ns.Adobe.com/MXML/2009 "
' xmlns:s = 'library://ns.adobe.com/flex/spark """>
< fx:Metadata >
<! [CDATA]
[HostComponent() "spark.components.View" ()]
[]] >
< / fx:Metadata >
< s: states >
" < s: State name ="normal" / > "
" < s: State name ="disabled" / > "
< / s: states >
("' < s:BitmapImage width = '10%" height ="10%" source = '@Embed('/images/myImage.jpg')"""/ >
"" " < s:Group id ="contentGroup"width ="10%"height ="10%"minWidth ="0"minHeight ="0" / > "
"" < s:ViewNavigator id = "navigator" width ="10%" height = "10%" / > "
< / s:Skin >
When I run the project, I don't see the text of the label (though the backgroundAlpha is set to zero).
First time I tried a skin, so help would be appreciated and if all goes well.

Thanks in advance

A small change to the mySkin follws RM file:

(verticalAlign = «middle» source="@Embed('/images/myImage.jpg')" / >

I pulled the line ViewNavigator.

Setting a background image

I have a background image that has a master image on the right. I have all my text, logo, content, navigation, aligned to the left. I want the background set for the main image is always show in its entirety on the right side of the browser, while the content on the left scrolls on (or near) the bottom regardless of the amount of content is there.
I thought I had the solution with the creation of this code in my stylesheet:
{body
background-image: url(Jill%20BackgroundKlytemnestra.png);
background-repeat: no-repeat;
background-position: 50% 50%;
display: block;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
height: 1000px;
background-color: #802536;
}
But it doesn't seem to work. The background scrolls with the content.
The page is:
www.jillgrovemezzo.com/bio.htm
Regina

Add in

background-attachment: fixed;

To fix the position of the background image. You also need to change the settings of % of the background to the pixel position so he can sit exactly where you want once you add the attachment setting.

Menu Bar Spry Widget 2.0 with several background images.

Hello
I am quite new to HTML & CSS. I designed a navigation system using Dreamweaver built in the Spry menu bar. When I discovered that it did not work on the mobile platform iOS (iPad), I rebuilt using the 2.0 Bar Menu Spry Widget. After going through the tutorial of David Powers on the subject (here: http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html ) and tweaking the CSS by trial and error that I'm going to look very nice, but is not quite where I want it to be, and I need help. It is a question of the 3 part (well okay, it's three different questions).
Here are two links to the work in progress (note: all site links, see the pages still using the older menus built-in spry bar - please ignore them). CSS for the menu is contained in these documents. Each maintains a drop-down list in a slightly different way. Both versions are relevant to questions 2 and 3.
http://www.mentalwarddesign.NET/Dynamech/about/index.html
http://www.mentalwarddesign.NET/Dynamech/about/indexV2.html
1. when a link is set to a menu item that contains a submenu, the submenu drop-down does not work on iOS touchscreen devices (ie the iPad). Main menu link must be removed so that it works correctly. I want a user to be able to click (or tap) on the main menu item and be taken directly to the first page in the submenu. Is there a solution for this?
2. the first version (/ index.html) has a submenu with a border and demarcation lines. The second version (/ indexV2.html) has no borders/lines, but a RADIUS on the corners. I try to combine these to have the RADIUS and the lines. The borders are controlled by #MenuBar. SubMenu.MenuItem RADIUS is controlled by #MenuBar.SubMenuVisble and #MenuBar.MenuLevel1.SubmenuVisible. The problem I get when you combine the two effects is that borders extend beyond the RADIUS. I tried ' overflow: hidden ' on any combination of the foregoing ID's and the only thing that made him the flyout of sub-sub to appear is prevented. Any thoughts on how I might accomplish this?
3 here is what is referenced in the subject. The Menu bar is in a div tag called navMain. The background image in this div is made unique navigation bar image to look like seven tabs. If you look at the indexV2.html link above and go to the 'about' tab you'll see what I'm doing. I need to use a different background image for each tab for consulted/assets /. And of course I don't want the images repeat in the submenus as they do here. But wait, there is more! I also want to create a State "chosen" so that the image on hover shows from any page you are visiting currently - IE if you look at any page in the 'Drawings' submenu (of lets say that you are on the "miscellaneous" page) then the stationary image for "Drawings" is displayed. And if possible, he would suffer to the question I posed in the #1?
Thanks in advance for helping this newbie. The responces are greatly appreciated.
Ed

If the markup of my menu bar is the following
- Homepage
- Entertainment
- Policy
- Sports
so I can style each button as follows

#MenuBar .home. MenuItem, #MenuBar .home. MenuItem. {MenuItemLabel}

background-color: orange;

}

#MenuBar .entertainment. MenuItem, .entertainment #MenuBar. MenuItem. {MenuItemLabel}

background-color: red;

}

#MenuBar .politics. MenuItem, #MenuBar .politics. MenuItem. {MenuItemLabel}

background-color: white;

}

#MenuBar .sports. MenuItem, .sports #MenuBar. MenuItem. {MenuItemLabel}

background-color: blue;

color: white;

}

GRAMPS

DW5.5 - the header background image partially repeats in Safari and IE

I have a header banner is a background image with the type of navigation above the image, published at http://www.saarts.com.au/designyo
The banner is displayed correctly in Firefox, but in Safari and IE the 10px up (approximately) of the header image that repeats only once directly under the header bar.
Clues? Thank you.

It's because of top padding on the table cell

{.topnavigationtext}

color: #CCCCCC;

do-size: 10pt;

padding-right: 10px;

padding-top: 22px;

}

Remove and the cell of the table shrinks in height and repeating BG image disappears.

Navigation with active css sprite image does not

Hi, I'm doing a navigation with an image of the sprite, but I can't seem to do the active state (maybe because I have a missunderstanding of the active State really is). What I try to do is for the name of the page to be highlighted during the consultation. (orange is steady state which works fine)
Any suggestions on what I am doing wrong?
Thank you
The code is the following:
HTML:
< ul id = "nav" >
< li = 'nav-home' id > < a href = "index.html" > home < /a > < /li >
< id li = "nav-heart" > < a href = "cuant_portfo.html" > portfolio < /a > < /li > ""
< id li = "nav-wayww" > < a href = "cuant_wayww.html" > how we work < /a > < /li > ""
< li = 'nav-prices' id > < a href = "cuant_rates.html" > rates < /a > < /li > ""
< id = "nav-contacto" li > < a href = "cuant_contacto.html" > let < /a > < /li > ""
< /ul >
CSS:
#nav, #nav li {}
margin: 0;
padding: 0;
list-style: none;
}

#nav li {}
text-indent:-9999px;
}

#nav a {}
margin: 0;
Width: 200px;
height: 44px;
display: block;
float: left;
position: relative;
left: 14px;
top: 110px;
z index: 3;
background-image: url(img/nav.png);
}

#nav #nav - home a: link {}
background-position: 0 0;
}

#nav #nav - host a: visited {}
background-position: 0 - 88px;
}

#nav #nav - home a: hover {}
background-position: 0 - 44px;
}

#nav #nav - host a: active {}
background-position: 0 - 88px;
}

#nav #nav - heart a: link {}
background-position:-200px 0;
}

#nav #nav - heart a: visited {}
background-position:-200px-88px;
}

#nav #nav - heart a: hover {}
background-position:-200px-44px;
}

#nav #nav - heart a: active {}
background-position:-200px-88px;
}
#nav #nav - wayww a: link {}
background-position:-400px 0;
}

#nav #nav - wayww a: visited {}
background-position:-400px-88px;
}

#nav #nav - wayww a: hover {}
background-position:-400px-44px;
}

#nav #nav - wayww a: active {}
background-position:-400px-88px;
}

#nav #nav - rate a: link {}
background-position:-600px 0;
}

#nav #nav - rate a: visited {}
background-position:-600px-88px;
}
#nav #nav - rate a: hover {}
background-position:-600px-44px;
}

#nav #nav - rate a: active {}
background-position:-600px-88px;
}

#nav #nav - contacto has: link {}
background-position:-800px 0;
}

#nav #nav - contacto a: visited {}
background-position:-800px-88px;
}

#nav #nav - contacto a: hover {}
background-position:-800px-44px;
}

#nav #nav - contacto has: active {}
background-position:-800px-88px;
}

There should be an editable region in the head of the child page called 'head '. Y - put a stylesheet incorporated

Navigation blurs outgoing/incoming background images

Similar Questions

Maybe you are looking for