Okay,Im using web expression3, Im trying to figure out what allows me to easily highlite the menue bar in the GUI and simply press "center", which allows the menu text, etc to be centered for this style sheet: /** BASIC */ body { margin: 0px; padding: 0px; background: url(images/img02.jpg) repeat-x left top; line-height: 20px; text-align: justify; font-family:Arial, Helvetica, sans-serif; font-size: 10pt; color: #666666; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { color: #0077dd; } a:hover { text-decoration: none; } .list1 { margin: 0; padding: 0; list-style: none; } .list1 a { background: url(images/img01.gif) no-repeat left 60%; padding-left: 12px; } .list2 { margin: 0; list-style: none; } .list2 a { background: url(images/img01.gif) no-repeat left 60%; padding-left: 12px; } img { border: none; } img.left { float: left; margin: 3px 20px 0px 0px; } /** HEADER */ #header { width: 778px; margin: 0px auto; padding: 1em; height: 90px; color: #254360; } #header h1 { margin: 0px; padding: 20px 0px 0px 0px; text-transform: uppercase; font-weight: bold; } #header h2 { margin: 0 0 0 -80px; padding: 0px 0px 0px 95px; text-transform: uppercase; font-weight: bold; font-size: 13px; } /** MENU */ #menu { width: 778px; margin: 0px auto; } #menu ul { margin: 0px; padding: 0px; list-style: none; } #menu li { display: inline; } #menu a { background: url(images/img04.gif) no-repeat right 50%; padding: 0px 20px 0px 20px; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 12px; color: #FFFFFF; } #menu a:hover { background: #FFFFFF; color: #254360; } #menu .active { background: #FFFFFF; color: #254360; } /** CONTENT */ #content { width: 778px; margin: 0px auto; padding: 40px 0px 20px 0px; } #columnA { float: right; width: 538px; padding-left: 20px; border-left: 1px dashed #EEEEEE; } #columnA h2 { height: 22px; border-bottom: 1px dashed #EEEEEE; font-size: 12pt; font-weight: bold; } #columnB { float: left; width: 200px; } #columnB h3 { height: 22px; border-bottom: 1px dashed #EEEEEE; border-spacing: 2px; font-size: 11pt; font-weight: bold; } /** FOOTER */ #footer { clear: both; margin: 0px auto; height: 59px; background: url(images/img03.gif) repeat-x left top; text-align: center; } #footer p { margin: 0px; padding: 18px 0px 0px 0px; font-size: 10px; color: #FFFFFF; } #footer a { color: #CCCCCC; } Code (markup): BUT for this one, if I press center, it doesnt do anything.... what is the difference that allows this to happen? thanks for any/all help I really really really really appreciate it /* andreas08 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use in any way and for any purpose as long as the proper credits are given to the original designer. Version: 1.0, November 28, 2005 */ /**************** Body and tag styles ****************/ *{margin:0; padding:0;} body{ font:76% Verdana,Tahoma,Arial,sans-serif; line-height:1.4em; text-align:center; color:#303030; background:#e8eaec; } a{ color:#467aa7; font-weight:bold; text-decoration:none; background-color:inherit; } a:hover{color:#2a5a8a; text-decoration:none; background-color:inherit;} a img{border:none;} p{padding:0 0 1.6em 0;} p form{margin-top:0; margin-bottom:20px;} img.left,img.center,img.right{padding:4px; border:1px solid #a0a0a0;} img.left{float:left; margin:0 12px 5px 0;} img.center{display:block; margin:0 auto 5px auto;} img.right{float:right; margin:0 0 5px 12px;} /**************** Header and navigation styles ****************/ #container{ width:760px; margin:20px auto; padding:1px 0; text-align:left; background:#ffffff; color:#303030; border:2px solid #a0a0a0; } #header{ height:110px; width:758px; margin:0 1px 1px 1px; background:#467aa7; color:#ffffff; } #header h1{ padding:35px 0 0 20px; font-size:2.4em; background-color:inherit; color:#ffffff; letter-spacing:-2px; font-weight:normal; } #header h2{ margin:10px 0 0 40px; font-size:1.4em; background-color:inherit; color:#f0f2f4; letter-spacing:-1px; font-weight:normal; } #navigation{ height:2.2em; line-height:2.2em; width:758px; margin:0 1px; background:#578bb8; color:#ffffff; } #navigation li{ float:left; list-style-type:none; border-right:1px solid #ffffff; white-space:nowrap; } #navigation li a{ display:block; padding:0 10px; font-size:0.8em; font-weight:normal; text-transform:uppercase; text-decoration:none; background-color:inherit; color: #ffffff; } * html #navigation a {width:1%;} #navigation .selected,#navigation a:hover{ background:#80b0da; color:#ffffff; text-decoration:none; } /**************** Content styles ****************/ #content{ float:left; width:530px; font-size:0.9em; padding:20px 0 0 20px; } #content h2{ display:block; margin:0 0 16px 0; font-size:1.7em; font-weight:normal; letter-spacing:-1px; color:#505050; background-color:inherit; } #content h2 a{font-weight:normal;} #content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;} #content a:hover,#subcontent a:hover{text-decoration:underline;} #content ul,#content ol{margin:0 5px 16px 35px;} #content dl{margin:0 5px 10px 25px;} #content dt{font-weight:bold; margin-bottom:5px;} #content dd{margin:0 0 10px 15px;} /**************** Sidebar styles ****************/ #subcontent{ float:right; width:170px; padding:20px 20px 10px 0; line-height:1.4em; } #subcontent h2{ display:block; margin:0 0 15px 0; font-size:1.6em; font-weight:normal; text-align:left; letter-spacing:-1px; color:#505050; background-color:inherit; } #subcontent p{margin:0 0 16px 0; font-size:0.9em;} /**************** Menublock styles ****************/ .menublock{margin:0 0 20px 8px; font-size:0.9em;} .menublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;} .menublock li a{font-weight:bold; text-decoration:none;} .menublock li a:hover{text-decoration:none;} .menublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;} .menublock li ul li{margin-bottom:0;} .menublock li ul a{font-weight:normal;} /**************** Searchbar styles ****************/ #searchbar{margin:0 0 20px 0;} #searchbar form fieldset{margin-left:10px; border:0 solid;} #searchbar #s{ height:1.2em; width:110px; margin:0 5px 0 0; border:1px solid #a0a0a0; } #searchbar #searchbutton{ width:auto; padding:0 1px; border:1px solid #808080; font-size:0.9em; text-align:center; } /**************** Footer styles ****************/ #footer{ clear:both; width:758px; padding:5px 0; margin:0 1px; font-size:0.9em; color:#f0f0f0; background:#467aa7; } #footer p{padding:0; margin:0; text-align:center;} #footer a{color:#f0f0f0; background-color:inherit; font-weight:bold;} #footer a:hover{color:#ffffff; background-color:inherit; text-decoration: underline;} /**************** Misc classes and styles ****************/ .splitcontentleft{float:left; width:48%;} .splitcontentright{float:right; width:48%;} .clear{clear:both;} .small{font-size:0.8em;} .hide{display:none;} .textcenter{text-align:center;} .textright{text-align:right;} .important{color:#f02025; background-color:inherit; font-weight:bold;} .box{ margin:0 0 20px 0; padding:10px; border:1px solid #c0c0c0; background-color:#fafbfc; color:#505050; line-height:1.5em; } Code (markup):
sure... Okay i think I figured out the menu part (well not really...but figured a way around it by merging the two style sheets into one, I still dont understand why one would let me center the menu and one wouldnt)... this is the result of what I was messing with, which I like but wish to make improvements to still before adding content: www.pubalgia.info www.pubalgia.info/style.css these are the two templates I merged: CS1: ----> http://www.freecsstemplates.org/preview/advertising (this is the one where I like the header/footer but not body but still wanted to know how they made the image in the <p> without messing up the text) CS2:-----> http://www.free-css.com/free-css-templates/page35/andreas08.php#bookmarks (this is the one that wouldnt let me center the menu but I like the body etc...) .........Now my main problem is that I want to bring the content on the left side closer to the content on the right side, to cut down on the white space in between them (in the pubalgia.info site)... so that everything looks more together and there isnt blank and unused white space.. I have been messing with the margins but cant seem to get it to work right without messing it all up.... Also, I do like to know how they added a background to so that it looks like the center of the page is "framed" by the light blue background...can a similar effect be achieved in the new style sheet so that it has a framed look like that?? (I realize these are a lot of questions in one post, but cant tell you how grateful I am for you helping me on these things, I feel like if I learn it correctly once, itll last me a lifetime ) Thank you so much
omg this is driving me nuts Ive been tinkering with it for hours and cant get it to do what I want.. everyone asleep??
1) You're asking about "The artist formerly known as frontpage" which no self respecting designer would use to build a site. You are unlikely to find anyone that can help you with it around... well, anywhere. 2) without the HTML you are applying the CSS to, the CSS is gibberish. Could you upload the HTML to that site you linked to so we can see what has been nebfered by that stupid WYSIWYG crap you are using? 3) I don't even want to THINK about how badly "the artist formerly known as frontpage" is mangling the code from those stock templates.
As deathshadow said, the CSS doesn't mean anything unless you give us the HTML. I just checked your website, pubalgia.info and the index page had been removed. Also concerning adding a background to the center section of the page, you'll most likely need to add a container (hard to say without seeing the HTML) and then use CSS to add a background to it that repeats on the y-axis. Check out this article: http://www.w3schools.com/css/css_background.asp