7 Replies Latest reply on Jun 21, 2017 8:07 AM by martinv44029552

    Moving h1 away from left hand margin and changing color of text

    martinv44029552 Level 1

      Hello

       

      I finally bit the bullet and downloaded the full Dreamweaver software.

      i tried a couple of free packages but as i'm doing a Dreamweaver course, it seemed sensible!  As well as dipping into the w3schools tutorials.  Maybe I'm rushing ahead but I'm stuck at the moment!

       

      Three fold question here,

       

      1. I'd like my name "Martin Vallis" to be aligned to the "G" in Gallery. What code do I need to input?

      2. I'd like the text of my categories to be in white, I've achieved it once but somehow have lost it?

      3. I'd like to also change all the text fonts to gill sans, I've tried this, in a variety of positions within the body but no luck, <style ="font-family:gill sans;"> </style>

      Obviously doing something wrong any help appreciated, thanks in advance.

       

      Screen Shot 2017-06-19 at 17.27.11.pngScreen Shot 2017-06-19 at 17.27.41.png

        • 1. Re: Moving h1 away from left hand margin and changing color of text
          Jon Fritz II Adobe Community Professional & MVP

          See those red line numbers in your source code?

           

          That means you have errors in your code. Hover your mouse over the red numbers for a pop up error hint.

           

          Right now, you have a problem with your quote formatting...

           

          style="property:value; property:value; property:value;"

           

          On line 8, you have too many " marks.

          On line 10, too few (you need to wrap the style's property and value).
          On line 12, you have duplicated the style attribute (you can't do that).

          1 person found this helpful
          • 2. Re: Moving h1 away from left hand margin and changing color of text
            Nancy OShea Adobe Community Professional & MVP

            I think you should begin with one of the pre-built starter Templates in DW CC.  It will give you a chance to see how HTML and CSS code works together in a structured layout.

             

            I see nothing wrong with doing W3 Schools tuts & exercises.  It's a great way to learn code.   And coding skills are essential.   So keep doing that.

             

            In the meantime, define a local site folder for your project.  Go to Site > New Site...  See screenshots.

            CC-localsite.jpg

             

            Next, go to File > New > Starter Templates.  Select a layout and hit the Create button.

            CC-StarterPage.jpg

             

            After saving your document, DW will create the assets and folders for you which can be seen in your Files Panel (F8).

            CC-StarterPageAssets.jpg

             

            You now have a beginning site to work with.  Examine the code in your HTML, CSS and other asset folders.

            Have fun with it!

             

             

            Nancy

            1 person found this helpful
            • 3. Re: Moving h1 away from left hand margin and changing color of text
              martinv44029552 Level 1

              Thanks John for your input, it's a very useful tip, about numbers in red, obviously something new learned 

               

               

              Screen Shot 2017-06-19 at 20.29.05.pngScreen Shot 2017-06-19 at 23.02.41.png

              • 4. Re: Moving h1 away from left hand margin and changing color of text
                martinv44029552 Level 1

                Thanks Nancy

                 

                Useful suggestions, maybe my eagerness means I'm overlooking the detail.

                • 5. Re: Moving h1 away from left hand margin and changing color of text
                  Nancy OShea Adobe Community Professional & MVP

                  Why is your code formatted with so much indented white space?

                  You might want to use the Format Source Code button on your Common toolbar to tighten things up a little.

                   

                  • 6. Re: Moving h1 away from left hand margin and changing color of text
                    Jon Fritz II Adobe Community Professional & MVP

                    martinv44029552  wrote

                     

                    Hello

                     

                    I finally bit the bullet and downloaded the full Dreamweaver software.

                    i tried a couple of free packages but as i'm doing a Dreamweaver course, it seemed sensible!  As well as dipping into the w3schools tutorials.  Maybe I'm rushing ahead but I'm stuck at the moment!

                     

                    Three fold question here,

                     

                    1. I'd like my name "Martin Vallis" to be aligned to the "G" in Gallery. What code do I need to input?

                    2. I'd like the text of my categories to be in white, I've achieved it once but somehow have lost it?

                    3. I'd like to also change all the text fonts to gill sans, I've tried this, in a variety of positions within the body but no luck, <style ="font-family:gill sans;"> </style>

                    Obviously doing something wrong any help appreciated, thanks in advance.

                     

                     

                    1. The browsers give a default padding in the ul and ol tags of around 1.5em. You can either remove that padding by setting it to zero for the ul, or add a margin-left to your heading to get it to move over.

                     

                    2. Looks like fixing the errors repaired your color issue.

                     

                    3. gill sans is not a "web safe" font. Meaning, unless you take steps to add the font to your server, or link to a font on another server (like google fonts or font squirrel) your viewers won't be able to see it because it's not installed on their machines.

                     

                    The most likely reason it wasn't working originally is because font names with spaces in them need to be surrounded by quotes in your css, since you are using double quotes for the style attribute, you will need to use single quotes for the property's value...

                     

                    <div style="font-family:'gill sans';">your content</div>

                     

                    However, like I mention above, anyone without gill sans installed won't see it, rather, they'll the browser default serif font. You should use either a font-stack like...

                     

                    font-family:'gill sans', verdana, tahoma, arial, sans-serif;

                     

                    ...where the viewer's browser will use the first font it recognizes as being installed, or look into the @font-face css rule with and place a font that's licensed for web use on your server...

                     

                    CSS3 @font-face Rule

                    2 people found this helpful
                    • 7. Re: Moving h1 away from left hand margin and changing color of text
                      martinv44029552 Level 1

                      John

                       

                      Many apologies for not getting back to you sooner.

                       

                      Thanks for the information and yes it did correct my type colour issues

                      I've also learnt today how to re position my images, so as long as I do learn something new everyday, then that's brilliant.

                       

                      Feel like a kid with a new toy.

                       

                      Thanks again.