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
Related
i have a problem with my stylesheet.
i have repeated div by looping (php)
This is the looping
<div class=content>
<?php $db=new db; $sql=$db->query("SELECT * FROM tbl_news WHERE category='1' ORDER BY 1 DESC LIMIT 0,10"); while($r=$sql->fetch(PDO::FETCH_ASSOC)){ echo '
<div class=box-thread>
<img src="images/galleries/preview_'.$r['img'].'">
<br />
<h1>'.$r['title'].'</h1>
<p align=justify>'.strip_tags(htmlspecialchars_decode(substr($r['contents'],0,200))).'</p>
</div>'; } ?>
</div>
but the problem is showed in the picture, there is missing div there. I dont know why. any div i set to "float:left" so it's auto go to bottom if there is reach the page's width.
This is my css
.content {
width:100%;
margin:auto
}
.box-thread {
width:20%;
background-color:#fff;
margin:2%;
float:left;
min-width:240px
}
.box-thread img {
width:100%;
}
.box-thread p {
padding:5px 20px
}
.box-thread h1 {
padding:0 20px;
font-size:18px
}
Thank you for any help
I'm trying to define some css styling to an < a > element, in particular, padding and margins. I've noticed that when I'm trying to define it in-line, it's working, but when I try to use a class selector in an external style sheet, for some reason it is not working. The weird thing is that other attributes (like height), does work in the external file.
The relevant php code:
<div id='navbar_line'>
<nav class="home_navbar">
<div class="container">
<div id="navbar" class="collapse navbar-collapse" style='padding:0'>
<ul class="nav navbar-nav home_nav">
<?php
// Create the top navigation list by listing the children of the homepage.
// If the section we are in is the current (identified by $page->rootParent)
// then note it with <a class='on'> so we can style it differently in our CSS.
$homepage = $pages->get( "/" );
$children = $homepage->children;
$reversed = $children->reverse();
foreach ($reversed as $child) {
echo "<li class='home_navbar_item'>";
echo "<a href='{$child->url}'>";
echo "<div class='navbar_logo'>";
echo "<img src='{$child->page_logo->url}' alt='{$child->title}' height='30' width='30'>";
echo "</div>";
echo "</a>";
echo "</li>";
}
echo "<li class='home_navbar_item'> <a href='{$homepage->url}'>";
echo "<img src='{$meta_data->Logo->url}' alt='{$homepage->title}' height='30' width='30'>";
echo "</a>";
echo "</li>";
?>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
The css code:
#lower_part span{
padding:0;
margin:0;
white-space: pre;
}
#navbar_line{
background-color: #04619c;
height: 137px;
margin: auto;
}
#navbar{
background-color: #04619c;
}
.home_navbar_item a {
height: 300px;
padding:0;
margin:0;
}
.navbar_logo{
height: 50px;
width: 50px;
background-color: white;
/*border-radius: 50%;*/
}
.carousel_image{
width:100%;
}
.hebrew_text{
text-align: right;
}
#scrollable_body{
height: 100px;
margin:0;
padding:0;
}
.scrollable_content{
padding:0;
overflow: scroll; overflow-x:hidden;
height: 500px;
/*-webkit-overflow-scrolling: touch;*/
}
span{
padding:4em 0 0 0;
display:inline-block;
}
hr {
border:none;
border-top:1px dotted #f00;
color:blue;
background-color:#fff;
height:1px;
width:50%;
}
Seems you just can't override previous defined padding & margin, while you doing that inline, inline styles have bigger priority and applies.
Try to read this article, it can helps to understand a problem https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am having issues with this bit of CSS and I can't seem to find it out.
I have a bit of PHP:
<ul>
<?php if($page=="home"){echo"<li class='active'>";}else{echo"<li>";}?>Home</li>
<?php if($page=="about"){echo"<li class='active'>";}else{echo"<li>";}?><li>About</li>
<?php if($page=="contact"){echo"<li class='active'>";}else{echo"<li>";}?><li>Contact</li>
<?php if($page=="projects"){echo"<li class='active'>";}else{echo"<li>";}?><li>Projects</li>
<?php if($page=="sites"){echo"<li class='active'>";}else{echo"<li>";}?><li>Sites</li>
<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?><li>Demo</li>
</ul>
Now, on each page it will define $page. The issue is when a page is active it displays a bar underneath the item. The bar is floating to the right side of the page and the home item is on the far right. If that one is active then it works just fine. When any of the other items are active then the line is to the left. Here is my CSS:
#header {
position:fixed;
background:#222;
color:#999;
width:100%;
margin:0px;
padding:0px;
top:0;
z-index:1;
height:5%;
}
#header ul li{
display: inline;
margin:0;
float:right;
display:block;
padding:5px 10px;
}
#header .active{
border-bottom: solid 3px orange;
}
Right
Wrong
I know it has something to do with the spacing but I just can't figure it out. I'm not a CSS guy.
I am guessing that you are outputting more than the needed <li> tags
<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?><li>Demo</li>
this will either output
<li class='active'>
<li>Demo</li>
or
<li>
<li>Demo</li>
So to see if this is the problem use this
<ul>
<?php if($page=="home"){echo"<li class='active'>";}else{echo"<li>";}?>Home</li>
<?php if($page=="about"){echo"<li class='active'>";}else{echo"<li>";}?>About</li>
<?php if($page=="contact"){echo"<li class='active'>";}else{echo"<li>";}?>Contact</li>
<?php if($page=="projects"){echo"<li class='active'>";}else{echo"<li>";}?>Projects</li>
<?php if($page=="sites"){echo"<li class='active'>";}else{echo"<li>";}?>Sites</li>
<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?>Demo</li>
</ul>
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
Weirdly, I've never come across this issue before, but I've just started making a site and the top navigation isn't playing nicely.
I want a small amount of white space between each menu item, but when I have new lines between my <li> elements and my <a> elements in my IDE (Netbeans), the white space disappears, yet it looks fine if I have <li><a></a></li> all on the same line. I was always under the impression html ignored white space in the code.
I've checked for any weird characters causing problems in other text editors and can't find anything.
Here's the code...
Like this the menu looks correct but code looks ugly (I know it looks fine when it's this simple, but I'm going be adding more complexity in which makes it look awful all on one line):
<ul id="menu">
<li>About</li>
<li class="active">Track List</li>
<li>Stats</li>
<li>Stats</li>
</ul>
Produces:
Like this the menu looks wrong but code looks fine:
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
Produces:
wrong http://img708.imageshack.us/img708/6628/screenshot20100618at000.png
I'm sure it's something simple I'm doing wrong... but can someone shed some light on this for me?
Sorry for the lengthy post (my first on stackoverflow).
Edit - Full CSS and HTML:
body {
/* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
font-family: 'Trebuchet MS', Helvetica, sans-serif;
/* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}
a {
color: #FFFFFF;
text-decoration: none;
}
#container{
margin: 0 auto;
width: 800px;
}
#content {
margin-top: 50px;
}
#header {
background-image: url("../images/absolute_radio_logo.png");
border-bottom: solid 1px #777777;
background-repeat: no-repeat;
width: 800px;
height: 86px;
padding-bottom: 15px;
}
#menu {
float: right;
}
#menu li {
display: inline;
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li:hover {
border-bottom: solid 3px #FF0000;
}
#menu li.active {
background-color: #58065e;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Radio - Statistics</title>
<link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
</div>
<div id="content">
<!-- content -->
Elapsed Time: 0.0033 - Memory Used: 0.4MB
</div>
</div>
</body>
</html>
It seems to be totally fine with the CSS you supplied, so I'm guessing there must be some other rule affecting your links. Could you please supply us with a live preview or the full stylesheet?
Edit:
Seems to be an issue with how "display: inline" collapses the elements contents, though I couldn't find any proof of that. Change
#menu li {
display: inline;
}
to
#menu li {
display: inline-block;
}
or add a margin to it:
#menu li {
display: inline;
margin-right: 5px;
}
To fix the alignment of the text, I'll go ahead and recommend you float the lis. Someone please correct me if this is a horrible idea. Add
#menu {
overflow: hidden;
}
#menu li {
float: left;
}
to your existing rules.
Just as a guess try setting the line-height for the li & a tags to 1em or even 0
#menu li, #menu a {
line-height: 1em;
}
Firstly, those two screenshots appear to be swapped around, the first has gaps between the links, caused by the white-space in the second code snippet.
This new white-space-collapse property may be able to help.
#menu li{white-space-collapse:discard}
via: http://safalra.com/web-design/html-and-css/white-space-property/
If that doesn't work, the next option is to set the <a> tags to block level elements and the <li> tags to inline.
#menu li{display:inline}
#menu li a{
display:inline-block
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li a:hover{
border-bottom: solid 3px #FF0000;
}
#menu li.active a {
background-color: #58065e;
}
so it seems the targeted answer's have all been provided, so I'd just like to add that as a rule of thumb I always use normalize.css which is a css library that ensures normal
you can download it or use npm install normalize.css
You must set overflow: hidden on the parent box, then set position: relative on the <li>:
ul {
margin: 0;
display: flex;
flex-wrap: wrap;
padding: 25px;
margin: 5px 0;
overflow: hidden
}
ul li {
display: inline-block;
padding: 19px 10px;
text-align: center;
position: relative
}
ul li::before {
content: '';
position: absolute;
width: 400%;
height: 1px;
background: #f3f3f3;
bottom: 0;
right: -250px
}