SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Alignment Problem

    Hi,

    I have been trying to solve this problem, but have had no luck. On the FAQ page, when you click on the answer to a question, the text is pushed left on the 3rd line and every line past that. I attached a screenshot showing the problem. I thought that the text was wrapping around the ":before", but I don't know? I couldn't fix it.

    Code:
    dl {
    	overflow: hidden;
    	margin-bottom: 10px;
    }
    
    dt, dd {
    	float: left;
    	width: 96.1666666667%; /* 577px / 600px */
    	display: block;
    	margin-left: 3.83333333333%; /* 23px / 600px */
    }
    
    dt:before, dd:before {
    	font: bold 1.42857143em courier, monospace; /* 20px / 14px */
    	padding: 2px 4px;
    	-webkit-padding-before: 0; /* Webkit padding fix for padding-top */
    	margin-right: 1.73310225303%; /* 10px / 577px */
    	border-radius: 2px;
    	moz-border-radius: 2px;
    	margin-left: -3.83333333333%; /* 23px / 600px */
    	float: left;
    }
    
    dt:before {
    	content: "Q";
    	background: #526466;
    	color: #FBFBFB;
    	margin-top: -3px; /* Makes the question in the vertical middle of "Q" */
    }
    
    dd:before {
    	content: "A";
    	color: #051517;
    	background: #f2d13f;
    	margin-bottom: auto;
    }
    
    dt {
    	color: #051517;
    	/*font-weight: bold;*/
    	padding: 3px 0 15px;
    }
    
    dt:hover {
    	color: #526466;
    	cursor: pointer;
    	text-decoration: underline;
    }
    
    dd {
    	margin-bottom: 10px;
    	color: #4d4d4d;
    	border-bottom: 1px solid #d9d9d9;
    	padding-bottom: 7px;
    }

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    You seem to have gotten it work, so I may be late to the party here.

    The pseudo element before is acting as a normal floated element would. Text 'wraps' around the element; floating doesnt create a column to it's own. If that's what you want there are a few ways to do it ( one of which, btw, does away with the pseudo element itself).

    Wrap your dd content ( use a span, or a div if you have block elements) and give the margin-left OR padding-left to make room for your floated icon.
    OR
    Wrap your dd content ( use a span, or a div if you have block elements) and give the wrap overflow:hidden;
    OR
    Get rid of the :before pseudo el. , place the icon as a BG graphic on the DD , add padding-left to the DD to accommodate the icon. ( I see that you are trying to use text.. but this is something to consider)
    OR
    Give the DD padding left approximately equal to the calculated size of the pseudo element. give the pseudo element negative margin-left equal to its own width.


    Hope that helps.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I still see the behavior. If you want to stick with the :before element, I'd say make it position: absolute instead of float, then give the dd position: relative and a left margin that creates enough space for the A. Then position the A where you want it.

  4. #4
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys for your help. I was trying to avoid using images. I know the image way works well, but I was really trying to see if I could do it all with CSS. Ralph I made the changes that you recommended and it worked.

    Here is the code that I used:

    Code:
    dt, dd {
    	/*float: left;*/
    	width: 94.5%; /* 567px / 600px */
    	display: block;
    	margin-left: 5.5%; /* 33px / 600px */
    	position: relative;
    }
    
    dt:before, dd:before {
    	font: bold 1.42857143em courier, monospace; /* 20px / 14px */
    	padding: 2px 4px;
    	-webkit-padding-before: 0; /* Webkit padding fix for padding-top */
    	/*margin-right: 1.73310225303%;*/ /* 10px / 577px */
    	border-radius: 2px;
    	moz-border-radius: 2px;
    	margin-left: -3.83333333333%; /* 23px / 600px */
    	/*float: left;*/
    	position: absolute;
    	left: -1.66666666667%; /* -10px / 600px */
    }
    Thanks once again guys, I really appreciate it!


Bookmarks

Posting Permissions

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