Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/
I am working with an HTML table that is misbehaving when it comes to semi-long lengths of text. The picture below is worth 1000 words. In the first cell shown, the text "Embroidered Lettering Only" becomes stretched out as far as 'between character spacing' goes. It looks like its happening on the next cell as well in the "FLOSS" text.
Is there an attribute that I can use to prevent this behavior? Most of my search results have mostly produced table spacing issues, not text inside of a cell. The only attribute on the table that relates to size is <table width="100%"> I would prefer to conquer this with an inline attribute, but I can work with almost anything.
Note that I have tried letter-spacing= "0" and other values, to no avail. It is modifying the spacing behavior, but a value of 0 does not change this to normal spacing in the screenshot example.
I don't think it matters, but this is HTML that is being converted to a PDF through the BFO engine, within a NetSuite environment
I've come across this issue using Netsuite / BFO, the solution is to use this CSS:
td p {
text-align: left;
}
Source (login required): https://usergroup.netsuite.com/users/forum/platform-areas/customization/bfo/397738-how-do-i-prevent-text-justification-advanced-pdf-freemarker-bfo
Marc B mentioned it in his comment, you probably have text-align: justify; somewhere in your CSS for the table. Try tracking that down and changing it to text-align: left;
For example:
table td {
text-align: justify;
}
Would want to be changed to:
table td {
text-align: left;
}
That being said, it's hard to know for sure without seeing your current markup and CSS, so it would probably be a good idea to add that to your post.
This question already has answers here:
Best practice for making web forms
(6 answers)
Closed 9 years ago.
A classical piece of web development mantra is: "Only use tables for tabular data". This has its roots in the elder days, when tables were abused for every possible layout task imaginable.
While I too hold to this rule whenever possible, there are now and then layout tasks which I just cannot solve without a table - or tasks that straddle on the boundary between "tabular data" and "non-tabular data". This is one of them.
The situation is a totally classical one:
Name: […]
Surname: […]
Age: […]
Job: […]
The […] are meant to be textboxes. Is this tabular data? Should I use a table for arranging these labels and textboxes or some unholy mashup of <div>s and <span>s? The table would make it easier to provide the proper vertical alignments and help lining up labels of unknown widths. But would it be "proper", or just another "hack that floats my boat"?
And what if we look at it like this?
Field | Value
---------------
Name: […]
Surname: […]
Age: […]
Job: […]
First of all, thanks for a good question!
This is obviously a form, not a table. The layout of it doesn't really matter, the point of a table is to designate that you are displaying data that lends itself to tabulate (think of it as a composite of simple lists.) Your use case here is to gather input, it doesn't matter whether its layout kind'a sort'a looks like a form.
Of course, none of this matters if you don't really care about semantics; in which case I say use whatever you want. In any event there are plenty of examples and frameworks out there that'll do what you want, but it's not particularly difficult to do by yourself either. And in fact, it can be very much like laying out a table, if you so wish. I'll walk you through it.
(tl;dr)
First, some markup:
<form>
<label><span>Name:</span><input name="name" type="text"></label>
<label><span>Surname:</span><input name="surname" type="text"></label>
<label><span>Age:</span><input name="age" type="text"></label>
<label><span>Job:</span><input name="job" type="text"></label>
</form>
This is not particularly tricky markup. I've not added any classes as you can see, and I'll get to that in a second. But first, I wanted to show you, without any extra markup, how to turn this into a layout like that you requested:
form {
display: table;
}
label {
display: table-row;
}
label > * {
display: table-cell;
}
label > :first-child {
text-align: right;
padding-right: 10px;
}
That's it really. By using css and the table, table-row and table-cell headers for the display values, it's dead simple to create a table like layout without having to sacrifice semantic markup. This css doesn't change the semantics or accessibility of your form, it just provides clues to the browser how it should lay things out. Now, you also asked about adding a header to this. Changing the markup to the following, will unfortunately not really work:
<form>
<div>
<span>Field</span><span>Value</span>
</div>
<label><span>Name:</span><input name="name" type="text"></label>
<label><span>Surname:</span><input name="surname" type="text"></label>
<label><span>Age:</span><input name="age" type="text"></label>
<label><span>Job:</span><input name="job" type="text"></label>
</form>
This is because our styling rules doesn't include any selectors for the div. Now, there are a number of ways this could be fixed, with various different pros and cons. You'll probably run into people that have one thing or another to say about best practices in this area, but honestly it mostly comes down to what works for you. I'd say so long as you keep the markup accessible for humans and robots alike – this does mean trying to stay semantic and make use of microformats, amongst other things – then adding whatever extra cherries on top to get the job done is A-OK!
Anyway, here's one way of doing it, to get your creative juices flowing. First, the markup:
<form>
<div class="form-row">
<span>Field</span><span>Value</span>
</div>
<label class="form-row"><span>Name:</span><input name="name" type="text"></label>
<label class="form-row"><span>Surname:</span><input name="surname" type="text"></label>
<label class="form-row"><span>Age:</span><input name="age" type="text"></label>
<label class="form-row"><span>Job:</span><input name="job" type="text"></label>
</form>
And then the css:
form {
display: table;
}
.form-row {
display: table-row;
}
.form-row > * {
display: table-cell;
}
.form-row > :first-child {
text-align: right;
padding-right: 1em;
}
As you can see all that had to change was that we introduced the class form-row to classify our content such, and replaced the label selectors in the css with .form-row. Now there are plenty of ways to go with this and I hope you take some time to play around with it, because there's plenty to learn (semantics, microformats, css practices etc.)
Hope this helps!
Tabular-data describes a collective form of definite information. A form is not "tabular-data", it is interactive and not even really information for the visitor of the website, rather, it is information that (usually) gets sent, therefore it's fair to consider it incorrect to view changeable forms as "tabular-data." (Then again, it really depends on the usage, but I'm assuming you mean forms as in the practical and semantic purpose).
As far as a practice for styling forms, I usually tend to use divs and ul li combinations, as a form element is in fact a list of information. It even comes with (very limited, but still) some formatting options such as fieldset, legend, etc. I would consider looking into those as well.
Then there's the other side of the force (not necessarily the dark side, just, the alternative side) where semantics, while they matter, shouldn't be turned into a religious discipline. If tables work for forms, then so be it. You cannot apply a single set of semantic rules to every single situation. I've found myself saying this a lot, lately, but I'll say it again, every situation is different.
Well, using table or not depends, but if you are going to design a form, using table element is not the only thing which can design it perfectly, if you want, simply use an ul element with label and see how flawlessly you design the same thing without table or div
Demo
ul {
margin: 50px;
}
ul li {
margin-bottom: 10px;
font-family: Arial;
}
ul li label {
display: inline-block;
width: 100px;
}
Infact you can use float on the li by assigning a fixed width to your ul element, this will result in a two column form, increase the width and make it three, so you don't need table here.
The example you provided does not require a table... And not does resort into an "unholy mashup" of divs.
<div>
<label for="x"></label>
<div class="value">
<input id="x" type="text">
</div>
</div>
<!-- rinse, repeat -->
CSS:
label {
min-width: 8em; /* or whatever makes sense */
display: inline-block;
text-align: right;
}
.value {
display: inline-block;
}
While I too hold to this rule whenever possible, there are now and
then layout tasks which I just cannot solve without a table
Table elements have some pretty cool layout properties, and yes, there are times that those properties are needed. In these cases, CSS has the ability to set elements to display like various table elements, while keeping your code semantically correct as you would not actually using tables elements.
This includes properties such as display: table; display: table-cell;, display: table-row;
In terms of your example.. Tabular data is used to display information to a user.. placing inputs or textareas inside of a table would not be semantically correct. However, if you were to have that same format, with pre-existing data just being displayed, I would say that a table would be acceptable.
That format layout can be made with css fairly easily, using anything from floats, display: inline-block; or the table display properties mentioned above.
I want to display an account number on a website. To make it easier to read I'd like to put spaces in a couple of places to group the numbers. Easy. However, I'd like it so that when a user selects and copies that number, there won't be any spaces in the text when he pastes. So that it won't mess up online bank account fields that have a limit on number of characters for example.
Any ideas on how to solve this in a good way?
I'm thinking something along the following lines, but wondering if there are better ways.
// CSS
span.acc_no span {display:inline-block; margin: 0 .5em}
// HTML
<span class="acc_no">12345<span>12</span>1234</span>
Thats how I would do it. If you don't want the spaces to show up when you copy the number, then you need to use some sort of padding or margin to give the appearance of a space.
CSS:
.acc_no span {
display:inline-block;
padding-left:0.5em;
}
.acc_no span:first-child {
padding-left:0;
}
HTML
<span class="acc_no"><span>12345</span><span>12</span><span>1234</span></span>
Another option would be using :after pseudo tag.
Here is your Account number: <span class="AccountNumber"><span>12345</span><span>12</span><span>1234</span></span>
.AccountNumber span:before
{
content: " ";
}
http://jsfiddle.net/chrisvenus/DUsUN/
Though that might depend on your browser compatibility requirements...
Edit: Thanks to jasssonpet for pointing out to me that the implementation of copying differs by browsers... FF and chrome do not copy the spaces added this way. IE does. This means this is probably not the best solution but still an interesting one to note so I'm not getting rid of it. :)
I have attached an example of what I am trying to achieve using html/css (if you cannot see the image it is: first name and surname, then second line is job description). I would like the all the text (both lines) to be forced justified (left and right) within a div but I am not sure if it is possible. I have tried a few things with no success. I would rather not use an image, so any idea would be greatly appreciated.
Browsers generally do a crap job at full justification. If you are a design company using this to promote yourself, I'd avoid it.
Also, it only works on paragraphs of text, not single lines.
You can try tweaking the CSS letter spacing to get the effect you're looking for.
Use text-align-last: justify:
.justified {
text-align: justify;
text-align-last: justify;
}
.justified:after {
content: ".";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
http://jsfiddle.net/gilly3/En4wt/
source
Since you only want to style the title, you can create specific styles for it. Try combining font-size with letter-spacing until you get the effect you want to achieve.
Text align: justified is for a different purpose, it's meant for paragraphs (or long blocks of text). If you don't have enough text to reach the end of the line, it doesn't work.