I'm looking for a good css technique to use nav tabs that look exactly like this:
I have a div with a logo that has a background and I want the tabs to overlap exactly like in the pic.
I don't want to use drupal's entire html and css structure as I need it to be lightweight. Does anyone know how to do that?
I'll point you to this website: http://pea.rs/ for some good CSS design patterns.
And more spefically this page: http://pea.rs//navigation/horizontal-tabs
There's a pretty good modern browser version of what you're looking for, sans filling in your background and logo.
Of course, border-radius isn't supported in IE8 and below, so you'll either have to be ok with that or use one of the many round-corner techniques.
Hope that helps!
Related
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I want my blog's post(33%width) to be floated from top to bottom, and when they rich the end of the content (static height), to continue again from top to bottom beside the rest of them. I have already made this static web page with columns(link is in the jsfiddle project).
There is a simple static example, of what i am talking about, here :http://jsfiddle.net/KBX5B/1/
<div id="content"><div>
But I want it to be automated (not to pass left and top values for each post) with pure html/css. I would like not to mess Javascript, but if you think it's the only way i would like to know about it.
I am sorry for my bad English and I do appreciate your time.
You can use column-count or column-width properties to achieve what you want. Will only work on modern browsers. IE10 included.
http://jsfiddle.net/KBX5B/2/
Actually I found the solution after reading MANY Posts...
Here it is :)
Vertical-floating elements in CSS?
So here's the website that has the container that I want to emulate: container
Here's the textbox specifically:
Here's what mine looks like:
They gave their css file and I looked at their html source code. I got the part in the html and css that pertains to the demo text and style. Here's all the code in fiddle
I'm pretty new to web programming, just a couple weeks in. And the css for the demo text looks daunting. I'm trying figure out how mine is different. Can anyone tell me what I need to do to fix my container to look like theirs? Thanks
Here's a fixed version: http://jsfiddle.net/dain/XJqvG/6/
The main problems were:
you haven't included the required JavaScript and CSS files, this
custom scrollbar requires the libraries as explained at the top of the article
you have to set a fixed height on the sample element
For some reason it still doesn't want to scroll with the touchpad, but that might just be something with JSFiddle.
I have this wireframe that I am working from:
http://comehike.com/MOCKUP3.png
and on the top banner there are two sections like "find a hike" and "plan a hike"
How can I make letters like that? They are white, but have a brown layer around them. I am not sure how to do that.
Also, what font is that? Is it supported by most browsers?
There is a css3 property called text-stroke which does exactly the same thing you asked. The easiest cross-browser solution would be an image.
More on text-stroke: http://www.cardeo.ca/2010/adding-an-outline-to-your-text-using-the-css3-text-stroke-property
You can't get a stroke to look like that with pure CSS. Unfortunately, that is a a photoshop effect and you won't be able to do that with live text.
Same goes for up in the nav. That looks like a bezel effect, so you'll have to recreate that with an image.
You might also consider <canvas> to show-off your Bezier talent :)
in my header I've got a large image. Above that image I want to place my navigation.
The clue about it: The ul-Navigation-element got a gradient background. But if I hover an li-Navigation-Link I would like to display the underlying image! (Hope that's clear? Otherwise I'll do some photoshop to demonstrate) This should be flexible, meaning not to give each li-Element a specific snippet form the backgroundimage.
I would prefer a JS-solution instead of a messy markup. But I appreciate every possible idea you have on your mind. Maybe I'm just overlooking the most obvious and easy solution..
Best regards (:
Here is an image of what I tried to descripe. Hope it helps:
http://s7.directupload.net/images/110226/pv4v4c5r.jpg
There's no need for JS to do this, simply make it so that when you hover over the li-Navigation-Link, the element doesn't have a background attribute set.
This will create the 'transparency' that you want to achieve.
you can use background:transparent for a:hover. This will show the background.
(for internet explorer you could use filter:alpha(opacity=100) );
Here an example: http://jsfiddle.net/3C9sZ/2/
I just solved my problem with javascript/jquery. It can be found here http://jsfiddle.net/QwJKY/.