webpage:
<!-- m --><a class="postlink" href="http://homepage.mac.com/nemesis_256/test/">http://homepage.mac.com/nemesis_256/test/</a><!-- m -->
css:
<!-- m --><a class="postlink" href="http://homepage.mac.com/nemesis_256/test/scripts/style.css">http://homepage.mac.com/nemesis_256/tes ... /style.css</a><!-- m -->
1. the header looks perfect in Safari and Firefox (Mac, windows too probably), but on IE on windows it gets "extended" some. Pretty much all the way to where the menu would be if I didn't have the -40px to move it back up. How can I make it so there isn't as much black, like in Safari and Firefox?
2.In the 3d section, check the ABC page (second last). Any hints on how I can either center the text under the image to the image, or center the image and the text (while leaving the description left aligned)? I didn't have much luck with this.I have no idea what you're talking about in #2. -- Oh, you mean "three dee" not "third." First I'd recode the section.
<h2>3D Art</h2>
<dl>
<dt>Here's an ABC animation where I gave life to inanimate objects. I think it really
kicks ass, the music really kicks it up a notch. Thanks to my friend Craig for the
idea!</dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://homepage.mac.com/nemesis_256/websitefiles/ABC.mov"
target="_blank"
onclick="window.open('http://homepage.mac.com/nemesis_256/websitefiles/ABC.mov',
'abc','fullscreen=no,toolbar=yes,status=yes,menubar=yes,scrollbars=no,resizable=no,
directories=yes,location=yes,width=718,height=560,left=200,top=150');return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/abc.jpg" alt="" border="0"/></a></dd>
<dd>720 x 480, 4.8 MB</dd>
</dl>
Then apply appropriate styles to everything, including doing an image replacement with your 3dart.gif on the content of the heading. Strings of breaks are never a good idea.first time I see the <dl> tag...how is it different from <ul>? Also I don't see how that was supposed to fix the problem.
I kinda figured that a bunch of breaks wouldn't be good, but the reason I do that is so there's a scroll bar that shows up. If there's no scroll bar, the stuff in the header moves around when switching pages. There's gotta be a way to force the scroll bar right?<dl> is a Definition List. The items in the list (<dt>, <dd>) are related like a word and its definition. <!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/lists.html#edef-DL">http://www.w3.org/TR/html401/struct/lists.html#edef-DL</a><!-- m -->
As far as the scroll bar and the shifting banner, lay out the banner from left or (even better) don't sweat the small stuff.
Don't think of a web page as a printed page. That little shift isn't going to bother anyone. BTW, the breaks don't do the job on my system anyway since I'm running a 1024 height.I'm newbie in CSS, right now I want to fix the banner and navigation bar everytime I will get scroll down the the page. Please help me
This is my code:
#banner
{
height: 83px;
width:753px;
background-image: url(banner3.jpg);
background-repeat: no-repeat;
position:relative;
}
#nav ul
{
padding: 0;
margin: 0;
background-color:#AAA7FE;
width: 753px;
text-decoration: none;
}
#nav ul li
{
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a
{
font-size: x-small;
color: #FFFFFF;
background-color: #AAA7FE;
padding: 0 20px 0 20px;
border-right:0px solid #AAA7FE;
text-align: center;
width: 9em;
text-decoration: none;
}
/*box clor of navigaion bar, rollover*/
#nav ul li a:hover, #nav ul li a:focus{
background-color: #000000;
}
#content p
{
font-size: 80%;
margin: 20px;
}
#content h1
{
font-size: 130%;
color: #003366;
padding: 0;
margin: 20px;
}
li
{
font: 10px verdana;
}
#wrap
{
PADDING-RIGHT: 1em;
PADDING-LEFT: 1em;
PADDING-BOTTOM: 1em;
MARGIN: 0px auto;
PADDING-TOP: 1em;
BACKGROUND-COLOR: #f9f9ee;
TEXT-ALIGN: left;
position: relative;
width: 753px;
}
h1
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
h2
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#footer
{
border-top: 2px solid #AAA7FE;
background-color: #AAA7FE;
color: #000000;
width: 753;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: italic;
}
Here is my html code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Health Vision Pharmaceuticals</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
@import url("main.css");
-->
</style>
</head>
<center>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.htm">About Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"product.htm">Product</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Service</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contactus.htm">Contact Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"otherlink.htm">Other link</a></li>
</ul>
</div>
<div id="wrap">
<h1>
<p>Health Vision Pharmaceuticals</p>
</h1>
<h2>
<p> Cefaclor is a semisynthetic, second generation cephalosporin. It is
acid-stable and is well absorbed from the GI tract. It is excreted unchanged
in urine. Cefaclor is used orally for the treatment of mild to moderate
upper respiratory infections including pneumonia; acute otitis media;
pharyngitis and tonsillitis; and uncomplicated skin and skin structure
or urinary tract infections including pyelonephritis and cystitis. The
most frequent adverse effects reported with Cefaclor include GI effects
(diarrhea, nausea, vomiting), headache, and rash.</p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
</h2>
<h2>
<p>W3Schools - The Largest Web Developers Site On The Net!</p>
</h2>
</div>
</div>
<div id="footer">thanks for helping me</div>
</div>
</body>
</<center>
</html>
<!-- m --><a class="postlink" href="http://homepage.mac.com/nemesis_256/test/">http://homepage.mac.com/nemesis_256/test/</a><!-- m -->
css:
<!-- m --><a class="postlink" href="http://homepage.mac.com/nemesis_256/test/scripts/style.css">http://homepage.mac.com/nemesis_256/tes ... /style.css</a><!-- m -->
1. the header looks perfect in Safari and Firefox (Mac, windows too probably), but on IE on windows it gets "extended" some. Pretty much all the way to where the menu would be if I didn't have the -40px to move it back up. How can I make it so there isn't as much black, like in Safari and Firefox?
2.In the 3d section, check the ABC page (second last). Any hints on how I can either center the text under the image to the image, or center the image and the text (while leaving the description left aligned)? I didn't have much luck with this.I have no idea what you're talking about in #2. -- Oh, you mean "three dee" not "third." First I'd recode the section.
<h2>3D Art</h2>
<dl>
<dt>Here's an ABC animation where I gave life to inanimate objects. I think it really
kicks ass, the music really kicks it up a notch. Thanks to my friend Craig for the
idea!</dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://homepage.mac.com/nemesis_256/websitefiles/ABC.mov"
target="_blank"
onclick="window.open('http://homepage.mac.com/nemesis_256/websitefiles/ABC.mov',
'abc','fullscreen=no,toolbar=yes,status=yes,menubar=yes,scrollbars=no,resizable=no,
directories=yes,location=yes,width=718,height=560,left=200,top=150');return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/abc.jpg" alt="" border="0"/></a></dd>
<dd>720 x 480, 4.8 MB</dd>
</dl>
Then apply appropriate styles to everything, including doing an image replacement with your 3dart.gif on the content of the heading. Strings of breaks are never a good idea.first time I see the <dl> tag...how is it different from <ul>? Also I don't see how that was supposed to fix the problem.
I kinda figured that a bunch of breaks wouldn't be good, but the reason I do that is so there's a scroll bar that shows up. If there's no scroll bar, the stuff in the header moves around when switching pages. There's gotta be a way to force the scroll bar right?<dl> is a Definition List. The items in the list (<dt>, <dd>) are related like a word and its definition. <!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/lists.html#edef-DL">http://www.w3.org/TR/html401/struct/lists.html#edef-DL</a><!-- m -->
As far as the scroll bar and the shifting banner, lay out the banner from left or (even better) don't sweat the small stuff.
Don't think of a web page as a printed page. That little shift isn't going to bother anyone. BTW, the breaks don't do the job on my system anyway since I'm running a 1024 height.I'm newbie in CSS, right now I want to fix the banner and navigation bar everytime I will get scroll down the the page. Please help meThis is my code:
#banner
{
height: 83px;
width:753px;
background-image: url(banner3.jpg);
background-repeat: no-repeat;
position:relative;
}
#nav ul
{
padding: 0;
margin: 0;
background-color:#AAA7FE;
width: 753px;
text-decoration: none;
}
#nav ul li
{
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a
{
font-size: x-small;
color: #FFFFFF;
background-color: #AAA7FE;
padding: 0 20px 0 20px;
border-right:0px solid #AAA7FE;
text-align: center;
width: 9em;
text-decoration: none;
}
/*box clor of navigaion bar, rollover*/
#nav ul li a:hover, #nav ul li a:focus{
background-color: #000000;
}
#content p
{
font-size: 80%;
margin: 20px;
}
#content h1
{
font-size: 130%;
color: #003366;
padding: 0;
margin: 20px;
}
li
{
font: 10px verdana;
}
#wrap
{
PADDING-RIGHT: 1em;
PADDING-LEFT: 1em;
PADDING-BOTTOM: 1em;
MARGIN: 0px auto;
PADDING-TOP: 1em;
BACKGROUND-COLOR: #f9f9ee;
TEXT-ALIGN: left;
position: relative;
width: 753px;
}
h1
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
h2
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#footer
{
border-top: 2px solid #AAA7FE;
background-color: #AAA7FE;
color: #000000;
width: 753;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: italic;
}
Here is my html code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Health Vision Pharmaceuticals</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
@import url("main.css");
-->
</style>
</head>
<center>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.htm">About Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"product.htm">Product</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Service</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contactus.htm">Contact Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"otherlink.htm">Other link</a></li>
</ul>
</div>
<div id="wrap">
<h1>
<p>Health Vision Pharmaceuticals</p>
</h1>
<h2>
<p> Cefaclor is a semisynthetic, second generation cephalosporin. It is
acid-stable and is well absorbed from the GI tract. It is excreted unchanged
in urine. Cefaclor is used orally for the treatment of mild to moderate
upper respiratory infections including pneumonia; acute otitis media;
pharyngitis and tonsillitis; and uncomplicated skin and skin structure
or urinary tract infections including pyelonephritis and cystitis. The
most frequent adverse effects reported with Cefaclor include GI effects
(diarrhea, nausea, vomiting), headache, and rash.</p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
<p>Cefaclor is a semisynthetic, second generation cephalosporin. It is acid-stable
and is well absorbed from the GI tract. It is excreted unchanged in urine.
Cefaclor is used orally for the treatment of mild to moderate upper respiratory
infections including pneumonia; acute otitis media; pharyngitis and tonsillitis;
and uncomplicated skin and skin structure or urinary tract infections
including pyelonephritis and cystitis. The most frequent adverse effects
reported with Cefaclor include GI effects (diarrhea, nausea, vomiting),
headache, and rash. </p>
</h2>
<h2>
<p>W3Schools - The Largest Web Developers Site On The Net!</p>
</h2>
</div>
</div>
<div id="footer">thanks for helping me</div>
</div>
</body>
</<center>
</html>