SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Newport, RI
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to create this style quote in CSS

    looking for an easy way to do this in CSS, anyone?

    Code:
        "This is the quotation tha I want to place
         inside quotes and when I'm done with the
         quote I want to right align the person that
         is being quoted"
                                       ~ Author Name

  2. #2
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I would do it like this, being new to CSS myself, this could be a long way, but it would work nonetheless. Define the author's name within a <h> tag. I chose <h6> and then define right alignment for all the <p> tags that fall within the <h6> tags>

    <style>
    p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-decoration: none;
    width: 280px;
    font-size: 1em;
    line-height: 20px;
    }
    h6 p {
    text-align: right;
    width: 280px;
    }
    </style>
    </head>

    <body>

    <p>"This is the quotation that I want to place
    inside quotes and when I'm done with the
    quote I want to right align the person that
    is being quoted"</p>
    <h6><p>Author</p></h6>

  3. #3
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You migh have to add
    h6 p {
    text-align: right;
    width: 280px;
    margin-top: -10px;
    }
    to reduce the space between the Quote and the author's name.

  4. #4
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Newport, RI
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also want to indent it the left and right side of the quotation like using blockquote, however I only want to control how far in the indents are.

  5. #5
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    h6 p {
    width: 280px;
    margin-top: -10px;
    text-indent: 200px;
    display: block;
    }

  6. #6
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here ya go

    Code:
     
    <style type="text/css">
    
       body{margin:0;
    		padding:0;
     background:antiquewhite;}
    		 blockquote{position:relative;
    								  top:50px;
    								  width:100%;
    								  margin-left:30%;
    								  margin-right:30%;
    								  background:antiquewhite;}
       .nameauthor{text-align:right;}
    </style>
    </head>
    <body>
    	<blockquote>
    	"This is the quotation that I want to place
    	 inside quotes and when I'm done with the
    	 quote I want to right align the person that
    	 is being quoted"
    	
     
     <p class="nameauthor">  
    		 ~ Author Name
     </p>
      </blockquote>
    </body>
    </html>

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <blockquote>
      <p class="last-para">This is the quotation that I want to place
      inside quotes and when I'm done with the
      quote I want to right align the person that
      is being quoted</p>
      <p class="author">Author Name</p>
    </blockquote>
    Code:
    blockquote {
      margin:1em 0 1em 2em;
    }
    
    blockquote p:first-child {
      text-indent:-0.5em;
    }
    
    blockquote p:first-child:before {
      content:"\201c";
    }
    
    blockquote p.last-para:after {
      content:"\201d";
    }
    
    blockquote p.author {
      text-align:right;
    }
    
    blockquote p.author:before {
      content:"~\a0";
    }
    Birnam wood is come to Dunsinane


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
  •