Imagine a math problem on the web. I would like to display the math problem and then have the user be able to type their answer to the right of it. I am trying to set up the structure. I have custom buttons that I will use to change the inner text of the answer.
The math problem is given by "problemtext" and the answer is given by "problemanswer". When the user taps on the number pad, I will place that number in the "problemanswer" segment.
The problem with this set up is that the answer is showing up below the problem.
But I want the answer to be directly to the right of the problem, not below it. Further, I'd like the answer to have a box (or border) around it. How can I do this? What should my html/css look like?
<div id="problem" class="text" style="display:none">
<div id="problemoverall" align="center">
<div id="problemtext" style="font: bold 65px Arial;">
</div>
<div id="problemanswer" style="font: bold 65px Arial;">
</div>
</div>
</div>
Here's some relevant CSS I have
.text {
text-align:center;
font-size:16px;
line-height: 165%;
color:#f1f1f1;
}
.text p {
margin: 8px 0;
}
Use display: inline;. Add this css rule:
#problemtext, #problemanswer{
display: inline;
}
Have a look:
http://jsfiddle.net/cherniv/dPSav/1/
Related
Why is the tag displaying incorrectly in chrome but not in firefox? In firefox the word baltimore doesn't show on the next line.
<h3>Hill’s Garage<br>
<span> Nissan and Infiniti Mechanic in Baltimore</span></h3>
This is the page in question.
http://hillsgarage.net/wpdir
Thanks in advance for your help.
They look the same to me as well. It is probably a specific version issue.
However, I would guess it might have something to do with nesting a <br> inside of an <h3>, and also nesting a <span> inside there.
You should probably use something like
<h3>Hill’s Garage</h3>
<span> Nissan and Infiniti Mechanic in Baltimore</span>
or
<h3>Hill’s Garage</h3>
<h4>Nissan and Infiniti Mechanic in Baltimore</h4>
At the very least, one of these methods will most likely get rid of that problem, even though I'm not sure what's causing it.
Additionally, you should always close your <br> tags like this: <br/>
You could also assign a class or id to the span, if you wanted to make sure that only that span was affected by your style rules.
It appears to me that Chrome is correct and so is FF and IE.
.body1 h3 span {
font: normal 14px Arial, Helvetica, sans-serif;
color: #898989;
}
You should move your H3 the end of garage.
Maybe provide images of your problem.
(Also, I note an annoyance with your right scroll bar when changing chrome tabs).
You have a <div> on the page called featured (houses the image gallery) that is floated right and a margin-top of 120px. What is happening is this is forcing everything to the left of it to wrap (change the background color to red and you will see how this is interfering). What you need is to move the <h3> outside of the post div such that it is above both the post and the featured divs. If you don't have that level of control then you might get the result by dropping the font-size of the <span> inside the <h3> down to 13px
What you have now:
<div id="featured">...images...</div>
<div class="post">
<div class="entry">
<div class="body_resize">
<div class="body1">
<h3 style="position: relative;">Hill’s Garage<span><br>
Nissan and Infiniti Mechanic in Baltimore</span></h3>
</div>
</div>
</div>
</div>
#featured {
float: right;
padding-bottom: 20px;
margin-right: -10px;
padding-top: 120px;
}
.body1 h3 span {
font: normal 14px Arial, Helvetica, sans-serif;
color: #898989;
}
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
Trying to use divs rather than a table and the columns won't line up even though they all have the width set the same in the CSS. Here it is
<div class="title_container">
<div class="duty_date">
Date
</div>
<div class="duty_name">
Duty Name
</div>
<div class="duty_start">
Start Time
</div>
<div class="duty_end">
End Time
</div>
<div class="duty_location">
Duty Location
</div>
<div class="duty_manager">
Duty Manager
</div>
<div class="duty_members">
Required Members
</div>
<div class="duty_spaces">
Spaces
</div>
<div class="duty_notes">
Notes
</div>
</div>
and the css:
.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes {
text-align: center;
border-right-style:solid;
border-right-width: 1px;
display: table-cell;
vertical-align: middle;
height:50px;
}
.duty_date, .duty_spaces {max-width:70px; width:70px;}
.duty_name, .duty_location {max-width: 150px; width:150px;}
.duty_start, .duty_end {max-width:90px; width:90px;}
.duty_manager, .duty_members {max-width:80px; width:80px;}
.duty_notes {max-width:180px; width:180px;}
Should I just use a table?
Should I just use a table?
Yes! That's tabular data, so you should just use a table.
It's a common fallacy to think "tables must never be used". Trying to emulate a table with divs is just as bad as using tables for layout.
In this case I think using a table would be perfectly acceptable. When using a table for actual design elements in a page, the <div> tags are a better option, but for displaying straightforward information like in this example, go ahead and use a table.
IMO yes - definitely a table and save yourself the pain!
From a semantic point of view using tables is the right choice for "tabular data", this will also enable you to use more structured tags like <th>. Please have a look at the specs http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html.
In my firefox browser, it looks OK. You must have a different browser. But I would suggest you use table because that's exactly what html table is for, unless you have a strong reason not to.
If you wanted to use <div>, use:
.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes
{
text-align: center;
border-right-style: solid;
border-right-width: 1px;
display: block;
height: 50px;
line-height: 50px;
float: left;
}
This is untested :)
Setting line-height equal to the height of an element will give you text that is centered vertically. You might have to add a clearing element after each row. So it would be like:
<div>Row1Cell1</div>
<div>Row1Cell2</div>
etc...
<div class="clear"></div>
<div>Row2Cell1</div>
etc...
With
.clear
{
clear: both;
}
I'm new to CSS and racking my brain on the following:
I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.
My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.
I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:
Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "position:abosulte;" the action box manually.
My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.
<LOOP>
<div id="photo" style="display:inline;"><img src="abc"></div>
<div id="redBox" style="????">ACTION</div>
</LOOP>
Thoughts?
Many kind thanks in advance.
Probably easier to add your box within this div, something like:
<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px">ACTION</div>
<img src="abc">
</div>
You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)
Hope this helps!
Try <style>
#photo {
display: inline-block;
position: relative;
}
.action {
/* Optional */
background: #CCC;
color: #FFF;
padding: 2px 3px;
/* Necessary */
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
<div id="photo">
<div class="action">Foo</div>
<img src="abc">
</div>
maybe you could wrap it all in another div?
<LOOP>
<div class="container" style="display: inline-block;">
<div class="photo"><img src="abc"></div>
<div class="redBox" style="position:relative; top: -20px; right; 10px;">ACTION</div>
</div>
</LOOP>
I may be wrong, but it looks like you're trying to reinvent the wheel...
Check out the map element (HTML4, HTML 5)
I have a menu coded in html here, but i need a dotted line to span between the Names and Prices, How would i go about doing that here? I'm kinda lost haha.
You can see it here.
http://mystycs.com/menu/menuiframe.htm
I know i can use css to do it, but how would i get to it span between those two.
Thanks =)
<style type="text/css">
.menugroup{
width:100%;
}
.itemlist{
list-style-type: none;
}
.separator{
margin: 5px;
width:50%;
border-bottom: 1px dotted #000
}
</style>
<div class="menugroup">
<ul class="itemlist">
<li>item name<span class="separator"></span>price</li>
</ul>
</div>
Wow, where to start? What you have is a number of lists with headers above each, some with notes above and/or below, so that's the markup you should be using:
<h2>Egg Platters</h2>
<div class="note">Served With Home Fries & Toast</div>
<ul>
<li><span class="item">Two Eggs Any Style</span><span class="separator"> </span><span class="price">2.75</span></li>
(etc.)
</ul>
<div class="note">Add On Any Two Slices ...</div>
<div class="note large">Add Coffee for $0.50 with ...</div>
Your class="price" is fine, but class="red" and <strong class="bold"> are poor choices -- name the class based on why it's red (like my "note"). Using headings eliminates the need for "bold" to make the <strong> text bigger.
Now, I put in the <span class="separator"> so you could give widths, or use floats, and allow the separator blank space to expand to fill between the item and the price, and you could style it with something like
.separator {
border-bottom: 1px dotted #333;
}
EDIT:
I agree with ClarkeyBoy's comment too; limiting the overall width would help readability, and TripWired's link shows some good method (and uses essentially what I was suggesting)
Have you considered something like this?
http://5thirtyone.com/archives/776
Normally I wouldn't suggest tables... but this case would fit a table quite nicely.
I'd forgo dotted lines as they would be very bad for usability (if you've got a page of dotted lines, it's very cluttered and hard to follow each one - you'd probably use your finger on the screen like you would a menu - not good).
Instead why not a table with alternate row colours, which might look quite nice. Then have a rollover state that would highlight the whole row, to make it completely obvious for the user what each item costs.
There's a great example tutorial with code here (see example 3): http://bit.ly/9jTnAx
The code is at the bottom of the page, and is pretty much just copy paste from your end.
Good luck!
I would use a background x repeated .gif on the whole line and hide it with a white bg color on the float left item name and float right item price.
.line{
clear:both;
margin-bottom:15px;
background:transparent url(img/common/dot.gif) repeat-x scroll 0 0;
height:22px;
}
.label{
background-color:#FFF;
padding-right:2px;
float:left;
}
.price{
float:right;
background-color:#FFF;
padding-left:2px;
}
<style>
table th, td{
border-bottom: 1px dotted #CCCCCC;
}
HTML code block:
<h3>Current House Trends</h3>
<table class="table" border="0">
<tbody>
<tr>
<th>Price</th>
<td>$500,000</td>
</tr>
<tr>
<th>Market</th>
<td>78</td>
If you want to put '-' in between you can add an extra column in the middle which contains '-' or similar of your choice.