PDA

View Full Version : RE: 3 Newbie Dreamweaver Questions


needfx
01-09-2010, 11:40 PM
Hello Chaps,

After 2 months, I do return with a couple of newbie questions and apologies to moderators for the nonspecific title but tough to keep a title short when there are 3 questions...!
I have never designed a webpage before, have no clear thoughts on html and still struggling with DW but I have to admit I am rather pleased with what I rendered.

So, firstly regarding DWCS4 & url www.needfx.com (http://www.needfx.com)

1. I need to remove a dotted outline appearing around linked objects when clicked/selected (images, flv player)

2. Mouse's behavior over links flickers stupidly. Any suggestions on how to fix?

3.I would like to know how to define that links are opened on new tab or page


Thx in advance!!

Patrick


=======

To Corrosive

"All men by nature desire knowledge."
Aristotle - Greek Philosopher

DWcourse
01-10-2010, 01:33 AM
1. a:active { outline: none; } removes the outline when the link is clicked

2. I don't see it. What browser(s)?

3. <a href="newpage.html" target="_blank">link</a> opens link in a new window.

Ricky55
01-10-2010, 01:50 AM
First things first I really like your design, always nice to see someone trying something a bit different.

Before we get on to your issues, I think you need to look at the size of your background graphic, it takes way too long to load, its a shame as its spoils your initial impression of the site.

Your background graphic is 2.2mb!! Way too much. It doesn't really need to be a png either, generally jpg's will be slightly smaller. I think you should be adding the logo separately and just taking a thinner slice of the background and repeating it on the x axis. Use PNG when you need transparency.

Even without any of that, just saving from Photoshop using Save for Web feature I got it down to 152kb. You must save your graphics using Save for Web to get the sizes down as unnecessary parts of the file are taken out.

On to your issues.

The dotted line, I think you are referring to this in Firefox, in Safari I didn't see any thing.

This can be removed with this in your CSS.

a:focus {
-moz-outline-style: none;
}

around your flash you need to use

object {
outline: none;
}

I think that should do it.

2. Not too sure what you mean.

3. To define a link so it opens in a new page you use :

<a href="#" target="_blank">This is a link</a>

Try not to use though, from a usability POV its regarded better to let the user decide if a link should open in a new window or not.

Hope this helps you.

Ricky55
01-10-2010, 01:51 AM
DW you bet me to it!....

needfx
01-10-2010, 09:26 AM
1. a:active { outline: none; } removes the outline when the link is clicked

2. I don't see it. What browser(s)?

3. <a href="newpage.html" target="_blank">link</a> opens link in a new window.

DW you bet me to it!....
=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/=/
I would like to thank both of you for taking the time to respond!! Really appreciate it as your help is valuable to the "success" or whatever of my website challenges.

Funny thing is that from 2 answers there are 2 different ways to do it and the frustrating part for me is that I don't know what is the difference between the 2 lines of code other than one is longer... **/

DW & R55
1.
unfortunately, I can't seem to find where to make these property adjustments. Have pressed on CSS, Edit Rule, CSS Panel & CSS Styles but no luck. Apologies for newbie-ism and warm request to clarify a bit.

2.
fortunately today it does not have this behavior, so thanks for the good news!! Firefox by the way.

3.
I will surely bare in mind that POV result but the only reason for now I want to do it this way is to make sure a few people stay a bit longer on the page as youtube for example, has a strong magnet to people and don't really want them being sirened out... = ). For now...

I have already downsized the background as advised, thanks for this, really useful, though I wont be detaching the logo as a separate PNG as it is too much of a hassle for newbie me to put in the same spot within a DIV or what they're called.

Glad you liked it by the way. It means a lot!!

Thx again!,

Patrick

needfx
01-10-2010, 09:36 AM
so, minutes later, I just found out these when selecting a menu button

<body.twoCoElsLtHdr> <div#container> <div#sidebar1> <h3> <a> <img>

So when I pressed on <a> I saw that a differenst set of CSS edot is available but still I can't manage any of the advised...

will get back to you

thx

Ricky55
01-10-2010, 10:13 AM
The answers are actually pretty much the same.

My option just targets firefox where the outline: none will target any browser either option should work for you. The a:focus means when the link is in focus i.e. when the link is clicked on remove the outline. To remove the border on a link in general you can use

a {
border: none;
}

This part

object {
outline: none;
}

Removes the outline around Flash content.

With regards to the CSS panel, just enter the code by hand, just click into code view, and you'll be able to see where Dreamweaver has placed other styles if you don't have a separate style sheet that is, just paste the CSS code provided above all the other styles that are there.

Does this answer your queries?

needfx
01-10-2010, 03:16 PM
The answers are actually pretty much the same.

My option just targets firefox where the outline: none will target any browser either option should work for you. The a:focus means when the link is in focus i.e. when the link is clicked on remove the outline. To remove the border on a link in general you can use

a {
border: none;
}

This part

object {
outline: none;
}

Removes the outline around Flash content.

With regards to the CSS panel, just enter the code by hand, just click into code view, and you'll be able to see where Dreamweaver has placed other styles if you don't have a separate style sheet that is, just paste the CSS code provided above all the other styles that are there.

Does this answer your queries?


Oh Captain, My Captain,

Been having internet problems on board, thus the reason to my delayed answer.

While looking at the code, i.e. click on the link/image in Design mode, and then to Code mode, I do find where it is, that's easy but not sure where to paste it -the copied code you so courteously provided.

Please forgive my ignorance and enlighten accordingly if & when possible.

Many thanks again,

P

Ricky55
01-10-2010, 04:31 PM
Looking at your page place the CSS code we provided in between the style tags, so just place it after the body styles will be fine.


<style type="text/css">
<!--
body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-color: #000;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: normal;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
-->
</style>

Ricky55
01-10-2010, 04:34 PM
btw that first body style can just be

body {
background: #000 url(background.jpg) no-repeat;
}

needfx
01-10-2010, 04:51 PM
btw that first body style can just be

body {
background: #000 url(background.jpg) no-repeat;
}


Well, I have tried both codes (R55 & DW) but no luck. I hope I ain't TOO thick.

=-=-=-=-=-1-=-=-=-=-=

</style>
<![endif]-->
<style type="text/css">
<!--
body {
background: #000 url(background.jpg) no-repeat;
}
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: normal;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
a {
border: none;
}
object {
outline: none;
}
-->
</style>


=-=-=-=-=-2-=-=-=-=-=

</style>
<![endif]-->
<style type="text/css">
<!--
body {
background: #000 url(background.jpg) no-repeat;
}
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: normal;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
a:active { outline: none; }
-->
</style>

gentleone
01-10-2010, 04:52 PM
btw that first body style can just be

body {
background: #000 url(background.jpg) no-repeat;
}

Indeed! I see too often here in the forum that people don't use CSS shorthands. They are very handy if you want to reduce the size/length of your stylesheets. For some CSS cheatsheets you can grab some at the following webpage:

http://www.allwebdesignresources.com/webdesignblogs/graphics/30-css-cheat-sheets-quick-reference-guides/

Ricky55
01-10-2010, 07:51 PM
Totally agree some of the CSS I see on here could be reduced by a third more often than not.

Ricky55
01-10-2010, 07:57 PM
A few things are wrong with your code remove these
<!-- --> from the beginning and end of your style tags.

Then after your body style you have an extra curly brace delete it,

body {
background: #000 url(background.jpg) no-repeat;
}
}

