Position span at the bottom right corner of a div

Discussion in 'CSS' started by GuillaumeDrolet, Nov 7, 2011.

0
  1. #1
    I'm making this ASP website for classified ads and I've come up with this simple design (The text is French)

    annonce.jpg

    (I didn't get this from HTML/CSS, it was made by hand on Paint.Net)

    I have problems trying to place the email address to the bottom right corner of the ad. Something important to know is that multiple ads are going to be displayed in a list, one above another. And I want the email address to be exactly there no matter the text inserted in the ad.

    HTML
    
<div ID="AdContentDiv">
    <div class="Annonce">
        <span class="AdSender">email@domain.com</span>
        <div class="AdSquare"></div><div class="AdBar">Village de Noël<span class="AdDate">30 Octobre</span></div>
        <img class="AdImg" src="th_none.gif" />
        <p class="AdText">Bonjour, Je cherche des articles pour monter un village de Noël en porcelaine. Si vous avez des maisons ou décorations que vous ne vous servez plus ou que vous désirez vendre, je suis interessé à en prendre possession. Communiquez avec moi par courriel Merci!</p>
    </div>
</div>
    Code (markup):
    CSS
    
    <style type="text/css">
        
        @font-face
        {
            font-family:Haettenschweiler;
            src: url('HATTEN.eot?') format('eot'), url('HATTEN.TTF') format('truetype');
        }
        
        body
        {
            font-family: Verdana;
        }
        
        a
        {
            text-decoration:none;
            color:inherit;
        }
        
        #AdContentDiv
        {
            margin-left:182px;
            margin-right:-8px;
            padding-top:3px;
        }
        
        .Annonce
        {
            background-color:#FFF1BA;
            height:138px;
            margin-bottom:3px;
        }
        
        .AdSquare
        {
            background-color:#D90026;
            height:24px;
            width:24px;
            float:left;
        }
        
        .AdBar
        {
            background-color:#3F3F3F;
            color:white;
            font-size:14pt;
            text-indent:5px;
            height:24px;
        }
        
        .AdImg
        {
            float:left;
            height:100px;
            width:100px;
            margin-top:3px;
            margin-left:3px;
            margin-right:15px;
            border:2px #D90026 solid;
            box-shadow: 4px 4px 0 #000000;
        }
        
        .AdDate
        {
            position:relative;
            margin-right:5px;
            float:right;
            width:auto;
        }
        
        .AdText
        {
            font-size:8pt;
            padding-left:15px;
            vertical-align:top;
        }
        
        .AdSender
        {
            position:relative;
            top:110px;
            margin-right:7px;
            float:right;
            bakground-color:inherit;
            color:#404040;
            font-family:Haettenschweiler;
            font-size:15pt;
            text-decoration:underline;
        }
    </style>
    Code (markup):
    Result from this code:

    result.jpg
     
    Last edited: Nov 7, 2011
    GuillaumeDrolet, Nov 7, 2011 IP
  2. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #2
    The div for the email you will need to have a 'position:fixed' which should do the trick. you may need some margin to position it correctly but give it a go and see how it looks
     
    Toycel, Nov 7, 2011 IP
  3. GuillaumeDrolet

    GuillaumeDrolet Peon

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Hmm unless there's something I don't get, that won't work because, as I said earlier, multiple ads like that are going to be displayed in the same page. By using position:fixed they'll all display at the same position in the page.

    Is it possible to position

    Here's an example of how it would display. Well, the email address isn't displayed in this but the idea remains the same.

    liste annonces.jpg

    Another question I got, does it work and does it comply to W3C standards to insert a link to an external css sheet in the body or somewhere else outside the <head>?
     
    GuillaumeDrolet, Nov 7, 2011 IP
  4. GuillaumeDrolet

    GuillaumeDrolet Peon

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #4
    After working a bit on this I found an easy solution. I simply set a fixed height to the ad description paragraph.

    New HTML
    	<div class="Annonce">
		<div class="AdSquare"></div><div class="AdBar" onclick="window.location.replace('')">Title<span class="AdDate">30 Octobre</span></div>
		<img class="AdImg" src="th_none.gif" />
		<p class="AdText">Description</p>
		<span class="AdSender">lorem@ipsum.it</span>
	</div>
    Code (markup):
    New CSS
    
	.AdDate
	{
		margin-right:5px;
		float:right;
		width:auto;
		font-size:11pt;
	}
		
	.AdText
	{
		height:75px;
		font-size:8pt;
		margin-left:120px;
		margin-bottom:0;
		padding-left:15px;
		vertical-align:top;
		word-wrap:break-word;
	}
		
	.AdSender
	{
		padding-right:7px;
		float:right;
		color:#404040;
		font-family:Haettenschweiler;
		font-size:15pt;
		text-decoration:underline;
	}
    Code (markup):
    I wish someone did tell me if it's okay to call an external css file outside the head block
     
    GuillaumeDrolet, Nov 7, 2011 IP