Hover links showing. CSS or HTML issue?
We are using CSS plus Dreamweaver 8. We momentarily see the
navigation "hover links" appear before a full page of content
manages to get loaded. (Imagine seeing a white browser page with
some underlined links in purple between one page leaving and the
next one appearing)
An Hour later------------------
We have solved the issue. The issue was a line across the
page which was messing it up.
Have a great day.
I have a very fast connection so I am not seeing your
problem.
"uptrends" <[email protected]> wrote in
message
news:gkqlve$bpe$[email protected]..
> We are using CSS plus Dreamweaver 8. We momentarily see
the navigation
> "hover
> links" appear before a full page of content manages to
get loaded.
> (Imagine
> seeing a white browser page with some underlined links
in purple between
> one
> page leaving and the next one appearing)
>
> Several of our pages have larger photos on them and so
the load is a bit
> slower than normal. However, it looks like links without
a stylesheet on
> the
> opposite side of the page from where they are supposed
to be. We don't
> want
> them to show at all, and cannot figure out how to get
rid of that
> "between"
> page - it is not a between page obviously, but the first
part of the
> load -
> maybe? Does the same in Firefox or IE.
>
> you can see the issue here: www.timezonemedia.com Any
help is
> appreciated.
>
Similar Messages
-
Linking external css file issue
Hello everyone,
I have linked my css file to the html in dreamweaver manual in the html page and by attaching the css file in dreamweaver but when I add new stle to my css file I dont know why it wont show the affect of the style I add to the HTML file while I have the split view in dreamweaver. please helpThat's because you're creating a class. You don't need a class to style HTML selectors.
HTML selectors don't contain any prefixes.
h1 {color:teal}
h2 {color:brown}
h3 {color: maroon}
Classes contain a dot prefix and must be referenced in the HTML.
.classname {color:pink}
<h2 class="classname">This class is pink</h2>
Nancy O. -
I'm trying to create a drop down navigation menu and under my 'Contact' button I want it to drop down and show my social media pages. I'm new to CSS so I am trying to understand where I went wrong...when I hover over 'Contact' it doesn't show anything. Here is my HTML and CSS code:
HTML-
<div class="nav">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Search Homes</a></li>
<li><a href="#">Buy</a></li>
<li><a href="#">Sell</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Meet My Team</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Facebook</a></li>
</ul>
</li>
</ul>
</div>
CSS-
.nav {
padding-top: 20px;
padding-bottom: 20px;
#nav {
list-style-type: none;
margin: 0;
padding: 0;
#nav li {
display: inline-block;
#nav li a {
padding: 10px;
background-color: #fff;
text-decoration: none;
color: #333;
transition: background .35s ease-in-out;
-webkit-transition: background .35s ease-in-out;
-o-transition: background .35s ease-in-out;
-moz-transition: background .35s ease-in-out;
#nav ul ul {
display: none;
position: absolute;
#nav li a:hover {
color: #333;
background-color: #ccc;
text-decoration: none;
#nav li ul li {
display: none;
position: absolute;
Thanks in advance!You don't actually have the CSS code for the dropdown action. Here is a very simple example you can work from:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: 'Lucida Grande', 'Helvetica Neue',
Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
ul li:hover {
background: #555;
color: #fff;
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
</style>
</head>
<body>
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html> -
CSS image background issues - please help!!!
I have a stubborn file that doesn't seem to want to display image backgrounds called out by CSS. In my DW file I can see the background images in Design View, but when I go to Live View or preview in a browser they're not showing. No broken link or unrecognized file type icons - just not there. It doesn't matter if I'm working on the file locally or on my test server; the result is the same.
Example 1:
CSS callout looks like this:
#logo h1 {
float: left;
width: 189px;
height: 71px;
background: url(/images/menu_logoblock.png) no-repeat top left;
HTML callout looks like this:
<div id="logo">
<h1></h1>
</div>
Example 2 (toggle image on rollover):
CSS callout looks like this:
a#prod1 {
width: 193px;
height: 140px;
text-indent: -9999px;
background: transparent url(/images/image_name.jpg) no-repeat 0 0;
margin-left: 0;
display: block;
position: absolute;
left: 0px;
top: 0px;
a#prod1:hover {
background-position: 0 bottom;
HTML callout looks like this:
<div id="products">
<ul>
<li><a href="#" id="prod1" title="Title" alt="Totle goes here"><strong>Title goes here </strong></a></li>
</ul>
</div>
I have successfully used both methods on other pages without problem, but for whatever reason can't get it to work today. I have a reset css file link to reset the browser defaults this time around and that's the only difference.Did you save your images for the web in RGB mode? Most browsers don't support CMYK.
Is your code valid? Modern browsers are becoming less foregiving of code errors.
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
I don't understand what is wrong but I don't see the styles when I preview my html in chrome.
Here's my CSS
@charset "UTF-8";
/* CSS Document */
html {
min-width: 768px;
body {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5rem;
.wrapper {}
img {
width: 100%; /*All images will be 100% the size of their parent */
.baseline {
background-image: url(../images/baseline.svg);
strong {
font-weight: bold;
em {
font-style: italic;
/* ----------------------------------------------------------------------------------------- ------------- Masthead */
.masthead {
height: 6rem;
background-color: rgba(51,153,255,1);
margin-bottom: 1,5rem;
h1 {
font-size: 1.5rem;
color: #9F6;
position: absolute;
margin: 2.25rem 0 0 4%;
/*---------------------------------------------------------------------------------------- --------------------article --*/
article {
padding: 0 4% 1.5rem;
.headline {
height: 4.5rem;
margin-bottom: 1.5rem;
background-colour: rgba(0,0,0,.15)
h2 {
font-family:Georgia,"Times New Roman", Times, serif;
font-size: 2.25rem;
position: absolute;
margin: 1.5rem 2% 0;
.placeholder {
width: 20%;
flow: left;
margin: 0 2.5% 1.5rem 0;
p {
margin-bottom: 1.5rem;
.footnote {
height: 4.5rem;
background-color: rgba(0,0,0,.15)
.footnote p {
font-size: .875rem;
position: absolute;
margin: 1.5rem 2% 0;
/*---------------------------------------------------------------------------------------- -------------------- Bottom --*/
.Bottom {
height: 15rem;
background-color: rgba(51,153,255,1);
.bottom p {
font-sizes: .875rem;
color; #FFF;
position:absolute;
margin: 1.5rem 4%
Here's my HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model Tutorial</title>
<link href="box-model/reset.css" rel="stylesheet">
<link href="box-model/general.css" rel="stylesheet">
</head>
<body class="baseline">
<!-------------------------------------------------------------------------- Masthead -->
<header class="masthead baseline"> <!-- A group of introductory or navigational aids -->
<h1>Victoria</h1>
<!-------------------------------------------------------------------------- Masthead -->
<div class="wrapper">
<article>
<header class="headline">
<h2>Tourism British-Columbia</h2>
</header>
<img src="box-model/images/images/British_Columbia_Legislative_Building,_Victoria,_BC_Wallpape r_2c8nm-1.jpg" alt="box-model/images/images/British_Columbia_Legislative_Building,_Victoria,_BC_Wallpape r_2c8nm-1.jpg">
<!-- Don't Forget the alt -->
<p>The capital city of British Columbia, Victoria boasts many historic buildings and some of the most fascinating museums in Western Canada. The city benefits from one of Canada's mildest climates, which allows its residents to pursue outdoor pleasures all year round.
Victoria enjoys some of the country's most exhilarating scenery: there's an ocean or mountain vista around every corner, while the city's flower gardens are famous the world over. Whether your taste runs to golfing, hiking, biking and fishing or you're more the shopping, dining and theatre type, there are no end of delights for you and your family in Victoria – the city was included in the Top 10 Family Vacations in Canada in the TripAdvisor 2011 Travelers' Choice awards.
Established in 1843 by James Douglas as a fort for the Hudson's Bay Company, Victoria's British ancestry is apparent in the double-decker buses, horse-drawn carriages, formal gardens, and tearooms. The city is now a cosmopolitan centre with a lively entertainment scene and a wonderful array of attractions.</p>
<footer class="footnote">
<p> Article Footer (Related Articles, Footnotes, Authors Bio, etc.) </p>
</footer>
</article>
</div> <!-- Wrapper Close -->
<!---------------------------------------------------------------------------------------- -------------Bottom -->
<footer class="bottom">
<p>Main Footer (Copyright, related Links, Legal, privacy, logo, etc.)</p>
</footer>
</body>
</html>Lines 6 & 7 of your HTML file (exercise-boxmodel.html), change this:
<link href="box-model/reset.css" rel="stylesheet">
<link href="box-model/general.css" rel="stylesheet">
to this:
<link href="reset.css" rel="stylesheet">
<link href="general.css" rel="stylesheet">
Your CSS files are in the same folder as your .html file. But your original linkage shows that they're within a sub-folder called 'box-model'. That link was returning a 404 Not found error. Hence, the browser was unable to load your CSS files.
Replace the code and you should be able to view it. -
How can I disable a hover link in the phone view size?
Hola
How can I disable a hover link in the phone view size?
I got this site where I got a gallery page,
the pics have a hover/link state (?) where as you click in them
they will open a bigger pic. (Prettyphoto)
Thanks good.
What I want to do, is that the hover state (?)
won't show in the phone size.
I know that I will need a media queries, but I'm not sure
where or how to tackle this problem.
This is the code where I have the pics
<div class="grid_3 project-item bar">
<figure class="project-img">
<img src="../images/gallery_pics/memos_bar_s5.jpg" alt="Memo's Cocina & Tequila Bar" />
<div class="overlay"></div>
<div class="mask">
<a class="icon-image"
href="../images/gallery_pics/memos_bar_b5.jpg"
rel="prettyphoto[gallery]"
title="The Bar">
<i class="icon-search"></i>
</a></div>
</figure>
</div>
Thanks for your helpIf you don't want a :hover state to show in the phone css of a fluid grid layout, you would remove it from the global settings and only include it in the tablet and desktop media queries.
Or are you trying to do something else? -
Can I include both CSS and HTML codes in one Open HTML Editor.
Somehow Cell phones are not properly reading css codes. Is there any way to include both CSS and HTML codes in one Open HTML Editor?
Hammad, their code is fairly mobile friendly. Per my other discussion with you ( http://topliners.eloqua.com/thread/8532 ), Eloqua's code is responsive for the most part. Most of their issues lie with the styling of the email where you will get different fonts and different sized fonts throughout the email and some other minor display issues.
What you are trying to accomplish is extremely difficult to do because you do not have the access to the HTML to better control how the responsive template works which is why the Eloqua templates (and most ESP templates) stick to the more basic side of emails.
If you want to use Eloqua's WYSIWYG to make their responsive email you can do so, but I would recommend deleting all their body text before editing anything because of the inconsistencies in their code. Otherwise, I think you would be better off coding the emails outside of Eloqua using a 3rd party editor whether it's something more robust like Dreamweaver or Coda, or whether you feel comfortable working in a more text environment with programs like Notepad++ or Brackets.
At the end of the day remember you are paying Eloqua for these and if you choose to stick with the WYSIWYG and you are not getting the results you expect you need to tell Eloqua through your support channels. -
Add file type icons to links using CSS - DW CSS problem?
Hi,
I want to add file icons to links using CSS. How to do this
is clearly described in the article found
HERE.
A most useful feature I REALLY want to use
However the CSS code shown below is not recognized by DW CS3.
In the CSS Styles window shows "(no styles defined)". HELP!
Any tips/tricks/pointers would be appreciated.horse.badorties wrote:
> So DreamWeaver CS3 is NOT able to handle CSS 3?
Actually, it has been able to handle most of the CSS 3
selectors since
MX 2004, but it doesn't recognize these:
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E ~ F
Since they're all supported by IE7, Firefox, Opera 9.5, and
Safari 2,
there's a good argument for Dreamweaver to start supporting
them. Why
don't you submit a formal feature request to Adobe?
http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
There are several others not yet supported by Dreamweaver,
but browser
support for them is non-existent, too. The four listed above
are the
most important.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/ -
CSS or HTML code to create resizable images to display in small view
I am a book publisher and am publishing books to be read on Adobe Digital Editions. I'm looking for the CSS or HTML code to create resizable images that will display in "small view." Does anyone happen to know how to do this?
hi,
Our customers want to start reports by pushing a button instead of clicking on a link inside a dashboard.Create a dashboard page with all buttons referring to your dashboards....Is that fine???
There u ll refer to your dashboard which has download,refresh all the options
thanks,
saichand.v -
CSS and HTML not merging in design view
I hate questions that start with "all the sudden this happened."
I was using Dreamweaver CS5.5 along with some other things I had open. I was off doing something with one of the other things and came back to Dreamweaver. It was in design view not live view. All it shows me the HTML without merging the CSS that goes with it. However, when I hit Live View, it merges the code and displays just fine.
My machines been acting funny lately. Earlier today, Outlook kept shutting down, but that stopped. Some times my cursor moves strangely. Surely, this isn't a virus causing this with Dreamweaver. I run good protection and keep it updated.
I thought maybe IIS was not running, but it is. Without it, it probably would not have merged the CSS in live view. What could I possibly have done to this thing?Thanks everybody, I did both of your suggestions to no avail. I looked and looked and couldn't find a reason for it. I had a backup of the files from a few days ago and I started replacing individual files to find the problem, but that got old. So I finally just copied in the whole backup and it's fine.
This had to be something creepy we'll never track down - not worth the time.
Thanks for trying. -
Induced Error Linking to CSS files
When I link (in the CSS panel ) a CSS file locally to an html
page I get the following:
<link href="/css/type.css" rel="stylesheet"
type="text/css" />
The CSS folder is in the same folder as the page so the path
is almost correct but its the leading "/" that creates the problem.
The html page doesn't reference the CSS file.
If I remove the leading "/" the CSS file is referenced and
the page displays as expected.
So the link now becomes
<link href="css/type.css" rel="stylesheet" type="text/css"
/>
I'm not knowledgeable on the conventions of defining the path
from the page to CSS file so I have to ask is this a bug in DW, do
I have an incorrect setting that I'm not aware of, OR is there some
other reason this is happening.
Additional Information: The page displays correctly in the
"design" mode but when you go to "live view" it fails. The page
also fails to display correctly when viewed in a browser.
Background: DW CS4, OSX 10.5.5
ThanksAt the bottom of the "Select Style Sheet File" dialog there
is a filed
called "Relative to:". You have it set to "Site root". Change
it to
"Document".
HTH,
Randy
> When I link (in the CSS panel ) a CSS file locally to an
html page I get the
> following:
> <link href="/css/type.css" rel="stylesheet"
type="text/css" />
> The CSS folder is in the same folder as the page so the
path is almost
> correct but its the leading "/" that creates the
problem.
>
> The html page doesn't reference the CSS file.
> If I remove the leading "/" the CSS file is referenced
and the page displays
> as expected.
> So the link now becomes
> <link href="css/type.css" rel="stylesheet"
type="text/css" />
>
> I'm not knowledgeable on the conventions of defining the
path from the page to
> CSS file so I have to ask is this a bug in DW, do I have
an incorrect setting
> that I'm not aware of, OR is there some other reason
this is happening. -
Contribute CS3 not showing css styles
I have 3 almost identical sites I am using Contribute to
allow users to
add content. All internal so I can' show URL's.
The mystery began when I added the third site. On the other
two when
someone edits a page all the css styles show in the Style
drop down panel.
Not so on the third site. I created the other sites a while
back using
Contribute 3. The new one using CS3.
I have checked over and over the role settings for each site
to make
sure I don't have something unchecked or somehow have a
different
setting between the three.
No matter what settings I use in the Styles and Fonts panel,
the Styles
dropdown shows non of the styles included in the linked css
file.
AlexIs the style sheet also present in the document (f.i. by
linking it in the head section: <link href="css/stylesheet.css"
rel="stylesheet" type="text/css" media="screen" />)? The styles
you want to be displayed in contribute always have to be linked to
the document. -
In Safari, the link to "mail this web page" doesn't work, and the share link shows "no service". Does anyone have a solution? I have a MacBook Pro and upgraded to Yosemite yesterday.
See here: If sharing options and Markup are missing after you install OS X Yosemite
This resolved the issue for me.
Rick -
What level CSS and HTML for Dreamweaver CS5 (Vers 11.0)
What level CSS and HTML for DW CS5?
CS5 does not support HTML5 in this sense -
1. It will not automatically start a new document with an HTML5 doctype (you can force it to do this - if you are interested I can tell you how), but you can always just replace what CS5 writes with an HTML5 snippet.
2. It will not show any of the new HTML5 tags in any of your menus (or in code hints) - if you want to do HTML5 you are on your own with manual coding.
The same is true with CSS - if you want to do any of the advanced CSS styles (like animation, gradients, rounded corners, shadows, etc.) you are on your own. -
Once completed the form, is it possible to receive the confirmation e-mail with a link addressing to a html archive?
I don't know if it is the best solution but you could filter the results to just that client's answers on the summary tab and then PDF that.
Maybe you are looking for
-
I recently got a laptop and I am unable to play my itunes songs on it. It says I need to register tha device. I am unsure on how to do this any help would be appreciated. Also note that I am a beginner and dont have a clue what I am doing. Thank You
-
Sharing calenders through iCal in a LAN
Hi, I have open directory, web, DNS and ical services running on my 10.5.8 server. I want to share calender through iCal in my LAN. I need all my clients to view it. I am not able to do it.. Any help appreciated.. Thanks in advance..
-
Dears I need to define Special GL transaction for Bank Guarantee. I have created an Alternate GL account (reconciliation account) for the vendors. I have set it in FBKP for K-G combination for this bank guarantee. Other than this, do I need to give
-
ITunes opens by itself, can't find solution
I'm running iTunes 11.1.5 on my MacBook Pro with the 10.9.2 OS X, 2.53 Ghz Intel Core i5 processor iTunues is auto-launching several times per day - and driving me crazy. I don't have any devices turned on. Auto-sync is turned off, even when I have
-
Adobe Flash Query and distinction Please...
Ok, so my local newspaper and news/weather station in Tampa (TBO.com) has been providing me some nice weather alerts with maps to my new 3G (previously, just txt alerts to my old LG). They have been working on a new release, which when I was notified