So far i have this code:
function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; display:inline;'>";
while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";
}
which produces this:
Does anyone know how to make the above centered so its in the middle?
Any ideas appreciated.
Thankyou
Update:
I have tried styling as a block and doing margin:0 auto with a fixed with but thats a problem, i need it to stretch along 100% of the width because the fields 'IP, City, Region, Country Name and Country Code will be filled in via GeoLoc services automatically, so having a fixed width of say 500px is not big enough therefore it needs to be the whole width, I want it centred because if there is someone viewing my webpage that there info doesnt use the whole width it would look better centered.
I hope this makes sense.
Try this:
<ul style='list-style-type: none; display:block; width:500px; margin:0 auto;'>
If you want to center the content of the UL without providing a fixed width probably the easiest way is the following:
function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; text-align: center;'>";
while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";
}
Wrap the ul in a div and then add this CSS:
.className {
margin:0 auto;
}
HTML:
<div class="className">
<ul style='list-style-type: none; display:inline;'>
<li style='list-style-type: none; display:inline; padding-right:5px;'>Stuff</li>
</ul>
</div>
Change the ul style to block
Related
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'm new to all this. I've got a template for a mock website I'm working on. The left menu was fine in the template. Since I've changed the left menu to appear in PHP it keeps indenting to the left. I've tried changing the css to have margin-left = 0px and other things But it remains the same. You can see that padding has 30px left but I changed that to 0px and still remained indented and the ticks were over the text.
indent http://i.minus.com/iwFNaTVEdSzZw.png
CSS
ul.left_menu{
width:196px;
padding:0px;
margin:0px;
list-style:none;
}
ul.left_menu li{
margin:0px;
list-style:none;
}
ul.left_menu li.odd a{
width:166px;
height:25px;
display:block;
background:url(images/checked.png) no-repeat left #dad0d0;
background-position:5px 5px;
border-bottom:1px #FFFFFF solid;
text-decoration:none;
color:#504b4b;
padding:0 0 0 30px;
line-height:25px
} ;
xHTML
<div class="left_content">
<div class="title_box">Categories</div>
<ul class="left_menu">
<li class="odd">
<?php include("category_menu.php"); ?>
</li>
Edit
//take the book types to be used on the left menu (leftColumn.php)
$query_category_menu = "SELECT category_id, category_name FROM computineerCategory";
$query_category_menu_result = mysql_query($query_category_menu)
or die(mysql_error());
echo '<ul>';
while($type_category_data = mysql_fetch_array($query_category_menu_result))
{
print "<a href = 'category.php?categoryid=".$type_category_data["category_id"]."'>".$type_category_data["category_name"]."</a>";
}
echo '</ul>';
?>
Take out the
echo '<ul>'
echo '</ul>'
from the category_menu file you don't need to add these twice
I have posts that are echoed out of my mysql database. If there is more than one, they are echoed in separate divs in order of decreasing rank number (taken from DB). However, when the divs are echoed, the all overlap on the top. I believe this is a CSS problem. The thing is that each div has several sub divs. I think the "position" attribute might have contributed to this. I would like for each div to be echoed out with about 100px between each one. Thanks.
CODE:
$post = array();
$f=0;
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area'>";
echo "<div id='badge'><span style='color: gray;'>Answered by:</span>";
include 'badge.php';
echo "</div>";
echo "<div id='areapost'><pre>$post[$f]</pre></div>";
$f++;
}
echo "</div>"; /*end area*/
CSS CODE:
#area {
background-color: #fff;
border: 1px solid red;
width:500px;
height: 300px;
}
#badge{
position: absolute;
top: 0px;
left: 0px;
}
#areapost{
position: absolute;
top: 0px;
right: 0px;
height: 300px;
width: 380px;
background-color: #E0E0E0;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
The "area" is the entire post container. The areapost and badge are elements inside "area"
All elements in the page must have a unique id, otherwise you get unexpected behavior.
Fix this, and see where it puts you.
Try moving the opening "area" div tag out of the conditional:
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area'>";
should be:
echo "<div id='area'>";
while($row=mysql_fetch_assoc($g)){
$post[]=$row['post']
since you want area to contain everything else
You almost always need to open and close divs at the same level of looping. Here you are opening the <div id='area'> inside the while loop and closing it outside the while loop. They need to either both in, or both out. Also, your id's ought to be unique, over your whole page, else you should be using classes on those divs.
You also need to not position all these areas absolutely. I've added a content div around everything. Position this absolutely, and the area class relatively. You don't need the styling on #area, change it to .area.
$f=0;
echo "<div id='content'>"
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area-'" + $f + " class='area'>";
echo "<div class='badge'><span style='color: gray;'>Answered by:</span>";
include 'badge.php';
echo "</div>";
echo "<div class='areapost'><pre>$post[$f]</pre></div>";
echo "</div>"; /*end area*/
$f++;
}
echo "</div>"
also try using relative positioning, with 100px space on each. this way each div will be spaced relative to the previous div, rather than one spot, causing them to overlap.
.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>
I have a nested list that lists child nodes when the parent node is expanded. The parent node is expanded by clicking an image to the left of the text.
Unfortunately, it expands right off the page. I would like a scrollbar to appear when the content is off the page.
When I set "overflow: auto", a scrollbar never pops up, it just expands off the page and removes the expansion image on left of the list items.
Here's sample .html:
<body>
<div id="theDiv" style="clear: left;">
<ul id="theList">
<li id="1" class="parent">
<img class="expanded" align="absmiddle" src="./tree_expanded.gif"/>
Parent1
<ul style="display: block;">
<li id="10">
.....
</ul>
</li>
....
</ul>
</div>
</body>
Here's sample .js:
function expand() {
if(this.className == "expand") {
jQuery(this.parentNode).children("ul").show();
this.className = "expanded";
this.src = "/_images/tree_expanded.gif";
}
else {
jQuery("ul", this.parentNode).hide();
this.className = "expand";
this.src = "/_images/tree_unexpanded.gif";
}
}
Here's sample .css:
#theList {
margin-top: 0;
}
#theList, #theList ul {
list-style: none;
margin: 5px 20px;
padding: 0;
}
#theList .expand, #theList .expanded {
margin-left: -20px;
cursor: pointer;
}
#theList img {
margin-right: 5px;
}
#theList ul {
display: none;
}
#theList li {
white-space: nowrap;
margin-bottom: 4px;
}
First of all, set a definite width of the container div, so it knows when to start scrolling. Next, set it to overflow-x:scroll; or something to that effect. It should work :)
Ok, I was on the right track but not persistent enough. CSS really drives me nuts. I need to set both the div and the list height to get it to scroll. I was trying one or the other, not both.
I'm such a n00b.