i am experimenting with CSS. i am converting some of my site to CSS to test the benefits and i am having some problems!
<!-- w --><a class="postlink" href="http://www.giggledesign.com">www.giggledesign.com</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.giggledesign.com">http://www.giggledesign.com</a><!-- m -->)
this is the default page. i am doing the navigation and header bar at the top. ignore the content at the moment.
i am trying to make an equivilent of the navigation bar and top bar using CSS rather than tables.
<!-- w --><a class="postlink" href="http://www.giggledesign.com/v2.php">www.giggledesign.com/v2.php</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.giggledesign.com/v2.php">http://www.giggledesign.com/v2.php</a><!-- m -->)
this is what i have achieved so far.
does anybody know how to create rollover links simillar to the ones that use JavaScript?
i realise the ones i have are crap and dont work in most browsrs (xcept IE) and i was hoping to find one that works in most browsers.
can anyone help?Here's a start:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css mouseover basics</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.menu a{
display:block;
float:left;
border:1px solid #fff;
width : 100px;
text-align : center;
background :#ddd;
color : #000;
text-decoration : none;
}
.menu a:hover {
background : #bbb;
color : #00f;
}
.menu a:active{
background : #bbb;
color : #00f;
}
-->
</style>
</head>
<body>
<div class="menu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.mysite.com/"> → link 1 </a><a href="http://www.mysite.com/"> → link 2 </a></div>
</body>
</html>cheers that has helped thank yuo very much!!
does anoybody know how to position the text in the link boxes
<!-- m --><a class="postlink" href="http://www.giggledesign.com/v2.php">http://www.giggledesign.com/v2.php</a><!-- m -->
ie vertical align middle but v align doesn't work
i want the txt to be v aligned middle
but i do not know the css!You might be interested in taming lists (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) for this menu. Take a look at the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Giggle Design Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#nav {
width: 700px;
height: 22px;
line-height: 22px;
color: #fff;
background: #006;
border-top: 1px solid #fff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
}
#nav span {
width: 41px;
color: #000;
background: #035;
float: left;
border-right: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
clear: right;
}
#nav ul li {
border-left: 1px solid #fff;
text-align: center;
float: right;
}
#nav ul li a {
width: 85px;
display: block;
color: #000;
background: #ccc;
text-decoration: none;
}
#nav ul li a:hover {
color: #000;
background: #bbb;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<span> </span>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">HOME</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">ABOUT</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">SERVICES</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">PACKAGES</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">PORTFOLIO</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">CONTACT</a></li>
</ul>
</div>
</body>
</html>cheers pyro, you saved the day again!
anyone ever noticed that these forum pages are based on tables?Originally posted by giggledesign
anyone ever noticed that these forum pages are based on tables?
Well i would consider the posts and replies tabular dataYou are welcome. Also, I'm assuming you will, but try to look at what I did, and learn how I did it.
i did pyro thanks, you can see it [modified] in action!
does anybody know how to resolve the left and right margin problems in I.E?If you want to center the whole site, I'd wrap in in a container div, and set that to margin: auto. Then, set the body to text-align: center (IE 5.0 & 5.5). Now, set the text-align to left in the container div, to get things back to normal. Also, the reason that what you have does not currently work in IE 6, is because you do not have a valid DOCTYPE. Set this to be the very first line of your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">ah thanks, i hadn't noticed i was missing a DOCTYPE. i started the page on DreamWeaver MX and coded it using Notepad. I didn't realise that dreamweaver's default PHP page does not include a DOCTYPE!
how strrange....
There ARE references out there that show you how to make DW produce correct HTML.At one point, I thought the same. Now I'm not so sure.
See, when browsers see a DOCTYPE they assume (or should) that the page is coded according to standards, and render the page according to the DTD specified in the DOCTYPE. In the absence of a valid DOCTYPE, they render the page in quirks mode. It's known as DOCTYPE switching, and the theory behind it is that aurthors who include a full, valid DOCTYPE probably know what they were doing, and put the DOCTYPE there on purpose. Most pages generated by WYSIWYGs (and authors who use such tools) will probably not strictly adhear to standards, so IMO, it is good thing that the default DOCTYPE on such a tool is incomplete.
<!-- w --><a class="postlink" href="http://www.giggledesign.com">www.giggledesign.com</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.giggledesign.com">http://www.giggledesign.com</a><!-- m -->)
this is the default page. i am doing the navigation and header bar at the top. ignore the content at the moment.
i am trying to make an equivilent of the navigation bar and top bar using CSS rather than tables.
<!-- w --><a class="postlink" href="http://www.giggledesign.com/v2.php">www.giggledesign.com/v2.php</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.giggledesign.com/v2.php">http://www.giggledesign.com/v2.php</a><!-- m -->)
this is what i have achieved so far.
does anybody know how to create rollover links simillar to the ones that use JavaScript?
i realise the ones i have are crap and dont work in most browsrs (xcept IE) and i was hoping to find one that works in most browsers.
can anyone help?Here's a start:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css mouseover basics</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.menu a{
display:block;
float:left;
border:1px solid #fff;
width : 100px;
text-align : center;
background :#ddd;
color : #000;
text-decoration : none;
}
.menu a:hover {
background : #bbb;
color : #00f;
}
.menu a:active{
background : #bbb;
color : #00f;
}
-->
</style>
</head>
<body>
<div class="menu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.mysite.com/"> → link 1 </a><a href="http://www.mysite.com/"> → link 2 </a></div>
</body>
</html>cheers that has helped thank yuo very much!!
does anoybody know how to position the text in the link boxes
<!-- m --><a class="postlink" href="http://www.giggledesign.com/v2.php">http://www.giggledesign.com/v2.php</a><!-- m -->
ie vertical align middle but v align doesn't work
i want the txt to be v aligned middle
but i do not know the css!You might be interested in taming lists (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) for this menu. Take a look at the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Giggle Design Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#nav {
width: 700px;
height: 22px;
line-height: 22px;
color: #fff;
background: #006;
border-top: 1px solid #fff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
}
#nav span {
width: 41px;
color: #000;
background: #035;
float: left;
border-right: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
clear: right;
}
#nav ul li {
border-left: 1px solid #fff;
text-align: center;
float: right;
}
#nav ul li a {
width: 85px;
display: block;
color: #000;
background: #ccc;
text-decoration: none;
}
#nav ul li a:hover {
color: #000;
background: #bbb;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<span> </span>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">HOME</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">ABOUT</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">SERVICES</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">PACKAGES</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">PORTFOLIO</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">CONTACT</a></li>
</ul>
</div>
</body>
</html>cheers pyro, you saved the day again!
anyone ever noticed that these forum pages are based on tables?Originally posted by giggledesign
anyone ever noticed that these forum pages are based on tables?
Well i would consider the posts and replies tabular dataYou are welcome. Also, I'm assuming you will, but try to look at what I did, and learn how I did it.
i did pyro thanks, you can see it [modified] in action! does anybody know how to resolve the left and right margin problems in I.E?If you want to center the whole site, I'd wrap in in a container div, and set that to margin: auto. Then, set the body to text-align: center (IE 5.0 & 5.5). Now, set the text-align to left in the container div, to get things back to normal. Also, the reason that what you have does not currently work in IE 6, is because you do not have a valid DOCTYPE. Set this to be the very first line of your document:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">ah thanks, i hadn't noticed i was missing a DOCTYPE. i started the page on DreamWeaver MX and coded it using Notepad. I didn't realise that dreamweaver's default PHP page does not include a DOCTYPE!
how strrange....
There ARE references out there that show you how to make DW produce correct HTML.At one point, I thought the same. Now I'm not so sure.See, when browsers see a DOCTYPE they assume (or should) that the page is coded according to standards, and render the page according to the DTD specified in the DOCTYPE. In the absence of a valid DOCTYPE, they render the page in quirks mode. It's known as DOCTYPE switching, and the theory behind it is that aurthors who include a full, valid DOCTYPE probably know what they were doing, and put the DOCTYPE there on purpose. Most pages generated by WYSIWYGs (and authors who use such tools) will probably not strictly adhear to standards, so IMO, it is good thing that the default DOCTYPE on such a tool is incomplete.