...

View Full Version : CSS Help - Cant find source of the gap



spadez
12-31-2007, 02:10 PM
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.


http://img231.imageshack.us/img231/3783/csshelpzm2.png

James

spadez
12-31-2007, 02:12 PM
CSS

@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


<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>

effpeetee
12-31-2007, 02:16 PM
*{
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

spadez
12-31-2007, 02:25 PM
Tried that, unfortunatly i still have the gap on the left and i still have the bullet points :(

Apostropartheid
12-31-2007, 02:53 PM
It's kinda simple.
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.

spadez
12-31-2007, 03:12 PM
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

effpeetee
12-31-2007, 03:50 PM
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/javascript/html5_fun_with_bullets.htm

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

Frank

spadez
12-31-2007, 04:08 PM
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?

effpeetee
12-31-2007, 04:16 PM
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

spadez
12-31-2007, 04:25 PM
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.

effpeetee
12-31-2007, 04:55 PM
http://www.exitfegs.co.uk/Hive&#37;20MOTD.html

Try again and comment

Frank

spadez
12-31-2007, 05:22 PM
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.

effpeetee
12-31-2007, 05:27 PM
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

spadez
12-31-2007, 05:34 PM
This is what it looks like for me:

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

effpeetee
12-31-2007, 05:46 PM
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

spadez
12-31-2007, 06:07 PM
http://img341.imageshack.us/my.php?image=csshelp2wt3.png

This is what it looks like on my screen at the moment, ive zoomed in where you can see the left content box under the right one.

effpeetee
12-31-2007, 06:47 PM
I am still puzzled. If you can see the borders, and I can; they cannot be under anything unless it was transparent. That is why I put the border there and coloured them.

What screen resolution are you using. I use 1024x768 because it is the most used. It may be the problem while we are seeing differently.

Frank

spadez
12-31-2007, 06:55 PM
The left content box can be seen between the content boxes on the right. If you look below the top content box on the right (i.e server), you can see the left content box.

This should clear things up:

http://img233.imageshack.us/img233/7808/csshelp3to1.png


1064 x 768 is my resolution btw, but when i increase my resolution to the same as yours, it still occures

effpeetee
12-31-2007, 07:51 PM
Sorry friend, but I have come to the end of my knowledge now.
This is the best that I can do.
I'll leave the result on my site for the next month or so in case somebody else can help you.

Best of luck,

Have another look.

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

Frank

EDIT: I think that you could have used <ol> instead of <ul> to get rid of the bullets.
I'll put it to the test and find out.
2nd EDIT: Yes it does work. You can use <ol> instead of <ul>. You would need to modify the divs.classes that point to ul and make them ol.
http://www.exitfegs.co.uk/Hive%20MOTD.html

effpeetee
01-01-2008, 01:39 PM
This is the added css and can be modified to alter the position of the divs.
The Markup has been altered to take them in.

Frank



div.c4 {Z-INDEX: 100; LEFT: 10px; WIDTH: 74.9&#37;; POSITION: absolute; TOP: 50px; HEIGHT: 305px}
div.c3 {Z-INDEX: 101; LEFT: 748px; WIDTH: 17.65em; POSITION: absolute; TOP: 209px; HEIGHT: 222px}
div.c2 {Z-INDEX: 102; LEFT: 776px; WIDTH: 16.85em; POSITION: absolute; TOP: 148px; HEIGHT: 51px}
div.c1 {Z-INDEX: 100; LEFT: 777px; WIDTH: 13.64em; POSITION: absolute; TOP: -1px; HEIGHT: 128px}

bazz
01-03-2008, 08:49 PM
Sorry if this brings you back a few stages but, it should help you in the longer term.


Put this into your css as a class.

li.nobullet {
list-style: none; }




Not necessary. just add {list-style-type : none;} to your existing css for the list.





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




Not recommended.
If you haven't got your html validated, then why worry about using css? use <ul><li></li></ul> and then we can help you get the css ok.

I looked at the link you posted but can't seem to find any list to help you with.

I have found your 'grey menu' which should be in a list (just as the one above it in the source is done). The you can style the li's to be grey.

hth

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum