SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot ricklach's Avatar
    Join Date
    Nov 2004
    Location
    Victoria BC
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    lining up 4 elements

    I am trying to line up four elements in a "toolbar" type of configuration. I have tried many different combinations of css properties but I just can't seem to get things the way I want them. There are some limitations like class and id names have already been defined in other parts of the program - but I don't see this as a show-stopper. Here is the generated html code (with some parts removed for brevity):
    Code:
    <div id="wrapper" class="ltr">
    <div id="loginout" >
    			<a href="edituser.php" class="link">Logged in as </a><br /><a href="admin.php" class="link">Admin</a> | <a href="index.php?logout=1" class="link">Logout</a><br /> | 
    <div class="theme_form"><form action="themechange.php" name="themeform1" method="post"><input type="hidden" name="frompage" value="2007.GED" /><select name="mytheme" class="header_select" onchange="document.themeform1.submit();"><option value="">Change Theme</option>
    <option value="themes/lach/" class="selected-option">Lach</option>
    <option value="themes/standard/">Standard</option>
    </select></form></div>
     | <form action="search.php" method="post">											<input type="hidden" name="action" value="general" />
    											<input type="hidden" name="topsearch" value="yes" />
    											<input type="text" class="formbut" accesskey="S" name="query" size="15" value="Search" 
    												onfocus="if (this.value == 'Search') this.value=''; focusHandler();" 
    												onblur="if (this.value == '') this.value='Search';" />										<input type="image" src="themes/lach//images/go.gif" align="top" title="Search" />	</form>
    
    | <div class="favorites_form">
    <form name="favoriteform" action="index.php" method="post" onsubmit="return false;">
    		<select name="fav_id" class="header_select" onchange="if (document.favoriteform.fav_id.options[document.favoriteform.fav_id.selectedIndex].value!='') window.location=document.favoriteform.fav_id.options[document.favoriteform.fav_id.selectedIndex].value; if (document.favoriteform.fav_id.options[document.favoriteform.fav_id.selectedIndex].value=='add') window.location='/phpgedview/index.php?ctype=gedcom&amp;ged=GENEALOGY_22_AUG_2007.GED&amp;ged=GENEALOGY_22_AUG_2007.GED&amp;ged=GENEALOGY_22_AUG_2007.GED&amp;action=addfav&amp;gid=&amp;pid=';">
    			<option value="">Favorites</option>
    </select>
    	</form>
    </div>
    </div>
    So I have a wrapper for the 4 elements which I am trying to line up on a single line. Can someone give me a hand with this layout?

    Rick
    Ruby, Ruby when will you be mine

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Edit: I couldn't tell what was what - here's a simple example.
    I'm not sure what the different combinations you tried were - All you need to do to make things line up horizontally is float them and give them a width.
    If you are wanting to use percentages - IE6 needs a negative margin or &#37;'s that don't make 100% so that the columns stay on one line
    100% width example
    Code:
    .four_please div {
    	float: left;
    	width: 25%;
    }
    * html .four_please div {
    	margin-left: -1px; /* For IE See FAQ for explanation - I believe IE7 needs this also - so it would be best in a conditional comment - or you can let other browsers see it as well - It won't hurt too much */
    }
    Fixed width example
    Code:
    .four_please { width: 800px }
    .four_please div {
    	float: left;
    	width: 200px;
    }
    HTML
    Code:
    <div class="four_please">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
    Hope it helps

  3. #3
    SitePoint Zealot ricklach's Avatar
    Join Date
    Nov 2004
    Location
    Victoria BC
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is so much simpler than anything I tried. Thanks for the lesson.

    Rick
    Ruby, Ruby when will you be mine

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    You're welcome


Bookmarks

Posting Permissions

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