...

View Full Version : What am i doing wrong? - Want to take style of a list



gh05
11-24-2009, 06:29 PM
I'm sure this is something simple but i can't figure it out. I just want to take the bullet points off a list but all code from .leftPanel ul, .leftPanel ul li won't work. In my leftpanel I'm just pulling through a html list using an include statement but it's still got bulletpoints in. It's strange because the EXACT same code works in a similar file. I don't know if it's something to do with the order? Thanks.



#leftPanel
{
float:left;
width:20%;
background-color: #ffffff;
color:#990000;
margin: 5px 5px 5px 10px;
padding 7px 7px 7px 7px;
}

.leftPanel ul, .leftPanel ul li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

.leftPanel ul
{
border: solid 1px #fff;
border-bottom-width: 0;
}

.leftPanel ul li
{
border-bottom: solid 1px #fff;
}

.leftPanel ul li, .leftPanel ul li a
{
margin: 0;
display: block;
padding: 0;
line-height: normal;
}
.leftPanel ul li a
{
display: block;
padding: 2px 5px 3px 5px;
}

abduraooft
11-24-2009, 07:09 PM
Some CSS code alone is not sufficient to say something on your issue. Could you post a link to your page?

gh05
11-24-2009, 07:17 PM
Hi, My page isn't online at the moment...I'm just testing it locally. Here is the code of the whole document if it helps at all. The files included are simply just html lists with links in.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to the CCLN Website</title>
<style type="text/css">

#container
{
width:70em;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;
}

