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.
Related
I would like to be able to add picture that always shows at the top part of the screen. I want a bar that stays at the top of it all the time. I do not know how to do it but I believe YouTube has something like it. Except I want it without the content on the side because that is a little annoying.
In order to do this, you have to use absolute positioning. This requires you to use CSS with your HTML (if you are talking about web design).
Here is the CSS
img {
position: fixed;
left: 0px;
top: 0px;
}
Here is the HTML:
<img src="YOURIMAGE.jpg" height="100" width="100">
Not to be disrespectful, but it seems as though you are not familiar with web design. I would recommend looking at W3 schools and try to grasp some of the concepts there before you continue.
The content of my webpage is going behind the side menu I have positioned to the left.I want the menu to be fixed however whenever I do so the content hides behind the menu to the left. Any help would be much appreciated. (Apologies for formatting, new to the site.)
.menu {
padding-top: 150px;
height: 100%;
width: 170px;
background-color: white;
float: left;
display: table;
position: fixed;
}
Fixed elements are no longer within the page flow, they act in the same way as an absolute positioned element. Chris Coyier has a really good explanation about the differences in positioning http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
In order for your body content to stop flowing behind the fixed property, you need to create a container (if one does not exist yet) that all of the body content resides in, except of course the nav/menu bar. You then apply a padding-left to the main body content equal so the width of the fixed element so that the main body content is always padded away from the left of the browser.
Fixed elements don't affect the flow and positioning of elements and position:relative on a parent container has no affect on a fixed element.
I'm new to fluid grids, btw i'v started learning about diferent types and now trying to build page in cs6 (maybe not the right choice). I have a problem which I didn't have when building pages that are not fluid. I need to create different background images for header and footer that are 100% width and as wide as the screen, not just as wide as media-query, and also to setup the page to be 960 centered.
Are you trying to make the header wider than the rest of the page?
To do so, create different div's in the document. For example, I normally work all of my divs inside a master div, so that my entire page is affected. For example, a page with a main div, header, body, and footer:
#main #header #body #footer. The header, body, and footer are all create inside of the main div. To make everything float in the center of the page at a width of 960px, then you'd simply apply the attribute to the #main div like so:
#main {
width: 960px;
margin: 0;
}
The margin will cause the div to float in the center. It does not have to be any specific value, but you do need a margin to the left and right of the page.
To only float the remainder of the page, create everything else inside of the main div but the header and footer, and set the width of the header to 100%. So you would have the following overall snippet:
#header, #footer{
width: 100%;
margin: 0;
}
#main {
width: 960px;
margin: 0;
}
If you don't already do so, it'd be wise to add some padding on either side so that the images and text don't appear to run into the side of the page (which makes it difficult to read or view). 5px is usually all I add.
Preface: Masonry is a JQuery plug in that creates a "brick-style" layout of html pages on one page. Infinite scroll is a plug in that allows for a pintrest-style scrolling of page items.
I have masonary w/ infinite scroll installed here:
http://helpknow.com/black2/
and my problem is this.
I want to position the "container" div to center the entire list of items in the page.
So I use some code like this:
#container {
left:140px; // <---- Positioning
padding:10px;
background: #FFF;
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
The problem is when I do that, upon opening the page there is a quick "flickering jump" where all the masonry items move to their position ( you might not be able to see it on refresh, only on initial page load). I don't want this. I want the items to not "flicker". I want them to appear static until the user scrolls, then I want the animation to take place as expected. When I remove the left positioning this problem does not happen (but obviously the items float left and are not centered, which is not what I want). I tried wrapping the main div "container" and other items in a new div container and moving it/them around and was met with the same problem.
Have you tried 2, meaning to initialise Masonry when all your content has been loaded? Now, you are doing it as in 1...
1 This executes, when the DOM has been constructed, before all content has been loaded
$(document).ready(function(){ ... });
$(function(){...}); // short form
2 This executes, when all content has been loaded
$(window).load(function(){ ... });
3 This executes immediately, when it is first encountered by the browser
(function(){ ... })();
The latter is a self-executing anonymous function (known as a closure), which is very handy, but not here, because no content or not the right content may have been loaded when it self-executes.
UPDATE Alternatively, you can fade your #container in, which can sometimes look nice, too. See this fiddle here, which does the same with Masonry's bigger brother Isotope.
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.