Problem with CSS Code [Archive]

Click to See Complete Forum and Search --> : Problem with CSS Code

Dark Dragon

12-28-2003, 11:54 AM

I am working on a site..I used the CSS Table Template from HTML Kit and used it in Dreamweaver. One problem I encounterd is that the right column pastes itself over to the left on top of the left column..though when previewed it seems fine.

Although in Design view I altered the hieght of the top colum, in preview mode there is still a margin around my image.

As I typed in text for my links I used the <br> tags so the links are right under each other..looks fine in DW but doesn't show in IE preview.

I thought I was doing it right but I guess not. Can someone tell me what things I left out?

P.S..I could've put this in HTML forum but it also entails CSS.

The HTML Code is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<style type="text/css">
p {font-size: 100%}
p2 {font-weight: bold}
body {background-color:#2F4F4F}
a.link {
color: #FFEBCD;
text-decoration: none;
font-weight: regular;
}
a.link:hover {
color: #FFD700;
}

</style>
<title>Page title</title>
</head>
<body>

<div class="topBanner">
<img alt="mishmosttitle (31K)" src="imgs/mishmosttitle.jpg" height="97" width="992" />
</div>

<div class="leftCol">
<p2>Pick a Topic and Prepare to be bored Stiff!</p2>
<p><a href="http://forums.webdeveloper.com" class="link">My Artwork</a><br>
<p><a href="http://forums.webdeveloper.com" class="link">My Game Reviews</a><br>
<p><a href="http://forums.webdeveloper.com" class="link">My Game Tips</a><br>
<p><a href="http://forums.webdeveloper.com" class="link">Web TIps</a><br>
<p><a href="http://forums.webdeveloper.com" class="link">Q and A</a><br>
<p><a href="http://forums.webdeveloper.com" class="link">Useless Info</a><br>
<p><a href="http://forums.webdeveloper.com" class="link">A Few Computer Tips</a><br>
<p><a href="http://forums.webdeveloper.com" class="link">Movies and TV Shows</a><br>

</div>

<div class="rightCol">
<p2>Good Sites to Visit</p2>
<p><a href="http://forums.webdeveloper.com" class="link">Web Developers Forum</a><br>
<p><a href="http://www.teamphotoshop.com" class="link">Team Photoshop</a><br>
<p><a href="http://www.good-tutorials.com" class="link">Good Tutorials.Com</a><br>
<p><a href="http://www.w3schools.com" class="link">W3Schools Tutorials</a><br>
<p><a href="http://www.photoshopcafe.com" class="link">Photoshop Cafe</a><br>
<p><a href="http://www.w3.org" class="link">Web Consortium</a></p>
<p2>Fun Places to Visit</p2>
<p><a href="http://www.vgmusic.com" class="link">VGMusic</a><br>
<p><a href="http://www.nuklearpower.com/index.php" class="link">8-Bit Theater</a><br>
<p><a href="http://www.gametalk.com.com" class="link">GameTalk</a><br>
<p><a href="http://www.videogamedc.com" class="link">Video Game DC</a><br>
<p><a href="http://www.2flashgames.com" class="link">2Flash Games</a><br>
<p><a href="http://www.miniclip.com" class="link">MiniClip</a></p>
<p2>Web and other Utilities</p2>
<p><a href="http://www.chami.com" class="link">Chami.Com</a><br>
<p><a href="http://www.fontfreak.com" class="link">FontFreak</a><br>
<p><a href="http://www.chipmunk-scripts.com" class="link">Chipmunk PHP Scripts</a><br>
<p><a href="http://cgi.resourceindex.com" class="link">CGI Resource Index</a><br>
<p><a href="http://www.lavasoft.com/default.shtml.en" class="link">AdAware Program</a><br>
</div>

<div class="centerCol">
<p>Main Body Code</p>
</div>

</body>
</html>

Paul Jr

12-28-2003, 12:16 PM

I'm not really qualified, so I'll let someone pick a part your code and stuffs ;).

But I took at shot at it, and here's a "cleaned" version of your code.

Dark Dragon

12-28-2003, 12:39 PM

Thanks Paul..I pasted the new code and it works great.

