I'm iterating through the results of query and displaying select fields of each record.
I want the text centered on screen.
Using the CSS in the example looks OK on a regular computer screen but is too small on a Smart Phone.
Of course I've greatly simplified the example to keep it short.
The Question: How can I just get the text for each record to center... without only using 505 of the available screen width?
.center {
margin: auto;
width: 50%;
border: 2px solid #d3d3d3;
padding: 10px;
}
`enter code here`Query Results:<br>
<div class="center">
Online Code Test</a><br>
``Is a site for testing some code online.<br>
But not PHP.<br>
Where can you test PHP online?<br>
</div>
<div class="center">
Programmers Resource.</a><br>
The forum is very big.<br>
Members world wide.<br>
The go to place if you get stuck.<br>
</div>
Related
I'm using Bulma css to create the website and have a textarea input field.
Before saving to the mongoDB, I use the following command to convert the line break \n to :
subject = subject.replace('\n', '<br>')
Before display the subject into the screen, I use the following code to convert it back:
str.replace('<br>', '\n');
And put the content into a Media content class div.
<section className="modal-card-body has-text-black">
<article className="media has-background-grey-lighter">
<div className="media-content">
<div className="content">
<p>
{subject}
</p>
</div>
</div>
</article>
</section>
However, there is no line break effective, all the text link together.
For exemple, if I input the following text in the textarea:
I need to see a doctor.
Please get back to me ASP
After saving and converting back, it combine the two lines into one line :
I need to see a doctor. Please get back to me ASP
Anyone has any suggetion?
After googling and trying for a while, with the following css code, I can enable the line break:
.enable-line-break {
white-space: pre-wrap;
}
I've found the following code is available for line break in Bulma CSS:
.chat-bubble
{
white-space: pre !important;
max-width: 10% !important;
padding: 2px 9px 2px 9px !important;
height: auto !important;
text-align: left !important;
}
```
I'm hoping someone here can assist me. I've created a table for my site using tags, since the 'old school' way of creating it with <table> does not work on a mobile site - everything is cut off along the right hand side, without the option to slide it over.
My code is:
<style>
.list_item1 {
display: inline-block;
margin: 5px;
padding: 1px;
width: 200px;
}
.list_item2 {
display: inline-block;
margin: 5px;
padding: 1px;
width: 600px;
}
#wraplist {
width:800px;
column-count:2;
column-gap:10px;
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
}
</style>
With the following HTML:
<div id="wraplist">
<div class="list_item1"><li>A</li></div>
<div class="list_item1"><li>B</li></div>
<div class="list_item1"><li>C</li></div>
<div class="list_item1"><li>D</li></div>
<div class="list_item1"><li>E</li></div>
<div class="list_item2"><li>F</li></div>
<div class="list_item2"><li>G</li></div>
<div class="list_item2"><li>H</li></div>
<div class="list_item2"><li>I</li></div>
<div class="list_item2"><li>J</li></div>
</div>
<div style='clear:both;'> </div>
In case you're wondering why I'm using a Div instead of a <ul> controlled through the CSS, it's because for whatever reason, it doesn't work. I've literally copied and pasted other code that was proven to work, within my site and it simply shows as one list instead of a list divided into two columns. The div creates two lists but they don't show on a mobile site. The outcome is that "list_item1" shows, then one line - the first one, from "list_item2" shows with a very large font, and everything else has vanished.
I've created two 'list items' due to the fact that I need the column to be larger to make room for the extra text in the second row. I can't have them equal in size.
Does anyone have any ideas as to how to fix this so that it displays on a mobile device? Or an alternative method that does?
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 some very simple HTML:
<div id="advisor">
<div id="print_this_container">
<form>
<input type="button" value=" Print this page "
onclick="window.print();return false;" />
</form>
</div>
<div id="top_section">
<div class="left_box" style="position: relative;">
<div id="avatar_container">
<img class="avatar" src="<%= #advisor.avatar_url %>" />
</div>
</div>
<div class="right_box">
<h2><strong>Council on Emerging Markets</strong></h2>
</div>
</div>
</div>
The associated CSS is:
#advisor{
width: 800px;
}
#top_section{
border-bottom: 1px solid #666 !important;
height: 200px;
}
.right_box{
float: left;
padding-left: 25px;
padding-top: 50px;
width: 550px;
}
.left_box{
background: #ccc;
width: 200px;
float: left;
text-align: center;
height: 100%;
}
img.avatar{
width: 150px;
}
And in my print.css
#advisor{
width: auto;
}
#print_this_container{
display: none;
}
It looks great in my web page. However, when I print it the following issues occur:
The top section border disappears
The image shrinks
The right box is displayed under the
left box, it does not float
The left box background color
disappears
Does anyone know how to fix these issues?
There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple browsers, it is handled differently
We've jsut spent two weeks trying to print labels using a browser - in the end, we've gone for multiple solutions which fail as gracefully as possible...
Firstly, we detect silverlight and flash - if either is present, we use them to print.
Next, we have a piece of code which loads a web browser in memory on the server and takes a screenshot of the page at a specific URL - this generates an image which we then return to the client for printing. This is okay for our scenario but you might want to check mem usage/etc. for high volume sites.
Some things we've found: Page margins are a REAL pain (especially for labels!). It seems that only certain versions of Opera will allow you to modify page margins from CSS
Background images and colors aren't usually printed by browsers (to save ink) - There's an option in most browsers to enable printing BG.
In firefox look in about:config
print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages
In IE I think it's under File->Page Setup...
Obviously, neither of these help you much as they can't be set by the site itself - It depends who the users are going to be whether or not you can ge tthis set intentionally. Failing that, you might try using a normal non-background image placed behind your content?
In my experience float doesn't work on printing - However, it's been a while since I've tried and it's possible this will now work as long as you provide an explicit width for your page (100%?) at present, I think most browsers use shrink-to-fit as default on print media.
Page width is another interesting one - I've only found very limited "width" properties that seem to work - at one point I almost resorted to tables. So far percentages seem to work fine, auto doesn't.
Try having a look Here and Here for some solutions and Here for a browser compatability chart