PDA

Click to See Complete Forum and Search --> : Help!

computerpro
11-22-2005, 07:21 PM
Hello all,

Iam having some problems with HTML programming, this problem has occoured to me many time and I want to resolve it for future ref! Okay so iam using Frontpage design view to do the basic arrangement for the page and iam having some problems with alligning some elements. I have the left navigation as a CSS mouse over hover effect and right beside it I want to have a image kind of like www.microsoft.com has it layed out, but whenever I try to insert a picture or even text it go's all crazy and put the picture in between some links on the left nav instead of right beside them!

Please help me!

Thanks!
thewebman
11-22-2005, 08:12 PM
got code? btw, sticky says NOT to use "Help!" or "Need Help" for the name of your thread.
computerpro
11-22-2005, 09:50 PM
Sorry didnt realize that!


Here is the code!


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="description" content=" offers simple software solutions, product enhancment, and product development
">
<meta name="keywords" content="x, Software,Solutions,Development
">
<meta name="copyright" content="www.url.com" />

<title> Downloads</title>
<style>.normalStyle {padding:1px;text-align:left;width:160px;}
.hoverStyle {background:#d0d0d0;border:1px solid #B9B9B9;cursor:hand;padding:0px;text-align:left;width:160px;}</style>


<style>
<!--
a{text-decoration:none}
//-->
</style>


</head>


<body link="#000000" vlink="#000000" alink="#000000">

<p><img border="0" src="ac_bar_g.jpg" width="700" height="20"></p>
<p style="word-spacing: -19; line-height: 0; margin-top: -19; margin-bottom: -19"><img border="0" src="MAIN_Header_001243.jpg" width="700" height="75"></p>

<p style="word-spacing: -19; line-height: 0; margin-top: -19; margin-bottom: -19">&nbsp;</p>

<p align="left"><b><font face="Tahoma"><i>Download Categories&nbsp;</i></font></b></p>

<table bgcolor="#DCDBDB"><tr><td class="normalStyle" onmouseover="this.className='hoverStyle';" onmouseout="this.className='normalStyle';"><font face="Arial">Applications</font></td></tr></table>

<table bgcolor="#DCDBDB"><tr><td class="normalStyle" onmouseover="this.className='hoverStyle';" onmouseout="this.className='normalStyle';"><font face="Arial">Games</font></td></tr></table>
<table bgcolor="#DCDBDB" height="19"><tr><td class="normalStyle" onmouseover="this.className='hoverStyle';" onmouseout="this.className='normalStyle';" height="15"><font face="Arial">Management
tools </font></td></tr></table>
<table bgcolor="#DCDBDB"><tr><td class="normalStyle" onmouseover="this.className='hoverStyle';" onmouseout="this.className='normalStyle';"><font face="Arial">Drivers</font></td></tr></table>
<table bgcolor="#DCDBDB"><tr><td class="normalStyle" onmouseover="this.className='hoverStyle';" onmouseout="this.className='normalStyle';"><font face="Arial">Product
Releases</font></td></tr></table>
<table bgcolor="#DCDBDB"><tr><td class="normalStyle" onmouseover="this.className='hoverStyle';" onmouseout="this.className='normalStyle';"><font face="Arial">Downloads
Search</font></td></tr></table>
<p>&nbsp;</p>
<table border="0" cellpadding="2" width="100%">
<tr>
<td width="100%"></td>
</tr>
</table>

</body>

</html>
ray326
11-22-2005, 11:10 PM
Ok, you need to dump Frontpage and learn to do it right. You need a valid doctype to put browsers (especially IE) into standards rendering mode. You need to get rid of the table markup and make that menu a simple list. You need to move all the inline styles to a style sheet, getting rid of the deprecated markup like <font> and presentation-related attributes in the process.

Here's one realization of your page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="description" content="offers simple software solutions, product enhancment, and product development">
<meta name="keywords" content="x, Software,Solutions,Development">
<meta name="copyright" content="www.url.com" />

<title> Downloads</title>
<style type="text/css">
<!--
h2 {
font-style: italic;
font-size: 1em;
}
a:link, a:visited, a:hover, a:active {
text-decoration:none;
color: #000;
}
#ac_bar {
height: 20px;
width: 700px;
background: #fef url(ac_bar_g.jpg);
}
#header {
width: 700px;
height: 75px;
background: #ffe url(MAIN_Header_001243.jpg);
}
ul#catlist {
background: #DCDBDB;
list-style: none;
margin: 0 0 2em 0;
padding: 0;
width: 160px;
}
#catlist a {
display: block;
width: 100%;
height: 1.5em;
border:1px solid #DCDBDB;
}
#catlist a:hover {
background: #d0d0d0;
border:1px solid #B9B9B9;
}
-->
</style>
</head>

