9 Replies Latest reply on Feb 8, 2010 1:40 AM by Shaneob78

    CSS - driving me crazy!

    Shaneob78

      I used to use DW back in the days of MX and Ive now got the latest CS4 version.

       

      Ive never really got, or needed CSS as I usually just bring flash elements into a page to publish alongside the odd table or bit of text.

       

      But now I cant seem to do anything without CSS getting in my way and it's driving me mad.

       

      I am trying to do the following, all centred and 940 pixels wide:

       

      Top table - 1 row, 3 columns, the left one with left alingment, the right one with right alignment with 2 words of text which are links.

       

      Flash header - simple enough.

       

      Flash button bar - simple enough.

       

      Bottom table - 5 rows, 3 columns, left column cells aligned left, right column cells aligned right, centre column aligned centre, Heading text 12px captialized and red, regular text 10px white.

       

      So how do I do the above? Ive tried setting so many CSS styles but all conflict something or other somewhere else on the page.

      How do I place a table within a table cell which has different attributes to the CSS set for the main table?

      And how do I place a form textfield or button on the same line as some text as the red box around the form element is much bigger than the button or textfield itself??

       

      Thanks in advance

        • 1. Re: CSS - driving me crazy!
          Nancy OShea Adobe Community Professional & MVP

          CS4 requires you to have a working knowledge of HTML and CSS-positioning.  Much more than you ever did with MX. So I'm not surprised you're struggling.


          HTML & CSS Tutorials - http://w3schools.com/

           

          Without seeing your page, it's impossible to give anything but general advice.

           

          To center a web page on screen you need just 3 things:

          1. a valid document type (DW does this for you when you create a new HTML document),

          2. a container width in pixels, ems or %,

          3. margin-left and margin-right value of AUTO.

           

          CSS:

          #container {

          width: 940px;

          margin:0 auto; /**centers on screen**/

          text-align:center; /**centers on older browsers**/

          }

           

          HTML:

          <div id="container">

          your page content goes here

          </div>  <!--end container-->

           

          Modern web best practices call for using CSS positioning instead of tables for layouts.  It's cleaner and much more efficient.

           

          From  Tables to CSS Web Design Part 1 -
          http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html

           

          From   Tables to CSS Web Design Part 2 -
          http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html

           

           

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

          • 2. Re: CSS - driving me crazy!
            Shaneob78 Level 1

            Thanks.

             

            The 2 links you sent lead to error pages.

             

            What do you mean about margin-left and margin-right value of AUTO?

             

            How would be the best way to layout the attached type of layout?

            Is there a template in dreamweaver which suits this design?

             

            Or something similar to these 2:

             

            http://themeforest.net/item/studio-click-html-css-jquery-psd/full_screen_preview/58333

            http://themeforest.net/item/network-wp/full_screen_preview/69831

             

            Thanks

            • 3. Re: CSS - driving me crazy!
              Nancy OShea Adobe Community Professional & MVP

              These links work for me:


              http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html

               

              http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html

               

              What do you mean about margin-left and margin-right value of AUTO?

               

              CSS margin: 0 auto   makes browser defined left and right margins.

              http://www.w3schools.com/css/css_margin.asp

               

              How would be the best way to layout the attached type of layout?

              Is there a template in dreamweaver which suits this design?

               

              Those templates are fairly complex for a first CSS project.  I would suggest you start simple and work your way up to advanced layouts.   DW has CSS layouts you can use as a starting point, but nothing quite that elaborate out of the box.

               

              A few different CSS Layouts that might help you get started: (view source code):

               

              Basic 1-column with floated boxes -

              http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html


              Liquid header and footer -

              http://alt-web.com/TEMPLATES/I-page-with-floats.html

               

              3-column CSS -

              http://alt-web.com/TEMPLATES/3-col-white-gray.html

               

               

              Good luck,

               

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

              • 4. Re: CSS - driving me crazy!
                JohnC_in_Texas

                I certainly feel your pain   I just migrated from GoLive to DW CS4.  css was is still driving me crazy for positioning boxes.  There are some great tutorials out there - search for "css position" or something like that.  I also highly recommend the on-line video tutorials at lynda.com, she has many tutorials on css and css/DW.  It is money well spent, guaranteed.

                 

                I just completely rebuilt a web site in DW and I can proudly say there 'ain't' one table in the whole thing   (although I porobably would have been finished with it two weeks ago if I used tables .)

                 

                -=John=-

                • 5. Re: CSS - driving me crazy!
                  Shaneob78 Level 1

                  Thanks.

                  Ive followed the  tutorials you recommended and I can see some benefits already.

                   

                  I've come stuck on one main aspect of the page I'm trying to build - the tutorial explains how to place DIV as columns side by side, and I am trying to do just that, 3 DIV's within a main DIV (presuming this is better than a table within the main DIV with 3 columns?).

                   

                  But when I place the first DIV as per the tutorial instructions, with Float Left and no margin values, then place the next DIV (although I cant see the cursor so not sure if I am inserting it after the first DIV) next to it, with a margin value 10px bigger than the total width of the first DIV - the 2nd DIV forces the first DIV down rather than sitting side by side. Any ideas??

                   

                  Should I just place a table with 3 columns in the main DIV?

                   

                   

                  Thanks

                  • 6. Re: CSS - driving me crazy!
                    Nancy OShea Adobe Community Professional & MVP

                    when I place the first DIV as per the tutorial instructions, with Float Left and no margin values, then place the next DIV (although I cant see the cursor so not sure if I am inserting it after the first DIV) next to it, with a margin value 10px bigger than the total width of the first DIV - the 2nd DIV forces the first DIV down rather than sitting side by side. Any ideas??

                     

                    Is this happening in Browser Preview or just in Design View?  We would need to see your code.  Can you post a URL to your test page?

                     

                     

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

                    • 7. Re: CSS - driving me crazy!
                      Niles Ridgeman Level 1

                      I agree, CSS drive me around the bend.

                      The newer the web authoring software the harder it is to use.

                       

                      I miss pagemill. I could do very nice sites in pagemill. Now every time I try and create the simplest of web pages I just end up pulling my hair out.

                       

                      I haven't got a point here, just feeling your pain.

                      • 8. Re: CSS - driving me crazy!
                        GuppyFish09

                        Believe it or not, I found some great tutorials on YouTube and taught myself CSS.  I've sinced transformed a couple of my sites from tables to CSS and won't go back.  Example: http://midloband.org/  Now having to use a table can drive me around the bend.

                         

                        On YouTube, there are a couple of useful tutorials from tutvid and tentonbooks.  I watched too many one evening and couldn't sleep because of all the info running around in my head.

                         

                        Hope this has helped!

                         

                        Karen

                        • 9. Re: CSS - driving me crazy!
                          Shaneob78 Level 1

                          Hi. It will take me a while to set a test URL up, how about looking through the code below, which is the html from the page (just the bottom half of the page where the DIVs are):

                           

                          </p>

                          <div id="mainContainer">

                            <div id="LeftColumn">

                              <div id="LeftColumnHeader">LATEST NEWS</div>

                              <p>New UK Venues and dates confirmed for the 2011 AC Milan Junior Camps.<br />

                              Starting in June we will be running camps &amp; courses across London, East Sussex and Northumberland. For more info, see Courses or Book Now.</p>

                              <p> </p>

                            </div>

                            <div id="CenterColumn">VIDEO PLAYER

                              <div id="RightColumn">SPONSORS</div>

                            </div>

                          </div>

                          <p>  </p>

                          <script type="text/javascript">

                          <!--

                          swfobject.registerObject("FlashID");

                          swfobject.registerObject("FlashID2");

                          //-->

                          </script>

                          </body>

                          </html>

                           

                          I've managed to get the 3 DIVs next to eachother, but when I add content to them, the 3rd column (far right) drops down about 50px below the other two??

                           

                          And in the middle column, I try to add an FLV and all I can see is skin elements on a blank white box - no trace of the video??

                          I created the video from Adobe Encoder.

                          Have you come across this before?

                           

                          Thanks

                           

                          Shane