I am having trouble visualizing my CSS and I am trying to reach all td's first span with CSS, but all I am selecting is the very first td. What am I doing wrong?
CSS
.teamStats > tbody > tr > th:first-child {
font-size: 20px;
}
HTML
<table class="teamStats">
<tr>
<th>
<span id="stats0Name"></span>
<br />
<span id="stats0Double"></span>
<br />
<span id="stats0Triple"></span>
<br />
<span id="stats0Quadra"></span>
<br />
<span id="stats0Penta"></span>
</th>
<th>
<span id="stats1Name"></span>
<br />
<span id="stats1Double"></span>
<br />
<span id="stats1Triple"></span>
<br />
<span id="stats1Quadra"></span>
<br />
<span id="stats1Penta"></span>
</th>
<th>
<span id="stats2Name"></span>
<br />
<span id="stats2Double"></span>
<br />
<span id="stats2Triple"></span>
<br />
<span id="stats2Quadra"></span>
<br />
<span id="stats2Penta"></span>
</th>
</tr>
</table>
TLDR: I am trying to set a style for all stats#Name, and I am struggling with mapping it to a CSS.
You are almost there:
.teamStats > tbody > tr > th span:first-child {
font-size: 20px;
}
.teamStats > tbody > tr > th > span:first-child {
font-size: 20px;
}
<table class="teamStats">
<tr>
<th>
<span id="stats0Name">this</span>
<br />
<span id="stats0Double">not this</span>
<br />
<span id="stats0Triple">not this</span>
<br />
<span id="stats0Quadra">not this</span>
<br />
<span id="stats0Penta">not this</span>
</th>
<th>
<span id="stats1Name">this</span>
<br />
<span id="stats1Double">not this</span>
<br />
<span id="stats1Triple">not this</span>
<br />
<span id="stats1Quadra">not this</span>
<br />
<span id="stats1Penta">not this</span>
</th>
<th>
<span id="stats2Name">this</span>
<br />
<span id="stats2Double">not this</span>
<br />
<span id="stats2Triple">not this</span>
<br />
<span id="stats2Quadra">not this</span>
<br />
<span id="stats2Penta">not this</span>
</th>
</tr>
</table>
try the following:
.teamStats th span:first-child{
...
}
Related
I try to create this type of sign in page in bootstrap
http://v4-alpha.getbootstrap.com/examples/signin/
but before this i already create page but this is not bootstrap
code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Mainpage.aspx.cs" Inherits="project.Mainpage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>System</title>
<link href="Styles/login.css" rel="stylesheet" />
<link href="Styles/main.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<!-- Google Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,800,700,600' rel='stylesheet' type='text/css'/>
</head>
<body style="background-image:url(images/slide07.jpg);background-repeat:no-repeat">
<img class="logo" alt="LOGO" src="images/logomain.png" />
<br /><br />
<form id="form1" runat="server" class="fordiv">
<div id="box">
<span>
<img src="images/none.png" id="avtar" />
</span>
<div style="margin-left: 190px;margin-top: -170px";>
<span>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
</span>
<span>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox><br /><br />
</span>
<span>
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
</span>
</div>
</div><br /><br />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
<table class="table" style="border: medium groove #FFFFFF; width: 100%; margin-top: 200px; ">
<tr>
<td>
<img style="margin-left: 10px;" src="images/passd.jpg" />
</td>
<td>
<img src="images/1.jpg" />
</td>
<td>
<img src="images/2.jpg" />
</td>
<td>
<img src="images/3.jpg" />
</td>
<td>
<img src="images/4.jpg" />
</td>
</tr>
</table>
<br /><br /><br />
</body>
</html>
now i try to create bootstrap responsive and i tried this
<div class="container">
<img class="logo" alt="LOGO" src="images/logomain.png" /><br /><br />
<form class="form-signin" runat="server" >
<h2 class="form-signin-heading">Please sign in</h2><br /><br />
<label for="inputEmail" class="sr-only">Email address</label>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
<label for="inputPassword" class="sr-only">Password</label>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>
<br /><br />
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
</div>
but this shows awkward display
any solution?
Well, for responsive design you should be using using bootstraps's grid system.
I think you should read a bit about about responsive design here and the bootstrap grid system here.
I was toying with some layout for a progress indicator in an ASP.NET project in VS 2013, and I found something odd in the markup that it generated. My .aspx page contains the following code:
<div id="divProgressBar">
<div id="divProgressVisual">
<asp:Image ID="imgCircle1" runat="server" CssClass="progress circle" style="margin-left: 34px;" ImageUrl="images/GrayCircle.png" />
<asp:Image ID="imgLine2" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
<asp:Image ID="imgCircle2" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
<asp:Image ID="imgLine3" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
<asp:Image ID="imgCircle3" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
<asp:Image ID="imgLine4" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
<asp:Image ID="imgCircle4" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
<div style="clear: both;" />
</div>
<div id="divProgressLabels">
<span class="labelblock">|<br />Upload File</span>
<span class="labelblock">|<br />Import Into Database</span>
<span class="labelblock">|<br />Perform Comparison</span>
<span class="labelblock">|<br />Export File</span>
<div style="clear: both;" />
</div>
</div>
This div is getting dropped into a master page, for what it's worth. Don't worry about the CSS, because this isn't a layout issue.
When I view the resulting HTML in Firebug, I see this:
<div id="divProgressBar">
<div id="divProgressVisual">
<img id="MainContent_imgCircle1" class="progress circle" src="images/GrayCircle.png" style="margin-left: 34px;">
<img id="MainContent_imgLine2" class="progress line" src="images/GrayLine.png">
<img id="MainContent_imgCircle2" class="progress circle" src="images/GrayCircle.png">
<img id="MainContent_imgLine3" class="progress line" src="images/GrayLine.png">
<img id="MainContent_imgCircle3" class="progress circle" src="images/GrayCircle.png">
<img id="MainContent_imgLine4" class="progress line" src="images/GrayLine.png">
<img id="MainContent_imgCircle4" class="progress circle" src="images/GrayCircle.png">
<div style="clear: both;"> </div>
<div id="divProgressLabels">
<span class="labelblock">
|
<br>
Upload File
</span>
<span class="labelblock">
|
<br>
Import Into Database
</span>
<span class="labelblock">
|
<br>
Perform Comparison
</span>
<span class="labelblock">
|
<br>
Export File
</span>
<div style="clear: both;"> </div>
</div>
</div>
</div>
divProgressLabels is suddenly nested inside of divProgressVisual! This isn't causing any layout problems in this case, but it's rather weird and I'd like to know why it's doing this and how to stop it.
Change
<div style="clear: both;" />
to
<div style="clear: both;"></div>
See also Are self-closing tags valid in HTML5?.
I am creating a pull from a database when searching it... I don't know how many results there will be, so I want to have them listed in a table, like this:
[user info, about 4 to 8 lines long] [user info, about 4 to 8 lines long] [user info, about 4 to 8 lines long]
and have it naturally push rows down the page as they cannot keep going wider, so if it can fit 2 or 3 together, based upon the width of the browser, then it can, but when no more fit, then start a new line...
I cannot figure out how to do it.
I have the table like this:
<table align="left" width="150" style="width: 150px; border-style: solid; border-color: {bordercolor}; border-width: 2px 2px 4px 2px;">
<tr>
<td align="left" style="padding-left: 1cm;">
Member Id: {mbrid} <br />
<br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
<br />
</td>
</tr>
<table>
Then all the data in {} are replaced by php.
but those are going down the page, and none next to each other.
So can you tell me what I did wrong?
Oh, by the way, this is just an admin function, so I did not care about the design being amazing... I guess maybe I should in case we ever sell the business? hmm. Food for thought.
I would either use the table as a table with columns for Member ID, User Name etc, or as you a representin a list of users, I'd use a list
.memberInfo
{
list-style-type: none;
padding:none;
}
.memberInfo li
{
float:left;
padding:5px;
margin:5px;
width:150px;
border-bottom: solid 1px black;
}
.memberInfo .label
{
font-weight:bold;
}
.memberInfo .options
{
display:block;
}
<ul class="memberInfo">
<li>
<div><span class="label">Member Id:</span> {mbrid}</div>
<div><span class="label">Username:</span> {un}</div>
<div><span class="label">Name:</span> {name}</div>
<div><span class="label">email:</span> {email}</div>
<div><span class="label">Status:</span> {status}</div>
<div><span class="label">Referrer: </span> {referrer}</div>
<div><span class="label options">Options:</span>
{options}</div>
</li>
<li>
<div><span class="label">Member Id:</span> {mbrid}</div>
<div><span class="label">Username:</span> {un}</div>
<div><span class="label">Name:</span> {name}</div>
<div><span class="label">email:</span> {email}</div>
<div><span class="label">Status:</span> {status}</div>
<div><span class="label">Referrer: </span> {referrer}</div>
<div><span class="label options">Options:</span>
{options}</div>
</li>
<li>
<div><span class="label">Member Id:</span> {mbrid}</div>
<div><span class="label">Username:</span> {un}</div>
<div><span class="label">Name:</span> {name}</div>
<div><span class="label">email:</span> {email}</div>
<div><span class="label">Status:</span> {status}</div>
<div><span class="label">Referrer: </span> {referrer}</div>
<div><span class="label options">Options:</span>
{options}</div>
</li>
<li>
<div><span class="label">Member Id:</span> {mbrid}</div>
<div><span class="label">Username:</span> {un}</div>
<div><span class="label">Name:</span> {name}</div>
<div><span class="label">email:</span> {email}</div>
<div><span class="label">Status:</span> {status}</div>
<div><span class="label">Referrer: </span> {referrer}</div>
<div><span class="label options">Options:</span>
{options}</div>
</li>
<li>
<div><span class="label">Member Id:</span> {mbrid}</div>
<div><span class="label">Username:</span> {un}</div>
<div><span class="label">Name:</span> {name}</div>
<div><span class="label">email:</span> {email}</div>
<div><span class="label">Status:</span> {status}</div>
<div><span class="label">Referrer: </span> {referrer}</div>
<div><span class="label options">Options:</span>
{options}</div>
</li>
</ul>
Using a list will get you better flow on different screen sizes and more flexibilty for media query etc. You can then change the CSS to flex box easily if required.
I've replace <br /> with <div> as it is more semantic and gives greater styling options.
In an HTML table, the data-cells (nested inside the rows) line up horizontally, and the rows (containing the data cells) then stack vertically.
So... is this the kind of thing you are looking to achieve:
table {
border: 2px solid black;
border-bottom-width: 4px;
}
td {
width: 150px;
padding-left: 1cm;
border: 1px solid black;
}
<table>
<tr>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
</tr>
<tr>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
</tr>
<table>
I have two small divs at the two left and right corners of my page. There is a lot of space between them. I want to occupy all that space with another div.
Here is the CSS code:
.signatureBox{
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(128, 128, 128);
min-width: 200px;
min-height: 65px;
padding: 3px;
display: block;'
}
and the HTML code:
<div class='signatureContainer'>
<span class='signatureBox' style='float: left;' >
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: right'>
<span> </span>
<hr style='margin-top: 70px;' />
<span> Master </span>
</span>
</div>
If you are trying to remove the space between them, you should simply set float to left on every one of them.
<div class='signatureContainer'>
<span class='signatureBox' style='float: left;' >
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span> </span>
<hr style='margin-top: 70px;' />
<span> Master </span>
</span>
I know that the :before, and :after pseudo elements are not supported in empty elements, but what about these:
<select>
<option>
<textarea>
<button>
A list would be nice! Thanks guys!
I put together a list of every HTML element. Some aren't even legal where they're used... but it still seems to work.
If it says "it works" in green letters, that element is supported.
*:not(br):after {
content: 'it works';
font-weight: bold;
padding: 5px;
color: green;
}
<a>Name: a</a> <br />
<abbr>Name: abbr</abbr> <br />
<address>Name: address</address> <br />
<area>Name: area</area> <br />
<article>Name: article</article> <br />
<aside>Name: aside</aside> <br />
<audio>Name: audio</audio> <br />
<b>Name: b</b> <br />
<base>Name: base</base> <br />
<bdo>Name: bdo</bdo> <br />
<blockquote>Name: blockquote</blockquote> <br />
<body>Name: body</body> <br />
<br>Name: br</br> <br />
<button>Name: button</button> <br />
<canvas>Name: canvas</canvas> <br />
<caption>Name: caption</caption> <br />
<cite>Name: cite</cite> <br />
<code>Name: code</code> <br />
<col>Name: col</col> <br />
<colgroup>Name: colgroup</colgroup> <br />
<command>Name: command</command> <br />
<datalist>Name: datalist</datalist> <br />
<dd>Name: dd</dd> <br />
<del>Name: del</del> <br />
<details>Name: details</details> <br />
<dfn>Name: dfn</dfn> <br />
<div>Name: div</div> <br />
<dl>Name: dl</dl> <br />
<dt>Name: dt</dt> <br />
<em>Name: em</em> <br />
<embed>Name: embed</embed> <br />
<eventsource>Name: eventsource</eventsource> <br />
<fieldset>Name: fieldset</fieldset> <br />
<figcaption>Name: figcaption</figcaption> <br />
<figure>Name: figure</figure> <br />
<footer>Name: footer</footer> <br />
<form>Name: form</form> <br />
<h1>Name: h1</h1> <br />
<h2>Name: h2</h2> <br />
<h3>Name: h3</h3> <br />
<h4>Name: h4</h4> <br />
<h5>Name: h5</h5> <br />
<h6>Name: h6</h6> <br />
<head>Name: head</head> <br />
<header>Name: header</header> <br />
<hgroup>Name: hgroup</hgroup> <br />
<hr>Name: hr</hr> <br />
<html>Name: html</html> <br />
<i>Name: i</i> <br />
<iframe>Name: iframe</iframe> <br />
<img>Name: img</img> <br />
<input>Name: input</input> <br />
<ins>Name: ins</ins> <br />
<kbd>Name: kbd</kbd> <br />
<keygen>Name: keygen</keygen> <br />
<label>Name: label</label> <br />
<legend>Name: legend</legend> <br />
<li>Name: li</li> <br />
<link>Name: link</link> <br />
<mark>Name: mark</mark> <br />
<map>Name: map</map> <br />
<menu>Name: menu</menu> <br />
<meta>Name: meta</meta> <br />
<meter>Name: meter</meter> <br />
<nav>Name: nav</nav> <br />
<noscript>Name: noscript</noscript> <br />
<object>Name: object</object> <br />
<ol>Name: ol</ol> <br />
<optgroup>Name: optgroup</optgroup> <br />
<option>Name: option</option> <br />
<output>Name: output</output> <br />
<p>Name: p</p> <br />
<param>Name: param</param> <br />
<pre>Name: pre</pre> <br />
<progress>Name: progress</progress> <br />
<q>Name: q</q> <br />
<ruby>Name: ruby</ruby> <br />
<rp>Name: rp</rp> <br />
<rt>Name: rt</rt> <br />
<samp>Name: samp</samp> <br />
<script type="application/json">Name: script</script> <br />
<section>Name: section</section> <br />
<select>Name: select</select> <br />
<small>Name: small</small> <br />
<source>Name: source</source> <br />
<span>Name: span</span> <br />
<strong>Name: strong</strong> <br />
<style>Name: style</style> <br />
<sub>Name: sub</sub> <br />
<summary>Name: summary</summary> <br />
<details>Name: details</details> <br />
<sup>Name: sup</sup> <br />
<table>Name: table</table> <br />
<tbody>Name: tbody</tbody> <br />
<td>Name: td</td> <br />
<textarea>Name: textarea</textarea> <br />
<tfoot>Name: tfoot</tfoot> <br />
<th>Name: th</th> <br />
<thead>Name: thead</thead> <br />
<time>Name: time</time> <br />
<title>Name: title</title> <br />
<tr>Name: tr</tr> <br />
<ul>Name: ul</ul> <br />
<var>Name: var</var> <br />
<video>Name: video</video> <br />
<wbr>Name: wbr</wbr> <br />