Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Can't code a css class that makes a span element the same size as a button element

Reply
Thread Tools

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

 
 
Cal Who
Guest
Posts: n/a
 
      04-25-2010
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>


 
Reply With Quote
 
 
 
 
Alexey Smirnov
Guest
Posts: n/a
 
      04-26-2010
On Apr 25, 7:21*pm, " Cal Who" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Cal Who
Guest
Posts: n/a
 
      04-26-2010
Alexey Smirnov wrote:
> On Apr 25, 7:21 pm, " Cal Who" <(E-Mail Removed)> 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



 
Reply With Quote
 
Andrew Morton
Guest
Posts: n/a
 
      04-26-2010
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


 
Reply With Quote
 
Cal Who
Guest
Posts: n/a
 
      04-26-2010

"Andrew Morton" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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>


 
Reply With Quote
 
Cal Who
Guest
Posts: n/a
 
      04-26-2010
Had dropped a "." which I added below
" Cal Who" <(E-Mail Removed)> wrote in message
news:hr4ihg$lhc$(E-Mail Removed)-september.org...
>
> "Andrew Morton" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> 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>
>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem in running a basic code in python 3.3.0 that includes HTML file Satabdi Mukherjee Python 1 04-04-2013 07:48 PM
I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stéphane Klein Python 2 03-30-2010 12:35 AM
Re: I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stefan Behnel Python 0 03-29-2010 08:14 PM
Can span include span? Fulio Open HTML 5 06-26-2009 10:24 PM
DataGrid (body only) contained in <span>...</span> tags Dan Bishop ASP .Net Datagrid Control 2 06-07-2004 04:00 PM



Advertisments