A:link {text-decoration: none; color: #0000FF;}
A:visited {text-decoration: none; color: #0000FF;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
img{border:0;}

h1{font-size:19px};


html, body{

font:12px arial;
}

#topPanel
{
height:100px;
font-weight: bold;
font-size: 26px;
text-align:center;
background: #ffffff url(banner3.gif) repeat-x;
color: #fff;
}

#topPanel h1
{
text-align:center;
font-size:160%;
font-family: arial, helvetica, sans-serif;
padding: 10px 0px 0px 0px;
margin: 0;

}
.hnav
{
border-bottom: solid 1px #fff;
text-align: center;
background-color: red;
}
.hnav, .hnav ul li a
{
/* need to middor veritcal padding on .hnav and child anchor elements
* because the anchors are _not_ block elements. since they are not
* block elements web browsers will not expand .hnav to contain them
* even with the extra padding. by applying the same padding to both
* the parent .hnav _looks_ like its containing the child anchor
* elements.
*/
padding-top: 3px;
padding-bottom: 4px;
color:#ffffff;
}
.hnav ul, .hnav ul li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
.hnav ul li a
{
margin: 0 -1px 0 0;
padding-left: 10px;
padding-right: 10px; /* short-hand padding attribute would overwrite
top/bottom padding set in a previous rule */
border-left: solid 1px #000;
border-right: solid 1px #000;
white-space: nowrap;
}
.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
text-decoration: none;
}
.hnav ul li span.divider
{
display: none;
}
* html .hnav ul li, * html .hnav ul li a
{
width: 1%; /* IE/Mac needs this */
display: inline-block; /* IE/Mac needs this */
/* \*/
width: auto;
display: inline;
/* reset above hack */
}
* html .hnav, * html .hnav ul a
{
/* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win.
IE/Mac will ignore this rule. */
}
* html .HNAV
{
padding: 0; /* IE5/Win will resize #hnav to fit the heights of its
inline children that have vertical padding. So this
incorrect case selector hack will be applied only by
IE 5.x/Win */
}


#leftPanel
{
float:left;
width:20%;
background-color: #ffffff;
color:#990000;
margin: 5px 5px 5px 10px;
padding 7px 7px 7px 7px;
}

.leftPanel ul, .leftPanel ul li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

.leftPanel ul
{
border: solid 1px #fff;
border-bottom-width: 0;
}

.leftPanel ul li
{
border-bottom: solid 1px #fff;
}

.leftPanel ul li, .leftPanel ul li a
{
margin: 0;
display: block;
padding: 0;
line-height: normal;
}
.leftPanel ul li a
{
display: block;
padding: 2px 5px 3px 5px;
}

#rightPanel
{
float:right;
width:20%;
color:#990000;
font-weight: bold;
background-color: #ffffff;
margin: 5px 0 0 0;
padding 7px 7px 7px 7px;
}

.leftpanel a:link,a:hover,a:visited .rightpanel a:hover, a:link, a:visited
{
color: blue;
}



#centerPanel
{
float:left;
font-family: Verdana, sans-serif;
width:56%;
font-size: 12px;
background-color: #ffffff;
text-align:center;
margin: 5px 5px 0 5px;
padding 7px 7px 7px 7px;
}

#bottomPanel
{
clear:both;
height:100px;
font-weight: bold;
background-color: #ffffff;
font-size: 20px;
text-align:center;
color: #0000EE;
margin: 10px 90px 0 90px;
padding 7px 7px 7px 7px;
}

html, body{
background-color: #cceebb;
color: #000;
font-family: arial, helvetica, sans-serif;
}

</style>


</head>
<body>

<div id="container">
<div id="topPanel">

<h1>CCLN SITE</h1>


</div>

<div class="hnav">

<!--
you must preserve the (lack of) whitespace between elements when creating
your own horizontal navigation elements, otherwise the extra whitespace
will break the visual layout. although how it breaks (tiny spaces between
each element) is an effect that some may desire.
-->

<ul
><li class="hide"
><a class="hide" href="../../">home</a
><span class="divider"> : </span
></li
><li
><a href="">page2</a
><span class="divider"> : </span
></li
><li
><a href="">page3</a
><span class="divider"> : </span
></li
><li
><a href="">Blog</a
><span class="divider"> : </span
></li
><li
><a href="">Contact</a
><span class="divider"> : </span
></li
></ul>

<!-- horizontal nav end -->

</div>







<div id="leftPanel">
<?php include("methodswithsitemenu.php"); ?>
<?php include("leftgooglead.php"); ?>
</div>

<div id="rightPanel">
<?php include("rightbar2.php"); ?>
</div>

<div id="centerPanel">
<p>

This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
This is the center panel, This is the center panel, This is the center panel,
</p>

<p>
This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
</p>

</div>



<div id="bottomPanel">
sitemap, contact us etc

</div>


</div>

</body>
</html>

abduraooft
11-24-2009, 07:24 PM
The files included are simply just html lists with links in.Take the parsed output of your php code/file taken from browsers "view source" option and please post.

gh05
11-24-2009, 07:31 PM
the php file is as below. I just can't work it out because I'm calling the exact file in another page and it works fine.


<h3>CCLN Files</h3>
<br/>
<ul><li><a href="a.php">a</a></li>
<li><a href="b.php">b</a></li>
<li><a href="c.php">c</a></li>
<li><a href="d.php">d</a></li>
<li><a href="e.php">e</a></li>
<li><a href="f.php">f</a></li>
<li><a href="g.php">g</a></li>
</ul>

abduraooft
11-24-2009, 07:37 PM
You have
<div id="leftPanel"> but in your CSS, you have the class selector,
.leftPanel ul, .leftPanel ul li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

.leftPanel ul
{
border: solid 1px #fff;
border-bottom-width: 0;
}

.leftPanel ul li
{
border-bottom: solid 1px #fff;
}

.leftPanel ul li, .leftPanel ul li a
{
margin: 0;
display: block;
padding: 0;
line-height: normal;
}
.leftPanel ul li a
{
display: block;
padding: 2px 5px 3px 5px;
}

abduraooft
11-24-2009, 07:37 PM
You have
<div id="leftPanel"> but in your CSS, you have the class selector,
.leftPanel ul, .leftPanel ul li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

.leftPanel ul
{
border: solid 1px #fff;
border-bottom-width: 0;
}

.leftPanel ul li
{
border-bottom: solid 1px #fff;
}

.leftPanel ul li, .leftPanel ul li a
{
margin: 0;
display: block;
padding: 0;
line-height: normal;
}
.leftPanel ul li a
{
display: block;
padding: 2px 5px 3px 5px;
}

gh05
11-24-2009, 08:12 PM
ah right...i've replaced them with #leftPanel and it seems to be working. Is that the correct syntax?

I just don't know why this exact same code worked in another css file which i downloaded from a popular template.

Thanksfor your help.

Excavator
11-24-2009, 08:24 PM
Hello gh05,
<div id="leftPanel"> would be styled with #leftPanel. That is an id.

<div class="leftPanel"> would be styled with .leftPanel. That is a class.

Have a look at this explanation. (http://www.tizag.com/cssT/cssid.php)

gh05
11-25-2009, 01:29 PM
Thanks, I get it now. I just didnt understand why it would ave worked for another file and not this one? Any ideas? the only other difference was that the file it worked on was 'strict' where as this was transitional.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum