7 Replies - 795 Views - Last Post: 08 September 2013 - 02:47 AM

#1 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Horizontal navigation problem with list white space

Posted 07 September 2013 - 10:46 AM

It may be because I coded it wrong (probably) and I don't see the way how to fix that problem. Here is the html part of page:
<html>
	<head>
			<title>Srpska IT Edukacija</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="jquery.js" type="text/javascript"></script>
		<meta name="author" content="Aleksandar Arsic" />
			<meta name="description" content="" />
				<meta charset="UTF-8" />
		<script>
		$(document).ready(function() {
.click(function(event) {
event.stopPropagation();
});
$('.open').toggle(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
});
		</script>
		<script>

		</script>
	</head>
	<body>
		<div id="header">
			<p class="header">Srpska <span style="color:#828282;">IT</span> Edukacija <span class="copyright">Website copyright &copy; Srpska IT Edukacija 2013</span></p>

		</div>
		<div id="block">
		<div id="navigation">
			<ul class="top">
				<li><a href="">Home Page</a></li>
				<li><a href="">About/Bio</a></li>
				<li class="open"><a href="">Tutorials</a></li>
					<ul class="sub">
                		<li><a href="#">Sub Menu Item 1</a></li>
                		<li><a href="#">Sub Menu Item 2</a></li>
                		<li><a href="#">Sub Menu Item 3</a></li>
                		<li><a href="#">Sub Menu Item 3</a></li>
           			 </ul>
				<li><a href="">Contact</a></li>
			</ul>
		</div>
		<div id="main">
				<div id="navigation2">
					<ul>
						<li class="active"><a href="" class="active_link">Tab One</a></li><li><a href="">Tab Two</a></li><li><a href="">Tab Three</a></li>
					</ul>
					<div id="related"> <p class="nav_topic"></p> </div>
				</div>
		</div>

</div>
	</body>
</html>

Here is CSS:
* {
	padding:0px;
	margin:0px;
}
@font-face {
	font-family:Header;
	src: url('Fonts/Header.ttf');
}
@font-face {
	font-family:Header Italic;
	src: url('Fonts/HeaderI.ttf');
}
@font-face {
	font-family:Navigation;
	src: url('Fonts/Navigation.ttf');
}
body {
	background-color:#3b3b3b;
}
#header {
	position:relative;
	background-color:#323232;
	position:relative;
	width:100%;
	height:150px;
}
p.header {
	color:#f7f7f7;
	font-family:Header;
	font-size:40px;
	line-height:120px;
	margin-left:20px;
}
.copyright {
	color:#b9b9b9;
	font-family:Header Italic;
	font-size:18px;
	line-height:150px;
	float:right;
	margin-right:100px;
}
#block {
	display:inline-block;
	width:100%;
}
#navigation {
	float:left;
	width:200px;
	background-color:transparent;

}
#navigation li { 
	list-style: none;
}
ul.top {
	background-color:#3b3b3b;
}
ul.top li {
	line-height:30px;
	color:#787878;
	border-bottom:1px solid #323232;
}
ul.top li :hover {
	background-color:#4f4f4f;
}
#navigation a {
	font-family:Navigation;
	font-size:18px;
 	color: #787878;
 	cursor: pointer;
 	display:block;                
 	text-decoration:none;
 	padding-left:20px;
 	padding-bottom:5px;
}
#navigation a:hover{
 	color:#fff;
}

ul li:hover .sub{
    border-bottom: #323232 solid;
    border-width: 1px;
    display: block;
    position: absolute;
    top: 5px;
    color:#fff;
}
ul.sub {
	list-style:none;
	display:none;
}
ul.sub li {
	background-color:#2f2f2f;
    border: none;
    float:left;
    width:200px;
}
ul.sub li :hover {
	background-color:transparent !important;
}
#main {
	margin-left:200px;
	width:auto;
	height:1000px;
	background-color:#fff;
}
#navigation2 {
	width:100%;
	float:left;
	font-size:0;
}
#navigation2 li {
	padding:20px;
	list-style: none;
	display:inline-block;
	line-height:30px;
	border-right:1px solid #e3e4df;
}
#navigation2 li:hover {
	background-color:#7ac5c0;
}
#navigation2 li a {
	text-decoration:none;
	color:#a5a599;
	font-family:Navigation;
	font-size:18px;
	text-align:center;
}
#navigation2 li a:hover {
	color:#fff;
}
#related {
	width:100%;
	height:40px;
	background-color:#7ac5c0;
}
p.nav_topic {
	color:#fff;
	font-family:Navigation;
	font-size:24px;
	padding-left:30px;
	line-height:40px;
}
.active {
	background-color:#7ac5c0;
}
.active_link {
	color:#fff !important;
}

How to solve second navigation problem?

Is This A Good Question/Topic? 0
  • +

Replies To: Horizontal navigation problem with list white space

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3243
  • View blog
  • Posts: 10,882
  • Joined: 12-December 12

Re: Horizontal navigation problem with list white space

Posted 07 September 2013 - 11:12 AM

What second navigation problem?

Is this a continuation of another topic, because there seems to be a number of details omitted from this post. But, most importantly, what is the question?
Was This Post Helpful? 0
  • +
  • -

#3 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: Horizontal navigation problem with list white space

Posted 07 September 2013 - 12:09 PM

Do you see when you do hover on the second navigation, second list item that there is 1px empty space (line) btw list elements. How to change that to be 0px?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3243
  • View blog
  • Posts: 10,882
  • Joined: 12-December 12

Re: Horizontal navigation problem with list white space

Posted 07 September 2013 - 12:26 PM

There is a line missing from this code:

.click(function(event) {
    event.stopPropagation();
});

(so I currently have an error) and you should remove the empty script tag.
Was This Post Helpful? 0
  • +
  • -

#5 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: Horizontal navigation problem with list white space

Posted 07 September 2013 - 01:53 PM

Empty script tag is there because I plan to add something else there. But, what you just gave me doesn't fix the problem with second navigation :)(Second one is the horizontal one).
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3243
  • View blog
  • Posts: 10,882
  • Joined: 12-December 12

Re: Horizontal navigation problem with list white space

Posted 07 September 2013 - 01:59 PM

I didn't offer a 'fix', I'm saying there is an error in your posted code - a missing statement. I don't wish to invent this statement. If you post the missing line, or lines, then someone should just be able to copy, paste, and run your page, making it easier for them to help you.
Was This Post Helpful? 0
  • +
  • -

#7 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: Horizontal navigation problem with list white space

Posted 07 September 2013 - 04:07 PM

I copy/pasted everything I had on my HTML file and CSS file, nothing is "missing" there.
Was This Post Helpful? 0
  • +
  • -

#8 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: Horizontal navigation problem with list white space

Posted 08 September 2013 - 02:47 AM

Problem is solved, I didn't saw I set borer-right for navigation 2 and that's why there is spacing. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1