CSS - Noobie Dreamweaver Help
Hi everyone. I am completely new to web design. I am using Dreamweaver 8 pro.
I have found out that I like the background image feature to layers very much. It is very much better than tables. Unfortunately, I can't find a way to have layers be centered in reference to the browser (The way I can align tables). Is there any way to do this? Please help. Thanks, Newbie Similar Tutorialsrite ive made my site and ive used quite a bit in css but im having a slight problem heres a quick my rough design so far http://www.sinergy-media.com/14/test2.php and heres the css http://www.sinergy-media.com/14/css.css im having a problem with the headers that say menu ads and links, ive put them in h3 tags then tried formatting the h3 tag on my css and its not working, any suggestions? I have a site I am creating in Joomla - I'm not getting help from them, so maybe it's just a css problem that I can't figure out. Here's the css because I'm not allowed to post the url /* COMMON STYLE --------------------------------------------------------- */ html, body, form, fieldset {art margin: 0; padding: 0; background-color: #B8E700; background-image: none; text-align: center; } body { font-family: Arial, Helvetica, sans-serif; line-height: 150%; text-align: center; } body.contentpane { width: auto; /* Printable Page */ margin: 1em 2em; line-height: 1.3em; margin: 0px 0px 0px 0px; font-size: 12px; } body.fs1 { font-size: 10px; } body.fs2{ font-size: 11px; } body.fs3{ font-size: 12px; } body.fs4{ font-size: 13px; } body.fs5{ font-size: 14px; } body.fs6{ font-size: 15px; } /* Normal link */ a { color: #006699; text-decoration: underline; } a:hover, a:active, a:focus { color: #333333; text-decoration: underline; } /* Heading */ h1 { font-size: 180%; } h2 { font-size: 150%; } h3 { font-size: 125%; } h4 { font-size: 100%; text-transform: uppercase; } ul { list-style: none; } ul li { padding-left: 30px; background: url(../images/bullet.gif) no-repeat 18px 8px; line-height: 180%; } ol li { margin-left: 35px; line-height: 180%; } th { padding: 5px; font-weight: bold; text-align: left; } img { border: none; } /* Note Style */ p.stickynote { padding: 10px 0px 10px 40px; border: 1px solid #CACACC; background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF; } p.download { padding: 10px 0px 10px 40px; border: 1px solid #CACACC; background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF; } .blocknumber { clear: both; padding: 5px 15px 10px; position: relative; } /* Check list */ ul.checklist { list-style: none; } ul.checklist li { margin-left: 15px; padding: 0 0 5px 20px; background: url(../images/checklist-bg.gif) no-repeat 0 3px; } /* Small checklist */ ul.small-checklist { list-style: none; } ul.small-checklist li { margin-left: 15px; padding: 0 0 5px 20px; background: url(../images/icon_list.gif) no-repeat 0 3px; } /* Check list */ ul.stars { list-style: none; } ul.stars li { margin-left: 15px; padding: 0px 0 5px 20px; background: url(../images/star-bg.gif) no-repeat 0 3px; } /* Bignumber */ .bignumber { float: left; margin-right: 8px; padding: 6px 7px; display: block; background: url(../images/ol-bg.gif) no-repeat top left; color: #7BA566; font: bold 20px/normal Arial, sans-serif; } /* Talking box. Thinking box. */ div.bubble1, div.bubble2, div.bubble3, div.bubble4 { margin: 15px 0; } div.bubble1 span.author, div.bubble2 span.author, div.bubble3 span.author, div.bubble4 span.author { padding-left: 15px; margin-left: 15px; background: url(../images/author.gif) no-repeat center left; font-weight: bold; } div.bubble1 div { margin: 0; width: 100%; background: url(../images/bub1-br.gif) no-repeat bottom right; } div.bubble1 div div { background: url(../images/bub1-bl.gif) no-repeat bottom left; } div.bubble1 div div div { background: url(../images/bub1-tr.gif) no-repeat top right; } div.bubble1 div div div div { background: url(../images/bub1-tl.gif) no-repeat top left; } div.bubble1 div div div div div { margin: 0; padding: 15px 15px 30px 15px; width: auto; } div.bubble2 div { margin: 0; width: 100%; background: url(../images/bub2-br.gif) no-repeat bottom right; } div.bubble2 div div { background: url(../images/bub2-bl.gif) no-repeat bottom left; } div.bubble2 div div div { background: url(../images/bub2-tr.gif) no-repeat top right; } div.bubble2 div div div div { background: url(../images/bub2-tl.gif) no-repeat top left; } div.bubble2 div div div div div { margin: 0; padding: 15px 15px 35px 15px; width: auto; } div.bubble3 div { margin: 0; width: 100%; background: url(../images/bub3-br.gif) no-repeat bottom right; } div.bubble3 div div { background: url(../images/bub3-bl.gif) no-repeat bottom left; } div.bubble3 div div div { background: url(../images/bub3-tr.gif) no-repeat top right; } div.bubble3 div div div div { background: url(../images/bub3-tl.gif) no-repeat top left; } div.bubble3 div div div div div { margin: 0; padding: 15px 15px 50px 15px; width: auto; } div.bubble4 div { margin: 0; width: 100%; background: url(../images/bub4-br.gif) no-repeat bottom right; } div.bubble4 div div { background: url(../images/bub4-bl.gif) no-repeat bottom left; } div.bubble4 div div div { background: url(../images/bub4-tr.gif) no-repeat top right; } div.bubble4 div div div div { background: url(../images/bub4-tl.gif) no-repeat top left; } div.bubble4 div div div div div { margin: 0; padding: 15px 15px 55px 15px; width: auto; } /* Legend */ .legend-title { margin: 0; padding: 0 3px; float: left; display: block; background: #B8E700; font-weight: bold; top: -10px; left: 7px; } .legend { margin: 20px 0; padding: 0 10px; border: 1px solid #CACACC; background: #FFFFFF; position: relative; } /* JOOMLA STYLE --------------------------------------------------------- */ .article_separator { clear: both; display: block; height: 20px; } .column_separator { padding: 0 25px; } /* content tables */ td.sectiontableheader { padding: 4px; border-right: 1px solid #fff; } tr.sectiontableentry0 td, tr.sectiontableentry1 td, tr.sectiontableentry2 td { padding: 4px; } td.sectiontableentry0, td.sectiontableentry1, td.sectiontableentry2 { padding: 3px; } table.contentpane { border: none; width: 100%; } table.contentpaneopen { border: none; border-collapse: collapse; border-spacing: 0; } table.contenttoc { margin: 0 0 10px 10px; padding: 0; width: 35%; float: right; } table.contenttoc a { text-decoration: none; } table.contenttoc td { padding: 1px 5px 1px 25px; background: url(../images/bullet-list.gif) no-repeat 5% 50%; } table.contenttoc th { padding: 0 0 3PX; border-bottom: 1px solid #CCCCCC; text-indent: 5px; } table.poll { padding: 0; width: 100%; border-collapse: collapse; } table.pollstableborder { padding: 0; width: 100%; border: none; text-align: left; } table.pollstableborder img { vertical-align: baseline; } table.pollstableborder td { padding: 4px!important; border-collapse: collapse; border-spacing: 0; } table.pollstableborder tr.sectiontableentry1 td { background: #ECECEC; } table.searchintro { padding: 10px 0; width: 100%; } table.searchintro td { padding: 5px!important; } table.adminform { } .adminform .inputbox { } .blog_more { padding: 10px 0; } .blog_more strong { margin: 0 0 5px; display: block; font-size: 125%; } .blog_more ul { margin: 0; padding: 0; } .blog_more ul li { margin: 0; padding: 0 0 0 17px; background: url(../images/bullet.gif) no-repeat 6px 8px; } .category { font-weight: bold; } h1.componentheading, .componentheading { padding: 5px 0 15px; margin: 0 0 10px; } .componentheading { font-size: 200%; font-weight: bold; } .contentdescription { padding-bottom: 30px; } h2.contentheading, .contentheading { padding: 5px 0 8px; margin: 0; font-weight: normal; } table.blog .contentheading { font-size: 150%; } .contentheading { font-size: 200%; } a.contentpagetitle, a.contentpagetitle:hover, a.contentpagetitle:active, a.contentpagetitle:focus { text-decoration: none !important; } a.readon { float: left; margin-top: 10px; padding: 1px 5px 1px 14px; border: 1px solid #B8E700; display: block; background: url(../images/arrow.png) no-repeat 5px 48%; color: #006699; font-weight: bold; text-decoration: none; text-transform: uppercase; } a.readon:hover, a.readon:active, a.readon:focus { border: 1px solid #ECECEC; background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF; } table.contentpaneopen td, table.contentpane td { } table.contentpaneopen, table.contentpane, table.blog { width: 100%; } .moduletable { padding: 0; } ul.pagination { margin: 15px auto; padding: 10px 0; } ul.pagination li { margin: 0; padding: 0; display: inline; background: none; } ul.pagination li span{ padding: 2px 5px; } ul.pagination a { padding: 2px 5px; border: 1px solid #B8E700; } ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus { border: 1px solid #ECECEC; background: #FFFFFF; } .pagenavbar { padding-left: 14px; } .pagenavcounter { padding: 8px 14px 0 14px; } .sectiontableheader { padding: 8px 5px; background: #444444; color: #FFFFFF; } .sectiontableheader a { color: #FFFFFF; } tr.sectiontableentry1 td { padding: 8px 5px; background: url(../images/hdot2.gif) repeat-x bottom; } tr.sectiontableentry2 td { padding: 8px 5px; background: url(../images/hdot2.gif) repeat-x bottom #ECECEC; } tr.sectiontableentry1:hover td, tr.sectiontableentry2:hover td { background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC; } .smalldark { text-align: left; } div.syndicate div { text-align: center; } .pollstableborder tr.sectiontableentry1 td, .pollstableborder tr.sectiontableentry2 td { background: none; } /* META --------------------------------------------------------- */ .article-tools { border-top: 1px solid #DDDDDD; width: 100%; float: left; clear: both; margin-bottom: 15px; display: block; background: #ECECEC; } .article-meta { padding: 5px; width: 80%; float: left; } .createby { padding: 3px 3px 3px 20px; background: url(../images/icon-user.gif) no-repeat 0 2px; } .createdate { padding: 3px 3px 3px 20px; background: url(../images/icon-date.gif) no-repeat 0 2px; } .modifydate { width: 100%; float: left; } div.buttonheading { float: right; width: 15%; } .buttonheading img { margin: 7px 5px 0 0; border: 0; float: right; } /* MAIN LAYOUT DIVS --------------------------------------------------------- */ #ja-wrapper { width: 100%; margin: 0; } #ja-container2 { padding: 20px 0; background: url(../images/c-bg2.gif) no-repeat 18% 0; } #ja-mainbody-fr #ja-col1 { width: 20%; } #ja-mainbody-fr #ja-contentwrap { width: 80%; } #ja-mainbody, #ja-mainbody-fl { float: left; width: 80%; } #ja-mainbody #ja-contentwrap { float: right; width: 75%; } #ja-mainbody-fl #ja-contentwrap { float: left; width: 100%; } #ja-mainbody-f, #ja-mainbody-fr { float: none; width: 100%; } #ja-mainbody-fr #ja-contentwrap { width: 74.8%; float: right; } #ja-mainbody-fr #ja-col1 { width: 20%; float: left; } #ja-mainbody-fr #ja-contentwrap { width: 80%; } #ja-content { padding: 60px 20px 0 40px; } #ja-contentwrap { min-height: 300px; height: auto; } * html #ja-contentwrap { height: 300px; } #ja-mainbody-fl #ja-content { padding-left: 0; } #ja-mainbody-f #ja-content { padding: 0; } /* Full */ #ja-containerwrap-f #ja-containerwrap2 { background: none; } #ja-containerwrap-f #ja-container, #ja-containerwrap-f #ja-container2 { background: none; } /* Full left */ #ja-containerwrap-fl #ja-containerwrap2, #ja-containerwrap-fl #ja-container, #ja-containerwrap-fl #ja-container2 { background: none; } /* HEADER --------------------------------------------------------- */ #ja-headerwrap { color: #76C900; line-height: normal; height: 80px; } #ja-header { position: fixed; height: 80px; color: #76C900; } .ja-headermask { width: 602px; display: block; color: #76C900; height: 80px; position: absolute; top: 0; right: -1px; } #ja-header a { color: #76C900; } h1.logo, h1.logo-text { margin: 0 0 0 5px; padding: 0; font-size: 180%; text-transform: uppercase; } h1.logo a { width: 208px; display: block; background: url(../images/logo.png) no-repeat; height: 80px; position: relative; z-index: 100; } h1.logo a span { position: absolute; top: -1000px; } h1.logo-text a { color: #CCCCCC !important; text-decoration: none; outline: none; position: absolute; bottom: 40px; left: 5px; } p.site-slogan { margin: 0; padding: 0; padding: 2px 5px; color: #FFFFFF; background: #444444; font-size: 92%; position: absolute; bottom: 20px; left: 0; } /* Search */ #ja-search { bottom: 15px; position: absolute; top:40px; left:750px; height:25px } #ja-search .inputbox { width:120px; border: 1px solid #333333; padding: 3px 5px; color: #999999; font-size: 92%; } /* MAIN NAVIGATION --------------------------------------------------------- */ #ja-pathway { font-size: 92%; } #ja-pathway strong { margin-right: 5px; font-weight: normal; } #ja-pathway a { text-decoration: none; } #ja-pathway img { margin: 1px 5px; } /* MODULE --------------------------------------------------------- */ div.moduletable, div.moduletable_menu, div.moduletable_text { padding: 0 0 20px; margin-bottom: 15px; } div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3 { padding: 0 0 8px; margin: 0; color: #7BA566; font-size: 125%; font-weight: bold; text-transform: uppercase; } /* Module rounded */ div.module h3 { margin: 0 -15px 10px; padding: 8px 15px 5px; border-bottom: 2px solid #B8E700; color: #7BA566; font-size: 125%; font-weight: bold; text-transform: uppercase; } div.module_black, div.module_green, div.module_blue, div.module_red, div.module { margin-bottom: 20px; float: left; clear: both; width: 100%; background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF; } div.module div { background: url(../images/b-bl.gif) no-repeat bottom left; } div.module div div { background: url(../images/b-tr.gif) no-repeat top right; } div.module div div div { padding: 0 15px 10px; background: url(../images/b-tl.gif) no-repeat top left; } div.module_black div div div div, div.module_green div div div div, div.module_blue div div div div, div.module_red div div div div, div.module_text div div div div, div.module div div div div { margin: 0; padding: 0; float: none; width: 99%; background: none; } div.module_text h3 { margin: 0 0 10px; width: 100%; clear: both; display: block; overflow: hidden; } div.module_text span { padding: 0 3px 0 0; float: left; clear: both; display: block; background: #B8E700; font-weight: bold; } div.module_text { margin-bottom: 20px; padding: 0; float: left; clear: both; width: 100%; background: url(../images/bt-br.gif) no-repeat bottom right #B8E700; } div.module_text div { background: url(../images/bt-bl.gif) no-repeat bottom left; } div.module_text div div { background: url(../images/bt-tr.gif) no-repeat top right; } div.module_text div div div { padding: 0 15px 10px; display: block; background: url(../images/bt-tl.gif) no-repeat top left; } div.banneritem_text { padding: 5px 0 !important; } /* SPOTLIGHT --------------------------------------------------------- */ /* Spotlight Box Style */ .ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right { float: left; overflow: hidden; } .ja-box-left div.moduletable, .ja-box-full div.moduletable { padding-right: 30px; background: none; } .ja-box-right div.moduletable { padding-left: 30px; background: url(../images/vdot2.gif) repeat-y left; } .ja-box-center div.moduletable { padding: 0 30px; background: url(../images/vdot2.gif) repeat-y left; } #ja-botsl h3 { background: none; } #ja-botslwrap { background: #B8E700; color: #B8E700; } #ja-botsl { padding: 15px 0; } #ja-botsl div.moduletable { padding-top: 0; padding-bottom: 0; margin: 0; } #ja-botsl h3 { margin: 0 0 12px; padding: 0; color: #FFFFFF; } #ja-botsl a { color: #B8E700; } #ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus { color: #FFFFFF; } #ja-botsl ul, #ja-botsl p, #ja-botsl ol { padding: 0; margin: 0 !important; } #ja-botsl ul li { padding: 0 0 0 15px; margin: 0; background: url(../images/bullet2.gif) no-repeat 3px 8px; } #ja-botsl ol li { margin-left: 25px; padding: 0 !important; } #ja-botsl td { padding: 0; } #ja-botsl .article_separator { display: none; } #ja-botsl table { border-spacing: 0; border-collapse: collapse; } /* FOOTER --------------------------------------------------------- */ #ja-footerwrap { padding: 5px 0 30px; } #ja-footer { padding: 0; color: #B8E700; } #ja-footer .copyright { display: block; color: #B8E700; font-style: normal; font-size: 92%; } #ja-footer ul { margin: 0 0 5px; padding: 0; } #ja-footer li { margin: 0; padding: 0; display: inline; background: none; } #ja-footer li a { display: inline; color: #666666; padding: 0 15px 0 0; font-weight: bold; font-size: 92%; line-height: normal; text-decoration: none; text-transform: uppercase; } #ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus { color: #333333; text-decoration: none; } .ja-cert { font-size: 92%; top: 18px; } .ja-cert a { margin: 0 0 0 5px; padding: 0; border: none; border: none; text-decoration: none; } .ja-cert a span { display: none; } .ja-cert a img { border: none; } .banneritem { display: block; margin-top: 15px; } /* MISCELLANOUS ----------------------------------------------------------- */ ul.accessibility { position: absolute; top: -100%; } /*usertool*/ ul.ja-usertools-font { font-size: 11px; position: absolute; top: 8px; right: 70px; } ul.ja-usertools-font li { padding: 0; margin: 0; display: inline; background: none; } /*collapsible h3*/ h3.show { background: url(../images/arrow2.png) no-repeat 90% 60%; cursor: pointer; } h3.hide { background: url(../images/arrow3.png) no-repeat 90% 60%; cursor: pointer; } /*others*/ #ja-banner { margin: 15px 0; text-align: center; } div.back_button a, div.back_button a:hover, div.back_button a:active { margin: 10px 0; display: block; background: none!important; text-decoration: none!important; } #form-login p { margin: 0 0 5px; } #form-login ul { margin: 10px 0 0; } #form-login .inputbox { width: 90%; } .clr { clear: both; } .hasTip img { margin: 10px 5px 0 0; border: none; } /* Tooltips */ .tool-tip { float: left; border: 1px solid #D4D5AA; padding: 5px; background: #FFFFCC; max-width: 200px; } .tool-title { padding: 0; margin: 0; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(../../system/images/selector-arrow.png) no-repeat; font-size: 100%; font-weight: bold; } .tool-text { margin: 0; font-size: 100%; } #system-message dd.message ul, #system-message dd.error ul, #system-message dd.notice ul { padding: 0; margin: 0; } #system-message dd.message ul li, #system-message dd.error ul li, #system-message dd.notice ul li { background: none; padding: 5px; margin: 0; color: #FFFFFF; } /* System Standard Messages */ #system-message dd.message ul { background: #006699; border: none; } /* System Error Messages */ #system-message dd.error ul { background: #BF0000; border: none; } /* System Notice Messages */ #system-message dd.notice ul { background: #EE9600; border: none; } /* Clearfix */ .clearfix:after { clear: both; display: block; content: "."; height: 0; visibility: hidden; } * html > body .clearfix { width: 100%; display: block; } * html .clearfix { height: 1%; } /* Firefox Scrollbar Hack - Do not remove */ html { margin-bottom: 1px; height: 100%!important; height: auto; } #Table_01 { left:0px; top:0px; width:950px; overflow: hidden; } #top01 { position:fixed; left:0px; top:0px; width:248px; height:68px; background: url(../../../images/top01.jpg); background-repeat:no-repeat; } #logo { position:fixed; left:248px; top:0px; width:89px; height:68px; background:url(../../../images/logo.jpg); background-repeat:no-repeat; } #top02 { position:fixed; left:337px; top:0px; width:312px; height:68px; background:url(../../../images/top02.jpg); background-repeat:no-repeat; } #index-04 { position:fixed; left:649px; top:0px; width:301px; height:74px; background:url(../../../images/index_04.jpg); background-repeat:no-repeat; } #top03 { position:fixed; left:0px; top:68px; width:297px; height:168px; background:url(../../../images/top03.jpg); background-repeat:no-repeat; } #index-06 { position:fixed; left:297px; top:68px; width:352px; height:6px; background:url(../../../images/index_06.jpg); background-repeat:no-repeat; } #index-07 { position:fixed; left:297px; top:74px; width:288px; height:172px; background:url(../../../images/index_07.jpg); background-repeat:no-repeat; } #top04 { position:fixed; left:585px; top:74px; width:317px; height:165px; background:url(../../../images/top04.jpg); background-repeat:no-repeat; } #index-09 { position:fixed; left:902px; top:74px; width:48px; height:172px; background:url(../../../images/index_09.jpg); } #index-10 { position:fixed; left:0px; top:236px; width:297px; height:10px; background:url(../../../images/index_10.jpg); } #index-11 { position:fixed; left:585px; top:239px; width:317px; height:7px; background:url(../../../images/index_11.jpg); } #index-12 { position:fixed; left:0px; top:246px; width:1px; height:33px; background:url(../../../images/index_12.jpg); } #index-13 { position:fixed; left:1px; top:246px; width:949px; height:28px; background:url(../../../images/index_13.jpg); } #bottom01 { left:0px; top:653px; width:950px; height:32px; background:url(../../../images/bottom01.jpg); } #othersunnypages-14 { background:url(../../../images/othersunnypages_14.jpg); position:fixed; top:247px; left: 1px; width: 949px; height: 5px; } #othersunnypages-15 { background-image:url(../../../images/othersunnypages_15.jpg); position:fixed; top:279px; width:152px; height:142px; } #othersunnypages-16 { background-image:url(../../../images/othersunnypages_16.jpg); position:fixed; top:279px; left: 152px; width: 798px; height: 41px; } #othersunnypages-17 { background-image:url(../../../images/othersunnypages_17.jpg); position:fixed; top:320px; left: 152px; width:510px; height:23px; } #othersunnypages-18 { background-image:url(../../../images/othersunnypages_18.jpg); position:fixed; top:320px; left: 662px; width:33px; height:23px; } #othersunnypages-19 { background-image:url(../../../images/othersunnypages_19.jpg); position:fixed; top:320px; left: 695px; width:203px; height:23px; } #othersunnypages-20 { background-image:url(../../../images/othersunnypages_20.jpg); position:fixed; top:320px; left:898px; width:52px; height:23px; } #othersunnypages-21 { background-image:url(../../../images/othersunnypages_21.jpg); position:fixed; top:343px; left: 152px; width:504px; height:24px; } #othersunnypages-22 { background-image:url(../../../images/othersunnypages_22.jpg); position:fixed; top:343px; left: 656px; width:43px; height:24px; } #othersunnypages-23 { background-image:url(../../../images/othersunnypages_23.jpg); position:fixed; top:343px; left: 699px; width:200px; height:24px; } #othersunnypages-24 { background-image:url(../../../images/othersunnypages_24.jpg); position:fixed; top:343px; left: 899px; width:51px; height:24px; } #othersunnypages-25 { background-image: url(../../../images/othersunnypages_25.jpg); position:fixed; top: 367px; left: 152px; width:504px; height:54px; } #othersunnypages-26 { background-image:url(../../../images/othersunnypages_26.jpg); position:fixed; top:367px; left: 656px; width:43px; height:54px; } #othersunnypages-27 { background-image:url(../../../images/othersunnypages_27.jpg); position:fixed; top:367px; left: 699px; width:193px; height:54px; } #othersunnypages-28 { background-image:url(../../../images/othersunnypages_28.jpg); position:fixed; top:367px; left: 892px; width:58px; height:54px; } #othersunnypages-29 { background-image:url(../../../images/othersunnypages_29.jpg); position:fixed; top:421px; left: 0px; width:69px; height:201px; } #othersunnypages-30 { background-image:url(../../../images/othersunnypages_30.jpg); position:fixed; top:421px; left:69px; width:587px; height:201px; } #othersunnypages-31 { background-image:url(../../../images/othersunnypages_31.jpg); top:421px; left: 656px; width:43px; height:201px; } #othersunnypages-32 { background-image:url(../../../images/othersunnypages_32.jpg); position:fixed; top:421px; left: 699px; width:193px; height:201px; } #othersunnypages-33 { background-image: url(../../../images/othersunnypages_33.jpg); position:fixed; top:421px; left: 892px; width:58px; height:201px; } #othersunnypages-34 { background-image:url(../../../images/othersunnypages_34.jpg); position:fixed; top:622px; left: 0px; width:950px; height:31px; } #othersunnypages-36 { background-image:url(../../../images/othersunnypages_36.jpg); position:fixed; top:685px; left:0px; width:950px; height:15px; } Need guidance on how to set up CSS. Thanks hi everyone, i designed my first site with dremaweaver 3 but had problems with browser compatability. people have been telling me i should use css now as it's better so which version of dreamweaver should i be using now? thank you Hey, im sorry if this has allrdy been covered I have created a website in dream weaver cs3, i upload it everything works bar back ground images in tables. The url is gepro.oxyhost.com all help greatly appreciated thx guys Hi all! I've been teaching myself web-design in my spare time for a while, and I've got most of the basics down (I think!). I have a problem. I was using Dreamweaver cs3 and I put a vertical spry menu into my page - All was fine. Cue update to cs5. No I know that this shouldn't have effected anything, but something has changed, and now my sub menus all appear UNDER the rest of the elements on the page. I haven't really used z-index much before. I have tinkered with it a little, but it didn't seem to change anything. I am now stumped. This problem seems to occur across all browsers. Can anyone help? Hi everyone, I am having a very difficult problem using Dreamweaver and I would be very grateful for any advice given. I recently created a simple website using layers and when I previewed it, it looked great and it had no reported browser errors. I had several people view it and only one of my friends had trouble seeing it. He said that the layers were out of position and sometimes overlaped. We both were using Explorer 6.0. The only difference between our computers is that he has a 21" monitor while I have a 17". Would that effect the web page design? Why are the layers not positioning correctly? If anyone needs to view the website it can be seen at http://sky.prohosting.com/lovecare Please help me! Thanks, Steve Well this isn't too much of a problem basically my form displays one way in dreamweaver and another when I preview the site any idea why its pretty annoying. heres how it looks in dreamweaver and heres it in a browser I have all pages that follow a CSS Rule. These are Dev Boxes that I created for my site. One of the text on one of the pages is 1700 pixels height the others are only 700. When I created a rule for all pages but when I added the text on the one with 1700 pixels it stretched out all the boxes on all other pages as well. I want to break that one from the others so that it does not format all my pages like that one. How do I do it. I do I keep the CSS code style but on that one in particular change the rule to only allow that one to be 1700 pixels long. Basically I don't want to have to recode the CSS page but I want that particular code to be just for that one page and keep the others with the 700 pixels height. Please give me a simple explanation on how to break the rule on that page so that I can manually adjust it for that one page. thanks Hi there, Wondering if you can help me ... I have a site that was coded for me and when i open up the index.html pages in code and design view in Dreamweaver - the items in the sidebar (coded with css and using the ul and li tags) don't show up .... allowing me to only edit the text in code view and not design view. When previewing it in browser it is fine. I am a visual person so would really like to be able to see the text/images and elements in design view. perhaps small code is missing? or settings in dreamweaver... i have tried everything and can;t find Please help! Thanks Code: <div id="sidebar" class='sidebar-home'> <ul class="sidebar-list"> <li class="first"> <h5 class="sidebar-title">Recent News</h5> <ul class="simple-list"> <li class="first"><div class="simple-list-heading">Mar 4, 2010</div>Soltoro Acquires The Lupita Mine Property and Plans To Drill at Victoria Project</li> <li><div class="simple-list-heading">Feb 16, 2010</div>Soltoro Completes Las Bolas Mine Area Resource Drilling & Returns 12 Metres of 220 gpt Silver in Highway Zone</li> <li class="last"><div class="simple-list-heading">Feb 12, 2010</div>Soltoro Completes $2,350,250 Financing</li> <li class="read-more"><a href="news/" title="More News">... more news</a></li> </ul> </li> <li> <h5 class="sidebar-title">Events</h5> <ul class="simple-list"> <li class="first"><div class="simple-list-heading">June 6-8, 2010</div>World Resource Investment Conference<br/>Vancouver, BC</li> <li class="last"><div class="simple-list-heading">September 25-26, 2010</div>Toronto Resource Investment Conference<br/>Toronto, ON</li> </ul> </li> <li> <h5 class="sidebar-title">Archive Projects</h5> <ul class="sidebar-gallery"> <li><a href="projects/el-rayo.html" title="El Rayo Project"><img src="images/active-projects-el-rayo.jpg" alt="El Rayo" /></a></li> <li class="sidebar-gallery-r"><a href="projects/quila.html" title="Quila Project"><img src="images/active-projects-quila.jpg" alt="Quila" /></a></li> <li class="sidebar-gallery-bottom"><a href="projects/victoria.html" title="Victoria Project"><img src="images/active-projects-victoria.jpg" alt="Victoria" /></a></li> <li class="sidebar-gallery-r sidebar-gallery-bottom"><img src="images/active-projects-click-images.jpg" alt="Click Images" /></li> </ul> </li> </ul> </div> the CSS Code: .sidebar-list { width:100%; } #sidebar a { color:#421400; text-decoration:none; } #sidebar a:hover { color:#f79120; text-decoration:underline; } h5.sidebar-title { color:#421400; font-size:25px; padding-bottom:15px; width:100%; } .sub-caption { padding-bottom:3px !important; } .sidebar-title-sub-caption { float:left; font-size:14px; width:100%; } .sidebar-title-sub-caption img { padding-left:7px; } .sidebar-list li { float:left; border-bottom:1px solid #421400; padding:20px 0 25px; width:284px; } .sidebar-list li.first { padding-top:0; } ul.simple-list { padding-left:20px; width:264px; } ul.simple-list li { border-bottom:1px dotted #421400 !important; padding:18px 0px; width:100%; } ul.simple-list li.first { padding-top:0; } ul.simple-list li.last { padding:18px 0 0 0 !important; border-bottom:none !important; } .simple-list-heading { float:left; font-weight:bold; width:100%; } .simple-list li.read-more { border-bottom:none !important; font-weight:bold; text-align:right; padding:10px 0 0 0; } .sidebar-gallery { width:100%; } .sidebar-gallery li { display:inline; border:none; padding:0 20px 20px 0; width:132px; } .sidebar-gallery img { border:1px solid #421400; } .sidebar-gallery li.sidebar-gallery-r { padding-right:0; } .sidebar-gallery li.sidebar-gallery-bottom { padding-bottom:0; } .sidebar-gallery span { float:left; font-weight:bold; width:100%; text-align:center; } ul.full-picture-list { padding-bottom:20px; width:100%; } .full-picture-list li { border:none !important; padding-bottom:0 !important; } .full-list-content { float:left; display:inline; border-bottom:1px dotted #421400; margin-left:20px; padding:10px 0 10px 0; width:264px; } ul.photo-gallery { width:100%; } .photo-gallery li { display:inline; border:none !important; padding:0 10px 10px 0; width:61px; } .photo-gallery img { border:1px solid #421400; } .photo-gallery li.last { padding-right:0; } Hi, I'm trying to create a menu bar using CSS (I'm not sure if this is the best way to do it. Maybe I should be using frames for this menu bar so I'm not constantly copying and pasting code from page to page?) Anyway, my problem is that everything appears fine when I view the page in the browser using F12 (this creates a temporary file). But when I try to view index.htm by double clicking on it, the CSS style hasn't been applied to the text at all. I have spent hours on this to no avail. Can someone please please help? thanks, Jean I'm sure all of you have stumbled onto this at some point if you use Macromedia Dreamweaver. You're working on a CSS-driven layout and it looks perfect in multiple web browsers, but in the actual Dreamweaver design edit mode the page appears garbled and elements are out of place or you can't even see them. While it's not really a problem for you to update and work with the site, it would certainly be difficult for someone not familiar with it to change content and make updates. Does anyone know of a plug-in that would resolve this problem? Or perhaps does someone know what attributes or elements most often cause the problem in Dreamweaver? Hi, I have been working on a project for a friend and all was working well in IE. I tested the site in Netscape and Opera and found that the CSS positioning i was using (DIVs) caused inconsistent layout accross the browsers. I used absolute positioning instead of relative, which seemed to solve all my problems.....not so. Now, for some reason, the pop-up menu appears behind the main content layer. I am quite new to using CSS for layout so forgive me if the answer to my problem is simple. Google (my usual saviour) proved to be of little help. Any help would be welcome, thanks. Dunc When using the following code, the "Design" preview does not display correctly within Dreamweaver MX 2004, but it does display correctly in all browsers. Does anyone know if this a problem with Dreamweaver or my CSS code. Update:- removing "position:absolute" from #infoPanel fixes the design preview problem, but this isn't really a solution, as I need to position absolutely. The only problem I've got is the design preview in Dreamweaver. I am happy with the final browser output, but the layout is awful within Dreamweaver. Thanks Matthew Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Welcome</title> <style type="text/css"> <!-- #infoPanel{ position:absolute; width:760px; height:100px; border-style:solid; border-width:1px; } #infoPanelDetails{ margin: 10px; position:absolute; width:480px; } #infoPanelLink{ margin:10px; position:absolute; width:240px; left:480px; text-align:right; } --> </style> </head> <body> <div id="infoPanel"> <div id="infoPanelDetails"> <p>Some detailed text here.</p> </div> <div id="infoPanelLink"> <p><a href="http://www.wherever.com" >www.wherever.com</a></p> </div> </div> </body> </html> Hi, I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category. Do I have to amend the CSS or the javascript to make it collapsed to begin with? Any help would be appericated. Thanks Gary Hello I am a Novice in web design that is trying to make his way. I am build a website for my company and trying to make it compatible with many devices. I have chosen to Use html and css. This is my issue. I have a side bar menu (nav) and I have a div (menuebar) set to 125 by 500px css property's: Height, width, margin top, margin bottom, float:left Then i have another div inside that one use for my LINK or Button. div (menulink) set to 110 x 28px css property's: Height, width,Padding : Left5px, Right 5px top 2px and bottom 2px , Font Ariel. I want this div (menulink) to highlight on a mouse over or hover the entire div like this website has there colorful menu bar. w w w DOT entheosweb DOT com/dreamweaver/default.asp the bar i am talking about starts with teal, green... ect If you notice you can select the text with in that rollover. so when I use a rollover i cant see any option to do that. Now I have learn how to do a " a hover" css with text links but it dose not hightlight the whole div container. I have tried a behavior on the div tag and that works but dose not disappear on mouse out. I have tried many combinations of multiple behaviors and single combinations with all the option with in them. No such luck.... I will thank any one advance who can help me with this. Ps i don't want to use rollovers because of how big the web site is even with PS actions set up to speed up the process of editing each roll over img. I have a rule called #MainContent. Now I want to change this rule for just one page so I duplicate it but don't add it to the global style sheet but declare the rule for this page only. However this doesnt work the div still changes based on the #MainContent rule in the global css file Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine. I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle. The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it. Anyone have any other better ideas? |