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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Driving me mad! Aligning elements

    Hi Guys,

    On this page:

    http://www.slougheaz.org/test.php

    I want to display the text alongside the blue image, but so it's directly alongside the blue box (as you can see the text is bottom to the blue image). I've tried playing with heights in the divs, but to no avail.

    Can anyone help?

    Thanks

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    What to you mean "alongside"? the text appears to be beside the blue box in both ie7 and firefox...

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts
    Sorry, I mean moving the text, up so it's more like this image I created:



    Thanks

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good Morning stfc_boy,
    Does this work for you?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    .date {
        display:inline;
    	height: 13px;
    	background: #CCCC99;
    	font: 11px/1.5 Tahoma, Verdana, sans-serif;
    	color:#666666; 
    }
    .byline {
        display:inline;
    	height: 13px;
    	background: #FF99CC;
    	font: 11px/1.5 Tahoma, Verdana, sans-serif;
    	font-weight:bold;
    }
    .date .box {margin: 0 0 -2px 0
    }
    </style>
    </head>
    <body>
     <div class="date">person name  <div class="byline">| Comments ( 1) </div> <img src="http://www.slougheaz.org/tt/images/speech2.jpg" width="14" height="13" alt="" class="box" /></div>
    </body>
    </html>
    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:

    stfc_boy (01-14-2008)

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts
    Thanks, although i'd like to understand it. What does .date .box {margin: 0 0 -2px 0 do? Is this line height for both the div and graphic?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by stfc_boy View Post
    Thanks, although i'd like to understand it. What does .date .box {margin: 0 0 -2px 0 do? Is this line height for both the div and graphic?
    It's just styling the class I gave to your box image. It could be done like this:
    .box {margin: 0 0 -2px 0}
    but using .date .box {margin: 0 0 -2px 0} is just more specific - it targets the .box inside of .date.

    Did that make sense?


    ..../edit
    to further confuse you,
    If you wanted to style BOTH .date and .box with something you could do this: .date, .box {margin: 20px 0 0 0;} Now, with the comma seperating them, the 20px top margin would be applied to BOTH classes.
    Last edited by Excavator; 01-14-2008 at 06:26 PM.
    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


  •  

    Posting Permissions

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