dreamweaver button link CSS help - dreamweaver

Hey guys I'm currently having trouble with my CSS linking. Basically I want the colour of my links to change when I hover over them, and click on them and such. But for some reason it is not working when I view it on a browser. Below is my HTML code and my CSS code, they are seperate files and are linked togather. Thanks in advance. (I apologise if the codes are not appearing correctly but it is all there)
EDIT: Don't worry its fixed now :D thanks for the help

from what I see, you don't have a:hover,a:vistied, or a:active defined anywhere, which is what controls the behavior you're looking for.

Are you coding by hand or using Dreamweaver as a WYSIWYG?
NOTE: This could be because the files aren't formatted well in your question, so Markdown could have dropped some characters from the display.
From what I can see, the CSS file isn't written correctly. I'm going to give one example for you which fits for the whole file:
content {
width: 510px;
float: left;
}
This snippet above looks for the <content> tag in the HTML, and when it finds that tag, it will give it a width of 510px and floats it to the left. The problem here is that there are no <content> tags in your HTML page OR in HTML 4.01 itself. What you need to do is change it to this:
.content {
width: 510px;
float: left;
}
By adding the '.' before 'content' in the CSS, it changes 'content' from <content> to finding a tag that has class="content" as an attribute.
Also, to get the <a> tags to change on hover, etc, use the pseudo-elements (pseudo-attributes?) of :hover, :active, and :visited, for when a user hovers over a link, clicks on a link, and has previously visited a link, respectively.
Example:
a {
color: blue;
}
a:hover {
color: red;
}
In this example, a link will display as blue unless the user has their mouse on the link.

Related

Is it possible to use `:toc: left` with JBake?

I'd like to render asciidoc pages with JBake that have the floating TOC in the left frame. However, JBake seems to only support putting the TOC at the top of the file.
If I 'bake' my site with pages that have the following document header syntax, the toc is on top.
= Software Engineer
John Doe
2019-01-01
:toc: left
:jbake-type: page
:jbake-tags: documentation, manual
:jbake-status: published
...
However, if I convert the same file using the asciidoctor cli, the toc renders on the left as expected. Is this a limitation of JBake, or am I doing something wrong?
:toc: left is not a valid option for embedded asciidoc. See [1] for details.
However, there is still hope, because you can change your stylesheet.
First, change your templates in order to add the classes "toc2 toc-left" to the body tag. This makes room for the toc on the left side.
Then copy the toc2-styles from the original aciidoctor stylesheet to the toc-style by copy & psting this into the header:
<style>
#media only screen and (min-width:768px){
#toctitle{font-size:1.375em}
#toc.toc{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto; padding-top: 60px;}
#toc.toc #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc>ul{font-size:.9em;margin-bottom:0}
#toc.toc ul ul{margin-left:0;padding-left:1em}
#toc.toc ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
}
#media only screen and (min-width:1280px){
body.toc2{padding-left:20em;padding-right:0}
#toc.toc{width:20em; padding-top: 60px;}
#toc.toc #toctitle{font-size:1.375em}
#toc.toc>ul{font-size:.95em}
#toc.toc ul ul{padding-left:1.25em}
}
</style>
this should solve your problem.
[1] https://asciidoctor.org/docs/user-manual/#using-a-toc-with-embeddable-html

css background image issue in google site

I am trying to specify a backgroud image for my google site, i have the following code inside the HTML Box
body {
background: #372412;
background-image:url('a/mysite/my/home/body.jpg');
background-repeat:repeat-x;
margin: 0;
padding: 0;
font-size: 13px;
color: #FFFFFF;
}
i tried different options but the HTML Box Properties page just reports an error and i cannot get the image into my page.
i have one more image loaded using
<img src="/a/mysite/my/home/img11.jpg"
this image is shown properly so i suppose that the link is referring correctly.
can someone give me some direction to solve the above issue
I don't think you can change the background in Google Sites like this. The HTML Box is sanitized, and this CSS will probably go away.
Instead, use More -> Manage Site, then choose Themes, Colors & Fonts, and specify the background you wish to use.

Different Styling for Captions on Two Different Nivo Sliders on One Page

I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.

How to add Code Gadget on Google Sites

I have a google Site and I'm wondering how I can display code in a code block on my site, some thing similar to how code is displayed on stackoverflow or stackexchange. I've looked out for a google gadgets but couldn't find one. Any idea if there is already a gadget that does that or should I have to get one created.
public class code()
{
//This is my Code
}
You can open the HTML window on a page and use the code wrapped with a pre element. You can also add a style block in there to restyle how that code element will be displayed. Here is an example of a fiddle
<style>
pre {
padding: 5px;
background-color: black;
color: white;
}
</style>
<p>
This is an example of a code block
</p>
<pre><code>
public function exampleCode() {
// this is where your code goes
}
</code></pre>
That's CSS and the 4 spaces just triggers it!
If you know where your submitting the code you could probably just run a find and replace to "/n " and " " and make it to be the block id of code which would be a view-able change

Drupal autocomplete search UI bug

Hi in Drupal 7 I am using autocomplete search. In search input it displays part of ajax loader animation all the time even when the input is not focused. Bug is marked with red square .
Any suggestions please why there is this bug. (I am using boostrap theme)
Thank you for help.
It's not a twitter bootstrap error.
See your drupal installation's misc/throbber.gif file. You will see that it's actually a sprite and when the ajax request is in progress, it changes its position to show the animated throbber.
You will need to create a new one and adjust CSS accordingly to workaround this issue. Your text field has a relatively higher length than this sprite's
Add the following CSS to your theme's css file. These styles are defined already, so you will only need to override them. See inline comments.
html.js input.form-autocomplete {
background-image: url("/misc/throbber.gif"); // Enter a new thribber image here.
background-position: 100% 2px;
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px; // Adjust this -18px to the height of your new throbber.
}

Resources