I appreciate your efforts :)

Dark Dragon

12-28-2003, 01:21 PM

One more question please:

I would like to put my diplayed content in the center column..in other words, a user clicks on a link and the content appears in the middle column.

Is this possible and how? Would I have to rewrite the code for the whole page?

TomDenver

12-28-2003, 09:25 PM

So your top and left column would be the same on every page, or very similar? And then the middle column has the content which changes on every page? If so, you could use PHP (assuming your web server suppots PHP) to include the top and nav sections on every page, then change the content part for each page as needed. There's a thread on this forum about this, I think in the General or HTML sections.

I've also written a brief tutorial on it on my site here:
http://www.tom-wallace.com/phpinc.php

Dark Dragon

12-29-2003, 01:50 PM

Thanks but I do not even know PHP. I am still struggling with CSS..guess I am kind an an idiot, eh? :D

But I was thinking of using the same page layout for everything....just alter the text and images as needed. But then again I will run into the problem of reloading as the side and top columns do not need to reload, just the center one.

But I will check out your tutorial though, thanks.

TomDenver

12-29-2003, 06:01 PM

You really don't need to know any PHP to use it. Its very simple.

Dark Dragon

12-29-2003, 07:25 PM

I read your tutorial but due to my stupidity, I didn't understand it.

Since I have a whole page..links and CSS and whatnot...I don't understand what to do..and copy and paste the link codes into a new document?? I assume you mean a new HTML document?? What about the rest of the HTML, CSS and JavaScript code???

I never learned this stuff in business college so I guess I am a wee bit dense, eh?! ;)

TomDenver

12-29-2003, 07:54 PM

Dark Dragon, don't worry about the CSS part of it for using the PHP include. First, does your server support PHP? If not, don't even bother for now as you won't be able to use it.

This works fairly similar to how frames work, but without most of the disadvantages of frames (breaking bookmarks, people viewing page outside the frame, etc.).

Open a normal htm file from your site that has the navigation links code already in it, along with the pages contents. Highlight the code that represents your navigation links. Copy that code (leave the file open and leave the code highlighted), create a new file called "nav.htm" in the same folder. Paste the code into there, save and close the file. Return to the original htm file you opened (with the nav code still highlighted). Now, replace the highlighted code with this:

<?php include 'nav.htm'; ?>

Now your server will see this PHP code, and replace it word for word with whatever you have in your file "nav.htm", and send the finished version to the browser. So the browser will never see this PHP code, because the server replaces it with your navigation code in "nav.htm" before it gets to the browser.

Is this clearer? Maybe I should rewrite my tutorial on my site.

This is a great time saver for me. When I need to add a link or change a link in my navigation, I only have to change one file and it works on the whole site.

If you want, you can also include many other things with PHP like this, like your doctype, external CSS and .JS file links, even your <div> layout structure.. This way your other pages will have considerably less HTML in them, making them easier on the eyes when you need to edit. Typically my .htm files on my server are only 1-2KB, because the navigation and other things are in a different file that I include with PHP.

Paul Jr

12-29-2003, 08:00 PM

Originally posted by TomDenver
<?php include 'nav.htm'; ?>
http://www.w3schools.com/php/php_includes.asp

Dark Dragon

12-30-2003, 10:12 AM

Umm..copy links and paste into new HTML doc and paste the PHP code..is that correct?? Just the links..no div tags, doc types or the CSS for columns?

Okay...I might try that..thanks

TomDenver

12-30-2003, 03:30 PM

You can add whatever code you want into the file you include with PHP. I said just the nav code now to keep it simple. On my site, I include the doctype, links to external css and js files, opening div tags for layout and navigation code.

If you're asking if your "nav.htm" file needs to have opening tags for body, html, head, etc., the answer is no. The file you include does not need to be a complete valid HTML file. You only need the code for your nav links in it.

Dark Dragon

12-30-2003, 08:50 PM

Oh..I see..so basically save a copy of my page..which has the layout I want to use for the whole site, save it as "nav.htm" and add the PHP thing..okay..I get it now..man I am such a dope..thanks once again.

However I also have links on the other side of my page..do I insert the PHP code in that column too?