here is my code sir.
http://cssdesk.com/9cWbV
which should I take out or should I add I wanted it to display a text decoration when it is on the current page any advice or tips I'm noob I feel my code is rather messy
or it's best if you can advice me on highlight it on current page
I'm noob so dont flame me soo much :/
You can add a class to the navigation item and apply CSS for that class.
<li class="active">Home</li>
ul#navbar li.active a {
background-color: #cccccc;
}
Use PHP to add that class
define("THIS_PAGE", "home");
<li if(THIS_PAGE=="home"){ echo 'class="active"'; }>
Home
</li>
Related
I have padding on images and the padding affects the image link because there is a black line
Style
a:link{background-color:black}
img{padding:20px}
Html
<img src="blank">
So in Simple terms there is a black line coming from the image and I want to get rid of it. I can't get rid of the styled link because I use it for other links
Instead of black, use transparent or none
SNIPPET
.tran {
background-color: transparent;
}
.none {
background-color: none;
}
img {
padding: 20px
}
<a href="#/" class='tran'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
<a href="#/" class='none'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
If you want specific style for one link, but you don't want it to affect the others or be affected by the others, I would set up a specific class for the links you want to have a background-color: black; and then a separate class for the link that you don't want affected by it. zer00ne provides a sufficient answer for this. Just add class="tran" or whatever you want to name them into your links that you want to be connected together with whatever style you use in .tran{}, as shown in his answer. Play around with grouping things into classes and using the classes to style more specific elements in your CSS. Best of luck!
in css file:
.black{background-color:black;}
img{padding:20px;}
HTML:
<p>
<img src="blank">
<img src="blank">
</p>
I am using this to display a combobox on my webpage:
<div class="dropdown">
#Html.DropDownList("Sortby", #Model.Values)
</div>
However the combobox does not display the items by default, only when hovering over the item:
Any ideas?
Try changing the color on the select to something that would show up. It looks like it is probably white right now. Something like:
.dropdown select{
color: black;
}
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li data-role="list-divider">B</li>
<li>Bob Cabot</li>
</ul>
how can i change the scetion color? thank you.
I'm not sure if you're asking a simple change of color. But if I'm right :
You should simply add a class.
Then go to the css and there just add a .classname{ background-color: #color;}
Is that you are asking for ?
I am trying to build a List that has a checkbox and an icon, so I decided to use a Split button List. Now I have 2 issues with the List:
The Checkbox appears in a box within the list item, I want it to be "flat", i.e. NO box around
The click causes the entire box to become blue, I want only the checkbox to get ticked
Can you help me with that?
I posted some example code here: http://jsfiddle.net/JY6EV/2/
//edit 2012/06/14
It seems that having a checbox on a listitem alway nests a button. As a workaroud I could add an icon (data-icon="check") but this does not work either.. any suggestions?
PS: I want to mimic the gmail list on iPad/iPhone:
with my (faked) jquery mobile list:
What I tried so far: http://jsfiddle.net/JY6EV/8/
I know this is an old thread, but I recently had to do the same.
Since the solution of the second image is not present, I made it myself.
The list items:
<li>
<a href="#" class="custom">
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">checkbox 1</label>
</a>
</li>
The css:
.custom {
padding: 0;
}
.custom > div {
margin: 0;
}
.custom > div > label {
border-radius: 0;
border: 0;
}
Does this work?
http://jsfiddle.net/JY6EV/10/
Using the Gris layout for positioning but you will still need to tweak the look and feel
Ive built a webpage with 'tabs' using rails. When a user clicks a tab, a new page loads. I want to format it so the tabs are always in the same place on the page as a user clicks them. This happens as long as the user has not scrolled down on the page. If a user has scrolled down, clicking on the tab will refresh the page and it is no longer scrolled down - which make clicking the tabs look bad. Is there a way to keep the spot on the page where the user has scrolled down, without using Javascript? If it must be done with Javascript, any suggestions?
T
alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png
Without Javascript, nope. If they were at an exact location, you would be good to go, using an anchor (example.html#anchor), but since you don't know the exact location, you're pretty much out of luck.
So sorry!
You can do it but you will need a small amount of Javascript and some CSS hiding.
Suppose these are your tabs:
<ul id="nav">
<li class="tab">Content 1</li>
<li class="tab">Content 2</li>
</ul>
And suppose this is your content:
<div id="content" class="content1">
<div id="content1">
<h1>Some content</h1>
<p>This is my content.</p>
</div>
<div id="content2">
<h1>More content</h1>
<p>This is my other content.</p>
</div>
</div>
What you would need to do then, and I am demonstrating using the Ext.Core library, is:
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('.tab a').on('click', function(ev, el) {
ev.stopEvent();
var content_id = el.href.replace('#', '');
Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
});
});
</script>
You also need a little CSS like so:
#content.content2 #content1,
#content.content1 #content2 {
display:none;
}
This hides the other content we are not looking at. We set a class on the content container called contentN which is the href of the link for that tab. So if we have a tab with href="#content1" then we add a class to the content container called content1 and now that content is visible and other content is not.
The Ext.Core samples page has another way of doing it, and they have an example up showing it working. Their way is more involved than this.