You must type carefully when writing any code.

Then use the style I gave you.

a:focus {
-moz-outline-style: none;
}

This does work I can assure you.

Ricky55
01-10-2010, 08:00 PM
Your CSS will look like this.

Also on the style you've used a:active it should be a:focus.


<style type="text/css">

body {
background: #000 url(background.jpg) no-repeat;
}

a:focus {
-moz-outline-style: none;
}

.twoColElsLtHdr #container #mainContent h2 {
font-weight: normal;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}




</style>

needfx
01-10-2010, 08:09 PM
Your CSS will look like this.

Also on the style you've used a:active it should be a:focus.


<style type="text/css">

body {
background: #000 url(background.jpg) no-repeat;
}

a:focus {
-moz-outline-style: none;
}

.twoColElsLtHdr #container #mainContent h2 {
font-weight: normal;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}
.twoColElsLtHdr #container #mainContent h2 {
font-weight: bold;
}




</style>



You've been extremely helpful and thank you warmly!!! It worked!!

I am still trying to understand code, so writing it ain't that easy yet.

Thx again!!

Patrick

needfx
01-10-2010, 08:34 PM
Your CSS will look like this.

Also on the style you've used a:active it should be a:focus.
...
[/code]

Even the object outline is vanished now by adding relevant code.

Much obliged! I learned yet another thing today!

Cheers

P

Ricky55
01-10-2010, 09:35 PM
no problem mate, we are all still learning just at different stages.

Thats what I love about web design, the more you learn the more you realise there is to learn.

needfx
01-10-2010, 11:50 PM
no problem mate, we are all still learning just at different stages.

Thats what I love about web design, the more you learn the more you realise there is to learn.

if you're looking for cool, this way :arrow:

be warned!

I am preparing a whole new set of questions, but it's too late know here 02:50am_Athens time.

Cheers,

P