Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Baltimore
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem with text wrap and centered layout

    The page I am trying to create has an H1 tag and container called .body. The two objects are different lengths, but I would still like them centered perfectly in the browser window. The problem I am having is that when the window is resized to be smaller than the length of the text, the text moves to the next line and, as you can see, looks really bad.

    I know the answer is in how I position the elements but I cannot find a balance. When I used pixel values (fixed width) the boxes don't look perfectly aligned in every window, but the text doesn't wrap. When I use percentage values, the boxes look perfectly centered, but the text looks horrible.

    How can I position the elements so that I can get perfectly centered boxes without the text moving to the next line? Thanks in advance. Im kind of new to CSS by the way.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered H1 over centered container</title>
    <style>
    
    body {
    	background:rgb(28,143,55);
    	font-family: 'BonvenoCFLight';
    }
    	
    h1 {
    	position: absolute;
    	margin: -100px 13%;
    	width: 50%;
    	min-width: 50%;
    	height: 75px;
    	max-height: 75px;
    	background-color: rgb(46,184,87);
    	font-style: italic;
    	color: black;
    	text-align: center;
    	font-size: 350%;
    	padding-top: 40px;
    	padding-right: 0px;
    	padding-left: 0px;
    	padding-bottom: 10px;
    	border-style: solid;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-left-width: 0px;
    	border-bottom-width: 12px;
    	border-color: black;
    }
    	
    .body {
    	width: 75%;
    	min-width: 75%;
    	height: 800px;
    	margin: 100px auto 0 ;
    	background: rgb(204,207,188);;
    }	
    </style>
    </head>
    
    <body>
    	
    	<div class="body">
    <h1>Heading Text Goes Here</h1>
    
    <br/> <br/>
    <p> why does the heading text collapse when the window is resized to be very small?</p>
    	</div>	
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Ceepop,
    That's some very involved positioning you've put on your h1. It may be easier to center that text from it's containing element, .body, with text-align.
    I've also added nowrap to stop it from linebreaking but too wide is too wide and I'm not sure what you're expecting it to do when it doesn't fit.

    Give this a try and see what it does for you.

    Code:
    h1 {
    /*	position: absolute;
    	margin: -100px 13%;
    	width: 50%;
    	min-width: 50%;
    	height: 75px;
    	max-height: 75px;
    */    
    white-space: nowrap;
    	background-color: rgb(46,184,87);
    	font-style: italic;
    	color: black;
    	text-align: center;
    	font-size: 350%;
    	padding-top: 40px;
    	padding-right: 0px;
    	padding-left: 0px;
    	padding-bottom: 10px;
    	border-style: solid;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-left-width: 0px;
    	border-bottom-width: 12px;
    	border-color: black;
    }
    	
    .body {
    	width: 75%;
    	min-width: 75%;
    	height: 800px;
    	margin: 100px auto 0 ;
    	background: rgb(204,207,188);
    text-align: center;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Ceepop (10-27-2011)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Baltimore
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That, I believe, was the tag I was looking for. Once I resized the minimum width for the h1 to an acceptable pixel value, I got JUST the effect I was looking for. Thank you SO much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •