Zymic Webmaster Forums > Problems With Css/html

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

k.digennaro

Aug 25 2008, 11:15 PM

Well I'm working on a site that has a drop down menu, I decided to code it in CSS/HTML to make it easy. Although the code is simple, it's quite long and can get confusing to look at. So what I did was created a separate CSS/HTML for the actual nav bar. Now my problem is I don't want to have to see all the code for the HTML document. I'm confusing myself so I probably lost you guys...lol. To sum it up, I want to have two sets of CSS/HTML one for my menu, and one for my basic layout etc. I know that in order to call my css documents I just add another link, for instance:

CODE

But how do I make it so it will retrieve the data from the other HTML document? Do I do something like;

CODE

?

I don't think it's necessary to post my code for these elements but if you need/would like to see to it let me know.

Thanks guys,
Kevin

wozzym

Aug 25 2008, 11:25 PM

its actually just simpler to have one html document, and then a bunch of external css pages. I know you want to split the html up, but really theres no point unless your using an iframe.

k.digennaro

Aug 25 2008, 11:30 PM

I guess, its just that the code is kind of annoying lol. I guess I can just type the rest of the code then paste it into it so i dont have to look at it lol.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
</head>
<body>
<div id="menu">
<ul>
  <li><h2>Home</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="Home Page">Home</a>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>About Us</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="About Us">Who Am I?</a></li>
      <li><a href="http://www.nascentdescent.com" title="About Us">What is my goal?</a>
			<li><a href="http://www.nascentdescent.com" title="About Us">How do I plan on suceeding?</a>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Portfolio</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="SEO Consultants Directory Example">Web Templates</a></li>
			<li><a href="http://www.nascentdescent.com">Paintings</a>
			<li><a href="http://www.nascentdescent.com">Photos</a>
      <li><a href="http://www.nascentdescent.com">Vectors</a>
        <ul>
          <li><a href="#">People</a>
					<li><a href="#">Objects</a>
					<li><a href="#">Cars</a>	
					<li><a href="#">Places</a>	
                </li>
							</li>
						</li>
			        </li>
						</li>		
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Contact Us</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="About Us">Email Me</a></li>
      <li><a href="http://www.nascentdescent.com" title="About Us">Send me a letter</a>
			<li><a href="http://www.nascentdescent.com" title="About Us">Give me a Call</a>
      </li>
    </ul>
  </li>
</ul>							
</div>
</body>
</html>

Iono why this code is driving me crazy...lol its really not that bad lol

Banjo

Aug 25 2008, 11:42 PM

Well if you don't want to look at the menu code then you can paste it into a .js file and link the file to the html document where you want your menu to appear.

k.digennaro

Aug 25 2008, 11:46 PM

is that hard to do? I dont use JS often. Could you post an example?

Thanks,
Kevin

Banjo

Aug 25 2008, 11:54 PM

yeh its kinda long way though, but i posted on another forum ages ago. Read this.

If you need any help with it just ask.

k.digennaro

Aug 26 2008, 12:16 AM

that links broken banjo

CODE

The error returned was:

Sorry, the link that brought you to this page seems to be out of date or broken.

Banjo

Aug 26 2008, 12:34 AM

urrr....... works for me, anyway ill post it here then.

The Javascript File
Save this as include.js

CODE

document.write('Click Below Now<br>');
document.write('<a href="test4.html"> Cruels </a><br>');
document.write('Click Above');

If you want more items just add

CODE

document.write('Anything you want here');

How to use it
Place this where you want it to appear on your page.

CODE

k.digennaro

Aug 26 2008, 12:58 AM

thanks banjo, ill try that out'

edit: i think the problem with the link was that im not registered to that forum

Andrew

Aug 26 2008, 12:58 AM

why not just use a php include?

<?php include("file.html"); ?>

Simple and effective. Does what you need with one line. Done and Done.

k.digennaro

Aug 26 2008, 01:02 AM

hmmmm, trippin, do i need to have a php file then? or simply just the code you posted in my html?

MrTouz

Aug 26 2008, 02:50 AM

Yes to use includes you will need pup files... But not hard to do, just save the file as .php via your favorite text editor. It's easier that way so you can add any php later which is something you will want since php makes everything simpler.

Really suggested.

Andrew

Aug 26 2008, 06:04 AM

Yea the only change you need to make is to have your file (index.html for example) changed to index.php (or any other filename.php)

k.digennaro

Aug 26 2008, 08:25 PM

hmmm it doesnt seem to be working, maybe i'm using it wrong?

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DiGennaroDesigns</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="index12.css" media="screen" />
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />

</head>

<body>
	<center>
