I have a table in which each of its TD contains image (more precisely, emoticon) which have same height. Oddly, they are not properly aligned. One emoticon is at the top, the other is at the middle, and the other is at bottom.
Here is a picture to make the explanation easier:
http://i.imgur.com/ITbBp.png
I tried to copy the HTML structure to jsfiddle, but it is properly aligned in there. So I believe this is a CSS problem.
However, my try to modify everything results in no avail. I cannot make it aligned properly. I tried vertical-align:middle and tried to set the padding and margin but I cannot make it align properly.
Is there any help to do this?
EDIT: it turns out that this CSS is the one that is making the problem:
.emotlist {
overflow: auto;
height: 175px;
width: 120px;
}
When I remove the overflow: auto, it displays as I want it to be. But the problem here: I need the overflow:auto to make scrollbar, so in case there are more emoticons added to the table, it will not exceed the defined-height.
EDIT 2: I guess it is not the overflow: auto which is causing the problem, since it is just working fine in the fiddle (as demonstrated by Sheilender)
Disclaimer: I cannot change the HTML structure (in case someone suggest so). I don't have access to the HTML template and what I can do is only style it via CSS.
.
Looks to me like the after each image is being broken to a new line hence the problems.
Try:
.emotlist table tr td {
width: 25px;
}
This should make the cell wide enough to accomodate the image and the
or
.emotlist table tr td {
white-space: nowrap;
}
To prevent the cell from breaking any lines.
see i have made changes according to your requirement with your css
http://jsfiddle.net/uxyjg/14/
you can read more about vertical center content
Related
I'm fairly new to coding and I just can't figure out to make the text in one row of a column to wrap. Right now they overflow into the next column. The table is responsive, but this one line refuses to cooperate. I do not have access to the html so it has to be fixed with just css.
I've tried overflow, text-overflow, white-space, overflow-wrap, nothing works!
I know I'm targeting the right div and class since i'm able to make that exact text red, but when I try to make the words wrap, in Chrome Dev Tools, it automatically gets a strikethrough.
What am I doing wrong?
#IDX-showcaseGallery-3643.IDX-showcaseTable .IDX-showcaseCityStateZip span.IDX-showcaseAddressElement {
overflow-wrap: break-word !important;
color: red;
}
This is how it looks like:
The website is newtraditionrealty.com .
Thanks for an advice!
This rule is preventing your white space from wrapping:
.IDX-showcaseCityStateZip span {
white-space: pre;
}
Removing it allows the text to wrap again.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
I am trying to figure out how to do something which is quite hard to explain. I have set up a test here
When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.
What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do
.project {
float: left;
width: 50%;
}
This now displays the images how I want them to display.
However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.
How can I make the change I am after whilst keeping the left section the same?
Thanks
Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.
I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.
Edit1: I also added width: 49%;.
New picture:
Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.
To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.
According to Chrome's developer tools, this should be added around styles.css, line 3238.
nav > ol, nav > ul {
display: flex;
flex: wrap;
}
Note: this will work for at least both inline-block and block child elements.
You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to
.chapter .chapter__title {
position: fixed
}
That should resolve
I'm trying to achieve a combination of three goals...
Determine if I should use <code><pre>...</pre></code> or <pre><code>...</code></pre>?
Make code not wrap, not create horizontal scrollbars and not overflow any parent element.
Ensure that when a visitor copies code that the white-space is maintained when they paste it in to any (competent) editor.
So far I've had the most luck with white-space: pre-wrap; however I do not want the text to wrap. If they're interested enough they'll copy-paste it for themselves. While I do not want it to wrap I also do not want it to make the element overflow outside of any parent element and I don't want the text to appear outside of it's direct parent element.
I'd be okay with a horizontal scrollbar for the code itself (pre or code element, whichever) though I'd generally prefer not to.
Just in case it's relevant I don't use any CSS frameworks or the likes, I only do a basic reset...
* {border: 0px; margin: 0px; outline: none; padding: 0px; }
I test in Firefox, then Chrome, then (actual) Opera and then maybe IE if I have sanity to spare. Thoughts please?
On number 2 and 3: Hopefully I haven't misunderstood your question--I got what I understood your goal to be working easily by by adding a fixed width and overflow:hidden to the css class.
On 1: it's working with <pre (outer)><code (inner)> so... hey.
http://jsfiddle.net/A2zhH/2/
FYI, border: gray; isn't doing anything. You need to use the format border:1px gray solid;
Goal 1 is simple: code inside pre is valid, pre inside code is not. On the other hand, pre is what matters here. You can use code inside it as a matter of principle if the content is computer code.
Goal 2 is self-contradictory as such, unless you are referring to an idea of reducing font size so that everything fits. More realistically, with regard to the statement that it is okay to have a horizontal scroll bar for the code block, use just
pre { width: 100%; overflow: auto }
This causes a horizontal scroll bar to appear for the block, instead of overflowing the content.
Goal 3 is achieved when you use normal spaces. What is copied contains spaces, and what happens to them after paste depends on the software.
I got it working to an accuracy of about 99.8% of the time using the following...
XHTML
<pre><code>/* Code here. */</code></pre>
CSS
pre {white-space: pre; width: 75vmax;}
The website I am making is here: diyhelp.es
If you re-size the browser you will see the white background behind the content actually get smaller (even though the div gets larger) I've looked in the CSS and cannot see a problem. Since I don't know what is causing it I cannot paste any code (unless you want me to paste the full CSS?).
It's only a plain white background - no image.
In your css.css find line:438, that looks like this:
section.content, aside.sidebar, .footer-col { float: none; width: 100%; }
remove the float:none; and it should solve your problem. Why? I'm not sure totally, but float:none; is known to mess up other floating divs. It is better not to use it. I can't even think of a reason why you might need it. In you markup, you don't need it there, because when floating div is set to width:100% there is no room for anything to float beside it anyway.
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal