How to set up the css/html code if the A needs to be at the corner of the bottom right- where the red rectangle pointed
two things:
*responsive page
*background is overlay. the white rectangle is a popup.
Was coming here to say the same thing as #RBCunhaDesign , that would seem like the way to go to me, as well.
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
Site: http://tinyurl.com/x983asd93
Looking at the top right corner, the triangle banner.
Basically, I only want to link that portion of the triangle banner, so that the buttons under it can still be clicked. I don't want the entire div to be linked, but the triangle image is a transparent rectangle, with only the triangle filled. So I'm not sure how to only link that portion of the triangle.
Hopefully you understand.
You should be able to acheive that with an image map.
http://www.maschek.hu/imagemap/
It does mean you'd need to use an img instead of having it as a background, however.
I am dealing with some web development issues and want to know how I can achieve this specific menu layout in HTML, CSS, Javascript.
When hovering over "Design" or "Hintergründe" the main area changes and shows the content. My problem is the border, the outline that changes when the active menu point is changed. So I would take 2 div containers for "Design" and "Hintergründe" with borders at left, top and right (no bottom). And the main area has to be a div with borders itself. How can I achieve the mising party of the border where menu-choice and main area blend one into another?
By the way: Are those costum (thin) scrollbars possible in HTML for div containers?
Thx in advance
All the best
Michael
The tab that you click on has the same background colour as the content area, and it has margin-bottom:-1px and a z-index to place it over the content. This makes the background cover up the content area's border, producing the effect you're looking for.
MichiMichbeck gave a good answer regarding the tabs.
For the thin scrollbar try one of the many javascript/jquery plugins that are available.
One example is: http://jscrollpane.kelvinluck.com/
You can also change the scrollbar for webkit browser in CSS: http://css-tricks.com/custom-scrollbars-in-webkit/. But the javasript solution would probably be preferred.
Here's the code http://jsfiddle.net/4XSjz/
I've basically copied the same info from the h1 header that I created where it works, when changing that for the h4 tag and the footer it doesn't. Is it because I have too many elements? I want it to stick to the bottom too, which I've managed to do and I can see the edges of the ribbon just not the middle part.
Thanks
PS: I just realised I Had no background colour - ok that's fine, then I want to have the ribbon without the cut away parts and to overlap upwards not downwards?
Elaboration : Ok so I have the ribbon in the code above, with the background colour given a colour it will create the appropriate background colour for that ribbon creating the css ribbon.
What I would like to do is keep the ribbon but remove the cutaways the triangles essentially. Then I want to have the overlap where its darkest colour and have it above the rectangle.
Something like this:
/_/________________\_\
/-----------------------\
I hope that clarifies it somewhat
Maybe try and replace the h4 in the CSS with .footer - it refers to the class, not the object.