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.
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
I have a html layout with a navigation bar at the top and a main content area below it, with a left and a right area. The top bar has a background gradient with a hard stop in it. The main content's right area (sidebar) has a background color that should line up with the gradient stop of of the navigation area, at 75%.
See this for a simplified version of my layout. In Firefox and Safari this renders fine, but Chrome puts the gradient stop a little further than it should. I tried to use pixel values instead of percentages, but the behaviour stayed the same.
Any idea why this is happening, and suggested workarounds? Thanks!
Specially with modern browsers that deals with anti-aliasing in so different ways. What i have done was a js fix, (which wouldn't be good for your code :D) also you would have to add a custom padding for each element. But you'll need to hire a freelancer to do it for you, because it would take a while to complete (browser targeting, getting each element, adding padding for each element...)
if u can post the code it would be simple for more possibility.however i am looking for more solutions.
I am designing a site for a new foundation, and I have set April 15 as my deadline for finishing it. It is ready except for editing the content and fine-tuning the design. In the fine-tuning, I am wrestling with an irksome little problem that I would like to ask someone to please help me solve. The problem is simply this: a division in the site's structure will not function as I would like for it to function unless it has a border around it. Never seen a thing so erratic before.
The problem appears to be related to how the elements interact in the layout. First, there is the html tag which holds the background image, a jpeg of a creek with some buildings on the far side and a green grove of grass created by a divisional tag (#greengrass) positioned at the bottom of the background image . div#greengrass is styled to extend downward as a content div, resting on top of it, lengthens. It is this #greengrass element that performs awkwardly unless there is a border laced around it.
Specifically, if its border is removed, it projects upward and covers the background image, even though positioned to start where the background image ends. Its upward projection, therefore, makes the entire page background green. But when it has a border, the background image of the creek shines through as bright as the sunny spring sun.
Thus, I have one question: Why does the absence or presence of the division's border affect its behavior? Here is the url to the test site for the foundation: http://postmaterial.org/tests/signin-ap.php. At top center, I've added a link that lets you toggle between the bordered and borderless div#greengrass effects. I have no clue as to the reason for the tag's behavior and would appreciate an explanation. Thanks.
To answer your question: "Why does the absence or presence of the division's border affect its behavior?" I agree with ichao (as his answer stated) that collapsing margins is the issue.
However, I think the solution is to keep only a border-top: 1px solid #009900 as it is only the top border that is needed to prevent the margin collapse. This will prevent the horizontal scroll bar from showing up.
without the border of #greengrass, the negative margin-top of its child collapses through (and pulls the entire construct out of sight, topwards), and in consequence, #greengrass is not pushed down enough by top anymore.
border prevents collapsing margins, as display:inline-block or display:table or float:left would in this case (overflow:hidden is not an option here). In old IE, any haslayout trigger like zoom:1 should do. I did not test it, though.
The problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.