I am not sure how to get the following behaviour using a combination of HTML and CSS:
foo = this
foobar = bit
goso = needs
etcetc = aligning
Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically".
I know I could use tables to do this, but would prefer not to. Is there any other way of doing this?
My question boils down to this: How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS.
Here is an in context example:
<p><span class="a">foo</span> <span class="b">=</span> <span class="c">"abcDeveloper"</span></p>
<p><span class="a">bar</span> <span class="b">=</span> <span class="c">"123"</span></p>
<p><span class="a">foobar</span> <span class="b">=</span> <span class="c">"dfg"</span></p>
<p><span class="a">foobarstar</span> <span class="b">=</span> <span class="c">"456"</span></p>
In this example, I would like text in class b to be aligned vertically.
Thank you in advance!
One method would be to apply display: inline-block; to your span.as, and then give them a set width: http://jsfiddle.net/nzrHn/1/
.a { display: inline-block; width: 100px; }
Add css attribute display: inline-block and min-width: XXXpx
Related
How can I add a tab character to the link text on a URL
i.e. instead of
col1 col2
i have col1 -TAB SPACE HERE- col2
The reason for this, is that Im creating a URL list by concatenating columns, and want to space them out correctly, so the url list looks neat.
Ive tried adding a chr(9) into the gap, as well as but it doesn't work. I also know I can target the link with an a:link {...} but not sure how to use this to get a tab in there.
Any help much appreciated
thx. Richard
There are no Tabs in html. Why don't you use a span inside?
<a href="url">
<span class='column'>col1</span>
<span class='column'>col2</span>
</a>
Then add 'column' to your css:
.column {
width: 50px;
float: left;
}
If you cannot add CSS (you can only modify the text) then you need to add styling inline:
<a href="url">
<span style='width: 50px; float: left;'>col1</span>
<span style='width: 50px; float: left;'>col2</span>
</a>
I want to add an iframe to the right of the vertical-alignment
http://s13.postimg.org/s5f54mux3/Screen_Shot_2015_07_30_at_4_45_06_PM.png
The code to it is:
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
</span>
</span>
</div>
How do you add an iframe to float on the right of the vertical-alignment, like so...
http://s30.postimg.org/5qfa3x8o1/Screen_Shot_2015_07_30_at_4_45_06_PM.png
I think the best solution would be to add a float:right and position it as the last element of the span that contains the user information.
I think I placed it correctly below but the code you posted is missing the top half, making it kind of difficult to guess what is what..
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<iframe style:'float:right;'></iframe>
</span>
</span>
</div>
To put an element on the right, you can either use float: right or absolute positioning. Personally I would use absolute positioning. Here is a solution:
#theIframe {
position: absolute;
top: 0;
right: 0;
}
Also make sure the containing element is position: relative (or any other position except the default "static".)
I'm reluctant to butt in where a solution seems to have been reached but I'm wondering why one wouldn't use Flexbox. I understand that it's not supported in IE9- but the data at Can I Use suggests that this is a negligible concern and that cross-browser support is wide. Can I Use Flexbox (Note: review both the "Current Aligned" and "Useage Relative" data.)
With that in mind, would you consider something along the lines of the following.
//HTML
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<div id="Flex-Container">
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<div id="Responsive-Iframe-Container">...</div>
</div>
</span>
</span>
</div>
//CSS
#Flex-Container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
#Responsive-Iframe-Container {
width: 45%;
}
The HTML and CSS for the markup inside #Responsive-Iframe-Container can be found in the Pen Responsive Iframe - Flexbox.
Of course, instead of using #Responsive-Iframe-Container, one could simply substitute <iframe src="#"></iframe> styled as desired.
I am a beginner autodidact in HTML and CSS, so if there is something wrong with the suggested code, please forgive me and please let me know what it is.
I'm trying to get the site text right next to site-title. My code right know is
<p>
<block><div style="background-color:#993383; color:#ffffff; font-style: normal; ">
<span class="nowrap"><h3 id="site-title"><b>TEXT GOES HERE</b></h3></span> <span class="nowrap"><h5 id="site-text"> TEXT GOES HERE</h5></span>
</div></block>
</p>
Im not sure if the code class="nowrap" is correct, so i'm hoping you can help me out!
I am not sure whats inside your .nowrap class. You can make text side by side in many ways like,
.nowrap
{
display: inline-block;
}
fiddle
if you are wondering why? text is occupying two lines not one. The reason is h3 is a block level element so it breaks the line. In order to show them side by side Via CSS you can do by adding display: inline-block.
Are H1,H2,H3,H4 tags block or inline elements?
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.