WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > force headline to next line if longer than 'x' px?

Reply
  Thread Tools Display Modes
Old 21st March 12, 08:17 PM   #1
achenn
WLC Member
 
Join Date: Apr 2011
Posts: 16
Default force headline to next line if longer than 'x' px?

I've run into an issue of needing to force a phrase, in this case a headline, to the next line if it's longer than 150px.
I've looked at word wrap, but it seems to me that is for one long word, url, or set of numbers(ie- without a break).

I'm using the following code to no avail:

Code:
#main article .postinfo {
	list-style-type: none;
	margin-left: ;
	width: 150px;
	word-wrap:break-word;
}
Suggestions?

Last edited by achenn; 21st March 12 at 08:27 PM.
achenn is offline   Reply With Quote
Old 21st March 12, 09:31 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: force headline to next line if longer than 'x' px?

You cannot have a space in a identifier name or you have missed a '#' or a '.' before 'article'.

Also you should not leave empty values in your ruleset.

Is the container used a block or an inline element?
chrishirst is offline   Reply With Quote
Old 21st March 12, 09:37 PM   #3
achenn
WLC Member
 
Join Date: Apr 2011
Posts: 16
Default Re: force headline to next line if longer than 'x' px?

Mistakes corrected, problem persists. Also, I've tried both inline and block.. didn't seem to make a difference.

Code:
#main {
	float: left;
	margin-left: 315px;
	margin-top: 310px;
}
#main #article .postinfo {
	list-style-type: none;
	width: 150px;
	word-wrap:break-word;
}

#main #article p {
	float: right;
	margin-top: -85px;
	margin-left: 230px;
	width: 403px;
}
achenn is offline   Reply With Quote
Old 21st March 12, 09:44 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: force headline to next line if longer than 'x' px?

So do we get to see the HTML that the CSS is applied to?


One is of no use without the other AND to diagnose display or visual problem we need to SEE the problem, preferably in situ.
chrishirst is offline   Reply With Quote
Old 21st March 12, 09:49 PM   #5
achenn
WLC Member
 
Join Date: Apr 2011
Posts: 16
Default Re: force headline to next line if longer than 'x' px?

Ah, everything has been broken down into php- it will function as a Wordpress theme when all is said and done.

Here is the corresponding php, though I'm not sure what good it'll do.

PHP Code:
<div id="main">
    <div id="article">
        <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
        
        <div id="headline">
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h1>
        </div><!-- end headline -->
        
        <div class="postinfo">
            <ul>
                <li>Posted by <?php the_author(); ?></li>
                <li><?php the_date(); ?></li>
                <li>tags: <a href="#">cool</a>, <a href="#">awesome</a></li>
            </ul>
        </div><!-- end postinfo -->
        
        <?php the_content(); ?>
        <?php endwhile; ?>
        
        <?php else :?>
            <p>I'm not quite sure what you're looking for.</p>
        <?php endif; ?>
        
    </div><!-- end article -->        
</div><!-- end main -->
I've been trying to find a way to make all of this live so that I can better receive help. Can't seem to find anything that works, though..?
achenn is offline   Reply With Quote
Old 21st March 12, 10:20 PM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: force headline to next line if longer than 'x' px?

If it is for wordpress why not set up an account on wordpress.com and upload the theme there.

or if you are testing locally copy and paste the rendered source code and put it on a free host somewhere.
chrishirst is offline   Reply With Quote
Old 21st March 12, 11:06 PM   #7
achenn
WLC Member
 
Join Date: Apr 2011
Posts: 16
Default Re: force headline to next line if longer than 'x' px?

Thanks for the rendered source tip, I didn't know that was an option.

Anyway, here is the live site using the rendered source code.

http://www.achenn.byethost7.com/

achenn is offline   Reply With Quote
Old 22nd March 12, 01:49 AM   #8
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: force headline to next line if longer than 'x' px?

First off, the problem is being created by not understanding positioning fully.

By using fixed positioning and trying to correct the natural flow by using margins, you throw the rest of the document out.
If you really must have the fixed sidebar put it in a positioned element (relative) that is as wide as or wider than the sidebar, the fixed elements will still work as they should but the normal flow will be left intact.
chrishirst is offline   Reply With Quote
Old 22nd March 12, 02:20 AM   #9
achenn
WLC Member
 
Join Date: Apr 2011
Posts: 16
Default Re: force headline to next line if longer than 'x' px?

Sorry to have to do this to you, but I guess I don't fully understand what you mean. Could you give an example?
achenn is offline   Reply With Quote
Old 22nd March 12, 12:11 PM   #10
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: force headline to next line if longer than 'x' px?

I explain, hopefully clearly, how fixed position elements can break out of their positioned parent that remains in the document flow and display elsewhere on the page.

If you are going to use positioning it is important that you understand how it actually works first, so that it doesn't 'mess up' the rest of the layout.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:42 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.