So obviously I still have some things to learn because as I'm developing this site, I'm having problems in Firefox. I typically have issues with IE, but everything is looking pretty good in IE6. Could someone please help with the following?
First off, the link: http://www.stonescapesofcincinnati.com
1.) In FF, why is my navigation bar off center? This is aligning properly in IE, and in Dreamweaver. 2.) How come my background image for my container is not repeating vertically? I have set the repeat-y in my style sheet.
Here is my CSS:
/* CSS Document */
body { background: url(top_head_bg.jpg) repeat-x left top; background-color: #E8E4D6; margin: 0; padding: 0px; }
1) never use dreamweaver design view. It will make you want to destroy things... no matter how easy it looks you will never be able to make something in design veiw that works in all browsers - if it even works in one. Your menu isnt centred because you have not reset the default indent of your UL list. just add padding:0; to your ul#nav
2) Your background container is repeating the image, its just set to height: 13px; so its only 13px high... :)
To be honest, if you don't know how to code HTML/CSS it would be quicker for you to learn how than to try and design something with a WYSIWYG editor. Never trust dreamweavers design view to tell you "its working" because trust me, it wont. lol
1) put all images into the imges folder and changed the pointers accoedingly 2) made changes to HTML code, changed code is below, added page-wrap to HTML code and made it 768px wide and other changes
<div id=\"left-main\"> <p class=\"justify\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam faucibus mi eu purus. Sed commodo, ante non feugiat blandit, sem est sodales purus, sit amet tincidunt est libero id quam. In arcu. Aenean viverra rutrum est. Cras lorem nibh, commodo sit amet, dignissim non, mollis sed, odio. Sed sagittis, ante non lobortis hendrerit, ante eros porta nulla, sit amet tempus dui ante vel felis. Integer auctor, dui sit amet tristique molestie, dui elit lacinia nulla, vitae placerat ligula turpis non ante. Duis a velit eu diam suscipit aliquet. Suspendisse potenti. Morbi mollis. Cras quis ligula malesuada quam suscipit pretium. Aenean aliquet odio id justo. </p> </div> <!--End Left div -->
<div id=\"right-main\"> <p class=\"justify\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam faucibus mi eu purus. Sed commodo, ante non feugiat blandit, sem est sodales purus, sit amet tincidunt est libero id quam. In arcu. Aenean viverra rutrum est. Cras lorem nibh, commodo sit amet, dignissim non, mollis sed, odio. Sed sagittis, ante non lobortis hendrerit, ante eros porta nulla, sit amet tempus dui ante vel felis. Integer auctor, dui sit amet tristique molestie, dui elit lacinia nulla, vitae placerat ligula turpis non ante. Duis a velit eu diam suscipit aliquet. Suspendisse potenti. Morbi mollis. Cras quis ligula malesuada quam suscipit pretium. Aenean aliquet odio id justo. </p> </div> <!--End Right div -->
<div id=\"bottom\"> <p> </p> </div> <!-- End bottom div-->
</div> <!--End Container div -->
</div>
3) made some changes to CSS code
/* CSS Document */
body { background: url(images/top_head_bg.jpg) repeat-x left top; background-color: #E8E4D6; margin: 0; padding: 0; }
.centeredImage { text-align: center; margin: 0; padding: 20px 0; }
Thanks for the pointers. I don't use Dreamweaver Design View, just use the code view, so I'm only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.
Thanks for the pointers. I don't use Dreamweaver Design View, just use the code view, so I'm only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.
Thanks for the pointers. I don't use Dreamweaver Design View, just use the code view, so I'm only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.
Thats the best news I have had all night :D[/quote]
You must be having a very slow night.
...If you're still online, could you make a suggestion on what is the best way to create a drop down box? For the 'Our Services' drop down, I need to have a list that contains like 6 options. I know I could go with Javascript, PHP, or CSS (or combination there of), but still learning this, what would be easiest? I'll obviously be looking around the net for sample code to help me along the way.
here is an example of a Multilevel Dropdown Menu, jquery is used to accommodate IE6, used this when I wrote the web site http://www.kingsvillecurling.com
Thanks for that link, it was real helpful. I'm about 95% done with figuring out everything in the drop down, but I've run into 2 small formatting issues. Both of these need to be looked at in Firefox as I've not tried implementing the jQuery part of the code yet (although my formatting is off in IE too!).
1.) On the right side of my navigation screen, you can see the nav icons don't extend all the way across the nav bar. This is especially noticeable if you rollover the 'Contact Us' link. 2.) Rolling over 'Our Services' you can see the drop down menu is wider than the nav icon (which is set at 148px). I can't figure out why, but I have a feeling that both of these issues are related.
I think I've identified the problem with the #nav li a.home { call in my CSS, but I can't figure out what to do with it. Can someone take a look?
#nav li{ float:left; position:relative; width: 148px; /*I added to make tabs 148 px wide*/ }
#nav ul { position:absolute; display:none; width:148px; top:38px; } #nav li ul a{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; width:148px; /* I think this sets the dropdown width but it's appearing too wide*/ float:left; padding: 0px 5px; line-height: 30px; }
#nav li ul a:hover { color:#ffffff; text-decoration: underline; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }
1) #nav, #nav ul ==> line-height: 38px 2) #nav ul ==> width: 151px (still needs work) 3) #nav ul ==> width: 138px (compenstaes for 5px padding left and right) 4) #nav li ul a ==> width: 138px
this solves some of your problems with the layout. still working on the nav stuff
I added an ID to enclose the UL basically to use it to add the background and then keep the ul separate from it. This allows me to centre the ul and give it a width of 740px, 5x148.
CSS:
body { background: url(images/top_head_bg.jpg) repeat-x left top; background-color: #E8E4D6; margin: 0; padding: 0; }
#nav li{ float:left; position:relative; width: 148px; /*I added to make tabs 148 px wide*/ }
#nav ul { position:absolute; display:none; width:138px; top:38px; }
#nav li ul a{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; width:138px; /* I think this sets the dropdown width but it's appearing too wide*/ float:left; padding: 0px 5px; line-height: 30px; }
#nav li ul a:hover { color:#ffffff; text-decoration: underline; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }
I have included all of the CSS even though I have only made a couple of changes, added id of #navbar, and dropped margin-left on home tab, and set element widths.
#nav li ul a{ border:1px solid #333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width:138px; /* I think this sets the dropdown width but it's appearing too wide*/ float:left; padding: 0px 5px; line-height: 30px; }
So obviously I still have some things to learn because as I'm developing this site, I'm having problems in Firefox. I typically have issues with IE, but everything is looking pretty good in IE6. Could someone please help with the following?
First off, the link:
http://www.stonescapesofcincinnati.com
1.) In FF, why is my navigation bar off center? This is aligning properly in IE, and in Dreamweaver.
2.) How come my background image for my container is not repeating vertically? I have set the repeat-y in my style sheet.
Here is my CSS:
1) never use dreamweaver design view. It will make you want to destroy things... no matter how easy it looks you will never be able to make something in design veiw that works in all browsers - if it even works in one. Your menu isnt centred because you have not reset the default indent of your UL list. just add padding:0; to your ul#nav
2) Your background container is repeating the image, its just set to height: 13px; so its only 13px high... :)
To be honest, if you don't know how to code HTML/CSS it would be quicker for you to learn how than to try and design something with a WYSIWYG editor. Never trust dreamweavers design view to tell you "its working" because trust me, it wont. lol
1) put all images into the imges folder and changed the pointers accoedingly
2) made changes to HTML code, changed code is below, added page-wrap to HTML code and made it
768px wide and other changes
3) made some changes to CSS code
tweaked it up a bit,
how does that look h2o skier?
Al
Thanks for the pointers. I don't use Dreamweaver Design View, just use the code view, so I'm only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.
Thats the best news I have had all night :D
That looks great! Thank you for taking a look at this as well. I need to go back and see what the both of you did so I can learn from my mistakes.
Thats the best news I have had all night :D[/quote]
You must be having a very slow night.
...If you're still online, could you make a suggestion on what is the best way to create a drop down box? For the 'Our Services' drop down, I need to have a list that contains like 6 options. I know I could go with Javascript, PHP, or CSS (or combination there of), but still learning this, what would be easiest? I'll obviously be looking around the net for sample code to help me along the way.
http://www.kriesi.at/archives/create-a- ... via-jquery
here is an example of a Multilevel Dropdown Menu, jquery is used to accommodate IE6,
used this when I wrote the web site http://www.kingsvillecurling.com
Al
CSS only is a good option but you do need a JS for IE's rediculas "im not going to let :hover work on anything but links" crap... :)
Thanks for that link, it was real helpful. I'm about 95% done with figuring out everything in the drop down, but I've run into 2 small formatting issues. Both of these need to be looked at in Firefox as I've not tried implementing the jQuery part of the code yet (although my formatting is off in IE too!).
1.) On the right side of my navigation screen, you can see the nav icons don't extend all the way across the nav bar. This is especially noticeable if you rollover the 'Contact Us' link.
2.) Rolling over 'Our Services' you can see the drop down menu is wider than the nav icon (which is set at 148px). I can't figure out why, but I have a feeling that both of these issues are related.
I think I've identified the problem with the #nav li a.home { call in my CSS, but I can't figure out what to do with it. Can someone take a look?
Link:
http://www.stonescapesofcincinnati.com
CSS
body {
background: url(images/top_head_bg.jpg) repeat-x left top;
background-color: #E8E4D6;
margin: 0;
padding: 0;
}
.centeredImage {
text-align: center;
margin: 0;
padding: 20px 0;
}
.justify {
text-align: justify;
}
#page-wrap {
width: 768px;
margin: 0 auto;
}
#header {
background: url(images/top_head.jpg) no-repeat left top;
height: 150px;
width: 100%;
margin:0 auto;
}
/*START NAVIGATION*/
#nav {
background: url(images/nav_bg.jpg) no-repeat;
height: 38px;
width: 100%;
margin: 0 auto;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:36px;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#615B4A;
}
#nav li{
float:left;
position:relative;
width: 148px; /*I added to make tabs 148 px wide*/
}
#nav ul {
position:absolute;
display:none;
width:148px;
top:38px;
}
#nav li ul a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width:148px; /* I think this sets the dropdown width but it's appearing too wide*/
float:left;
padding: 0px 5px;
line-height: 30px;
}
#nav li ul a:hover {
color:#ffffff;
text-decoration: underline;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
#nav li a.home {
background: url(images/nav_home.png) no-repeat bottom center;
width: 148px;
/*left: 10px;*/
margin-left: 14px;
text-indent: -9999px;
}
ul#nav li a.services {
background: url(images/nav_services.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
ul#nav li a.about {
background: url(images/nav_about.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
ul#nav li a.diy {
background: url(images/nav_diy.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
ul#nav li a.contact {
background: url(images/nav_contact.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
#nav a.home:hover,
#nav a.about:hover,
#nav a.services:hover,
#nav a.diy:hover,
#nav a.contact:hover {
background-position: top center;
}
/*END NAVIGATION*/
#container {
clear: both;
background: url(images/sides.jpg) repeat-y;
width: 100%;
margin: 0 auto;
margin-top: 0px;
}
#left-main {
float: left;
width: 360px;
padding-left: 25px;
padding-top: 10px;
font-weight: bold;
display: inline; /* For IE6. DM Bug */
}
#right-main {
float: right;
width: 330px;
padding-right: 25px;
padding-top: 10px;
font-weight: bold;
display: inline; /* For IE6. DM Bug */
}
#bottom {
clear: both;
background: url(images/bottom.jpg) no-repeat;
height: 29px;
width: 100%;
margin-top: 0px;
margin-bottom: 20px;
margin: 0 auto;
}
1) #nav, #nav ul ==> line-height: 38px
2) #nav ul ==> width: 151px (still needs work)
3) #nav ul ==> width: 138px (compenstaes for 5px padding left and right)
4) #nav li ul a ==> width: 138px
this solves some of your problems with the layout. still working on the nav stuff
Al
HTML:
I added an ID to enclose the UL basically to use it to add the background and then keep the ul separate from it.
This allows me to centre the ul and give it a width of 740px, 5x148.
CSS:
I have included all of the CSS even though I have only made a couple of changes, added id of #navbar, and dropped
margin-left on home tab, and set element widths.
Al
#nav a:link, #nav a:active, #nav a:visited{
display:block;
/*border:1px solid #333;*/
color:#fff;
text-decoration:none;
background-color:#615B4A;
}
now the tabs line up on both the left and right sides
Al
#nav li ul a{
border:1px solid #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width:138px; /* I think this sets the dropdown width but it's appearing too wide*/
float:left;
padding: 0px 5px;
line-height: 30px;
}
Al
Thanks for the time spent looking. I plan on updating this tonight when I have some more time.