<a class="profile_link" href="">
<div class="thumb_container">
<img class="thumb_image" src="" alt="thumb"/>
<span class="model_names">name</span>
</div>
</a>
a.profile_link{
color: black;
outline: none;
text-decoration: none;
}
.thumb_container{
float:left;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 10px;
}
img.thumb_image{
display: block;
}
.model_names{
font-size: 12px;
text-align: center;
}
This code kinda of gives me what I want but not quite. So I have these links looped, which contain a thumb and a model name centered right below it. I want these thumbs and names to be dynamically placed in rows and when there is not enough room it will create another row. It is doing it right now but sometimes gets buggy and skips a row... it's just a mess. Keep in mind, the thumbs can be different sizes; I don't mind gaps at the end of rows if there isn't enough room.
There is also a main container div I didnt paste which just has the dimensions of 800px width.
Maybe someone has a better and cleaner way of approaching this layout.
I think the problem is caused by your floated div being placed inside a non-floated a. Whilst this will float the div, the effect is negated because the a is an inline element.
Try adding the .thumb_container style declarations to the a element.
BTW, this is always going to have potential to look ugly if you're using thumbnails of different sizes. You could also try setting a specific width and height to the containing div and setting overflow to hidden. You will need to move your span outside of div.thumb_container, but that shouldn't be a problem. You could then use some CSS and/or JS effect to show the full thumbnail on hover.
Related
I'm having a problem getting long lines of text to correctly break and wrap in a chat feature that I'm working on. The HTML below is the relevant set of nested elements, but the crux of the biscuit is with .chat__messages__item and .chat__messages__body (the whole block below is inside of an element that is set to 24vw, so it is all intended to be window-width-responsive).
First off, here's the HTML/CSS...
<style>
.chat__messages__inner{
display: table;
height: 100%;
width: 100%;
}
.chat__messages__list {
display: table-cell;
vertical-align: bottom;
margin: 0;
padding: 10px 20px 0;
list-style-type: none;
}
.chat__messages__item {
position: relative;
margin-bottom: 10px;
padding: 8px 10px;
background-color: #D8F2FD;
clear: both;
}
<!-- THIS STYLE HAS NO AFFECT UNLESS I SET A MAX-WIDTH ON .chat__messages__item -->
.chat__messages__body {
word-wrap: break-word;
}
</style>
<div class='chat__messages__inner'>
<ul class='chat__messages__list'>
<li class='chat__messages__item'>
<div class='chat__messages__body'>
hereisaverylonglineoftextthatiwouldliketobreakandwrap
</div>
</li>
<li class='chat__messages__item'>
<div class='chat__messages__body'>
here is a long sentence that will wrap and behave correctly
</div>
</li>
</ul>
</div>
The desired behavior is that the <div> and <li> containing the text should be no wider/taller than the text itself, but those elements also should never be wider than their parents - so for a few words, they might be 150px wide, but if the container shrinks to be less than 150px, these elements will also start to shrink and the text inside will start to wrap.
Playing with this code, I was able to get close to the desired result by setting the style for .chat__messages__body to include word-wrap: break-word and then setting the parent .chat__messages__item to include max-width: 300px (omitted above). Although the long word would break and wrap, it only produced the correct result on my full-screen window - if the window is resized or starts off at less-than-full, the word still wraps but the div is 300px wide (I tried setting this as a percentage, but that does not work, the word actually unwraps).
The long sentence that I included above does exactly what I would like - its parent <div> and <li> are both the size of the text, and if the window shrinks so that the width of these elements would be greater than their parents (which all scale to the 24vw ancestor), they begin to shrink as well and the text wraps on spaces.
In plain English, I would like the long word's container to never be wider than the 100% width ancestors, and it needs to resize dynamically with the window, breaking and wrapping along the way.
I'm not really a CSS/design expert, this is code I inherited from someone else, and I've been fighting with this for way too long... any guidance would be much appreciated.
Here is a question you could check out. One of the answers suggest what I would try, which is to use the <wbr> tag which creates a word break opportunity. You can read about it here.
Ok, turns out the thing to do was to set .chat__messages__inner and .chat__messages__list to display: inline-block with width: 100%, and .chat__messages__item needed to have max-width: 100%.
The problem we're trying to solve is that text is overflowing past the end of a <p>. It seems to be the result of its contents, which include a relatively-positions <a> element, with an absolute-positioned <span> element within it, which has padding. Firefox wraps the text as I would normally expect.
Here's an abstraction of my HTML:
<p>
In this second example,
<a href="#">
<span class="icon"><img src="play.gif"></span>
mo
</a>
muh...
</p>
And an abstraction of the CSS, as simplified as I think still makes sense:
a {
padding: 5px;
}
a span.icon {
position: absolute;
display: block;
width: 15px;
height: 15px;
}
Here's a screenshot of the problem (the highlighting is Chrome's element inspector with the <p> element highlighted). You can see the word immediately overflowing at the end of the <p>:
Any pointers in the right direction appreciated.
Instead of using absolute positioning, try using display:inline or display:inline-block (if you need to set height/width - Note: not supported in IE 7 and lower).
You could drop the display all together, because images and spans are inline to start with. I have an example here removing the span and just styling the image and surrounding link.
You could also use the image as a background for the button, and set the padding to account for the space. Example:
.button{
background: url(img/buttonIcon.png) no-repeat; /* 15x15 icon */
padding: 0 0 0 15px;
}
example
How can I align the bottom of an inline block (call it 'IB') with the bottom of the text - excluding descenders like that on 'g' - in a parent element (call it 'PE')? This should be in a way which generalises whatever the size of the text - I don't want to hardcode size-specific pixel values.
Here is an example of the HTML I'd use, with the classes I'd need CSS for:
<div class="pe">
Parent text line
<span class="ib" style="display: inline-block;">
- and child text line
</span>
</div>
And here's what I'd like it to look like:
OP updated saying: "Thanks, but I've edited the question to clarify I don't want to hardcode size-specific pixel values."
In that case, I'm afraid there isn't a solution that will automatically fix different lines with different text sizes. The other solution I provided isn't even perfect across all of the browsers with some combinations of font sizes, because Chrome/Opera round inexact values differently than Firefox/IE, so even with my solution, you'd need to use some browser-specific css. The only thing similar to an universal solution would be setting vertical-align: middle; but I wouldn't trust that to work consistently.
You can add below css to ib. And change the bottom margin to control alignment.
.ib{
display: inline-block;
font-size: 10px;
vertical-align: bottom;
margin:0 0 1px 0;
}
#Rorok_89 I know i am adding one more line of css but its justa way to do it in a different way. Your answer is perfect.
This seems to have worked for me: http://jsfiddle.net/Rorok_89/Z8TWH/
.ib{
display: inline-block;
font-size: 10px;
vertical-align: 1px;
}
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.
I am writing a footer div that displays info from the database. The footer has a different background color than the rest of the page, and will have a height that depends on how much content the database throws to it. When I generate the content with php and call for a border around the footer div, the content appears and is, let's say, 400px high, but the div border appears as a 1px high rectangle at the top of the div.
How do I get the height to auto-fit the content?
<div id="footer">
<?php
$an_array=array();
$tasks=mysql_query("select stuff from the db");
while($row=mysql_fetch_assoc($tasks)){
extract($taskrow);
$an_array[]=$task;
}
$an_array=array_chunk($an_array,4);
foreach($an_array as $dtkey=>$dtval){
echo "<dl>";
foreach($dtval as $dtvkey=>$dtvval){
echo "<dt>".$dtvval."</dt>";
}
echo "</dl>";
}
?>
</div>
This is what I get. The area below the red border should be filled with a color.
border image http://www.kevtrout.com/tortus/div.png
By popular demand, here is the css:
#footer{
border-top: 10px solid #d8d8d8;
background:#5b5b5b;
/*overflow:auto;*///Added this after seeing your answers, it worked
}
dl.tr{
width: 255px;
height:160px;
background: #5b5b5b;
margin:0px;
float:left;
padding: 10px;
}
dt.tr{
font-weight: normal;
font-size: 14px;
color: #d8d8d8;
line-height: 28px;
}
edit: I am using firefox on a mac
Check your footer CSS... if you have overflow set to anything but auto/scroll, then the DIV won't grow.
If not try using something other than DL/DT since DT's are inline elements, they won't push your div to fit content.*
e.g. just try using a DIV instead, if the footer grows, you have your answer.
(note: I revised order of suggestions)
*(I realize spec-wise, that this Shouldn't be an issue, but there wasn't an indication of which browsers this was occuring in, thus I would not be at all surprised if IE was rendering differently than expected for example)
Without seeing the CSS, my guess would be that your <dl>s are floated to get them side-by-side. The containing <div> then won't expand to contain them. If this is the case adding a clear:both; before the final </div> should fix it, like this:
<div style='clear:both;'></div>
The browser doesn't care if your content is generated by PHP or comes from a static HTML file.
The issue will most likely be in your CSS. Either the content you put in the footer has positioning properties (like float:left or position:absolute) that place them "outside" the div or the div has a fixed size and/or overflow properties set.
I'd suggest posting your CSS file here or (if it's too large) put it up somewhere where we can take a look. The finished HTML (you could just save a static copy of the output if your system isn't online yet) wouldn't hurt either.
By the way, your use of the <dl> element is wrong: you are missing the <dd> element. Items in the definition list always consist of one definition term and one or more definitions (which, in your code, are missing).
Also, rather than using <div style='clear:both;'></div> as suggested by Steve, I'd suggest explicitly stating the height of your <dt> elements. This way, the floats don't have to be cleared.