<!-------------------Nav Bar Starts-------------------!>
  			<?php include("menu.php"); ?>	
<!-------------------Nav Bar Ends-----------------------!>

    </center>
  
    <div id="menubar">
   This is a test. This is a test. This is a test.
	</div>
	
	<div id="left">
	This is a colum of text. Right here I will put text for different text things, if I want to tell you something I type it here. Typing is fun especially when you can type very fast. If you like to type you could send me an email, we could be typing buddies .
	</div>


</body>
</html>

MrTouz

Aug 27 2008, 02:00 AM

No the code is correct but is your page a .php page ? not the menu.php (tho it has to be) but also the page where you are posting this include.

k.digennaro

Aug 27 2008, 02:22 AM

ah, that makes sense, it wasn't, now it is, but its still not working

Andrew

Aug 27 2008, 05:55 AM

Haha, a small mistake. Your comment is the wrong syntax. Remove the ! from the end of both comments and it will work.

Remember a comment should look like this  not 

Thats why I love having an html editor that highlights the code. I knew that was it when the whole code after you comment went grey. (the color for comments in my editor)

I suggest you get one, helps stupid mistakes like that all the time. (And no you aren't stupid, just the mistake is and it's irritating.)

MrTouz

Aug 27 2008, 06:32 PM

Agreeing with Tripin here, text editors just save your time from stuff like this. The highlighting is just perfect.

i suggest wordpad++

k.digennaro

Aug 27 2008, 07:41 PM

thanks guys, I actually used PHP designer 08 when i coded that, It didnt catch that, maybe i have to edit the settings so it will

MrTouz

Aug 28 2008, 12:16 AM

the <!- something -> is for HTML
php will use // something
css will use /* something */

that's probably why it did not catch it, you have a 'php' editor. No seriously, wordpad++ is free and is made for like 20 different languages and the main ones we use here (html / css / php)

k.digennaro

Aug 28 2008, 12:38 AM

thanks for the tip mr touz, i just wanted to try out php desing08 so im using the trial, ill try out wordpad++

eNVoXia

Aug 29 2008, 05:45 PM

I know that when you have a portion of your site that includes a lot of detailed visual styles it can make your stylesheet look overwhelming. At the same time, there's no need to have two stylesheets. Personally, I would copy and paste the menu styles into the main stylesheet and separate the styles with something like this

CODE

*/ Body Styles */
body {all body styles here}

*/ Menu Styles /*
menu {all menu styles here}

It may just make it easier for you to sort through should you have to go back and edit any of your styles.

MrTouz

Aug 29 2008, 06:53 PM

What you have above might not work :

it should be

CODE

/* Someting */

the '*' inside the '/'

But yea... its much simpler, and if you have really long stylesheets (because you are going to once you stop using tables and use divs only) well you will get use to adding /* here */ and than searches will be a lot easier.

Definitely suggested.

k.digennaro

Aug 29 2008, 07:55 PM

QUOTE(MrTouz @ Aug 29 2008, 06:53 PM)

What you have above might not work :

it should be

CODE

/* Someting */

Thanks guys, I dont use tables, never did, just use divs makes it a lot easier

.

Any ways iono why I like to have them seperate from the html I like to make things organized and i guess i feel separating them makes it more organized, but generally when Im typing a good i create it all in one html then if i decide to 'organize' ill move it to a separate css

MrTouz

Aug 29 2008, 10:45 PM

Well don't get us wrong.

you should separate your HTML from your CSS, just don't make thousand of CSS pages.

k.digennaro

Aug 29 2008, 11:01 PM

o haha i don't generally i have one css and one html, for this particular thing i wanted to create two htmls and twoo css's because the code for the nav bar was longgggggggggg....lol but im just gona take care of it with php

MrTouz

Aug 30 2008, 10:06 PM

You found the best solution, PHP

i guess you'll be using includes

But don't be afraid of long codes... more there is.. fun it is !

eNVoXia

Aug 30 2008, 10:16 PM

QUOTE(MrTouz @ Aug 29 2008, 06:53 PM)

What you have above might not work :

it should be

CODE

/* Someting */

Actually that was more of a type-o. I know, I still provided him with false information but having a newborn on your lap and a few other children tugging on your leg while you're trying to take 10 minutes to yourself to browse the web (or in this case check out the forum) can prove to be quite a chore. I'll remind myself to lay them down for their naps before I try to pretend to be useful again.

MrTouz

Aug 30 2008, 11:46 PM

QUOTE(eNVoXia @ Aug 30 2008, 10:16 PM)

NP at all

we all provided false info at least once (or twice

)

Just reminding him so he does not go crazy of nothing works but his actual code being clean

Hahhahaha happened so many times !

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.