Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    CSS Help - Cant find source of the gap

    Hey guys.

    Im new to CSS coding so im wondering if you can help me out. Below at the top is a picture of what it looks like at the moment, and below that is what i want it to look like. The difference is that on the top on there is not only bullet point rings that i dont want, but there is substantial padding on the left hand side.

    As a bonus, if you are able to tell me how to right align the number on the right, i would be gratefull.


    James

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    CSS
    Code:
    @charset "utf-8";
    
    /* Style Sheet */
    
    body {
    	padding: 0;
    	margin: 15px 0 15px 0;
    	font-size: 0.7em;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	background: #151515;
    	color: #EDEDED;
    }
    	
    
    #shell {
    	margin: 0 auto;
    	width: 100%;
    	background: #FFFF00;
    }
    
    #header {
    	width: 90%;
    	margin: 0 auto;
    	height: 26px;
    	background: #252525;
        background-image:url('headerbg.jpg');
    	border: 1px solid #000000;
    }
    
    #main {
    	width: 90%;
    	margin: 0 auto;
    	padding-top: 5px;
    	border: 1px solid #000000;
    	border-top: 0;
    	background: #2D2D2D;
    }
    
    #side {
    	width: 150px;
    	padding-right: 5px;
    	float: right;
    }
    
    #content {
    	margin: 0 160px 5px 5px;
    	padding: 5px;
    	border: 1px solid #000000;
    	background: #1f1f1f;
    }
    
    .tborder {
    	border: 1px solid #000000;
    	background: #1f1f1f;
    	margin-bottom: 10px;
    	padding-bottom: .4em;
    }
    
    .bgblock {
    	background-image: url(http://www.hiven.net/server/bgblock.gif);
    	height: 18px;
    	color: #1f1f1f;
    	border-left: 1px solid #1f1f1f;
    	border-right: 1px solid #1f1f1f;
    	padding-top:3px
    }
    
    .bgblock2 {
    	background-image: url(http://www.hiven.net/server/bgblock2.gif);
    	height: 18px;
    	color: #1f1f1f;
    	border-left: 1px solid #1f1f1f;
    	border-right: 1px solid #1f1f1f;
    	padding-top:3px
    }
    
    .thead {
    	background: #1f1f1f;
    	font-weight: bold;
    	color: #FFFFFF;
    	font-size: 13px;
    }
    
    
    #clear {
    	clear: both;
    }
    
    .tborder h1 {
    	background: #1f1f1f;
    	font-weight: bold;
    	color: #FFFFFF;
    	font-size: 13px;
    	margin:0 0 5px 0px;
    	padding:0 3px;
    	border-top:1px solid #2d2d2d;
    }
    .tborder p {
    	margin:0;
    	padding:0 3px;
    }
    .open {
    	font-weight:bold;
    	color:#80ff80;
    }
    
    .tborder ul {
    	margin:0;
    	padding:0 3px 0 18px;
            list-style-type: circle;
    }
    
    ul a {
    	color: #80ff80;
    }
    
    #header ul li {
    	float: left;
    	margin: .5em;
            margin-top: 4px;
    	padding: 0;
            width:16.6%;
    }
    
    #header ul a {
    	line-height: 1em;
    	padding: .2em;
    	border: 1px solid #000000;
    	float: left;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #aae2ff;
    	background: #1f1f1f;
    	font-size: 1em;
    	font-weight:bold;
    }
    
    #header ul a:hover {
    	line-height: 1em;
    	padding: .2em;
    	border: 1px solid #000000;
    	float: left;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #1f1f1f;
    	background: #aae2ff;
    	font-size: 1em;
    	font-weight:bold;
    }
    
    
    #header ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
    
    #bar {
    	background: #000;
    	height: 15px;
    	margin-left: 5px;
    	margin-right: 160px;
    	margin-bottom: 5px;
    }
    HTML
    Code:
    <div class="tborder">
    				<h1>Forum Topics</h1>
    <ul>
    <?php
    $db_host = "x"; // Change this if your MySQL database host is different.
    $db_name = "x"; // Change this to the name of your database.
    $db_user = "x"; // Change this to your database username.
    $db_pw = "x"; // Change this to your database password.
    $db_prefix = "x"; //Change this to the prefix of the forum database.
    
    $forum_url = "x"; // Change this to reflect to your forum's URL.
    $limit = "7"; // Number of posts displayed.
    $txtlimit = "18"; // This is the character limit.
    
    // Connecting to your database
    mysql_connect($db_host, $db_user, $db_pw) 
    OR die ("Cannot connect to your database"); 
    mysql_select_db($db_name) OR die("Cannot connect to your database"); 
    
    if ($limit) {
    	$limited = "LIMIT $limit";
    }
    
    $thread_sql = mysql_query("SELECT thread.*, forum.title_clean AS forumtitle FROM " . $db_prefix . "thread AS thread LEFT JOIN " . $db_prefix . "forum AS forum ON (thread.forumid = forum.forumid) WHERE thread.visible = 1 AND thread.open = 1 ORDER BY thread.lastpost DESC $limited");
    
    while($thread_get = mysql_fetch_array($thread_sql))
    {
    	echo '<li class="item"><img src="' . $thread_get['forumtitle'] . '.gif" border="0" /> <a href="' . $forum_url . '/showthread.php?p=' . $thread_get['lastpostid'] . '#post' . $thread_get['lastpostid'] . '"><span>' . substr($thread_get['title'], 0, $txtlimit) . '</span></a> ' . $thread_get['replycount'] . '</li>';
    }
    ?>
    </ul>
    		</div>
    		</div>

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    *{
    margin:0;
    padding:0;
    Border:0;
    }
    Try adding this to the start of your css code. It often puts border/padding/margin/problems to rights.
    Also you do not appear to have a Doctype as the first entry of you rmark-up.

    Frank
    Last edited by effpeetee; 12-31-2007 at 02:19 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Tried that, unfortunatly i still have the gap on the left and i still have the bullet points

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It's kinda simple.
    Code:
    ul {
        list-style: none;
    }
    Don't try this if you don't have your lis within a list element, because then it goes very, very wrong =P. Change the selector to address only lists within so-and-so.

  • #6
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I put that code in my css and it didnt work. I then put it in two other places:

    .tborder ul {
    margin:0;
    padding:0 3px 0 18px;
    list-style: none;
    }

    ul a {
    color: #80ff80;
    text-decoration: none;
    list-style: none;
    }

    ul {
    list-style: none;
    }
    And still i have the damn bullet points. If it helps, the link to the site is:

    www.hiven.net/server/motdx.php

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Put this into your css as a class.

    li.nobullet {
    list-style: none; }



    Put this at the start of your list.

    <li class="nobullet"> <ul>
    <li><a href="http://brainstormsandraves.com/articles/semantics/structure">

    http://www.cryer.co.uk/resources/jav...th_bullets.htm

    or if all else fails, use <p> </p>instead of <li> </li>

    Frank
    Last edited by effpeetee; 12-31-2007 at 03:58 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I have tried that, and im afraid it didnt work, i may have done something wrong, but i pasted your top code in my CSS and then put the second code at the start of my list and ended with an </li>.

    I have since removed it, because its getting cluttered with code that doesnt work. Having looked in my page source, it already seems to have a list class called item, but this isnt in my CSS.

    <ul>
    <li class="item"><img src="Premium Admin.gif" border="0" /> <a href="http://www.hiven.net/forums/showthread.php?p=25018#post25018"><span>Fags on server</span></a> 1</li><li class="item"><img src="Members.gif" border="0" /> <a href="http://www.hiven.net/forums/showthread.php?p=25017#post25017"><span>Join The Twl Roste</span></a> 5</li><li class="item"><img src="Recruitment.gif" border="0" /> <a href="http://www.hiven.net/forums/showthread.php?p=25015#post25015"><span>Isolis , the aka47</span></a> 2</li><li class="item"><img src="Recruitment.gif" border="0" /> <a href="http://www.hiven.net/forums/showthread.php?p=25012#post25012"><span>PiiNKvodka</span></a> 13</li><li class="item"><img src="Technical.gif" border="0" /> <a href="http://www.hiven.net/forums/showthread.php?p=25011#post25011"><span>heat sink?</span></a> 9</li><li class="item"><img src="Hive Cafe.gif" border="0" /> <a href="http://www.hiven.net/forums/showthread.php?p=25008#post25008"><span>Somebody brought h</span></a> 15</li><li class="item"><img src="Humour Hub.gif" border="0" /> <a href="http://www.hiven.net/forums/showthread.php?p=24982#post24982"><span>Sexy Girls....moan</span></a> 5</li></ul>
    Did you mean: list-style-type: none not list-style: none?

    EDIT:

    I just saw your edit and changed li to p and it worked, the bullet points are removed! However, im still left with a large gap on the left hand side, much in the same way it was when the bullet point was still there. You can see it at:

    www.hiven.net/server/motdx.php

    Why is it doing that?
    Last edited by spadez; 12-31-2007 at 04:11 PM.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.exitfegs.co.uk/Hive%20MOTD.html

    Try this.
    I added the code I suggested. Perhaps I have not fully understood you.
    Have a look.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    In your example i can see two of the problems i was having. First of all, it is displaying the contents of the different lines on the same line.

    It should be displaying it like this:

    <icon><Thread><Replies>
    <icon><Thread><Replies>
    <icon><Thread><Replies>

    But now its like this:

    <icon><Thread><Replies><icon>
    <Thread><Replies><icon><Thread>
    <Replies><icon><Thread><replies>

    Also, in your example, you are still left with the gap on the left side of the icon that i have on my site. I want the icon to be left aligned, i dont know where this 15px (or something around that) gap is coming from.

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    The forum topics box is much better now without the gap on the left. However something seems to have gone elsewhere with the code because now the left content box is showing under the right column instead of it stopping before it gets there (apart from in firefox where it pushes the right column out of the content area).

    I really appreciate your continuing support.

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It looks OK to me.

    What screen resolution are you using.

    Mine is 1024x768

    Have another look.

    http://www.exitfegs.co.uk/Hive&#37;20MOTD.html

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    This is what it looks like for me:

    http://img228.imageshack.us/img228/2594/imghf0.png

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by spadez View Post
    This is what it looks like for me:

    http://img228.imageshack.us/img228/2594/imghf0.png
    http://www.exitfegs.co.uk/Hive&#37;20MOTD.html

    I have altered the colours to see the divs better. And added a border.

    Try it again

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •