Hi im having trouble with some money number alignment. I want my data do be aligned to the left side of the columns BUT the numbers of the money have to look relative to each other like in the screenshot.
This screenshot is what I have atm:
This is what I want to do:
Here is my structure:
<tr>
<td style="text-align: left">name</td>
<td style="text-align: right">money</td>
<td style="text-align: center">date</td>
</tr>
And the only css atm that I use for positioning is setting the widht of every of those td's to 30%
At first I thought I could position them simply by putting a <p> in there that would align the content to the right and give the rest its relative widht, however that way would be possible but then I get a ball of js or jquery that I prefer not to have.
I have bootstrap installed but as of now I havent really touched it in this project except for the column grid positioning.
Does anyone have some kind of way to achieve what I am trying, or can someone push me in the right direction? Thanks in advance.
ADDITION: Semi complete code sample:
Codepen
The above code is the whole section the table is located in but I copied all css relative to the issue and not every single css class my problem is reconstructed there exactly even the random <p> tag I tried is in there.
You should use two columns:
<div class="row">
<div class="col-lg-6">List of money values</div>
<div class="col-lg-6">[Empty]</div>
</div>
And align text to right in the first one:
<p class="text-right">Your text.</p>
Related
I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
I am working on an add to cart button to something I am making.
Currently, I hardcoded a fixed margin space of:
margin: 10px 20px;
From the text Lab and + ADD ME!
As you can see, it works, but when I have classes of differing number of letters, the alignment is all messed up.
So I looked into having a Linux-style/C-style tab separator string that could allow me to denote a fixed separator length so all my elements would align vertically, using left-padding: 5em.
However, that did not work.
Could someone tell me how I could align all my add to cart buttons?
A sample of the HTML:
<div
class="margin-class-type"
>
<h4>
<div class="title-container">{{ $type }}
<a
href="javascript:void(0)"
class="btn btn-material-yellow-600 btn-xs btn-raised cart-button mdi-content-add-circle-outline">
Add Me!
</a>
</div>
</h4>
<table
class="table table-striped"
>
<th>Class</th>
<th>Section</th>
<th>CRN</th>
<th>Day</th>
<th>Time</th>
<th>Professor</th>
<th>Enroll</th>
<th>Max Enroll</th>
<th>Credits</th>
Depending on how your code is structured, there are several ways to accomplish this.
1) If your titles are not dynamic (you know that they will always be "Lab" and "Lecture") you could set a width on the title element's container that is equal to the width of your widest title with a little extra. Then, you place your "add to cart" button inside the container holding the title and position it absolute so it will line-up vertically always.
Example:
<div class="title-container"><h2>Lab</h2>Add Me</div>
<!-- YOUR TABLE -->
<div class="title-container"><h2>Lecture</h2>Add Me</div>
<!-- YOUR TABLE -->
<style>
div.title-container{width:300px;position:relative;}
a.cart-button{display:block;position:absolute;top:0;right:0;}
</style>
2) If the titles will be dynamic, you can use a bit of Javascript to loop through each and take the widest element, setting that as fixed-width for all others. This is a bit more involved and based on your question I am guessing it would be overkill.
Good luck!
You can add a div for lab and add me and for "button" float : right
or
you might create a div
and inside that 2 inner divs.
the left inner div should be of specific length (max length you expecting for a label,e.g.lab)
all inner divs are float left in this case
or any alternative way
basically you need to fix the positions anyway.
Thanks
Sam
Put your titles and buttons inside an inline element and give them a fixed width large enough to accommodate. No example of code or anything but you don't appear to need one Hope it fixes your problem.
In the code below I have 3 divs, where the 1st and 3rd divs are tables that are filled with text of varying lengths (decided by the user) on a user submit. The 2nd div is an image. When a user submits and text is filled into the tables the center image (2nd div) moves depending on the length of text. For example, if the longest word of either tables is on the left table, the image will shift to the right, along with the right table. If the longest word in each table are the same length, nothing will move.
What CSS positioning can I use to ensure that the 2nd div stays centered no matter the length of text in the divs on either side of it? Essentially I want the 1st div to expand to the left and the 3rd div expand to the right, so that any change in the length of the <span> will not move the centered image at all
<div class="text_tables" id="left_table">
<table>
<tr>
<td>
<span class="output render" id="text1"></span>
</td>
</tr>
</table>
</div>
<div class="text_tables">
<img id="img1" src="{{ url_for('static', filename='img/img.png') }}">
</div>
<div class="text_tables" id="right_table">
<table>
<tr>
<td>
<span class="output render" id="text6"></span>
</td>
</tr>
</table>
</div>
Well, to honor those who say that tables shouldn't be used for layout, I've put together a little FIDDLE with just divs.
Is this the type of behavior you're looking for?
HTML
<div class='holderdiv'>
<div class='leftdiv'> asdfasdfasdf</div>
<div class='centerdiv'></div>
<div class='rightdiv'>ASDASDFASDFASDFASDF </div>
</div>
V 2.0
Ok, this FIDDLE seems to do much of what you want.
I'm a bit confused about exactly what you want. Do we need to parse all of the spaces out and line up the words in a single column in either wing?
Provide more details, and I can spiff it up a bit more.
Im trying to place some text content under each of the images in a gallery but I carnt get the text to be Bellow the image instead of at the side
http://jsfiddle.net/9YE3H/
How can I fix that?
Put each image and paragraph in a single div like such:
<div>
<img src="" />
<br />
<p>Content</p>
</div>
This should work for you, as long as you haven't set the float attribute for any of them.
There are several ways to solve this. One would be using tables and put this in the td-tags:
<div>
<img src="images/search_images/musicians/adele.jpg" width="175" height="176" /><br />
<p>Artist: Adele</p>
<p>Genre: Singer-Songwriter</p>
</div>
Another one would be using that combined with either positioning or more preferably floating.
There are numerous ways, but I would say use some divs to make individual container layouts for each image / text item.
<div class="img-container-class">
<img src="img address here" />
<div class="img-text-class">
<p>Artist: Person</p>
<p>Genre: Genre Type</p>
</div>
</div>
Now the "img-text" class isn't totally necessary. But, sometimes I feel it is a good idea to section off the text area a bit more, so that you can do some more specific changes to the text (that's up to you).
Personally, I would go back and revamp some of those styles. While looking at the snippet you posted I noticed that almost all of the elements have "float:left" attached to them, as well as a lot of mixing of margin and padding. I would say, start simple, float the div that is holding both the image and text, and then let the normal flow take over from there. Once you get that containing structure set then I think you will find quite a few style sections you can trim down.
The simplest effective approach is probably a single-cell table, with the text in the caption element, e.g.
<table class=img callpadding=0 cellspacing=0>
<caption align=bottom>
Artist: Adele<br>
Genre: Singer-Songwriter dcccc
</caption>
<tr><td><img
src="images/search_images/musicians/adele.jpg"
alt="(Adele)" width="175" height="176"></td>
</table>
This is particularly convenient if you want to display many images side by side, so that the amount of images in a row is not fixed but gets adjusted according to window width. In that case you would just set align=left on the table elements and probably set some right margin for them.
I'm building a website for someone and they wanted the text and bulk of the information to be centered on the page. Problem is I can get everything contained in a tag and then assign the class, but I can't get the whole thing to center. It always hangs to the left even if I apply centering to the div class.
I guess you could say that it is stuck on the left side of the page when I want everything to be centered. I would just make everything format larger but they want some space left in the background for the color and maybe some imagery later on. They haven't made up their minds.
If you want to take a look here is the link where I'm building or testing stuff. I know the header and such needs to be re proportioned to fit with everything, but just as a frame of reference. Don't worry about the header, just know that I want the white text information area with the purple border to stay the same size, but just move to the center and if some one could tell me how to do that I would appreciate it greatly.
just add margin: 0 auto; to that class CSS, for this to work, that object needs to have a width
<div align="center" class="stylex" style="margin:0 auto;width:606px">
<span class="heading"><strong>About The Book</strong></span><br>
<span class="stylez">Mable's Magic Spell</span> Features 28<br>
of the most commonly misspelled words by children.<br>
<br>
Through rhyming, a visual clue, or a word association,<br>
<span class="stylez">Mable</span> and her dog <span class="stylez">Mixie</span> take a close look at these words.<br><img src="http://new-wav.com/mable/MableBookCover_small.jpg" class="img" width="457" height="550" align="middle"><br>
<span class="stylez">Mable's Magic Spell</span> is a book children should read many times.<br> Through repetition, children can succeed at spelling these everyday words.<p></p>
</div>
For your div set the css margin: auto;