|
CSS - Navigation Bar Doesn't Line Up
http://i.domaindlx.com/wheelofgod/kingjames.asp
The navigation bar isn't lining up I use Mozilla Firefox and the 2 images "examples" and "articles" are not in the column no matter how hard I tried. This might be a CSS problem. This is what I have: Code: /* Layout Stylesheet */
body {
margin:10px;
background:#FFFFFF;
color: #333333;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:1050px;
margin:auto;
}
#hdr {
height:60px;
background:#9ACD32;
color: #333333;
}
#bar {
height:25px;
background:#688E23;
color: #FFFFFF;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #FFCC80;
color: #FFFF33;
width:650px;
padding:0;
}
#l-col {
font: Verdana;
float:left;
background:#9ACD32;
color: #333333;
width:120px;
}
#cont {
width:800px;
background:#FFFFFF;
font: verdana;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:25px;
background:#9ACD32;
color: #FFFFFF;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Code: /* Presentation Stylesheet */
h3, p {
margin:0;
padding:15px;
}
h4 {
margin:0;
padding: 5px 0;
}
p:first-letter {
font-size: 80%;
font-weight: bold;
color:blue;
}
/*<![CDATA[*/a.piclink:active{color:red;background-color:grey;text-decoration:none}
a.piclink:visited{color:blue;background-color:grey;text-decoration:none}
a.piclink:hover{color:#B36B00;background-color:white;text-decoration:none}/*]]>*/
Similar TutorialsHey, i made a header in with some space to get a navigation line over. So i put it in its place with css but when i zoom in or out it won't stay in the middle like evrything else, i tried evrything, display:block, margin:0px, position:absolute Hi, Could someone please help me to fix this error in my code. I created this website for my school, http://www.rit.edu/~cie/ but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this. Thanks in advance Been trying to figure out why my links in my navigation bar (id="extra") won't line up horizontally -- they keep stacking vertically. Can someone please tell me what I'm doing wrong? Thanks. The important bits are below... Code:
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #999966;}
div#extra{background:#a4c2c2; text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#fff}
div#footer{background: #999966;color: #333300}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left:200px; background: #fff}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{width:100%}
</style>
<body>
<div id="container">
<div id="header">
<h1 class="logo">Sowanee's</h1>
</div>
<div id="extra"><div class="navText"> <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> </div>
</div>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong></p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
Hi, I have the following horizontal navigation bar: Code: ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:956px;
font-size:13px;
font-weight:bold;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ background:#ADFF2F;
color:#000000;
}
<ul id="List" style="position:absolute;left:0px;top:90px;">
<li><a style="width:91px;" href="">something something</a></li>
............ </ul>
The trouble is when the window is resized (maximized or minimized) at certain points the last list overflows and appears on the next line. How can I prevent this, that is, keep the list on one line when the window is resized. Note I have tried using position:relative and putting the above inside <div> but neither solution worked. If the above code cannot be modified I wonder if someone has a horizontal navigation bar that does what I want. I will be very grateful for all help. Hi, This is my code Code: <style type="text/css">
#leftcolumn {
float: left;
width: 10%;
text-align: center;
margin: 30px auto;
}
#rightcolumn {
float: left;
width: 25%;
text-align: center;
margin: 30px auto;
}
</style>
<div id="leftcolumn">
<p>Left 1</p>
</div>
<div id="rightcolumn">
<p>Right 1</p>
</div>
<div id="leftcolumn">
<p>Left 2</p>
</div>
<div id="rightcolumn">
<p>Right 2</p>
</div>
I expected it to be centered and both left and right 1 and 2 to be on the same line each left and right I want to start on a new line, although currently they are both on the same line, how can I do this Thanks Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Exactly that question. I got this menu from a website. 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>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I'm pretty new to CSS, but I've managed to put together a website based from a psd, that validates and everything has gone well. My menu, however, is pretty shoddy. I have everything positioned the way I want it, but what I want to do is convert the lists inside from dropping down to being horizontal parallell to the nav bar itself. From: --- --- --- --- | | To: _ _ _ --- --- --- --- The site is here. Ignore the issues with the absolute positioning; its because of the ads at the top, and it doesn't affect the nav bar. I am desperatefor some help, it is ridiculous to figure out. Anyone who can help me, I would be crazy grateful. Thanks, Tom Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
/*BEGINNING OF CSS*/
body{
padding: 0px;
background-color: #000000;
font-family: Verdana;
color: #FFFFFF;
text-align: center;
}
div.container {
margin: 0 auto;
padding: 0px;
width: 1024px;
text-align: left;
}
div.left {
float: left;
}
div.right {
float: right;
}
div.logo {
margin: 0 auto;
background-position: top center;
text-align: center;
}
div.header {
text-align: center;
padding-top: 0px;
}
div.navigation {
background-color: #000000;
background-image: url(http://i39.tinypic.com/igm16v.jpg);
overflow: auto;
}
div.content {
background-color: #000000;
background-image: url(http://i39.tinypic.com/2ce2qus.jpg);
overflow: auto;
height: 525px;
margin: 0 auto;
}
div.footer {
background-color: transparent;
background-image: url(http://i39.tinypic.com/2vjsbrp.jpg);
overflow: auto;
height: 290px;
padding: 0px;
margin: 0 auto;
}
p.head {
text-align: left;
font-size: 24px;
}
p.content {
position: relative;
font-size: 12px;
}
a.main {
text-decoration: none;
font-size: 18px;
padding: 8px;
color: #FFFFFF;
background-color: transparent;
}
a.sub {
font-size: 16px;
line-height: 150%;
text-align: left;
text-decoration: none;
color: #999999;
background-color: transparent;
}
a.plain {
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-color: transparent;
}
a.plainfoot {
text-decoration: none;
font-size: 12px;
color: #959595;
opacity: 90%;
background-color: transparent;
border-bottom: 1px solid #0d0f10;
opacity: 100%;
}
#nav, #nav ul {
margin: 0 auto;
padding: 0px;
list-style: none;
}
#nav a.main {
display: block;
margin-left: 5px;
}
#nav a.sub {
display: block;
width: 150px;
margin-left: 5px;
}
#nav li {
float: left;
width: 5em;
}
#nav li ul {
position: absolute;
width: 1em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li ul {
position: absolute;
padding: 7px;
width: 1em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
font-family: lucida grand;
}
h1.footer {
position: relative;
font-size: 18px;
color: #123712;
margin-bottom: 0%;
margin-left: 50px;
}
p.footer {
font-size: 12px;
color: #909090;
margin-left: 50px;
max-width: 200px;
text-decoration: none;
}
h1.main {
font-size: 28px;
font-weight: 200;
margin-left: 140px;
padding: 0;
text-shadow: #959595;
}
p.content {
font-size: 12px;
color: #FFFFFF;
line-height: 130%;
margin-left: 140px;
max-width: 450px;
text-decoration: none;
}
div.date {
background-color: transparent;
background-image: url(http://i39.tinypic.com/xnc3de.jpg);
background-repeat: no-repeat;
padding: 0px;
margin-top: 17px;
margin-left: 0px;
}
h1.main2 {
font-size: 28px;
font-weight: 200;
margin-left: 140px;
text-shadow: #959595;
}
p.content2 {
font-size: 12px;
line-height: 130%;
margin-left: 140px;
max-width: 450px;
text-decoration: none;
}
div.date2 {
background-color: transparent;
background-image: url(http://i39.tinypic.com/xnc3de.jpg);
background-repeat: no-repeat;
padding: 0px;
min-height: 100px;
margin: 0px;
}
div.sidebar {
background-color: transparent;
background-image: url(http://i41.tinypic.com/2r76kpu.jpg);
background-repeat: no-repeat;
background-position: top right;
padding: 0px;
min-height: 200px;
margin-top: 15px;
margin-right: 15px;
}
div.datetext1 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: 200;
color: #FFFFFF;
left: auto;
top: 382px;
padding-top: 262px;
padding-left: 44px;
}
div.dateid1 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 24px;
font-weight: 300;
color: #123712;
left: auto;
top: 382px;
padding-top: 281px;
padding-left: 47px;
}
div.datetext2 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: 200;
color: #FFFFFF;
left: auto;
top: 382px;
padding-top: 44px;
padding-left: 44px;
}
div.dateid2 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 24px;
font-weight: 300;
color: #123712;
left: auto;
top: 382px;
padding-top: 63px;
padding-left: 47px;
}
div.sidebarhead {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 18px;
font-weight: 200;
color: #123712;
text-align: center;
left: auto;
top: 400px;
padding-top: 15px;
padding-left: 630px;
}
div.sidebartext {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 10px;
color: #FFFFFF;
line-height: 130%;
text-align: left;
max-width: 168px;
left: auto;
top: 400px;
padding-top: 50px;
padding-left: 610px;
}
/*END OF CSS*/
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<title>Obsidian Recording Front Page</title>
</head>
<body>
<div class="container">
<div class="left">
<img src="http://i39.tinypic.com/14j6nsz.jpg" alt="left column"/>
</div>
<div class="right">
<img src="http://i40.tinypic.com/b4yir5.jpg" alt="right column"/>
</div>
<div class="logo">
<img src="http://i40.tinypic.com/2u77lua.jpg" alt="logo"/>
</div>
<div class="header">
<img src="http://i41.tinypic.com/1178qo6.jpg" alt="header"/>
</div>
<div class="navigation">
<ul id="nav">
<li><a class="main" href="http://www.obsidianrecording.com">Home</a></li>
<li><a class="main" href="#">Music</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/featured">Featured</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/artists">Artists</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/artists/thisisthefall">My Band</a></li>
</ul>
</li>
<li><a class="main" href="http://www.obsidianrecording.com/design">Design</a></li>
<li><a class="main" href="#">Store</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/store/recording">Recording</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/store/design">Design</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/store/music">Music</a></li>
</ul>
</li>
<li><a class="main" href="#">About</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/about/rates">The Rates</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/about/studio">The Studio</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/about/tomhoneyman">Tom Honeyman</a></li>
</ul>
</li>
</ul>
</div>
<div class="content"
<div class="date">
<div class="sidebar"
<h1 class="main">Cast into Shadows</h1>
<p class="content">The first band ever to record at Obsidian Recording was Cast into Shadows. I'd like to shout out to Donnie, Evan, Josh, Brian, and J.T. for being the first group to come through here and for making a kickass record along the way. You can find more about them in the Artists section of the site.</p>
</div>
</div>
<div class="date2">
<h1 class="main2">Website Launched!</h1>
<p class="content2">After a looong time working on this site, I've finally finished just in time for summer! What you can expect is a lot of updates on what artists who record here are doing, free downloads, cool videos of their shows, special rates just for people who visit the site, and more. If you'd like to contact me, all my information and more is in the About section of the site. <br /><br /> Thanks for visiting, and I hope you enjoy!</p>
</div>
<div class="datetext1">Jun</div>
<div class="dateid1">1</div>
<div class="datetext2">Jun</div>
<div class="dateid2">7</div>
<div class="sidebarhead">New Website!</div>
<div class="sidebartext">Welcome to the all-new Obsidian Recording site! I will regularly update with news, special rates, videos, featured free downloads, and more.</div>
</div>
<div class="footer">
<br /><br /><br />
<h1 class="footer">Recent Projects</h1>
<p class="footer"><a class="plainfoot" href="www.obsidianrecording.com/artists/castintoshadows">Cast into Shadows</a><br /><br /><a class="plainfoot" href="http://www.obsidianrecording.com/artists/thisisthefall">This is the Fall</a></p>
</div>
</div>
</body>
</html>
I have a nice little vertical navigation block that I would like to use in multiple pages within the same website. I would like to use the nav block without repeating the code, but I can't figure out how to do it. I have put the code in navigation.htm. What do I do next? Hello. So I'm trying to make my html more semantic, so I'm trying to avoid divs and spans as much as possible. I'm trying to make an unordered list navigation, but it shows up really choppy in IE7. However, the moment I change it from <ul id="navigation"> to <div id="navigation">, it works perfectly. Just for semantics sake I'd like to see if I could keep the ul working. Here's the html code, it validates xhtml strict so you don't have to worry about that. 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <title>Eagle Steel Buildings</title> </head> <body> <div id="wrapper"> <img id="banner" src="images/global/banner.jpg" alt="Eagle Steel Building"/> <ul id="navigation"> <li><a href="" class="selected">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Our Work</a></li> <li><a href="">Free Quote</a></li> <li><a href="">Contact Us</a></li> </ul> <h1>Steel Building Construction</h1> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <form id="quoteform" action="quote_home.php" method="post"> <fieldset> <label for="name">Name</label><input type="text" name="name" id="name" /> <label for="date">Date</label><input type="text" name="date" id="date" /> <label for="phone">Phone</label><input type="text" name="phone" id="phone" /> <label for="email">Email</label><input type="text" name="email" id="email" /> <label for="location_zip_code">Location Zip Code</label><input type="text" name="location_zip_code" id="location_zip_code" /> <label for="width">Width</label><input type="text" name="width" id="width" /> <label for="length">Length</label><input type="text" name="length" id="length" /> <label for="sidewall_height">Sidewall Height</label><input type="text" name="sidewall_height" id="sidewall_height" /> </fieldset> </form> </div> </body> </html> And here's the CSS, also validated. Code:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Begin Page Styles */
.btest{border:1px solid #FFFFFF;}
body {
background: #CCCCCC URL('../images/global/steelbg.jpg') top left;
margin: 0px;
padding: 0px;}
#wrapper{
margin: 0px auto;
width: 1010px;
height: 1000px;
background: URL('../images/global/wrappershadow.png') repeat-y;}
#banner{
display: block;
margin: 0px auto;
width: 1000px;
height: 250px;
}
#navigation{
display: block;
margin: -2px auto 0px;
width: 1000px;
height: 38px;
list-style-type:none;
background: #000000 URL('../images/global/navbg.png') no-repeat;}
#navigation a{
float: left;
height: 39px;
line-height: 2.3em;
margin-top:3px;
padding-left: 13px;
padding-right: 13px;
font-size: 1.0em;
font-family: Verdana, serif;
text-decoration: none;
font-weight: bold;
color: #CCCCCC;
text-align: center;}
#navigation a:hover, #navigation a.selected{
text-decoration: underline;}
#navigation a.selected{
color: #ff0000;}
I have not finished styling the rest of the page, I am only concerned with the navigation right now. I appreciate your time and effort! Hey guys I am currently having an issue with a CSS Navigation. I was wondering if anyone was available to help me out. http://schoolwide.sgajewski.com/menu/ I am currently having an issue with IE 7. It seems to be working in every other browser but the second level of the navigation is offset lower in IE7. The spacing starts off 1 pixel two low and progressively the gap gets wider. Code:
ul.vertical, ul.vertical li {
margin:0;
padding:0;
list-style-type:none;
font-size:100%;
}
ul.vertical {
position:absolute;
z-index:1000;
cursor:default;
width:180px;
left:1em;
top:4.05em;
}
ul.vertical li {
position:relative;
text-align:left;
cursor:pointer;
cursor:hand;
width:180px;
margin:-1px 0 0 0;
padding-bottom:0px!important;
padding-bottom:1px;
float:left;
clear:both;
top:0;
left:0;
}
ul.vertical ul {
z-index:1020;
cursor:default;
position:absolute;
width:197px;
margin:0 0 0 179px;
top:-100em;
left:-1px;
padding:1px 0 0 0;
height:0px;
overflow:hidden;
}
ul.vertical ul li {
width:197px;
}
ul.vertical ul ul {
margin: 0 0 0 179px;
}
@media Screen, Projection {
ul.vertical li:hover > ul { top:0; height:auto; overflow:visible; }
}
ul.vertical a, ul.vertical a:visited {
display:block;
cursor:pointer;
cursor:hand;
background:url(images/bg.jpg);
padding:5px 7px;
font:normal normal bold 0.7em tahoma, verdana, sans-serif;
color:#008000;
text-decoration:none;
letter-spacing:1px;
}
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
background:url(images/bg_over.jpg);
color:#806020;
}
ul.vertical .outtop {background:url(images/bg_over_top.jpg);}
ul.vertical .outbg {background:url(images/bg_over_mid.jpg);}
ul.vertical .outbot {background:url(images/bg_over_bot.jpg);}
ul.vertical ul a,
ul.vertical ul a:hover,
ul.vertical ul a:visited,
ul.vertical ul a:active
ul.vertical ul a:hover,
ul.vertical ul a:focus,
ul.vertical ul a.rollover,
ul.vertical ul a.rollover:visited
{
background-image:none;
}
@media screen, projection {
* html ul.vertical li {
display:inline;
f\loat:left;
background:#ffffff;
}
}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }
Any help on why this is offset in IE7 would be great. Thanks in advance. Hello, I'm new to the forum and not very good with CSS yet. I'm slowly moving from tables to CSS. I set up a sample page to describe the problem I'm having but the forum won't allow me to post the URL here. I have a vertical CSS "LI" navigation section in the left hand sidebar of this web page and it works perfectly in every Mac browser I try it on (very latest Mac versions of Opera, Firefox, Safari, Chrome, Camino, Omniweb, etc.). There's a white, 1-pixel horizontal spacer/separator line between each link in the left sidebar which is supposed to be 220 pixels wide. It is 220 pixels wide on all the Mac browsers I try it on but for some reason, as soon as I try the web page in IE 7 or IE 8, the white horizontal 1-pixel divider line is shorter and ends up being only 195 pixels wide and throws the whole, nice and "even" look off. I don't understand where the 25 pixels are disappearing to in IE 7 and IE 8. Can anyone offer any insight as to what the fix may be or what I've done wrong? Below is the code I've used to create the navigation. Thanks so much. HTML Code: Code: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</A></li> <li><a href="#">On To Page 2</A></li> <li><a href="#">On To Page 3</A></li> <li><a href="#">On To Page 4</A></li> <li><a href="#">On To Page 5</A></li> </ul> </div> CSS Code: Code: #navlist {
padding-left: 25px;
margin-left: 0;
width: 220px;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid white;
}
#navlist li a {
background: transparent url(../images/list_off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #277eb1;
text-decoration: none;
line-height: 30px;
}
#navcontainer ul li a:hover {
background: transparent url(../images/list_on.gif) left center no-repeat;
color: #da251c;
}
#navcontainer ul li a#current {
background: transparent url(../images/list_active.gif) left center no-repeat;
color: #999999;
}
How is this navigation done on the top of the page? I looked at the CSS and all the javascript. I can't see how the drop down is created? I tried to replicate it and copied the background images. I can get the menu to show and rollovers work. Just the drop down won't work. http://jmadvertising.com/ hi, i was wondering if anyone knw any links to ultra super dooper cool websites for css navigations. I want to learn how to do ace ones. I have already googleed about, I found the sliding doors on ALA an stuff but i need that little bit more cool tutorials prefrably!! I did find one cool one athttp://www.bulkherbstore.com/ thanks tom. Hi all, I have a very simple question.. my mouseover is ALMOST working properly. However when you mouse over the box colour changes, but the text only changes when you are DIRECTLY over the text. How can I fix this? Check the communities drop down for an example of my problem. Here is my temp site URL: edit: I can't post links yet?!?! PM me for link Thanks! The Problem: I want my logo (a gif image) to justify to the left but padding centers it. Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)? Please email me for urls to see exactly what I'm working with. Many thanks in advance! |
|||||||