6 Replies Latest reply on Sep 15, 2011 3:04 PM by dbjackie

    Placing Styles next to each other

    nla7

      Hi, I'm a newbie on both this site and building websites so sorry for such a basic question, however I would like to know how I would go about placing two styles side by side.

       

      My current code is:

      <div id="content">

      <div id="image1"></div>

       

      <div id="text"></div>


      </div>

       

      I can't figure out how to get the "image1" and "text" styles to be next to each other instead of on top of each other.

       

      Any help would be great.

       

      Thanks in advance.

        • 1. Re: Placing Styles next to each other
          MurraySummers Level 8

          <div id="content" style="overflow:hidden;width:desired_px_widthpx;">

          <div id="image1" style="width:your_image_widthpx;float:left;"></div>

           

          <div id="text" style="width:the_remaining_widthpx;float:left;"></div>


          </div>

           

          Inline styles shown for clarity - you could add them to your stylesheet after understanding what they do.

          • 2. Re: Placing Styles next to each other
            nla7 Level 1

            Excellent, thank you for such a quick reply.

             

            Could I ask your advice, the "content" style will be the same on all 6 pages, however the layout within the "content" would change for each page.  Would it therefore be best to continue using styles for each individual page like in the answer you have explained, or would you suggest using tables for the layout within the "content"

             

            Many thanks

            Nicola

            • 3. Re: Placing Styles next to each other
              MurraySummers Level 8

              I wouldn't use tables for layout ever unless I were displaying tabular information.

               

              I see nothing in your last post that would suggest you need styles on each page.   I would externalize the styles in a linked stylesheet.

               

              But maybe I'm not understanding what you are implying with your last post.  Can you say more?

               

              Message was edited by: Murray *ACP*

              • 4. Re: Placing Styles next to each other
                nla7 Level 1

                Thanks, I have now externalised all the styles, will definitely make life easier

                 

                I have another question, however not sure whether its best to start a new thread or not, you'll have to advise me for next time?

                 

                However I have the following code which is supposed to show a navigational button in a normal state and when its being hovered over.

                 

                <a href="about.html" onclick="MM_nbGroup('down','group1','about','',1)" onmouseover="MM_nbGroup('over','about','images/buttons/abouthover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/buttons/about.jpg" name="about" width="103" height="33" border="0" id="about"  /></a>

                 

                The normal state apears fine and it works perfectly fine as a hyperlink, however the hover image does not appear.

                 

                Is there anything glaring wrong with it?

                 

                Thanks

                • 5. Re: Placing Styles next to each other
                  dbjackie Level 1

                  you can also create a CSS class for all your navigation stuff as well. Unless you really want to use images as the buttons. I usually create the gradient background and have CSS fill the li in the div and then on rollover it changes to the other background image.

                  • 6. Re: Placing Styles next to each other
                    MurraySummers Level 8

                    MM_nbGroup

                     

                    So you have made this navigation element using DW's (very antique) Navbar feature? Too bad.  There's really no reason at all to do that when you can just create a simple bulleted list navigation element.  About 10% as much code and easier to maintain.

                     

                    But since this is offtopic, post a link to the page in a new thread and we'll jump on it.