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

  • Thread starter Thread starter Cal Who
  • Start date Start date
C

Cal Who

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>
 
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>
Click to expand...

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 said:
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
Click to expand...


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
 
Andrew Morton said:
Try
display: inline-block;
Click to expand...

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>
 
Had dropped a "." which I added below
Cal Who said:
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>
Click to expand...
 
Back
Top