I am writing a page for role-playing with some friends. When it comes to the character sheet we would like to have some tables with the statistics.
I would like to have inside every cell the name of the characteristic (strength, intelligence, etc.) and the number. Like this: http://jordi.dyndns-at-home.com:3000/characters/2
I would like to align the names to the left side of the cell and the numbers to the right side.
I have tried with <span style="text-align:right;"> and it will not work.
I have tried with <div style="text-align:right;"> and it does work but it "jumps a line", if I use display:inline it will not work.
It is possible to have both alignments on a <td> ?
BTW position:absolute; right:0 won't work. it will align to the end of the not the end of the
Use definition lists and be semantic.
HTML
<table><tr><td>
<dl>
<dt>Life:</dt>
<dd>15</dd>
</dl>
</td></tr></table>
CSS
dl {
width: 200px;
}
dl dt {
width: 160px;
float: left;
padding: 0;
margin: 0;
}
dl dd {
width: 40px;
float: left;
padding: 0;
margin: 0;
}
This way you can drop the whole table.
Here is an example:
<table>
<tr>
<td>
<span class='name'>name 1</span><span class='number'>100</span>
</td>
</tr>
</table>
With the following CSS:
.name{
width: 200px;
display: inline-block;
}
.number{
width: 200px;
display: inline-block;
text-align: right;
}
Hope you find this helpful. Here is a jsFiddle for you to mess with.
http://jsfiddle.net/K4fGq/
Bob
Although I agree with Oli's comment, I guess you can achieve it by using float:left and float:right.
If you put another table inside the TD with two TD's, one left and one right aligned, it will work and I will get down voted for such a suggestion.
Another mechanism is to use display: inline-block as suggested by #rcravens -- my personal choice.
Related
I put together this fiddle
What I have is 2 divs and then one of them has 2 more divs in it. What I am trying to do it properly position label and span within second div
<div id="someotherdiv">
</div>
<div class="reportuserinfo">
<div class="leftdivinfo">
<label>Teacher:</label><span>Teacher Name</span><br/>
<label>District:</label><span>District Name</span><br/>
<label>School:</label><span>School Name</span>
</div>
<div class="rightdivinfo">
<label>Class:</label><span>Class Name</span><br/>
<label>Content:</label><span id="currcontent">Content</span><br/>
<label>Unit:</label><span id="currunit"></span>
</div>
</div>
If you look in fiddle right now label is floating to the right and so is span but they look strange, what I am attempting to accomplish is something like this on both sides of second div:
Teacher: Teacher Name
District: District Name
School: School Name
The way they look right now is
Teacher: Teacher Name
District: District Name
School: School Name
Thanks for your help.
I just added width:30%; in your css class ".reportuserinfo label" and it fixed the issue (fiddle). You need to define width in order to fix the text alignment issue. You can adjust space margins as per your requirements.
Here is how your code looks like to me now :-
.reportuserinfo label {
float: left;;
margin-right: 30px;
font-weight: bold;
text-align: right;
width:30%;
}
You should define a min-width style in your css apart from width:40% to ensure that the text you are trying to write does not scroll if browser width is decreased
.leftdivinfo {
float:left;
min-width: 200px;
width:40%;
background: yellow;
padding-left: 30px;
padding-right: 30px;
}
Have you tried using tables? You could enclose this information in a table, then right-align the text in the left column:
table {
border: none;
}
td:first-child {
text-align: right;
}
td {
padding: 5px;
}
<table>
<tr>
<td>Class Teacher:</td>
<td>John Smith</td>
</tr>
<tr>
<td>District:</td>
<td>Smithsville</td>
</tr>
<tr>
<td>School:</td>
<td>Smith's High School</td>
</tr>
</table>
Try setting width to auto and adding display:inline-block.
.leftdivinfo {
float:left;
width: auto;
background: yellow;
padding-left: 10px;
padding-right: 10px;
display:inline-block
}
Tables might be a better way to make this.
EDIT:
I see you want the colons aligned, add min-width:70px; to the label class.
I am using Zurb Foundation for page layout. A row on my page needs have some text and then a line that fills the rest of the width, like so:
| Text of Indeterminate Length -------------------------------------- |
I have the desired layout working with <table> and <hr> tags:
<div class="row">
<div class="large-12 columns">
<table style="width:auto;border-collapse:collapse;border:0;padding:0;margin:0;">
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
</div>
</div>
I realize that the use of <table> for layout and <hr> for drawing lines are both generally frowned upon in modern web design. I spent a while trying to get the same layout using <div>, <span>, and <p> and couldn't come up with anything simple and straightforward that didn't require what seemed like an excessive use of Javascript. On top of that, most recommended solutions suggest using things like border_bottom which doesn't give me a nice line in the middle like <hr> does.
So my question is this: is there a straightforward way to do this without <table> or <hr>? Perhaps with some sort of a custom <span> style?
A potential solution could be to give your heading a background style with display:block and width:100% and the text with a white background to hide the line from the containing heading? http://jsfiddle.net/9o74jbLh/
<h3><span>{% block hightide_pagename %}{% endblock hightide_pagename %}
</span></h3>
h3 {
display:block;
position:relative;
width:100%;
}
h3:after {
content:"";
height:1px;
width:100%;
background: #000;
position:absolute;
top:50%;
}
h3 span {
background:#fff;
}
I've seen this design element pop up a few times, and the best way that I've seen it done (which is by no means a perfect way) is to use overflow hidden on a container, float the heading (or make it inline-block), and set the left attribute of your absolutely positioned line element (preferably a pseudo-element so as to keep your markup clean). In effect you get this:
/* stuff to make the demo pretty */
table {
border: 1px solid red;
}
table:before {
content: 'bad way';
color: red;
display: block;
}
.good-ish-way {
border: 1px solid green;
margin-top: 1em;
}
.good-ish-way:before {
content: 'good-ish way';
color: green;
display: block;
}
/* the actually useful stuff. */
.good-ish-way {
overflow: hidden;
}
.good-ish-way h3 {
position: relative;
display:inline-block;
}
.good-ish-way h3:after {
content: '';
width: 100%;
position: absolute;
left: 100%;
height: 1px;
background: #777;
width: 1000%;
top: 0;
bottom: 0;
margin: auto 0 auto 0.3em;
}
<table>
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
<div class="good-ish-way">
<h3>Text of Indeterminate Length</h3>
</div>
The only major problem with it is the 1000% part. I've seen other devs use a large pixel value, but the thing is, you'll never know if it's enough. You could use 100vw, but then there are some compatibility issues with older browsers.
Demo for you to play around with it: http://jsfiddle.net/uru17kox/
Edit: Oh! and here's where I first saw this method illustrated in case you want a different spin on it. https://css-tricks.com/line-on-sides-headers/
I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>
First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.
I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}
I'm currently building a theme / style for a piece of software.
Currently, the code looks like such:
http://jsfiddle.net/afseW/1/
The relevant code is:
body div[type*=privmsg] .sender {
font-weight: 700;
width:134px;
text-shadow: #fff 0px 1px;
background-color: #eee;
min-height:22px;
border-right: 1px solid #dcdcdc;
padding-right:5px;
text-align:right;
display:inline-block;
overflow: auto;
}
Note that in fiddle, for some reason, the text is collapsing onto the second line, whereas in the client, the image looks like this:
Granted, a span is not meant to be a block, hence I've given it the property of: display: inline-block;
But how do I get the height to inherit the parent p block?
I changed DOM structure. See the inline style. In the first div (.message) I prefer a better solution adding a .clearfix class, see this.
<div class="message" type="privmsg" style="overflow: auto;">
<div class="sender-cont" style="width: 30%; float: left;">
<span class="sender" ondblclick="Textual.nicknameDoubleClicked()" oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
</div>
<div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
</div>
</div>
Hope this helps!
Since the spans are a set width, probably the easiest thing to do here is just make the span have a absolute position.
body div[type*=privmsg] .sender,
body div[type*=action] .sender {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
}
Then add padding to the parent element:
body span.message {
position: relative;
padding-left: 140px;
...
}
http://jsfiddle.net/afseW/3/
PS: please provide a trimmed down version in jsfiddle next time, the html and css here is pretty epic.
I have a button inside of a dt element.
Everything looks fine, however I want to float the button to the right.
When I add the float on the button, now the dt is shorter causing it to look poor.
Adding overflow:auto fixes this, but now the text on the left is not vertically centered. vertical-align:center does not fix this nor does it help by hacking it with display:table-cell; Is there another way of accomplishing this that I am overlooking?
<dt style="overflow:auto">Title <button style="float:right">save</button></dt>
This is normally how I would do this.
My CSS:
dt {
display: block;
background: -webkit-linear-gradient(#bfbfbf 0%, #828282 100%);
background: linear-gradient(#bfbfbf 0%, #828282 100%);
padding: 10px 20px;
margin: 10px auto;
border-radius: 3px;
width: 400px;
}
dt:after {
content: "";
display: table;
float: none;
}
dt p {
display: inline-block;
}
dt button {
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
float: right;
}
My HTML:
<dt>
<p>My Title</p>
<button>Save</button>
</dt>
Just remember that your text block "My Title" needs to be an inline-block and not a block
I hope that helps or at least points you in the right direction.
There are better approaches than simply floating the elements around. I would suggest either wrapping them with div elements, or creating a table, assuming of course that you plan on repeating the title-button structure. A sample may be something like:
<div style="width:50%;">Title</div>
<div style="width:50%;">
<button style="float:right">Button</button>
</div>
EDIT---
Try the quick-and-dirty table approach:
<body>
<table style="width:100%">
<tr><td>Title</td>
<td><button style="float:right">save</button></td></tr>
</table>
</body>
Also, what's with the dt element?
I think you just need to clear your floated element instead of using overflow:auto;
Example: http://jsfiddle.net/ChrisMBarr/UGWuc/
EDIT
Try this now: http://jsfiddle.net/ChrisMBarr/6HXek/5/
The button had some padding that the title did not have. This makes them have matching vertical padding.