Can't code a css class that makes a span element the same size as a button element

Discussion in 'ASP .Net' started by Cal Who, Apr 25, 2010.

  1. Cal Who

    Cal Who Guest

    I want a page where there are buttons all the same size. No problem there.

    But I also have a type="text" with some text in front. I'd like that
    combination to be the same size as the buttons.

    So I put them into to a scan element and applied the same css class to the
    scan as the buttons have.

    That didn't work so I modified the code a little as shown below and that
    does not work either.

    So I put together the test sample shown below and that does not produce a
    symetriacl layout.

    Can you tell me how to fix this?



    Thanks





    <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master"
    AutoEventWireup="false"

    CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent"
    runat="Server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

    ..Most

    {

    width: 300px;

    }


    ..Combo

    {

    width: 300px !important;

    }

    </style>

    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
    runat="server">

    <br />

    <input class="Most" type="button" value="test" />

    <input class="Most" type="button" value="test" />

    <br />

    <span class="Combo">Latitude:

    <input id="txtLat" type="text" value="" />

    </span>

    <input class="Most" type="button" value="test" />

    <br />

    <input class="Most" type="button" value="test" />

    <input class="Most" type="button" value="test" />

    </asp:Content>
     
    Cal Who, Apr 25, 2010
    #1
    1. Advertising

  2. Re: Can't code a css class that makes a span element the same size asa button element

    On Apr 25, 7:21 pm, " Cal Who" <> wrote:
    > I want a page where there are buttons all the same size. No problem there..
    >
    > But I also have a type="text" with some text in front. I'd like that
    > combination to be the same size as the buttons.
    >
    > So I put them into to a scan element and applied the same css class to the
    > scan as the buttons have.
    >
    > That didn't work so I modified the code a little as shown below and that
    > does not work either.
    >
    > So I put together the test sample shown below and that does not produce a
    > symetriacl layout.
    >
    > Can you tell me how to fix this?
    >
    > Thanks
    >
    > <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master"
    > AutoEventWireup="false"
    >
    > CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
    >
    > <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent"
    > runat="Server">
    >
    > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    >
    > <style type="text/css">
    >
    > .Most
    >
    > {
    >
    > width: 300px;
    >
    > }
    >
    > .Combo
    >
    > {
    >
    > width: 300px !important;
    >
    > }
    >
    > </style>
    >
    > </asp:Content>
    >
    > <asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
    > runat="server">
    >
    > <br />
    >
    > <input class="Most" type="button" value="test" />
    >
    > <input class="Most" type="button" value="test" />
    >
    > <br />
    >
    > <span class="Combo">Latitude:
    >
    > <input id="txtLat" type="text" value="" />
    >
    > </span>
    >
    > <input class="Most" type="button" value="test" />
    >
    > <br />
    >
    > <input class="Most" type="button" value="test" />
    >
    > <input class="Most" type="button" value="test" />
    >
    > </asp:Content>


    The problem is that you decided to have <span> which does not "hold"
    all space by default. Add more attributes to it's definition

    for example

    ..Combo
    {
    width: 300px;
    display: block;
    float: left;
    }

    where "display block" will generate a block box
     
    Alexey Smirnov, Apr 26, 2010
    #2
    1. Advertising

  3. Cal Who

    Cal Who Guest

    Alexey Smirnov wrote:
    > On Apr 25, 7:21 pm, " Cal Who" <> wrote:
    >> I want a page where there are buttons all the same size. No problem
    >> there.
    >>
    >> But I also have a type="text" with some text in front. I'd like that
    >> combination to be the same size as the buttons.
    >>
    >> So I put them into to a scan element and applied the same css class
    >> to the scan as the buttons have.
    >>
    >> That didn't work so I modified the code a little as shown below and
    >> that does not work either.
    >>
    >> So I put together the test sample shown below and that does not
    >> produce a symetriacl layout.
    >>
    >> Can you tell me how to fix this?
    >>
    >> Thanks
    >>
    >> <%@ Page Title="Home Page" Language="vb"
    >> MasterPageFile="~/Site.Master" AutoEventWireup="false"
    >>
    >> CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
    >>
    >> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent"
    >> runat="Server">
    >>
    >> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    >>
    >> <style type="text/css">
    >>
    >> .Most
    >>
    >> {
    >>
    >> width: 300px;
    >>
    >> }
    >>
    >> .Combo
    >>
    >> {
    >>
    >> width: 300px !important;
    >>
    >> }
    >>
    >> </style>
    >>
    >> </asp:Content>
    >>
    >> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
    >> runat="server">
    >>
    >> <br />
    >>
    >> <input class="Most" type="button" value="test" />
    >>
    >> <input class="Most" type="button" value="test" />
    >>
    >> <br />
    >>
    >> <span class="Combo">Latitude:
    >>
    >> <input id="txtLat" type="text" value="" />
    >>
    >> </span>
    >>
    >> <input class="Most" type="button" value="test" />
    >>
    >> <br />
    >>
    >> <input class="Most" type="button" value="test" />
    >>
    >> <input class="Most" type="button" value="test" />
    >>
    >> </asp:Content>

    >
    > The problem is that you decided to have <span> which does not "hold"
    > all space by default. Add more attributes to it's definition
    >
    > for example
    >
    > .Combo
    > {
    > width: 300px;
    > display: block;
    > float: left;
    > }
    >
    > where "display block" will generate a block box



    Did not work fo two reasons:
    1) I need it to be inline because there is other stuff on the line.
    2)It did not increase the width which displays just sufficient to display
    the two element's contents.


    Thanks
     
    Cal Who, Apr 26, 2010
    #3
  4. Cal Who wrote:
    > Did not work fo two reasons:
    > 1) I need it to be inline because there is other stuff on the line.


    Try
    display: inline-block;

    --
    Andrew
     
    Andrew Morton, Apr 26, 2010
    #4
  5. Cal Who

    Cal Who Guest

    "Andrew Morton" <> wrote in message
    news:...
    > Cal Who wrote:
    >> Did not work for two reasons:
    >> 1) I need it to be inline because there is other stuff on the line.

    >
    > Try
    > display: inline-block;
    >
    > --
    > Andrew
    >


    What's the difference between inline and inline-block?


    Anyway that did not do it (at first).

    I realized that I had used vs2010 to generate the test site and it adds much
    baggage as default.

    So I had it generate an empty site and tried that.

    My markup was the same as what I publised before.

    Then I tried little things like removing the two runat="server" and added
    the action attribute to the form element.

    I'm groping, just trying anything.

    Then I tried using span as the selector and removing the class attribute.

    That worked.

    I tried different things and as Alexey Smirnov said there had to be more
    than just the width for it to work.

    Without inline-block the size was not exactly right

    But with the width and the display: inline-block it looks good.



    Any idea why the below does not even show a border?

    Also, does anyone know what the rule is if I have both a style and a class
    attribute on a element?


    Thanks


    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb"
    Inherits="WebApplication2.WebForm1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    ..Most
    {
    width: 300px;
    }
    Combo
    {
    width: 300px;
    display: inline-block;
    float: left;
    border: 4px solid red;
    }
    </style>
    </head>
    <body>
    <form id="form1" action="WebForm1.aspx">
    <br />
    <input class="Most" type="button" value="test" />
    <input class="Most" type="button" value="test" />
    <br />
    <span class="Combo">Latitude:
    <input id="txtLat" type="text" value="" />
    </span>
    <input class="Most" type="button" value="test" />
    <br />
    <input class="Most" type="button" value="test" />
    <input class="Most" type="button" value="test" />
    </form>
    </body>
    </html>
     
    Cal Who, Apr 26, 2010
    #5
  6. Cal Who

    Cal Who Guest

    Had dropped a "." which I added below
    " Cal Who" <> wrote in message
    news:hr4ihg$lhc$-september.org...
    >
    > "Andrew Morton" <> wrote in message
    > news:...
    >> Cal Who wrote:
    >>> Did not work for two reasons:
    >>> 1) I need it to be inline because there is other stuff on the line.

    >>
    >> Try
    >> display: inline-block;
    >>
    >> --
    >> Andrew
    >>

    >
    > What's the difference between inline and inline-block?
    >
    >
    > Anyway that did not do it (at first).
    >
    > I realized that I had used vs2010 to generate the test site and it adds
    > much baggage as default.
    >
    > So I had it generate an empty site and tried that.
    >
    > My markup was the same as what I publised before.
    >
    > Then I tried little things like removing the two runat="server" and added
    > the action attribute to the form element.
    >
    > I'm groping, just trying anything.
    >
    > Then I tried using span as the selector and removing the class attribute.
    >
    > That worked.
    >
    > I tried different things and as Alexey Smirnov said there had to be more
    > than just the width for it to work.
    >
    > Without inline-block the size was not exactly right
    >
    > But with the width and the display: inline-block it looks good.
    >
    >
    >
    > Any idea why the below does not even show a border?
    >
    > Also, does anyone know what the rule is if I have both a style and a class
    > attribute on a element?
    >
    >
    > Thanks
    >
    >
    > <%@ Page Language="vb" AutoEventWireup="false"
    > CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <title></title>
    > <style type="text/css">
    > .Most
    > {
    > width: 300px;
    > }
    > .Combo
    > {
    > width: 300px;
    > display: inline-block;
    > float: left;
    > border: 4px solid red;
    > }
    > </style>
    > </head>
    > <body>
    > <form id="form1" action="WebForm1.aspx">
    > <br />
    > <input class="Most" type="button" value="test" />
    > <input class="Most" type="button" value="test" />
    > <br />
    > <span class="Combo">Latitude:
    > <input id="txtLat" type="text" value="" />
    > </span>
    > <input class="Most" type="button" value="test" />
    > <br />
    > <input class="Most" type="button" value="test" />
    > <input class="Most" type="button" value="test" />
    > </form>
    > </body>
    > </html>
    >
     
    Cal Who, Apr 26, 2010
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    560
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,808
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    492
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    291
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    490
    Wang, Jay
    May 25, 2004
Loading...

Share This Page