this is what the links look like: http://www.screencast.com/users/rockstarvisible/folders/Jing/media/6d18eddb-4785-459e-88a5-b6448a5771ef
the css file can be found on rankingclimber.com/css/style.css
this is the code in the footer.php file:
`
<h3>Website Links</h3>
<ul>
<li>What is Ranking Climber?
<li>About Us</li>
<li>Contact Us</li>
<li>Press</li>
<li>Terms & Conditions</li>
<li>Privacy Policy</li>
</ul>
`
People are all over the place with their answers..
The <ul> and <li> elements are naturally block level elements... meaning unless a proper width is set, they will take up the entire width of the 'line' they exist on...
Your <ul> could remain block level if you want (usually very helpful) so you do not want to apply display : inline to your <ul> ...
...
You could use:
li {
display : inline;
}
which will turn your <li> into 'inline' elements--but you lose the versatility of block level elements (custom width/height, floats, etc) thus the more common alternative is to use:
li {
float : left;
}
And you'll probably want to make sure the padding/margins are set to your aesthetic needs, for example:
li {
float : left;
padding : 0;
margin : 0 0 0 12px; // 12px left margin, for some breathing room
}
If you don't specify a width, a floated block will shrink to the width (give or take a few pixels) of its content... which is handy knowledge for creating 'tabs.'
Hopefully this clears up any confusion within this question. See the example here: http://jsfiddle.net/X3hAZ/ (I added a black border so you can see the dimensions of each block.)
In the css give
display: inline;
float:left
I hope that will help you.
ul{
display:inline;
}
in your css file.
add the property
li { float: left; }
to your css
Put ul{margin:0; padding:0} for the ul. Then put {display:inline; padding:0; margin:0} for li... So complete code is ul{margin:0;padding:0;}
li{display:inline; padding:0; margin:0; I think this should do the trick.
Here is a good example of this, complete with a css hover effect
#Pawan :- If you are using css then u can write the code given below:
ul li {
float:left;
}
Hope it works............
ul{
margin:0;
padding:0;
}
li{
margin: 0;
padding: 0;
display: inline;
}
hope this will work.
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use CSS hover inside html-tag?
<body>
<div id="he">
<div id="header">
<div class="headertabs">
<ul class="nav">
<li class="divide"> </li>
<li class="tab">OVERVIEW1</li>
<li class="divide"> </li>
<li class="tab">OVERVIEW2</li>
</body>
How do I write a css when I move the mouse (hover) on the overview1 and overview2 tabs it has to change its text color to green.
Simnply use the :hover pseudo selector:
li.tab a:hover
{
color: green
}
http://jsfiddle.net/Kyle_/duj2d/
I snagged a bit of CSS from a file I have open that should explain it quite well:
This is my normal CSS for an anchor:
a
{
color: #006699;
text-decoration: underline;
}
This is the bit that changes the color when it is hovered over.
a:hover
{
text-decoration: none;
}
I'd put the hover on the <a> instead for better IE support, I'd also change the colour for focus so it changes for keyboard only users when tabbing through links, so:
.tab a:hover, .tab a:focus {
color: green
}
Another way
li a:hover{
color:green;
}
little shorter:
.tab a:hover{color:green}
I am trying to design gallery of images using php and css. I have placed the images in unordered list like,
<ul style="list-style-type:none;">
<?
while($data=mysql_fetch_row($result))
{
$pic=$data[2];
if ($pic)
{
$path="http://www.myworkdemo.com/pecifica/photos/".$pic;
}
?>
<li style="list-style-type:none; float: left; margin-left:4px; margin-top:5px; margin-bottom:5px;">
<img src=<?=$path?> width=300 height=240></img>
<!--<td class='delete'><a href='addproject.php?ProjId=<?=$data[0]?>&action=edit' >Edit</a></td>-->
<div class='delete'>Delete</div>
</li>
</ul>
And i got all the images but one bullet(starting) was not removed from the list. my gallery after css formatting is like
and due to that bullet i lost the alignment of first row images. please guide me.
Very easily:
list-style-type: none;
Also consider list-style: none; if the bullet is actually an image not rendered by the browser.
It lies in two of your CSS files.
Line 514 http://www.myworkdemo.com/pecifica/admin/css/style1.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Line 523, http://www.myworkdemo.com/pecifica/admin/css/style.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Disabling both of these with firebug eliminated the bullet (which is actually a custom gif file). You'll need to review how you're using the involved classes.
I have a php foreach script that will go through all files in a directory and list them out, with an icon for folders, and an icon for files.
As the list just goes until it has checked all files and folders, it just goes off the bottom of the page.
Just curious as to what people think the easiest way would be, to get the below code to break onto another column once it hits the bottom of the page?
foreach (glob("$dir/*") as $filename) {
//Set the full path and filename
$path_parts = pathinfo($filename);
//Set the filename to display
$itemname = $path_parts['basename'];
//Remove bullet points from the list
echo "<ul style='list-style:none'>";
//If it is a directory, list it. Else do nothing
if(is_dir($filename)) {
//Link points back to lister, with new directory
echo "<li><a href='list.php?dir=".$filename."' style='font-size:18px;'>
<img src='/site/images/files/folder.png' height='32px' width='32px' border='0' /> ".$itemname."</a></li>";
}
echo "</ul>";
}
Appreciate any advice people can offer
Eds
There are many ways to achieve your goal, all depends on how you want to present the information: ordered, unordered, columns organized by height, columns organized by width, etc..
So, for starting point, you can do something along this lines:
HTML
<div>
<ul>
<li>
<a href="#" style="font-size:18px;">
<img src="path_to_image.png" height="32px" width="32px"> Name
</a>
</li>
...
<li>
<a href="#" style="font-size:18px;">
<img src="path_to_image.png" height="32px" width="32px"> Name
</a>
</li>
</ul>
<br>
</div>
CSS
/* what you need to pay attention to */
ul {
list-style-type: none;
width: 330px;
}
li {
margin: 0;
padding: 2px 10px 2px 0;
width: 100px;
float: left;
}
/* some styles to links */
a {
text-decoration: none;
color: #333;
}
/* clear float */
br {
clear: left;
}
What this does is set a fixed width to the LI element, and floating it to the left, so as long as they fit side by side, the columns keep piling up.
UL width limits the number of columns that you desire!
See the Fiddle example here!
Now, if you intend to prevent the vertical scrolling from ever appearing, you need to go with an extra css line:
CSS
ul {
height: 100px;
}
What this does is to limit the height of the list wrap, thus forcing the items to keep on going to the left.
Take not that you should remove the width from that UL to allow the columns to keep piling up to the left.
See the Fiddle here!
.hi guys, i have a little problem on styling my menu bar. i have the following code:
#can_header {
width:1024px;
height:140px;
background-color:#8D96A8;
}
#can_header ul{
list-style-type:none;
margin: 0;
padding: 110px 0 0 550px;
font-family: adolph;
text-transform: uppercase;
font-size: 1em;
}
#can_header li{
display:inline-block;
line-height: 15px;
border-right: 2px solid #CCC;
}
#can_header li#item-104{
border-right: none;
}
#can_header ul a:visited{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:link{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:hover{
color:#EB1886;
}
#can_header ul a:active{
color:#FFFFFF;
}
what i want to do is that when i click one of the links on my ul the color of the selected link will permanently change while on the page of the link. with my present code the color of the link only changes while on-click.. but when the page changes the color will be back to normal. TIA! More Power!
.By the way I'm using Joomla, i'm just editing the CSS of the template that i made.
I'm afraid what you want to do isn't possible with CSS only. What you can do is create a css class that indicate that an item in your menu is selected and assign that class to your li element either using javascript or server side when you render the template
You can't do that with CSS alone, you need to add some class to the selected link (ie class="selected") using Javascript or PHP.
Then you can add a style rule for links with class .selected.
Their right you can't do that with CSS alone. You can use :active and change the text-color, or whatever, while it is being clicked down (aka onmousedown) but you can't have it change like blue + click = red.
JQuery should be able to help you with this though.
This will be handled by the menu module you are using to display the menu. Most modules have the option to turn on active highlighting which basically does what everyone is talking about, adds a CSS class to the active menu item. Chances are all you need to do is turn on the active highlighting on and add the appropriate CSS.
Also, I noticed you are turning off a right border in one of the menu items by using the itemID. You would be better off using the :lastchild psuedo selector in case you ever change the order of your menu items or remove the one you have chosen to be last.
Instead of #can_header li#item-104 use #can_header li:last-child
You should add css class programmatically to child object based on requested page.
An Example with php:
function GetFileName()
{
$currentFile = basename($_SERVER["PHP_SELF"]);
$parts = Explode('.', $currentFile);
return $parts[0];
}
$basename = GetFileName();
<li>
<a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
<a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>
My Website
On the link above you can see that I have a CSS drop down menu in my site. It works fine, however, I want the top level items to stay highlighted when I'm on the page they represent.
I have this so far but it won't work (I'm only showing one menu item which doesn't have any sub menus as it saves space)
Here's the HTML:
<ul>
<li><h2><a name="donate" id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
</ul>
Here's the CSS that colours the background:
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
The content of each page is determined by the value of $head: $head = $_GET['op'];
I tried to implement the change by placing this straight after the menu:
if($head == "Donate") {
echo '<style>
#menu a donate {
color: #000;
background: #fff;
text-decoration: none;
</style>';
}
When I leave 'donate' out of the above code: '#menu a {' the background color of all the menu items changes to white, but I need to change the 'donate' button specifically. I tried doing this by adding id="donate" / name="donate" to the menu item (as seen above), and then calling it in css with '#menu a donate {'. but that is obviously wrong as it doesn't work! What should I do?
I think you need to use
if($head == "Donate") {
echo '<style>
#menu a#donate {
color: #000;
background: #fff;
text-decoration: none;
}
</style>';
}
as a selector instead, because donate is an id for the a tag, therefore it comes immediately after the a tag (no spaces) with a "#" in front.
You were also missing a "}" closing bracket for the css declaration.
OK, quick and dirty answer : your CSS selector wont work, because right now it search for a tag "donate" inside a "a" tag inside a tag with the id "menu". I assume all your link have a specific Id, so the easy way to do it is to use this selector
#donate
{
color: #000;
background: #fff;
text-decoration: none;
}
As an added bonus, this selector will be faster to parse by the browser.
By the way, you seem not to close the style tag. Is that an error?
Now, for a longer answer, it is not exactly the best way to do it. I suggest you create a CSS class with a name like "currentpage" and to use it like this in your menu
<li><h2><a <?php if($head == "Donate") echo 'class="currentpage"'; ?> id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
That way you can keep your style in the stylesheet where it will be easier to maintain. Now of course, if all your menu tags are handcoded, you may find it pretty tedious to add the condition in everytag. If it's indeed the case, I suggest you create your menu using a loop.
By the way, you should remove the name attribute in the a tag, its a deprecated feature. id does the job just fine.
In this kind of situations, you will generally use a CSS class for the currently highlighted item :
<a href="..." class="highlight" ...>Current item </a>
<a href="..." ...>not current item</a>
This way, you won't change the id nor name nor anything else -- but just :
When an item is highlighted, add the css class
And when an item is un-highlighted, remove the css class.
That class can be added from Javascript, if necessary -- but it can also be generated from PHP, using something like this :
<a href="..." <?php if ($current=='item1') {echo 'class="highlight"';} ?> ...>Current item </a>
<a href="..." <?php if ($current=='item2') {echo 'class="highlight"';} ?>...>not current item</a>
usgin css you can try like this:
#menu a:active {
color: #000;
background: red:
text-decoration: none;
}
using jquery this can be done as following:
First create a css like below:
.active {
color: #000;
background: red:
text-decoration: none;
}
then write jquery code:
$('#menu a').click(function(){
$('#menu ul li h2').find('a.active').removeClass('active');
$(this).addClass('active');
});
You should set a class for the current page item using php, and use css to set rules for that class.