I am attempting to create a View Slideshow for a website I am designing and the have it so an image-specific caption/description is placed over each image. I've been Googling some solutions and the only thing I could find was a solution for placing captions above or under the image, not on top of it. I feel as if there should be a very simple solution for this sort of thing, however, I have been unable to find it.
First, I would like to know if this is even possible with View Slideshow and if so then how to accomplish this.
Any information that is provided will be greatly appreciated.
Just use CSS! When you think about it, it's not about the views module. Even html doesn't allow you to put two things at the same place. Not without CSS anyway.
I managed to do quite the same on this website (cf. the slideshow of the homepage). I only used the position:relative and then for exampletop:XXXpx and left:XXXpx propreties to position the text wherever I want in the slideshow container.
If you are not familiar with theses CSS propreties, here is a little demonstration of how it works. Have fun!
Related
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I have looked all over for this and cannot find a tutorial or anything to help create it.
I am looking to do something like this site
If you see on the left the text Mar is scrolling faster than the background image. Can anyone point me in the right direction so I can learn how that is done.
The site you are reffering to uses only JavaScript for making all the animations. Using this technique has some andvanteges and disadvanteges (for example you can't use hardware-acceleration).
But as you have used css as your only tag I will lead you to a pure css solution:
At first you should read something about 3D-transformations in CSS3. The reason for this is, that you will move the things that has to move slower far away in the background. This will have the side effect, that they appear to be smaller. This problem can be resolved be using zoom in CSS.
If this is exactly what you wan't here is a good tutorial on how to do this.
Tipp: When you wan't to learn new things it's always a good practice looking what other people have done. This is very easy in webdesign because you can look at other peoples sourcecode :-)
I know little to nothing about HTML or CSS (but I am trying to learn little by little).
I am currently working on my professional portfolio and I'd like to break the website up a bit better than I have it now now (that is, with horizontal lines after each section). I've designed the website so that it is a one-page style site. However, it would be nice to change the content background for different sections of my resume, the about me (which I know needs more work, I hate talking about myself lol), and the contact me parts of the site. I'm thinking something along these lines, but much simpler.
I'm currently running Wordpress 3.8.1 and using the Highwind theme. I achieved the scrolling action with the Page 2 Scroll ID plugin. What you should be aware of is that all the content on the site is on a single page and the menu buttons merely point to different locations on the page by the way of divs. See this tutorial for a better explanation.
I'm not sure you're going to be able to get this happening with the Highwind Theme, or at least without some heavy customization of it.
The way the types of sites you're talking about work is that each section of the page has a 100% wide div with a 1255px wide div (the inside div could be anything really as long as it's not 100%) the inner div is centered inside the 100% wide outer div.
Here's a very quick codepen example...
http://codepen.io/catchlightWeb/pen/tpKrG/
For your example, instead of the SectionOuterOne and SectionOuterTwo classes having different colors, they'd have different background images.
Hope that helps.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
Currently, I am implementing a scrollbar using a custom embedded image using my CSS stylesheet. This is a very simple, thin scrollbar. I would like to configure this scrollbar using CSS properties at runtime, but so far I have been unable to do so.
I know it can be done because I've seen examples of it in the net, but no code to review. Anyone have any suggestions?
Thanks!
This blog has an example that you can view the source of with a right click:
http://www.axelscript.com/2008/02/20/custom-scroll-bar-using-css/
This one has a few links that redirect to examples with image skins:
http://www.foxarc.com/blog/article/101.htm
You can see a lot of the css stuff for scrollbars and pretty much everything else here:
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#