I am building a home page for myself. I just started it, so nothing much is up. I want to create a list of links below the logo. I was planning on using a <ul> for this inline, and setting the appropriate background image for out and over. When setting the background-image for the list items the image becomes truncated and the text is out of alignment. There is also a space between the logo and the link divs, even though they are in the same container (cnt). How do I fix these problems. I have posted the two images I am using below the logo to give an idea what I am working with. Here is the page thus far: <!-- m --><a class="postlink" href="http://www.mjmcdonaldfam.com/mypage/home.htm">http://www.mjmcdonaldfam.com/mypage/home.htm</a><!-- m -->
Here is the 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" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
background-color:gray;
background-image:url(background2.gif);
margin:0;
padding:0;
}
div#cnt {
width:700px;
margin:0 auto;
padding:0;
}
div#mainlinks {
width:700px;
margin:0 0 0 0;
padding:0;
background-color:#fff;
}
-->
</style>
</head>
<body>
<div id="cnt">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"logo.gif" alt="logo" />
<div id="mainlinks">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"button2.gif" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"button_over2.gif" />
</div>
</div>
</body>
</html>
Thanks.Just a quick observation: DO NOT COMMENT OUT SCRIPTS AND STYLES IN XHTML. In XHTML browsers are allowed to completely ignore anything inside a comment. Your best bet is to switch to HTML 4.01 Strict anyway, but at least use XHTML 1.0 Strict or XHTML 1.1.Your best bet is to switch to HTML 4.01 Strict anyway, but at least use XHTML 1.0 Strict or XHTML 1.1.
How can I switch to 4.01 strict and "at least use XHTML 1.0 Strict" also? Also, how do I achieve what I am looking for in my original question?On the commented out styles... my browser seems to still be obeying my css. Is it just on some browsers that xhtml completely ignores the comments?Your browser is behaving that way because your server is telling everybody that your page is HTML and so the browser is foillowing the HTML rules. But why would you have XHTML pretending to be HTML when HTML works better?Ok. You cleared the html xhtml stuff up a little for me. Some of it still confuses me, but I am still learning. What about my original question how should I lay out my links with a list and a background, html/xhtml aside. Just help me format my page. Ray 326, you always have good input, any help?This might be a starting point.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Conforming HTML 4.01 Template</title>
<base href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.mjmcdonaldfam.com/mypage/" />
<style type="text/css">
body {
background:gray Url(background2.gif);
margin:0; padding:0;
}
div#cnt {
width:700px;
margin:0 auto;
padding:0;
}
div#mainlinks {
width:700px;
margin:0; padding:0;
background: #000;
}
#mainlinks ul {
list-style:none;
margin:0; padding:0;
height: 45px;
}
#mainlinks li {
margin:0; padding:0;
float:left;
}
#mainlinks li a {
display:block;
background: url(button2.gif);
width: 100px;
height: 45px;
font-size: 20px;
text-decoration: none;
text-align: center;
line-height: 45px;
color: #fff;
}
#mainlinks li a:hover {
background: url(button_over2.gif);
color: #f00;
}
</style>
</head>
<body>
<div id="cnt">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"logo.gif" alt="logo" />
<div id="mainlinks">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link four</a></li>
</ul>
</div>
</div>
</body>
</html>Thanks Ray. I appreciate the help.
Here is the 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" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
background-color:gray;
background-image:url(background2.gif);
margin:0;
padding:0;
}
div#cnt {
width:700px;
margin:0 auto;
padding:0;
}
div#mainlinks {
width:700px;
margin:0 0 0 0;
padding:0;
background-color:#fff;
}
-->
</style>
</head>
<body>
<div id="cnt">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"logo.gif" alt="logo" />
<div id="mainlinks">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"button2.gif" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"button_over2.gif" />
</div>
</div>
</body>
</html>
Thanks.Just a quick observation: DO NOT COMMENT OUT SCRIPTS AND STYLES IN XHTML. In XHTML browsers are allowed to completely ignore anything inside a comment. Your best bet is to switch to HTML 4.01 Strict anyway, but at least use XHTML 1.0 Strict or XHTML 1.1.Your best bet is to switch to HTML 4.01 Strict anyway, but at least use XHTML 1.0 Strict or XHTML 1.1.
How can I switch to 4.01 strict and "at least use XHTML 1.0 Strict" also? Also, how do I achieve what I am looking for in my original question?On the commented out styles... my browser seems to still be obeying my css. Is it just on some browsers that xhtml completely ignores the comments?Your browser is behaving that way because your server is telling everybody that your page is HTML and so the browser is foillowing the HTML rules. But why would you have XHTML pretending to be HTML when HTML works better?Ok. You cleared the html xhtml stuff up a little for me. Some of it still confuses me, but I am still learning. What about my original question how should I lay out my links with a list and a background, html/xhtml aside. Just help me format my page. Ray 326, you always have good input, any help?This might be a starting point.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Conforming HTML 4.01 Template</title>
<base href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.mjmcdonaldfam.com/mypage/" />
<style type="text/css">
body {
background:gray Url(background2.gif);
margin:0; padding:0;
}
div#cnt {
width:700px;
margin:0 auto;
padding:0;
}
div#mainlinks {
width:700px;
margin:0; padding:0;
background: #000;
}
#mainlinks ul {
list-style:none;
margin:0; padding:0;
height: 45px;
}
#mainlinks li {
margin:0; padding:0;
float:left;
}
#mainlinks li a {
display:block;
background: url(button2.gif);
width: 100px;
height: 45px;
font-size: 20px;
text-decoration: none;
text-align: center;
line-height: 45px;
color: #fff;
}
#mainlinks li a:hover {
background: url(button_over2.gif);
color: #f00;
}
</style>
</head>
<body>
<div id="cnt">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"logo.gif" alt="logo" />
<div id="mainlinks">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link four</a></li>
</ul>
</div>
</div>
</body>
</html>Thanks Ray. I appreciate the help.