Space Problem in {NAV_LIST_TOP}

ssyfrig · Post by **ssyfrig** » Tue 3. May 2005, 21:54

Hi all

Can anybody tell me where I can define the red marked spaces?

Kann mir jemand sagen wo ich die rot markierten Abstände definieren kann?

CSS

Code: Select all

/* CSS for the top level list */
#list_top_ul {
	padding: 3px 0;
	margin-left: 0;
	border-bottom: 1px solid #5E747F;
	font: bold 12px Verdana, sans-serif;
}
#list_top_ul li {
	list-style: none;
	margin: 0;
	display: inline;
}
#list_top_ul li a {
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #778;
	border-bottom: none;
	background: #D7DEE5;
	text-decoration: none;
}
#list_top_ul li a:link { color: #5E747F; }
#list_top_ul li a:visited { color: #5E747F; }
#list_top_ul li a:hover {
	color: Black;
	background: #92A1AF;;
	border-color: #227;
}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: white;
	border-bottom: 1px solid white;
}

Template

Code: Select all

<table width="700" height="30" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="192">&nbsp;</td>
              <td width="508" height="15" valign="bottom">{NAV_LIST_TOP}</td>
            </tr>
            <tr>
              <td colspan="2" class="tablesubnavi">&nbsp;</td>
            </tr>
          </table>

thanks, Sven

Sevenupcan · Post by **Sevenupcan** » Wed 4. May 2005, 01:39

If i'm correct in thinking what's causing the space on the left is

Code: Select all

margin-left: 3px;

within the

Code: Select all

#list_top_ul li a

selector. However the spacing at the bottom puzzles me.

I would suggest you change

Code: Select all

#list_top_ul { 
   padding: 3px 0; 
   margin-left: 0; 
   border-bottom: 1px solid #5E747F; 
   font: bold 12px Verdana, sans-serif; 
}

to

Code: Select all

#list_top_ul { 
   padding: 3px 0; 
   margin: 0; 
   border-bottom: 1px solid #5E747F; 
   font: bold 12px Verdana, sans-serif; 
}

And seeing if this has any effect. As browsers render lists (ul, ol, dl) with preset margins and paddins, it is usually best to remove these preset value by setting their margin and padding atributes to 0.

I will have a mess around with this tomorrow when i have some more time.

Best of luck.

ssyfrig · Post by **ssyfrig** » Wed 4. May 2005, 18:45

Thanks for your input. The Problem with the space at the bottom is now fixed. The Problem between the boxes is still open.

Thanks for any additional input

Sven

pico · Post by **pico** » Wed 4. May 2005, 20:15

Hi

try this

Code: Select all

#list_top_ul li a {
	margin-left: 0px;
......

ssyfrig · Post by **ssyfrig** » Wed 4. May 2005, 21:52

Hi Pico

Doesn’t work

Sven

trip · Post by **trip** » Thu 5. May 2005, 07:57

Hi there
check out this site
http://paternoster.co.za/

look at the following CSS used for the site
let me know if it works for you, please make sure you change the colours of the nav

njoy
TriP

Code: Select all

/* CSS for the top level list */
#list_top_ul {
			padding: 3px 0; margin-left:0;
			border-bottom:1px solid #C1D2E4;
			font:12px Arial, Helvetica, sans-serif; text-align:left; }
#list_top_ul li {
			list-style:none;margin:0;display:inline;}
#list_top_ul li a {
			padding: 3px 0.5em;margin-left:3px;border:1px solid #C1D2E4;
			border-bottom: none;background:#eeeeee;text-decoration:none; }
#list_top_ul li a:link { color: #333333; }
#list_top_ul li a:visited { color: #333333; }
#list_top_ul li a:hover {
			color: #333333; background: #FFFFFF; border-color: #0099CC;}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
			background: #C1D2E4; border-bottom: 1px solid #C1D2E4; 
			border-top:1px solid #0099CC;border-left:1px solid #0099CC;border-right:1px solid #0099CC;
			font:12px Arial, Helvetica, sans-serif; }

/* TOP NAV sorts out the position TOP level list*/
ul { margin: 0px 0px 0px 20px; }
/*li { font-size: 11px; list-style: disc; }*/

pico · Post by **pico** » Thu 5. May 2005, 10:56

Hi

here is my css part of this

Code: Select all

