I'm trying to create a php navigation bar. I've come up with a nice looking scheme using the following code:
css:
a.navbar:link { color:#AAAAFF; text-shadow:none;
padding: 5px 12px; white-space:nowrap; font-size:15px;}
a.navbar:visited { color:#AAAAFF; text-shadow: #4444FF 0.0px 0.0px 2px}
a.navbar:hover { color:#CCCCCC; background:#444488; }
a.navbar:active { color:grey; }
a.navbar {padding:none; font-size:15px;}
span.leftbraces { font-size:25pt; padding: 0px 0px;
position:relative; right:-9px; bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px;
position:relative; left:-9px; bottom:-3.75px;}
php:
<?php
echo "<center>";
$links = array('Home'=>'index.htm', 'Site Map'=>'sitemap.htm');
$leftbrace = "<span class=leftbraces>[</span>";
$rightbrace = "<span class=rightbraces>]</span>";
foreach ($links as $key => $value) {
echo "$leftbrace<a class=navbar href=\"$value\">$key</a>$rightbrace";
}
echo "</center>";
?>
and html:
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<?php include 'navbar.test.php';?>
</html>
How can I eliminate the space between the braces without giving up the nice tightly-fitting background padding? The <table> tag I've included is not necessary, it was just my latest attempt to get this to work.
[ Home ] I want to get rid of this space [ Site Map ]
but I want to keep the tight fit of the highlighting
Here is a better way of doing it:
The list of links in your navigation is just that— a list. Instead of using a table, use ul, or unordered list. In my example, I also used the nav element, which is HTML5. You could easily replace it with a div.
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
Notice, I did not include the brackets in the markup. This is on purpose. Those brackets do not add to the content or meaning of the site, and should be in the domain of CSS.
This is easily done with pseudo elements:
nav a:before {content:'['; display:inline;}
nav a:after {content:']'; display:inline;}
You will lose some support with older versions of IE, but everyone, including IE users—and especially those using screen readers or with other accessibility issues—will benefit from the removal of superfluous spans. It will also degrade gracefully.
Here is a demo.
You could wrap [ Home ] and [ Site Map ] in a span. Set the margin of this wrapper to -8px.
http://jsfiddle.net/wkS6H/
Side note: Since you are displaying static content echo is inefficient. It causes the server to reproduce the same output every page request.
Remove the padding on the "navbar" element and the negative bounds on the braces. Like so: http://jsfiddle.net/kDq29/1/.
Also note the errors in your HTML markup.
EDIT: I forgot to save my changes from chrome. Updated now.
The '] Space [' was caused by left, right, bottom property of braces.
span.leftbraces { font-size:25pt; padding: 0px 0px;
position:relative; right:-9px; bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px;
position:relative; left:-9px; bottom:-3.75px;}
Remove the position properties and align the text by its only property.
- visit : http://jsfiddle.net/fPty7/1
Related
How can I color the first word using CSS when I have div tag for the title?
<div class="head-logo"> <? echo $siteName ?> </div>
CSS
.head-logo{
text-align:center;
color:#000000;
font:normal 22px Tahoma;
margin: 0px 10px 20px 60px;
}
You can use php explode
<div class="head-logo">
<?
$title = explode(" ", $siteName, 2);
echo '<span style="color: #FF0000">'.$title[0].'</span> '.$title[1]);
?>
</div>
You can do it this way:
<div class="head-logo">
<?
$title = explode(" ", "My title here");
echo '<span class="firstWord">'.$title[0].'</span>'.substr(implode(" ", $title), strlen($title[0]));
?>
</div>
.head-logo{
text-align:center;
color:#000000;
font:normal 22px Tahoma;
margin: 0px 10px 20px 60px;
}
.firstWord{color: red;}
Okay, so there are ways to do this with JS, and some tricky CSS workarounds.
Here's why it doesn't work:
There is no "::first-word" pseudo class, since in a code language, one 'word' is a pretty half-baked definition. So the way I have always done this is with <span>...</span> tags, but I see you are using PHP to echo your website name, so you may be able to do something along the lines of this using the ::first-line pseudo element, then making the pseudo a block and picking it's length that way:
CSS:
display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */
CSS to increase size of first word
This is a JS solution, that essentially replaces adds a span class in your tag and lets you change how many letters are there.
JS:
$(function() {
$('h2').each(function(){
$(this).html( $(this).text().replace(/(^\w{5})/,'<span>$1</span>'));
});
});
Style half of a word, sentence, etc
fiddle:
http://jsfiddle.net/3gMK3/
The fiddle, CSS, and JS is not mine, just something I found while researching
I have two sets of text that need to be inline with each other but at the moment one is placed higher than the other. The two sets of text share the same CSS code so when I edit it, both are affected. However, I would like to target only one of the text; Is there a way of doing this?
Here is the HTML and CSS:
<div id="mi-slider" class="mi-slider">
<?
$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
if($obj->id&1)
echo "<ul>";
?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>" id="list">
<img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt="">
<h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />£<?=$obj->price?> each</h4>
</li>
The CSS code:
.mi-slider ul li h4 {
display: inline-block;
font-family: HelveticaNeueRegular;
font-weight: 100;
font-size: 12px;
color: #a34235;
padding: 0 0 0;
text-align: left;
margin-top: 20px;
margin-left: 10px;
float: left;
}
you can use unique ID for each special element, then specify your CSS via '#' selector.
if the special CSS need to be applied to the first element,
consider using the ':first-child' selector. its cleaner.
but, if you want to target the second element (or later) consider that the 'nth-child' selector is not suported in older browser (like IE8)
If you want to target the second list items H4, you can use the nth-child selector, as below:
.mi-slider ul li:nth-child(2) h4
{ your css }
Use this:
li:first-child h4
{
your custum css
}
With this, the CSS rules only apply to the h4 tag of first li instead of all li.
I am using WAMP. I want to take background image URL from my database and want to show this in div class 'box'. I tried it by followed way but couldn't succeed. the last background image is appearing on each box while I want to show different images. Code I am using is
<?php
$feild_set = get_all_feilds();
while($feild = mysql_fetch_array($feild_set)) {
$url = $feild['background_image_url'];
echo "<style>
.box {
width: 300px ;
height: 100px;
background-image: $url;
background-visibility: visible;
border: 1px #00FF33;
margin-bottom: 10px;
display: inline-table;
margin-right: 10px;
}
</style>";
echo "<div class=\"box\">";
echo "<a href=\"content.php?feild=" . $feild['id'] . "\" ><block_holder>{$feild['menu_name']}</block_holder></a>";
echo "</div>";
}
?>
Thanx in advance
Try this:
<?php
echo "
<style>
.box {
width: 300px ;
height: 100px;
background-visibility: visible;
border: 1px #00FF33;
margin-bottom: 10px;
display: inline-table;
margin-right: 10px;
}
</style>";
$field_set = get_all_feilds();
while ($field = mysql_fetch_assoc($field_set)) {
echo '
<div class="box" style="background-image:'.htmlspecialchars($field['background_image_url']).';">
<a href="content.php?feild='.htmlspecialchars($field['id']).'">
<block_holder>'.htmlspecialchars($field['menu_name']).'</block_holder>
</a>
</div>';
}
?>
What have I done?
Placed the declaration of the .box CSS class outside the loop so it is only output once
Changed mysql_fetch_array() to mysql_fetch_assoc() as it is less confusing and more efficient
Removed the background-image: property from the .box class
Added a background-image: property to an inline style= attribute for each div and wrapped the URL of the image in url() (this has been undone as it seems the URLs are stored in the database with this already done
Passed data from the database through htmlspecialchars() before outputting it
Corrected the spelling of feild to field where it can be done without breaking the rest of your code
Some general indentation and quote tidying and readability fixes
As it was, your CSS .box class was declared more than once. Because of the cascading nature of CSS, only the values used in the last declaration would have been used - each declaration of a property overrides the last, which is why you were only seeing the last image. You also would not need to declare those details more than once - the whole idea of a class is that you can declare it once and use it multiple times. If you want element-specific properties, use IDs or inline styles (preferably IDs, but I have used inline styles here for simplicity).
.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.