7 replies [Last post]
homchz
Offline
Enthusiast
Last seen: 13 years 47 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Here is what I have done to achieve the attached.

It works in all browsers I have tested it in, but seems a bit redundant.

Any tips on how to reduce this?

<div class="navheader">
				<div class="textcenterbold">New Investor Information</div>
			</div>
			<div class="navbox"> 
				<div class="navboxtexth1"><a href="YankeeInfo.php">Company Information</a></div>
				<div class="navboxtexth1"><a href="Invest.php">Investment Seminars</a></div>
				<div class="navboxtexth1"><a href="STPD.php">St. Patrick's Day Trade Show</a></div>
		  </div>
		</div>
			<div class="navheader">
				<div class="textcenterbold">Equipment Navigation</div>
			</div>
			<div class="navbox">
				<div class="navboxtexth1">Laundromat Equipment</div>
				<div class="navboxtexth2"><a href="SpeedQueen.php">Speed Queen</a></div>
				<div class="navboxtexth2"><a href="Huebsch.php">Huebsch</a></div>
				<div class="navboxtexth2"><a href="Milnor.php">Pellerin Milnor</a></div>
				<div class="navboxtexth1">OPL/Commercial Equipment</div>
				<div class="navboxtexth2"><a href="MilnorCom.php">Pellerin Milnor</a></div>
				<div class="navboxtexth2"><a href="Chicago.php">Chicago Dryer Company</a></div>
				<div class="navboxtexth2"><a href="SpeedQueenCom.php">Speed Queen</a></div>
				<div class="navboxtexth2"><a href="HuebschCom.php">Huebsch</a></div>
				<div class="navboxtexth1"><a href="MiscEquip.php">Misc. Equipment</a></div>
			</div>

IanCube
IanCube's picture
Offline
Regular
NY
Last seen: 16 years 16 weeks ago
NY
Timezone: GMT+5
Joined: 2004-08-09
Posts: 19
Points: -1

Simplification

Can you explain further what you're actually doing?

Thanks,

Ian

homchz
Offline
Enthusiast
Last seen: 13 years 47 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Simplification

Just making a NavBar:

But I have two different font sizes in the bar with different magins

I have the .navbox class and then

the .navboxtexth1 class and
.navboxtexth2 class

named just so I know what they are for.

After reading a few sites and articles, it seems that there are simpler ways to do this but have not been able to follow tutorials for what I am doing, as easily as just making many classes. However I am sure I am missing something.

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 17 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

Simplification

You could easily reduce it to...

<div id="nav">
<h2 class="top">New Investor Information</h2>
<h3><a href="YankeeInfo.php">Company Information</a></h3>
<h3><a href="Invest.php">Investment Seminars</a></h3>
<h3><a href="STPD.php">St. Patrick's Day Trade Show</a></h3>
<h2>Equipment Navigation</h2>
<h3>Laundromat Equipment</h3>
<ul>
<li><a href="SpeedQueen.php">Speed Queen</a></li>
<li><a href="Huebsch.php">Huebsch</a></li>
<li><a href="Milnor.php">Pellerin Milnor</a></li>
</ul>
<h3>OPL/Commercial Equipment</h3>
<ul>
<li><a href="MilnorCom.php">Pellerin Milnor</a></li>
<li><a href="Chicago.php">Chicago Dryer Company</a></li>
<li><a href="SpeedQueenCom.php">Speed Queen</a></li>
<li><a href="HuebschCom.php">Huebsch</a></li>
</ul>
<h3><a href="MiscEquip.php">Misc. Equipment</a></h3>
</div>

Or something along those lines...

homchz
Offline
Enthusiast
Last seen: 13 years 47 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Simplification

Thanks,

If I understand correctly I would then set classifications for the

h1, h2, h3, elements within the div?

every time I tried to use a h1, h2 ect.. my layout get messed up as it spaces things very wierdly.

would it then be?

#nav h1{xxxxx:xxxx;}

and so on?

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 17 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

Simplification

Yes, that's correct. As I was playing around with it, I used the following stylesheet for that html

#nav {
 background:#369;
 border:1px solid #369;
 color:#369;
 font:9px/1.4 verdana;
 width:200px;
}
#nav h2 {
 background:#f2f2f2;
 display:block;
 font:bold 12px verdana;
 margin:7px 0 0;
 padding:3px 2px;
 text-align:center;
}
#nav h2.top {
 margin:0;
}
#nav h3, #nav h3 a {
 background:#f2f2f2;
 display:block;
 font:normal 12px verdana;
 margin:0;
 padding:0 2px;
 text-align:left;
 text-decoration:none;
}
#nav ul {
 background:#f2f2f2;
 list-style:none;
 margin:0;
 padding:0;
}
#nav ul li {
 font:9px verdana;
 margin:0;
 padding:0 0 0 5px;
}
a {
 color:#369;
}
a:hover {
 color:#f00;
}

kallywag
Offline
Regular
Last seen: 13 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

Simplification

well as far as i can see there's not a whole lot of unnecessary markup here, but if you wanted to clean it up a little, you could do one of the following:

a) specify h1 and h2 tags for the .navbox class and then use <h1></h1> etc to markup your links. css eg.

<style type="text/css">
.navbox h1 {attributes}
.navbox h2 {attributes}
</style>

<html>
<div class="navbox">
<h1><a href="#">Header</a></h1>
<h2><a href="#">Link1</a></h2>
<h2><a href="#">Link2</a></h2>
<h1><a href="#">Header</a></h1> etc......
</div>
</html>

or

b) you could specify .navbox anchors to render as you have navboxtexth2 set up since those are the majority of the links, and then create a .navbox child anchor that specifies what you want to be different from the default anchor. eg.

<style type="text/css">
.navbox a {attributes currently set for .navboxtexth2}
.navbox a.header {attributes currently set for .navboxtexth1}
</style>

<html>
<div class="navbox">
<a href="#" class="header">Header</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#" class="header">Header</a> etc.....
</div>
</html>

That should save you at least a little redundancy. Hope that's what you're talking about.

homchz
Offline
Enthusiast
Last seen: 13 years 47 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Simplification

Thank you all very much it helped out greatly.