/* CSS for the top level list */
#list_top_ul {
	padding: 1px;
	margin-left: 0;
	font-family: Arial, Verdana, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: bold;
}
#list_top_ul li {
	list-style: none;
	margin: 0;
	display: inline;
}
#list_top_ul li a {
	margin-left: 0px;
	text-decoration: none;
	border-bottom-style: solid;
	background-color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-color: #000066;
	border-left-color: #000066;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: #000066;
	border-right-style: solid;
	border-right-width: 1px;
	float: left;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;
	font-size: 10px;
	font-weight: bold;
	border-top-width: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	height: auto;
	border-top-color: #000066;
	border-top-style: solid;
}
#list_top_ul li a:link { color: #5E747F; }
#list_top_ul li a:visited { color: #5E747F; }
#list_top_ul li a:hover {
	color: #000066;
	border-color: #000066;
	background-color: #dddddd;
}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: white;
	border-bottom: 1px solid #778;
}

and you can see it here http://www.hdk-online.de

ssyfrig · Post by **ssyfrig** » Thu 5. May 2005, 12:33

hey thanks for all

I found a solution last night *schnarch*

Code: Select all

/* CSS for the top level list */
#list_top_ul {
	padding-left: 0;
	margin-left: 0;
	color: White;
	float: right;
	font-family: arial, helvetica, sans-serif;
	width: 80%;
}
#list_top_ul li {
	display: inline;
}

#list_top_ul li a {
	padding: 0.2em 1em;
	background-color: #7FA1C0;
	color: White;
	font-size: 10px;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
	border-bottom: 0px solid #fff;
}
#list_top_ul li a:link { color: #FFFFFF; }
#list_top_ul li a:visited { color: #FFFFFF; }
#list_top_ul li a:hover {
	color: Black;
	background: #7FA1C0;
}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: #004381;
	color: #FFFFFF;
	border-bottom: 1px solid #004381;
}

you can see the result on http://www.wyler-consulting.ch/index.php

thanks, Sven

trip · Post by **trip** » Fri 6. May 2005, 07:56

coool

pico · Post by **pico** » Fri 6. May 2005, 08:10

Hi

you've got it

but I would change this

Code: Select all

#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: #004381;
	color: #FFFFFF;
	border-bottom: 0px solid #004381;  <--------here
}

so the Active-Box has the same hight as the rest
looks for me more clean.

ssyfrig · Post by **ssyfrig** » Fri 6. May 2005, 09:58

Hi Pico

Wich Browser do you use?

The 1px border is ok because the active Button should connect the blue line. It works in IE but not in Firefox.

I need to fix this

Regards, Sven

pico · Post by **pico** » Fri 6. May 2005, 13:13

Hi

OK I always use FireFox

have now looked in IE and I see (sche** IE) the difference

ssyfrig · Post by **ssyfrig** » Wed 11. May 2005, 19:30

Hi

Does anybody can help me?

If have this issue .....

With IE there is no space between the navigation and the line

with Firebox there are some space

Template Code

Code: Select all

<table width="767" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="241">{IMAGE:/layout/logo_250x64.gif}</td>
            <td width="526" align="right" valign="bottom">{NAV_LIST_TOP}</td>
          </tr>
          <tr>
            <td height="17" colspan="2">&nbsp;&nbsp;{IMAGE:/layout/navi_underline.gif} </td>
          </tr>
</table>

CSS Code

Code: Select all

#list_top_ul {
	padding-left: 0;
	margin-left: 0;
/*	background-color: #036; */
	color: White;
	float: right;
	font-family: arial, helvetica, sans-serif;
	width: 80%;
}
#list_top_ul li {
	display: inline;
}

#list_top_ul li a {
	padding: 0.2em 1em;
	background-color: #7FA1C0;
	color: White;
	font-size: 10px;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
	border-bottom: 0px solid #fff;
}
#list_top_ul li a:link { color: #FFFFFF; }
#list_top_ul li a:visited { color: #FFFFFF; }
#list_top_ul li a:hover {
	color: Black;
	background: #7FA1C0;
}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: #004381;
	color: #FFFFFF;
	border-bottom: 1px solid #004381;
}

thanks Sven

pico · Post by **pico** » Wed 11. May 2005, 20:59

can't test it now - but I think you can try this

Code: Select all

<table width="767" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr valign="bottom">
            <td width="241">{IMAGE:/layout/logo_250x64.gif}</td>
            <td width="526" align="right">{NAV_LIST_TOP}</td>
          </tr>
          <tr valign="top">
            <td height="17" colspan="2">{IMAGE:/layout/navi_underline.gif} </td>
  </tr>
</table>

ssyfrig · Post by **ssyfrig** » Wed 11. May 2005, 22:42

Hi Pico

doesen't work....

i create a second template for testing http://www.wyler-consulting.ch/index.php?demo

thanks, Sven