7 Replies Latest reply on Apr 5, 2011 12:57 PM by Nancy OShea

    CSS copying question.

    Kalossatron

      Rightio,

       

      I'm fairly new to the coding/css game but I'm learning quite fast and recently I got hold of a template to mess around with. It came with a main page and two subpages, I opened the subpage and then created a new page in order to try something different, copying and pasting the subpages html and css.

       

      What my problem is now, is that when I edit something in one of the subpages, it automatically changes the coding in the page in which I copied it to originally. I don't want to do this and I'm presuming there maybe some form of html or css code that's doing this?

       

      could anyone shed some light, thanks in advance.

        • 1. Re: CSS copying question.
          osgood_ Level 8
          I assume you are opening a linked css file and making the changes in that?

          Normally the css file is 'linked' to every page that uses it, something like below
          (you'll find this link near the top of your pages code)

          <link href="css/main.css" rel="stylesheet" type="text/css" />


          What I do if I'm working on a particular page where I  need to create some additional
          css styles I write then directly in the page itself by creating a css region in the page:

          <style type="text/css">

          Additional css styles for page go here.

          </style>

          If you do that then the other pages which are linked to the css stylesheet won't be affected.
          • 2. Re: CSS copying question.
            Kalossatron Level 1

            Hmm, I gave it a shot yet when I put that coding in.. it just copies throughout the various 'subpages'

             

            On my homepage html file and also in the subpages.. this is what I see..

             

            <link href="default.css" rel="stylesheet" type="text/css" media="all" />
            <style type="text/css">
            @import "layout.css";
            </style>

            • 3. Re: CSS copying question.
              osgood_ Level 8

              Sounds like your pages are made or copied from a 'template' master page?

               

              If that is the case then open the .dwt template file in your 'templates folder in the site root folder and wrap the <style type></style> tags in an editable region (as shown below). Then write or copy only the css style that you need applied to a page between the <style type></style> tags. No other page will take on this style, unless you copy a page and its in the editable css region.

               

               

              <!-- InstanceBeginEditable name="SpecificCssPageStyles"

               

              <style type="text/css">

               

               

              </style>

               

              <!-- InstanceEndEditable -->

               

               

              Then write or copy a new css style bewteen the <style type></style> tags:

               

              <!-- InstanceBeginEditable name="SpecificCssPageStyles"

               

              <style type="text/css">

               

              #newStyle {

              width: 200px;

              background-color: #000;

              }

               

              </style>

               

              <!-- InstanceEndEditable -->

               


              • 4. Re: CSS copying question.
                Kalossatron Level 1

                Cheers again.

                 

                Although, I still havn't managed to sort it out. I also have no .dwt file.

                 

                The CSS is actually the only thing copying, as the HTML on either pages sticks to whatever I change it to.

                 

                I'm going to take the risk and post the entire css coding I have and maybe have one last crack at seeing if it can be figured out. (Although, If anyone can tell me another way to post it all, I'll delete and replace!)

                 

                Sorry for dragging this out but it's the only problem I have and the only one I really can't work out.

                 

                 

                ------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------

                 

                ------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------

                 

                 

                html, body {
                    height: 100%;
                }

                 

                body {
                    margin: 0px;
                    padding: 0px;
                    background: #f0f0f0 url(images/subpage2_06.jpg);
                    font-family: Helvetica, Verdana, Sans-serif;
                    font-size: 13px;
                    color: #5E5E5E;
                }

                 

                h1, h2, h3 {
                    margin-top: 0px;
                }

                 

                p, ol, ul {
                    margin-top: 0px;
                }

                 

                p, ol {
                    line-height: 175%;
                }

                 

                strong {
                    color: #5E5E5E;
                }

                 

                a {
                    color: #3e6e35;
                }

                 

                a:hover {
                    text-decoration: none;
                }

                 

                a img {
                    border: none;
                }

                 

                img.border {
                }

                 

                img.alignleft {
                    float: left;
                    padding: 5px 20px 0px 0px;
                }

                 

                img.alignright {
                    float: right;
                }

                 

                img.aligncenter {
                    margin: 0px auto;
                }

                 

                hr {
                    display: none;
                }

                 

                #wrapper {
                    background: #f0f0f0 url(images/subpage2_012.jpg) repeat-x left top;
                }

                 

                .homepage #wrapper {
                    background: #f0f0f0 url(images/homepage01_1.jpg) repeat-x left top;
                }

                 

                .container {
                    width: 1000px;
                    margin: 0px auto;
                }

                 

                .clearfix {
                    clear: both;
                }

                 

                /** HEADER */

                 

                #header {
                    overflow: hidden;
                    height: 137px;
                    background: url(images/subpage1_012.jpg) no-repeat right top;
                }

                 

                /** MENU */

                 

                #menu {
                    float: left;
                    width: 650px;
                    height: 137px;
                }

                 

                #menu ul {
                    float: left;
                    margin: 0px;
                    padding: 68px 0px 0px 90px;
                    list-style: none;
                    text-align: center;
                }

                 


                #menu li {
                    display: inline;
                }

                 

                #menu a {
                    display: inline-block;
                    margin-right: 0px;
                    text-transform: uppercase;
                    text-decoration: none;
                    font-size: 14px;
                    color: #FFFFFF;
                }

                 

                #menu a:hover {
                }

                 

                #menu li a span {
                    display: inline-block;
                    height: 23px;
                    padding: 40px 15px 10px 15px;
                    font-weight: bold;
                    color: #3e6e35;
                }

                 

                #menu li.active a {
                    background: #3e6e35 url(images/homepage03_02.jpg) no-repeat left top;
                }

                 

                #menu li.active a span {
                    background: url(images/homepage04_02.jpg) no-repeat right top;
                    font-weight: bold;
                    color: #f7f540;
                }

                 

                /** SPLASH */

                 

                #splash {
                    width: 920px;
                    height: 188px;
                    padding: 112px 0px 0px 80px;
                    background: url(images/homepage05_03.jpg) no-repeat left top;
                }

                 

                .subpage #splash {
                    width: 1000px;
                    height: 150px;
                    padding: 0px;
                    background: url(images/subpage2_022.jpg) no-repeat left top;
                }

                 

                .single #splash {
                    width: 1000px;
                    height: 150px;
                    padding: 0px;
                    background: url(images/designer.jpg) no-repeat left top;
                }

                 

                #splash p {
                    margin: 0px;
                    padding: 0px;
                    text-shadow: 1px 1px 1px #39A0B4;
                    color: #ffffff;
                }

                 

                #splash .text1 {
                    text-indent: -9999em;
                    font-size: 30px;
                }

                 

                #splash .text2 {
                    text-indent: -9999em;
                    margin-top: -5px;
                    font-size: 42px;
                }

                 

                /** PAGE */

                 

                #page {
                    background: url(images/subpage2_04.jpg) repeat-y left top;
                }

                 

                #page .bgtop {
                    overflow: hidden;
                    margin: 0px;
                    padding: 35px 0px;
                    background: url(images/subpage2_03.jpg) no-repeat left top;
                }

                 

                .homepage #page .bgtop {
                    width: 940px;
                    padding: 0px 30px 35px 30px;
                }

                 

                .subpage #page .bgtop {
                    width: 940px;
                    padding: 0px 30px 35px 30px;
                }

                 

                /** CONTENT */

                 

                #content {
                }

                 

                .subpage #content {
                    float: left;
                    width: 565px;
                    padding: 30px 30px 0px 30px;
                    background: url(images/homepage06.jpg) no-repeat right top;
                }

                 

                .single #content {
                    width: 890px;
                    padding: 0px 55px;
                }

                 

                /** SIDEBAR */

                 

                #sidebar {
                    float: right;
                }

                 

                .subpage #sidebar {
                    width: 255px;
                    padding: 30px 30px 0px 30px;
                }

                 

                /** FOOTER */

                 

                #footer {
                    background: url(images/subpage2_052.jpg) repeat-x left top;
                    height: 105px;
                }

                 

                #footer p {
                    margin: 0px;
                    padding: 25px 0px 0px 0px;
                    text-align: center;
                    color: #FFFFFF;
                }

                 

                #footer .legal {
                }

                 

                #footer .links {
                }

                 

                #footer a {
                    color: #FFFFFF;
                }

                 

                .box-style {
                }

                 

                .box-style .title {
                    margin: 0px;
                    padding: 0px;
                    letter-spacing: -1px;
                    font-size: 22px;
                    font-weight: bold;
                    color: #3e6e35;
                }

                 

                .box-style .byline {
                    margin: 0px;
                    padding: 0px 0px 15px 0px;
                    font-size: 12px;
                    color: #7D7D7D;
                }

                 

                .box-style .content {
                }

                 

                .box-style .link1 a {
                    float: right;
                    width: 83px;
                    height: 26px;
                    margin: 0px;
                    padding: 2px 0px 0px 0px;
                    background: url(images/homepage07_02.jpg) no-repeat left top;
                    text-decoration: none;
                    text-align: center;
                    color: #ffffff;
                }

                 

                #three-columns {
                }

                 

                #three-columns .column2, #three-columns .column3 {
                    width: 315px;
                }

                 

                #three-columns .column1 {
                    float: left;
                    width: 250px;
                    padding: 30px 30px 0px 30px;
                    background: url(images/homepage06.jpg) no-repeat right top;
                }

                 

                #three-columns .column2 {
                    float: left;
                    width: 255px;
                    padding: 30px 30px 0px 30px;
                    background: url(images/homepage06.jpg) no-repeat right top;
                }

                 

                #three-columns .column3 {
                    float: right;
                    width: 255px;
                    padding: 30px 30px 0px 30px;
                }

                 

                ul.style1 {
                    margin: 0px;
                    padding: 0px;
                    list-style: none;
                }

                 

                ul.style1 li {
                    padding: 20px 0px 30px 0px;
                    background: url(images/homepage11.jpg) repeat-x left top;
                }

                 

                ul.style1 h3 {
                    margin: 0px;
                    padding: 0px;
                    font-weight: normal;
                    font-style: italic;
                    color: #3e6e35;
                }

                 

                ul.style1 .byline {
                    margin: 0px;
                    padding: 0px 0px 10px 0px;
                    font-style: italic;
                }

                 

                ul.style1 .first {
                    padding-top: 0px;
                    background: none;
                }

                 

                 

                 

                ------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------

                 

                ------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------

                 

                <!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=utf-8" />

                 

                <title>The Carpet Emporium | Designer Flooring</title>

                 

                <meta name="keywords" content="" />

                 

                <meta name="description" content="" />

                 

                <link href="default.css" rel="stylesheet" />

                 

                <style type="text/css">

                 

                @import "layout.css";

                 

                </style>

                 

                </head>

                 

                <body class="single">

                 

                <div id="wrapper">

                 

                    <div id="header" class="container">

                 

                        <div id="logo">

                 

                            <h1><a href="/index.html"> </a></h1>

                 

                            <p> </p>

                 

                        </div>

                 

                        <div id="menu">

                 

                            <ul>

                 

                                <li><a href="/carpets" accesskey="1" title=""><span>Carpets</span></a></li>

                 

                                <li class="active"><a href="#" accesskey="2" title=""><span>Designer Flooring</span></a></li>

                 

                                <li><a href="#" accesskey="3" title=""><span>Laminate</span></a></li>

                 

                                <li><a href="#" accesskey="3" title=""><span>Wood</span></a></li>

                 

                                <li><a href="#" accesskey="4" title=""><span>Rugs</span></a></li>

                 

                            </ul>

                 

                        </div>

                 

                    </div>

                 

                    <div id="splash" class="container"> </div>

                 

                    <div id="page" class="container">

                 

                        <div class="bgtop">

                 

                            <div id="content">

                 

                                <div class="box-style">

                 

                                    <div>

                 

                                        <p><img src="images/axminster.jpg" alt="" width="150" height="60" class="alignleft" /><strong>Vestibulum commodo volutpat</strong> a etiam convallis ac, laoreet enim. Phasellus sed  fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et.</p>

                 

                                       

                 

                                            <li><a href="#">Adams Carpets</a></li>

                 

                                            <li><a href="#">Alternative Flooring</a></li>

                 

                                            <li><a href="#">Associated Weavers</a></li>

                 

                                            <li><a href="#">Axminster Carpets</a></li>

                 

                                            <li><a href="#">Brookway Carpets</a></li>

                 

                                            <li><a href="#">Cavalier Carpets</a></li>

                 

                                            <li><a href="#">Crucial Trading</a></li>

                 

                                            <li><a href="#">Cavalier Carpets</a></li>

                 

                                        </ol>

                 

                                    </div>

                 

                                </div>

                 

                            </div>

                 

                            <div id="sidebar"></div>

                 

                        </div>

                 

                    </div>

                 

                </div>

                 

                <div id="footer">

                 

                    <p>Copyright (c) 2011 The Carpet Emporium | www.thecarpetemporium.co.uk | All rights reserved.</p>

                 

                </div>

                 

                </body>

                 

                </html>
                • 5. Re: CSS copying question.
                  John Waller Adobe Community Professional & MVP

                  The CSS is actually the only thing copying, as the HTML on either pages sticks to whatever I change it to.


                  Are you saying that when you edit the CSS file, it affects the other pages?

                   

                  Or are you editing the HTML files and the CSS is changing?

                  • 6. Re: CSS copying question.
                    Kalossatron Level 1

                    Whenever I change the css file, for example.. a splash image, it changes for all other css files within' the website.

                    • 7. Re: CSS copying question.
                      Nancy OShea Adobe Community Professional & MVP

                      How many CSS files do you have?

                       

                      Can you upload your page to a remote server space and post a link?  You'll get better answers that way.

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists 
                      http://alt-web.com/
                      http://twitter.com/altweb