phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

Space Problem in {NAV_LIST_TOP}

https://forum.phpwcms.org/viewtopic.php?t=6836

Page 1 of 2

Space Problem in {NAV_LIST_TOP}

Posted: Tue 3. May 2005, 21:54
by ssyfrig
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?

Image

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

Posted: Wed 4. May 2005, 01:39
by Sevenupcan
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.

Posted: Wed 4. May 2005, 18:45
by ssyfrig
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

Posted: Wed 4. May 2005, 20:15
by pico
Hi

try this

Code: Select all

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

Posted: Wed 4. May 2005, 21:52
by ssyfrig
Hi Pico

Doesn’t work :(

Sven

Posted: Thu 5. May 2005, 07:57
by trip
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; }*/

Posted: Thu 5. May 2005, 10:56
by pico
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

Posted: Thu 5. May 2005, 12:33
by ssyfrig
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

Posted: Fri 6. May 2005, 07:56
by trip
coool :-)

Posted: Fri 6. May 2005, 08:10
by pico
Hi

you've got it :D

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.

Posted: Fri 6. May 2005, 09:58
by ssyfrig
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

Posted: Fri 6. May 2005, 13:13
by pico
Hi

OK I always use FireFox :)
have now looked in IE and I see (sche** IE) the difference :shock:

Posted: Wed 11. May 2005, 19:30
by ssyfrig
Hi

Does anybody can help me?

If have this issue .....

With IE there is no space between the navigation and the line :-)
Image



with Firebox there are some space :-(
Image


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

Posted: Wed 11. May 2005, 20:59
by pico
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>

Posted: Wed 11. May 2005, 22:42
by ssyfrig
Hi Pico

doesen't work....

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

thanks, Sven
All times are UTC+02:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited