Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member
    Join Date
    Mar 2004
    Posts
    53
    Member #
    5175
    Greetings,
    At: http://www.equipmentpolice.com/Pasta3.html ,
    Line 16, How can I vertically center the graphic between the text
    (800 861 4844)

    Thanks,
    Jack

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    put it all in a table:
    Code:
    <marquee behavior="scroll" width="100%" height="15">
        <table cellpadding="4" cellspacing="0" border="0">
            <tr>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
                <td class="bigred"><nobr>800 861 4844</nobr></td>
                <td><img src="desco.jpg" height="50" border="2"></td>
            </tr>
        </table>
    </marquee>
    And put this CSS code in your <head> section to simplify your text styling:

    Code:
    <style>
    .bigred {
        font-size: 30pt;
        font-weight: bold;
        color: #009900;
    }
    </style>

  4. #3
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    I have been trying to figure out how to vertically align elements, such as text, using only css. I have already tried the vertical-align selector, but that doesn't work. Is there anyway to do this without tables?

    Example: http://www.wcdarchives.com/v4
    I want to center the text of the navigation menu item with css.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  5. #4
    Member
    Join Date
    Mar 2004
    Posts
    53
    Member #
    5175
    Thaaaaaaanks Steve!
    How are you with anchors?

    Jack

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Tables... BAH..BALONY!!

    The thing with css layout is you have to forget most of what you know about layout because its nothing like tables.. you HAVE TO relearn most everytying you know. Thats why its so slow to become mainstream practice, but once you know it, it all makes sense. And to be honest to a point I can understand, after all why go find a screwdriver when there are so many butter knives around?

    Anyway to position anything (vertically or horozontally) you must know what your container is (another div, the body, an H1 element, whatever).. and you must use positioning. (ie, relative, absolute, etc..)(i am not reffering to adjusting margins or padding, using that method does not require your element to be positioned)

    I like to use the parent:realitive / child:absolute method. What this means is that you have a parent element that is positioned relativly and you have absolutly positioned elements nested inside of that element. You would use the top, left, right and bottom properties to position them where you want relative to the parent.

    Example:

    CSS
    Code:
    #parent {
    	position: relative;
    	width:100px;
    	height:300px;
    	background: #CCC;
    	left: 50%;
    	top:50%;
    	margin-left: -50px;
    	margin-top: -150px;
    }
    #child1 {
    	position: absolute;
    	width:80px;
    	height:80px;
    	background: #ddd;
    	left: -20px;
    	top:-50px;
    }
    #child2 {
    	position: absolute;
    	width:40px;
    	height:10px;
    	left: 200px;
    	top: 50px;
    	background: #eee;
    }
    Markup
    Code:
    <div id="parent">
      <div id="child1">
      </div>
      <div id="child2">
      </div>
    </div>
    OR

    Markup:
    Code:
    <div id="parent">
      <div id="child1">
        <div id="child2">
        </div>
      </div>
    </div>
    The difference in the two is that in the first one child2 will be positioned according to parent since that is its container. In example 2 it will be positioned according to child1.

    So you see vertial positioning can be achived easily when you have discovered this different set of rules.


  7. #6
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    I do aplogize as I just relized my last post didnt help with your origional question.

    Ala the CSS way:

    CSS
    Code:
    .bigred {
      color: #009900;
      display: inline;
      font-size: 30pt;
      font-weight: bold;
      margin-right: 50px;
      position: relative;
    }
    .bigred img{
      border: #000 solid 2px;
      display: inline;
      height: 50px;
      margin-top: -25px;
      position:absolute;
      top: 50%;
    }
    marquee {
      height: 50px;
      width: 100%;
    }
    Markup
    Code:
    <marquee behavior="scroll">
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
      <div class="bigred">
        <nobr>800 861 4844</nobr>
        <img src="desco.jpg">
      </div>
    </marquee>



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:58 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com