I want to apply 3 tabs for a common way to partition lists.
How can I improve my view and also add the way a tab gets to the foreground like in the link? I could read the html / css from the link to learn how it swtiches between the three categories and looks more like tabs than my effort.
The difficulty for me is styling the tabs named "All", "Private", "Company". Could you help me? My website which uses a http get parameter f=c for company view and f=p for private view which correctly fetches the apprioriate subset but at the moment doesn't change the layout which it should to look more professional.
Update: The above looked terrible so I've styled it and I want also to add dynamics with a tabs URL parameter.
You're very close. Mark the active tab with a css class like <li class="active"> then assign that class a different background color (like white) and no bottom border. Then it will appear to merge in with the content beneath.
use jQueryUI tabs see demo here
easy to use, easy to style, all the functionality you could want :)
Related
My site is [manayunkfarm.org] (sorry, can't post more than 1 link), My issue is that if I add more than 4 pages to my menu navigation, the navigation "hamburger" icon slides into white space on all pages with a shorter header image. (Click around the site and use the drop down navigation and you should get an idea of what I'm talking about.
I've mocked up what I'd like for it to look like,
mockup of possible new navigation
I figure it should be fairly easy to adjust the with of each navigation box in half, then create 4 more boxes, doubling the number of pages I can link to, in the same amount of space. Does anyone know where I would have to go in my wordpress editor to edit this and how?
Thanks
Well, for starters, opening effect and the stacking of the menu items are being handled by some jquery/javascript somewhere.
What you can do is use String Locator to locate which part of the code is responsible for changing the css of the #nav element. Then, change the code according to your preference. But, if you are not used to scripting then this will be tough.
The way out, which is my suggestion is that, change the color of the menu button.
Change it from white to the pink color being used for the menu link hover : #DBBFBE
If you want to go ahead with thi suggestion then:
Go to Appearance -> Editor. Generally, the editor should open style.css which is the default stylesheet of your theme.
Search for : #nav-toggle
Change the color attribute to #DBBFBE from whatever it is, I think its #ffffff;
Thanks.
I might have done this the wrong way. I've made a navigation bar with 4 images that link to some other pages. The navigation bar is on every page as it should be. I can hover over the image to change the source, but I also want to change the source if I am on a specific page.
For example, when I click on 'shopping cart', my site navigates me out to that page and the navigation bar looks the exact same. I want the image that I clicked to change to a different image, only when I'm on that page. If I go to a different page, I want the image to return to it's original state. The user should be able to see all 4 images, and the 'shopping cart' one is the only one that looks different, implying that they are on the shopping cart page
Basically, I'm looking for something like what Twitter has done. (Image changes when you on 'Home' page and when you are on 'Connect' page).
I've tried the :active and the :focus class and those don't work for me. Maybe I need some Javascript? I'm honestly not sure. I've searched google up and down. I would appreciate any help, even if it is just new documentation that I can test.
Anything! Thanks :)
html:
<nav>
<ulstyle="list-style-type:none">
<li id="daily_sale" style="display:inline"></li>
<li id="my_account" style="display:inline"></li>
<li id="support" style="display:inline"></li>
<li id="shopping_cart" style="display:inline"></li>
</ul>
</nav>
What are your pages built with? WordPress? PHP? Static html pages?
Ideally, you would add a class to the nav bar item that you are currently on. For example, if you are on the Home page, add a class of "active" to your list item.
Then you can add CSS for the active class to change the background image.
You can use location.href property in javascript to detect the current page, and add some additional CSS class to corresponding menu item.
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
I am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Thanks in advance.
WWaldo
I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:
Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.
The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.
Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.
It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.
Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)
All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.
<div id="Tab1">Tab Numbah One </div><div id="Tab2">Tab Numbah Two </div><div id="Tab3">Tab Numbah Three </div>
Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.
Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.
Page 1
#Tab1 {
border-bottom:none;
background-color:white;
}
Page 2
#Tab2 {
border-bottom:none;
background-color:white;
}
Page 3
#Tab1 {
border-bottom:none;
background-color:white;
}
I have seen the following snippet of UI code to use icons with labels
<a href="">
<img alt src="img/save.gif" class="icon">
<span>Save</span>
</a>
OR
would it make sense to make combine this into a single entity (i.e. image icon plus the label).
My concern is if we choose a different theme (color scheme), then I will not be able to use different colors for my labels and might have to regenerate the image. Using the first approach gives me the flexibility to do so.
I dont know about the layout or the colors you are using but the following are my points:
Relative alignment between the image and the text can be difficult to acheive (with my basic HTML/CSS knowledge) when you have the two separately
You cay that you prefer to have them separate because you want the possibility to change the color of text during "color scheme changes". But are you sure you dont want to change the images as well (another set of icons)? You might have the same problem of color mismatches. (You might choose the icons in such a manner that they "go along" with all the color schemes of your site, then again you can choose the color of your labels in the same menner).
Again, I am not sure of the layout/colors you are choosing, so the definitive answer is (as always) "depends on your site"
Consider hyperlink cues for common link icons. For example:
html
View Holidays
CSS
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Styling of each can be handled in CSS. Works for just about every file type extension out there. This might not work for your specific example (would have to see the larger context) but it's a great trick for download links, etc.