14 Replies Latest reply on Apr 27, 2015 2:35 PM by Nancy OShea

    Style sheet

    williamm86517933 Level 1

      when I attach my style sheet I cant view in dreamweaver only when I preview it live or in a browser

        • 1. Re: Style sheet
          Ben M Adobe Community Professional

          That is very possible and it depends on how the stylesheet is being included, whether it is static or dynamic, whether the stylesheet lives within the local root or some other location.  There are a lot of variables in play.  If you are uncertain which category your site falls into, you can post a link to a page in question and we can examine for you.

          • 2. Re: Style sheet
            williamm86517933 Level 1

            thanks!

            Snake...

            I found out the problem/

            however I am new to web design and still learning

             

            was wondering if you can help?

            I need to know or find a good calculator to figure out the pixels and em cm % math. for I need to know 98% = what in px?

             

            also in web design would it be beat to use px or % on building div to place images or content?

             

            Thanks again Snake.

             

            William

            • 4. Re: Style sheet
              williamm86517933 Level 1

              Thank you!

              • 5. Re: Style sheet
                Nancy OShea Adobe Community Professional & MVP

                <in web design would it be beat to use px or % on building div to place images or content?>

                 

                In Responsive Web Design, we use % based layouts.  In fixed-width layouts, we use pixels or ems.

                 

                To allow images and other objects to rescale to viewport, you can add this to your CSS.

                 

                img, object, video { max-width:100%}

                 

                This allows those elements to re-scale up to but not over their native file size in pixels.  For this to work, your layout needs to be % width and you must not add any explicit height or width attributes to your HTML code.

                 

                 

                Nancy O.

                • 6. Re: Style sheet
                  williamm86517933 Level 1

                  so basically in a responsive website no height..

                  how about on the header? or wrapper?

                  • 7. Re: Style sheet
                    Nancy OShea Adobe Community Professional & MVP

                    No explicit height values anywhere.  Height is always determined by content and end user browser settings.   Height also limits how much content a container can hold.

                     

                    If needed to reveal a background-image, use min-height.  It open up the container without restraining it.

                     

                     

                    Nancy O.

                    • 8. Re: Style sheet
                      williamm86517933 Level 1

                      Hi Nancy,

                       

                      I put my img as you said...  img, object, video { max-width:100%}

                       

                      my banner work good but now some of my other images went to 100% and collapse some of my files ;(

                       

                      The reason I was wondering was in my tablet both of my banners were not in 100% so they were not filling in my screen, but now that I set it like you said my banner looks good but the rest of my images go to 100%

                       

                       

                      Need help please..

                      • 9. Re: Style sheet
                        Nancy OShea Adobe Community Professional & MVP

                        What's wrong with your other images going to max-width: 100%?

                        How big are they to begin with?

                         

                        Nancy O.

                        • 10. Re: Style sheet
                          williamm86517933 Level 1

                          Hi Nancy,

                           

                          I am learning and got it fixed yea!! for me...

                           

                           

                          <div id="topbox"><img src="assets/P.PNG" alt="" width="100%" class="img-responsive"/></div>

                           

                          just removed 1280px to 100% on the actual image itself in code view

                          • 11. Re: Style sheet
                            Nancy OShea Adobe Community Professional & MVP

                            You don't need width=100%.  It's going to distort smaller images and it is not the same as the CSS I gave you.  No stated width or height is needed on your images unless you want to keep it from scaling.

                             

                             

                             

                            Nancy O.

                            • 12. Re: Style sheet
                              williamm86517933 Level 1

                              here is my code view...

                               

                              <!doctype html>
                              <html>
                              <head>
                              <meta charset="utf-8">
                              <title>Untitled Document</title>
                              <link href="ciss_stylesheet.css" rel="stylesheet" type="text/css">
                              <link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.css">
                              <link rel="stylesheet" type="text/css" href="css/foundation.css">
                              <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" />
                              <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
                              <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
                              <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
                              <script src="html5.js"></script>
                              <script src="bootstrap-3.3.4-dist/js/bootstrap.js"></script>
                              <link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css" />
                              </head>

                              <body>
                              <div id="topbox"><img src="assets/P.PNG" alt="" width="100%" class="img-responsive"/></div>
                              <div id='cssmenu'>
                                <ul>
                                  <li class='active'><a href="index.html" title="Buycoloradoinsurance Home and Auto|Littleton co"><span>Home</span></a></li>
                                  <li><a href="Get_A_Quote.html"><span>Get A Quote</span></a> </li>
                                  <li class='has-sub'><a href="About_Us.html"><span>About Us</span></a>
                                    <ul>
                                      <li><a href="Meet_The_Team.html"><span>Meet The Team</span></a></li>
                                      <li class='last'><a href="Client_testimonials.html"><span>Commercials and Client testimonials</span></a></li>
                                      <li class='last'><a href="Client_testimonials.html"><span>In the community</span></a></li>
                                    </ul>
                                  </li>
                                  <li class='has-sub'><a href="Our_Products.html"><span>Our Products</span></a>
                                    <ul>
                                      <li><a href="Homes.html"><span>Homes</span></a></li>
                                      <li><a href="Auto.html"><span>Auto</span></a></li>
                                      <li><a href="Umbrella.html"><span>Umbrella</span></a></li>
                                      <li><a href="Motorcycle.html"><span>Motorcycle</span></a></li>
                                      <li class='last'><a href="Recreational.html"><span>Recreational</span></a></li>
                                    </ul>
                                  </li>
                                  <li class='has-sub'><a href="Service_Center.html"><span>Service Center</span></a>
                                    <ul>
                                      <li><a href="Policy_changes_and_request.html"><span>Policy changes and request</span></a></li>
                                      <li><a href="Live_Chat.html"><span>Live Chat</span></a></li>
                                      <li class='last'><a href="After_hours_service_Center.html"><span>After hours service Center</span></a></li>
                                    </ul>
                                  </li>
                                  <li class='has-sub'><a href="Resources.html"><span>Resources</span></a>
                                    <ul>
                                      <li><a href="Our_expertise_on_demand.html"><span>Our expertise on demand</span></a></li>
                                      <li class='last'><a href="Local_preferred_vendors.html"><span>Local preferred vendors</span></a></li>
                                    </ul>
                                  </li>
                                  <li class='last'><a href="Contact_Us.html"><span>Contact Us</span></a></li>
                                </ul>
                              </div>
                              <div id="midbox"><p>Proud Spounor Of The Denver Auto Show</p></div>
                              <div id="headerbox">
                                <div class="container-fluid">
                                  <div class="row-fluid">
                                    <div class="span6 text-left">
                                    <img src="assets/Denver-Auto-Show.png" alt="" width="161"/>      </div>
                                    <div class="span6 text-right">
                                      <h2>forms will go here!!!!!!</h2>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="span12 text-center">
                                      <video width="420" controls >
                                        <source src="Videos/CBSAutoShowCommercial2.mp4" type="video/mp4">
                                        <source src="Videos/CBSAutoShowCommercial2.ogg" type="video/ogg">
                                        <embed src="Videos/CBSAutoShowCommercial2.flv" type="application/x-shockwave-flash" />       
                                      </video>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div id="slider">
                                <div id="carousel-For-ColoradoInsurance" class="carousel slide" data-ride="carousel" data-interval="2000">
                                  <!-- Indicators -->
                                  <ol class="carousel-indicators">
                                    <li data-target="#carousel-For-ColoradoInsurance" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-For-ColoradoInsurance" data-slide-to="1"></li>
                                  </ol>
                                  <!-- Wrapper for slides -->
                                  <div class="carousel-inner">
                                    <div class="item active"> <img src="assets/logos2.jpg" alt="..."></div>
                                    <div class="item"> <img src="assets/logos1.jpg" alt="..." width="3182"></div>
                                  </div>
                                  <!-- Controls -->
                                  <a class="left carousel-control" href="#carousel-For-ColoradoInsurance" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-For-ColoradoInsurance" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
                              </div>
                              <div id="bottombannerbox"><img src="assets/Ciss_True_Banner.PNG" alt="" width="100%" class="img-responsive"/></div>
                              <div class="img-thumbnail" id="socialmediabox">
                                <table width="350" align="center" class="img-circle">
                                  <tbody>
                                    <tr>
                                      <td width="150" height="65"><a href="#"><img src="assets/imagesNBLEZXAX.jpg" alt="" width="51" class="img-circle"/></a></td>
                                      <td width="150" height="10"><a href="#"><img src="assets/goggle plus.png" alt="" width="51" class="img-circle"/></a></td>
                                      <td width="150"><a href="#"><img src="assets/twitt.png" alt="" width="59" class="img-circle"/></a></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <div class="container-fluid">
                                  <div class="row-fluid">
                                  </div>
                                   
                                     
                                   

                                </div>
                              </div>
                                <div id="footerbox"><h2>&copy; Colorado Insurance 2015</h2></div>
                              </div>


                              </body>
                              </html>

                              • 13. Re: Style sheet
                                williamm86517933 Level 1

                                the reason I did the 100% on the banner was because in a tablet it was not stretching out to the end of the page but, everything else was

                                • 14. Re: Style sheet
                                  Nancy OShea Adobe Community Professional & MVP

                                  Then you need a bigger banner image (more pixels for Retina displays).

                                  If you can live with the distortion, use width: 100% on your banner.  Just keep in mind it may look really ugly on ultra wide displays.

                                   

                                   

                                  Nancy O.