<body>
<div id="ac_bar"></div>
<div id="header"></div>
<h2>Download Categories</h2>
<ul id="catlist">
<li><a href="#">Applications</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Management tools</a></li>
<li><a href="#">Drivers</a></li>
<li><a href="#">Product Releases</a></li>
<li><a href="#">Downloads Search</a></li>
</ul>
<p>Reply With Quote</p>
</body>
</html>
computerpro
11-23-2005, 08:37 AM
Thank you very much!

Can i still use frontpage but just use that code and still beable to use the frontpage design and preview mode?
thewebman
11-23-2005, 04:55 PM
I personally don't like Frontpage, they put in a lot of extra crap into your source code.
computerpro
11-23-2005, 05:19 PM
Could you suggest another editor like frontpage? I like frontpage because of its ftp connections
LiLcRaZyFuZzY
11-23-2005, 06:26 PM
yes you can use frontpage as a text editor and it wont add any junk code to your code if you only use the code view. Just don't use the WYSIWYG functionalities.
computerpro
11-23-2005, 08:31 PM
Yup that is what iam doing,

Supplied with the code provided by ray326 how would I insert some text or a picture to the right of the first hover mouse over button?
NogDog
11-23-2005, 08:35 PM
HTML-Kit (http://www.chami.com/html-kit/) supports opening/saving files across FTP, has powerful editing features and numerous available plug-ins, and is free.
ray326
11-23-2005, 11:57 PM
I used HTML-kit to recode that page.
how would I insert some text or a picture to the right of the first hover mouse over button?I'd start by floating the ul left and adding a div after the list, using one of the standard techniques to cause it to sit to the right of the ul. One of the CSS books in my sig will illustrate it fine.
computerpro
11-24-2005, 07:05 PM
Okay iam learning to do that I downloaded the book
stylin' with CSS: A Designer's Guide
Charles Wyke-Smith
New Riders

I know its lots to ask but where about in the book does is show me how to do that requested things you mentioned above....
ray326
11-24-2005, 11:51 PM
Chaps 4-6
computerpro
11-27-2005, 07:08 PM
Well I cant really find where it shows that.....

Here is my stab at it though


/*
font-size:120%;
*/
body {font-family:verdana, arial, sans-serif; font-size:1em; margin:0px}

p {width:400px; margin: 0; background-color:#CCC; padding:0 20px;}

<ul id="catlist">
<i><font face="Arial" size="2"><b>Main Menu</b></font></i>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>



I dont think that will work though....
LiLcRaZyFuZzY
11-28-2005, 12:51 AM
get rid of <i><font face="Arial" size="2"><b>Main Menu</b></font></i>
instead:
<h3>Main Menu</h3>
/*CSS*/
h3{
font-style: italic;
font-family: arial, verdana, sans-serif;
}
computerpro
11-28-2005, 04:48 PM
Thanks, and those changes will make the buttons float left instead of stretching across the whole page?
LiLcRaZyFuZzY
11-28-2005, 05:03 PM
nope

You want the menu horizontal?
computerpro
11-28-2005, 05:53 PM
Well right now I have the whole left menu nav streched across the page, I want to beable to put text or a image to the right of it.....
aamir619
11-29-2005, 03:47 PM
hi ur against the rules u cant have help as ur post title
thewebman
11-30-2005, 08:18 AM
hi ur against the rules u cant have help as ur post title lol =P
computerpro
11-30-2005, 03:32 PM
hi ur against the rules u cant have help as ur post title

Yes we have already covered that