Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help with CSS "Box" Class

    Hey Guys, Kind of a newbie to CSS and was hoping i might find some help here.

    I'm having a heck of a time trying to line up some groups of text using css.
    This is what i'm trying to achieve...



    This is what i'm getting...



    I have been at it for hours trying to play with right and left margin values with no results.

    Here is a link to the test page im using
    http://biophysics.com/test.php

    Here is the code
    Code:
    <?php
    
    $page_name = 'index';
    
    include('includes/header.php');
    
    ?>
    <style type="text/css">
    <!--
    .style1 {
    	color: #FFFFFF;
    	font-weight: bold;
    }
    -->
    </style>
    
    	        <div id="inner" class="home">
                    <div id="main-image" class="box"> &nbsp; </div>
    
                    <div id="whatis" class="box">
                            <div class="content">
    
    				<p class="description"><span><a href="http://www.biophysics.com/ecis-theory.php" title="Learn About ECIS">Learn about ECIS</a>:</span> The label free, non-invasive method to electronically monitor cells grown in tissue culture.</p>
                                    <ul class="col1">
                                <li><a href="http://www.biophysics.com/woundhealingpubs.php">Migration</a></li>
                                            <li><a href="http://www.biophysics.com/signaltransduction.php">Signal Transduction</a></li>
                                            <li><a href="http://www.biophysics.com/cellattachment.php">Attachment & Spreading</a></li>
    
                                            <li><a href="http://www.biophysics.com/metastaticpotential.php">Metastatic Potential</a></li>
                              </ul>
                                    <ul class="col2" style="margin-bottom: 0;">
              <li><a href="http://www.biophysics.com/invitro.php">Toxicology</a></li>
                                            <li><a href="http://www.biophysics.com/cellmeasurements.php">Proliferation</a></li>
                                            <li><a href="http://www.biophysics.com/barrierfunction.php">Barrier Function</a></li>
                                            <li><a href="http://www.biophysics.com/flow.php">Cells Under Flow</a></li>
    
                              </ul>
                            </div>
                    </div>
    
                    <div id="center">
                            <a href="#"><span>&nbsp;</span></a>
                    </div>
    
                    <div id="content" class="box">
                            <p style="margin-bottom: 0">Applied BioPhysics has over 25 years of experience with impedance-based cell assays put into one instrument line. Our ECIS instruments and consumable 8-well and 96-well arrays are used in biological research and drug discovery. ECIS offers the ability to measure both simple and complex impedance over a wide range of AC frequencies.</p>
    
                    </div>
    
                    <div id="events" class="box">
                            <div class="content">
                                    <h2><span>Upcoming Events</span></h2>
                                    <div id="webinars">
                                            <h3><a href="webinar.php">
                                            		<img src="images/webinars.png">
                                            	</a>	
                                            </h3>
                                            <ul style="margin-bottom: 0;">
    
                                  <li>
                                    <span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">Barrier Function<br>Assays</a> <br />
                                                            
                                    <span class="style1">11:00 AM EST<br />
                                    June 19, 2012                               </span></span></li>
            </ul>
                              </div>
                              <div id="tradeshows">
                                            <h3><a href="tradeshows.php">
                                            		<img src="images/tradeshows.png">
                                            	</a>		
                                            </h3>
    
                                                                                    <p style="margin-top: 0; margin-bottom: 0"><a href="http://biophysics.com/tradeshows.php" target="_blank">Harvard University Medical School</a></p>
                                            <p style="margin-top: 0; margin-bottom: 0;">July 19, 2012</p>
                                            <p style="margin-top: 0; margin-bottom: 0;">Boston, MA<span track="on" href="http://www.ascb.org/index.php?option=com_content&amp;view=article&amp;id=384&amp;Itemid=304" shape="rect" linktype="link"></span><br />
                                              </span>                                </p>
                              </div>
    						  
    						  
    						           <div id="training">
                                            <h3><a href="tradeshows.php">
                                            		<img src="images/ecis-training.png"></a>		</h3>
     <ul style="margin-bottom: 0;">
    
                                  <li>
                                    <span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">ECIS Training Schedule</a> <br />
                                    <span class="style1">Sept 20 & 21, 2012</span></span></li>
            </ul>
                              </div>
    						  
                            </div>
    
                    </div>
                    <!-- <a id="order" href="http://visitor.constantcontact.com/d.jsp?m=1102585480643&p=oi"><span>&nbsp;</span></a> -->
                    <a id="order" href="store.php"><span>&nbsp;</span></a>
                    <a id="join" href="http://visitor.constantcontact.com/d.jsp?m=1102585480643&p=oi" target="_blank"><span>&nbsp;</span></a>
                    <a id="facebook" href="http://www.facebook.com/pages/Applied-BioPhysics/165532397615" target="_blank"><span>&nbsp;</span></a>
    <?php include('includes/footer.php'); ?>
    If anyone has any ideas it would be greatly appreciated. Would be happy to buy ya a cup of coffee!

  • #2
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Made the left margins on div.training and div.tradeshows 0px and changed the left margin on div.webinars to 30px. It's prety close to exactly what you want but you can play around more to make it perfect. Looks like this:



    Also, you should change the titles (webinars, tradeshows, etc.) to plain text as it's more accessible and would even look better. In the future, having a tool like Firebug makes it really convenient and easy to play around with margins and see them update live without having to make any permanent changes to push anything to the webserver.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    boko you Rock! Thx so much. Gonna try it out now

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Would you be able to post your results boko? im not getting it.

  • #5
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Those three margins were the only things I changed. I only checked it in Firefox but if you continue playing with the numbers you shouldn't have a problem getting it to work. I didn't see any errors in your code that would screw it up otherwise.

  • Users who have thanked boko for this post:

    graphixdezign6 (06-20-2012)

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    awesome! thx man.
    will continue working on it first thing in the am.

    also thx for the suggestion on titles. will change to true type for sure.
    not sure why the previous developer made picture files for text!
    kinda silly!

    this project is something that was created by someone
    else and now im making updates for the company
    Last edited by graphixdezign6; 06-20-2012 at 02:12 AM.

  • #7
    Regular Coder
    Join Date
    Mar 2012
    Posts
    102
    Thanks
    2
    Thanked 5 Times in 4 Posts
    Wouldn't it be easier to just use position:fixed; on it? then use the "top" and "left" to coordinate it.

  • Users who have thanked bigcasey123 for this post:

    graphixdezign6 (06-20-2012)

  • #8
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Still no dice
    Changed the left margins like you said but still getting same results.
    Viewing it in IE.

    Here is the updated code per your instructions


    Code:
    <div id="events" class="box">
                            <div class="content">
                                    <h2><span>Upcoming Events</span></h2>
    								
    								
    								
    								
                                    <div id="webinars">
                                            <ul style="margin-bottom: 0; margin-left: 30px;">
                                              <h3><a href="webinar.php">
                                            		<img src="images/webinars.png">
                                            	</a>	
                                            </h3>
                                            
    
                                  <li>
                                    <span class="name"><a href="https://appliedbiophysics.webex.com" target="_blank">Barrier Function<br>Assays</a> <br />
                                                            
                                    <span class="style1">11:00 AM EST<br />
                                    June 19, 2012                               </span></span></li>
            </ul>
                              </div>
    						  
    						  
    						  
    						  
    						  
    						  
                              <div id="tradeshows">
                                            <ul style="margin-bottom: 0; margin-left: 0px;">
                                              <h3><a href="tradeshows.php">
                                            		<img src="images/tradeshows.png">
                                            	</a>		
                                            </h3>
    
                                                                                    <a href="http://biophysics.com/tradeshows.php" target="_self">Harvard University Medical School</a> <br />
                                                            
                                    <span class="style1">July 19, 2012
    <br />
                                    Boston, MA                               </span></span></li>
            </ul>
                              </div>
    						  
    						  
    						  
    						  
    						  
    						  
    						           <div id="training">
                                            <ul style="margin-bottom: 0; margin-left: 0px;">
                                              <h3><a href="tradeshows.php">
                                            		<img src="images/ecis-training.png"></a>		</h3>
     
    
                                  <li>
                                    <span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">ECIS Training Schedule</a> <br />
                                    <span class="style1">Sept 20 & 21, 2012</span></span></li>
            </ul>
                              </div>
    						  
                            </div>
    
                    </div>

    Bigcasey, can you elaborate on your method?

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #events #webinars {
        clear: left;
       /* margin-left: 54px;*/
    
    }
    /*#events #tradeshows {
        margin-left: 100px;
    }*/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    graphixdezign6 (06-20-2012)

  • #10
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    What i changed the CSS
    Code:
    #events #tradeshows {
    margin-left: 10px;
    }
    
    #events #webinars {
    clear: left;
    margin-left: 0px;
    }

    What i made the HTML
    Code:
    <div class="content">
                                    <h2><span>Upcoming Events</span></h2>
    								
    								
    								
    								
                                    <div id="webinars">
                                            <ul>
                                              <h3><a href="webinar.php">
                                            		<img src="images/webinars.png">
                                            	</a>	
                                            </h3>
                                            
    
                                  <li>
                                    <span class="name"><a href="https://appliedbiophysics.webex.com" target="_blank">Barrier Function<br>Assays</a> <br>
                                                            
                                    <span class="style1">11:00 AM EST<br>
                                    June 19, 2012                               </span></span></li>
            </ul>
                              </div>
    						  
    						  
    						  
    						  
    						  
    						  
                              <div id="tradeshows">
                                            <ul>
                                              <h3><a href="tradeshows.php">
                                            		<img src="images/tradeshows.png">
                                            	</a>		
                                            </h3>
    
                                                                                    <a href="http://biophysics.com/tradeshows.php" target="_self">Harvard University Medical School</a> <br>
                                                            
                                    <span class="style1">July 19, 2012
    <br>
                                    Boston, MA                               </span>
            </ul>
                              </div>
    						  
    						  
    						  
    						  
    						  
    						  
    						           <div id="training">
                                            <ul>
                                              <h3><a href="tradeshows.php">
                                            		<img src="images/ecis-training.png"></a>		</h3>
     
    
                                  <li>
                                    <span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">ECIS Training Schedule</a> <br>
                                    <span class="style1">Sept 20 &amp; 21, 2012</span></span></li>
            </ul>
                              </div>
    						  
                            </div>
    heres a screenshot
    http://cl.ly/0J410i2F201I2r3z2J3W

  • Users who have thanked aaronhockey_09 for this post:

    graphixdezign6 (06-20-2012)

  • #11
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    AWESOME! Thank You So Much Abd and Aaron! Really starting to see how css
    works now, really cool! So much better than tables!!! You guys rock!

    Bigcasey and Boku, you guys rock too, just couldnt figure out your solution


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •