SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Just cant get text to sit where i want :-(

    Hello from Wakefiled UK centre of misery and moaning :-(

    Heres todays problem...

    http://www.pauserefreshment.co.uk/google_ad_draft.html
    On the above linkk is a page where Ive got at text align prob. Specifically speaking where it says - "When it costs 20p per cup and you sell for 2 per cup its easy to see why selling coffee remains one of the most lucrative business ..." I need this to float to the right of the business man pic.

    The problem at the mo is that it sits below the image. How can I get it to sit to the right of the image in the same way "sell coffee make money sits".

    Any insights welcome:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    *{margin:0;padding:0;}
    
    body {
    background-color:#D68126;
    }
    
    #container
    {
    width: 96%;
    max-width: 1200px; 
    min-width: 550px;
    background-color: #fff;
    color: #333;
    border: 1px solid #702453;
    line-height: 130%;
    margin:2% auto;
    }
    
    #top
    {
    padding: .5em;
    background-color: #FFFFFF;
    border-bottom: 0px solid gray;
    }
    
    #top h1
    {
    padding: 0;
    margin: 0;
    }
    
    #top img {
    margin: 0px;
    padding: 0px;
    }
    
    #leftnav
    {
    float: left;
    width: 50%; 
    margin: 0;
    }
    
    #content
    {
    margin-left: 50%;
    border-left: 3px solid #622449;
    }
    
    #footer
    {
    clear: both;
    margin: 0;
    padding-bottom: 5px;
    color: #333;
    background-color: #FFFFFF;
    border-top: 3px #702453;
    color:#622449;
    font-weight:bold;
    }
    
    #footer .points
    {
    float: left; 
    position: relative;
    margin-bottom:0px;
    padding:0;
    }
    
    #footer .utube2
    {
    float: right; 
    position: relative;
    margin-bottom:0px;
    padding: 0;
    }
    
    
    #content h1 { 
    margin: 0 0 0 5px; 
    padding-bottom: 3px;
    color:#622449;
    }
    
    #leftnav h1 { 
    margin: 0 0 0 5px; 
    padding: 3px;
    color:#622449;
    }
    
    #leftnav h3 { 
    margin: 0 0 0 5px; 
    padding: 3px;
    color:#B5B43E;
    font-size:30px;
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    }
    
    #leftnav h4 {
    padding: 3px;
    margin: 0 0 0 5px;
    color:#B5B43E;
    font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    }
    
    #content h2 { 
    padding: 0;
    margin: 0 0 0 5px; 
    color:#B5B43E;
    font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    line-height: 1.5em;
    }
    
    #content h5 {
    padding-top:5px;
    margin: 0 0 0 5px; 
    color:#B5B43E;
    font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    }
    
    #leftnav h2 {
    padding: 0;
    margin: 0 0 0 5px;
    color:#B5B43E;
    }
    
    
    
    #content p {
    padding: 0;
    margin: 0 0 0 15px; 
    color:#B5B43E;
    }
    
    #leftnav p { 
    margin: 0 0 0 15px;
    padding-top: 3px;
    padding-left: 2px;
    color:#622449;
    font-weight:bold;
    padding-bottom:20px;
    }
    
    #content p { 
    margin: 0 0 0 15px;
    padding-top: 3px;
    padding-left: 2px;
    color:#622449;
    font-weight:bold;
    padding-bottom:20px;
    }
    
    a:link {color: #622449; text-decoration: none}
    a:visited {color: #622449; text-decoration: none}
    a:hover {color: #D68126; text-decoration: underline; font-size: 100% }
    
    #header {
    	height:125px;
    	width:100%;	
    	background-color:#702453;		
    }
    
    #header p {
    float:left;
    width:222px;/*need these two*/
    /*left:-2px;Won't work without a positioin*/
    margin:0;
    /*position:absolute;
    top:5px;Using floats instead so..*/
    }
    
    
    #header p a {
    	display:block;
    	overflow:hidden;
    	text-indent:-9999px;
    	width:207px;
    	height:103px;
    	margin-top:15px;
    	margin-left:15px;
    	background:url(../images/logo8.gif);	
    }
    
    #header ul {
    /*left:244px; no need*/
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin-left:0;/*update tihs to 0 to compensate for browser differences*/
    padding:0;
    position:relative;
    float:left;/*add this*/
    top:12px;
    }
    
    #header ul li {
    	float:left;
    }
    #header ul li a {
    	display:block;
    	overflow:hidden;
    	text-indent:-9999px;
    	height:109px;
    	background-image:url(../images/text-topnav9.jpg);
    	background-repeat:no-repeat;
    }
    #header ul li a.who {
    	width:91px;
    	background-position:0 0;
    	margin:0px 10px 0 0;
    }
    #header ul li a.our {
    	width:93px;
    	background-position:-91px 0;
    	margin:0 10px 0 0;
    }
    #header ul li a.happy {
    	width:105px;
    	background-position:-184px 0;
    	margin:0 10px 0 0;
    }
    #header ul li a.come {
    	width:103px;
    	background-position:-289px 0;
    	margin:0 10px 0 0;
    }
    #header ul li a.useful {
    	width:93px;
    	margin:0 10px 0 0;
    	background-position:-392px 0;
    }
    #header ul li a.on-line {
    	width:94px;
    	margin:0 10px 0 0;
    	background-position:-485px 0;
    }
    #header ul li a.show {
    	width:95px;
    	background-position:-579px 0;
    }
    /* footer2 start */
     	.nav {
        margin:auto;
        border:1px;
        width:100%;
        height:60px;
        background:#A6AE1F;
        font:bold 88%/1.1 verdana;
    	clear:both;
    	overflow:hidden;
    	}
    
     	.nav li {
        float:left;
        list-style:none;
    	margin:5px;
    	
    		}
    	
    	.nav li a img {	
    	margin:0 -5px;
    	border:1px inset #66f;
    	color:#ffffff
    	background:;
    		}
    
        .nav li a {
        float:left;
        padding:0 5px; 
        height:50px;
    	line-height:50px;
        color:#ddd;
        text-decoration:none;
        text-transform:none;
    }
        .nav li a:hover {
        margin:-3px;
        border:3px inset #66f;
        color:#ffffff;
        background:;
    }
    
    
    /* footer2 end */
    
    /* footer pic start */
    .pics {
        text-align:justify;
        width:100%;
        list-style:none;
        clear:both;
        min-width:820px;
    }
    .pics li {
        display:inline;
    }
    .pics li.last {
        margin-right:100%;
    }
    .pics li a {
        display:-moz-inline-box;
        display:inline-block;
    }
    
    /* footer pic end */
    
    #headbanners {
    	clear: both;
    	background-color: #fff;
    	border-top: 0px solid #702453;
    	color:#622449;
    	font-weight:bold;
    	line-height: 1.2;
    	overflow: hidden; /* contain the floats */
    }
    .sector {
    color:#D68126;
    font-weight:bold;
    font-size:1.5em;
    margin:0;
    padding:0;
    }
    
    #headbanners p {
    	float: left; /* line up adjacent */
    	margin-left: -3px;
    	border-left: 0px solid #702453;
    	padding: 5px 2%;
    	width: 29%; /* (29+2+2=33) */
    	padding-top:30px;
    	}
    	
    #headbanners p img {
    	float: left;
    	margin-right: 3%;
    	width: 75px;
    	height: 133px;
    	padding-bottom:30px;
    	padding-top:7px;
    	}
    	
    #headbanners h2 {
    	float: left; /* line up adjacent */
    	margin-left: -3px;
    	border-left: 0px solid #702453;
    	padding: 5px 2%;
    	width: 29%; /* (29+2+2=33) */
    	padding-top:30px;
    	font-size: 1em;
    	}
    	
    #headbanners h2 img {
    	float: left;
    	margin-right: 3%;
    	width: 75px;
    	height: 133px;
    	padding-bottom:30px;
    	padding-top:7px;
    	}
    	
    #headbanners h3 {
    	float: left; /* line up adjacent */
    	margin-left: -3px;
    	border-left: 0px solid #702453;
    	padding: 5px 2%;
    	width: 29%; /* (29+2+2=33) */
    	padding-top:30px;
    	font-size: 1em;
    	}
    	
    #headbanners h3 img {
    	float: left;
    	margin-right: 3%;
    	width: 75px;
    	height: 133px;
    	padding-bottom:30px;
    	padding-top:7px;
    	}
    	
    	#headbanners h4 {
    	float: left; /* line up adjacent */
    	margin-left: -3px;
    	border-left: 0px solid #702453;
    	padding: 5px 2%;
    	width: 29%; /* (29+2+2=33) */
    	padding-top:30px;
    	font-size: 1em;
    	}
    	
    #headbanners h4 img {
    	float: left;
    	margin-right: 3%;
    	width: 75px;
    	height: 133px;
    	padding-bottom:30px;
    	padding-top:7px;
    	}	
    	
    	#headbanners h5 {
    	float: left; /* line up adjacent */
    	margin-left: -3px;
    	border-left: 0px solid #702453;
    	padding: 5px 2%;
    	width: 29%; /* (29+2+2=33) */
    	padding-top:30px;
    	font-size: 1em;
    	}
    	
    #headbanners h5 img {
    	float: left;
    	margin-right: 3%;
    	width: 75px;
    	height: 133px;
    	padding-bottom:30px;
    	padding-top:7px;
    	}
    	
    	#headbanners h6 {
    	float: left; /* line up adjacent */
    	margin-left: -3px;
    	border-left: 0px solid #702453;
    	padding: 5px 2%;
    	width: 29%; /* (29+2+2=33) */
    	padding-top:30px;
    	font-size: 1em;
    	}
    	
    #headbanners h6 img {
    	float: left;
    	margin-right: 3%;
    	width: 75px;
    	height: 133px;
    	padding-bottom:30px;
    	padding-top:7px;
    	}						
    	 /* a two line height to align and to have equal border height on the p in most width cases */ 
    
    /*pause points*/
    
    #points {	
    	background-color: #fff;
    	border-top: 0px solid #702453;
    	color:#622449;
    	font-weight:bold;
    	line-height: 1.2;
    	overflow: hidden; /* contain the floats */
    	width: 50%;	
    	float:left;
    }
    
    #points p {
    	float: left; /* line up adjacent */
    	margin-left: 3px;
    	border-left: 0px solid #702453;
    	padding:1%;
    	width: 50%; /* (29+2+2=33) */
    	font-size:1.2em;
    	margin-top: 0px;	
    }
    
    #points img {
    	float: left;
    	margin-right: 3%;
    	margin-left:0%;
    	width: 75px;
    	height: 109px; 
    }
    	
    #points h1 { 
    margin: 0 0 0 5px; 
    padding: 3px;
    color:#622449;
    }	
    
    #points h2 {
    padding: 0;
    margin: 0 0 0 15px;
    color:#B5B43E;
    }	
    	
    	
    	/* a two line height to align and to have equal border height on the p in most width cases */ 
    
    
    /*pause points ends*/
    /*strap line*/
    #strapline {
    	clear: both;
    	background-color: #fff;
    	border-top: 0px solid #702453;
    	color:#B5B43E;
    	font-weight:bold;
    	line-height:;	
    	}
    	
    
    
    #strapline p img {
    	float: left;
    	margin-right: 3%;
    	width: 119px;
    	height: 105px; 
    	
    	/* a two line height to align and to have equal border height on the p in most width cases */ 
    }
    
    /*Hot line*/
    
    #hotline {
    	clear: both;
    	background-color: #fff;
    	border-top: 0px solid #702453;
    	color:#622449;
    	font-weight:bold;
    	line-height: 1.2;
    	overflow: hidden; /* contain the floats */
    	font-family:font-family: arial, sans-serif;
    	font-size:1em;
    }
    
    .callline {
    font-family:font-family: arial, sans-serif;
    color:#B5B43E;
    font-size:1.1em;
    }
    
    
    #hotline h1 {
    	border-left: 0px solid #702453;
    	padding:1%;
    	width: 100%; /* (29+2+2=33) */
    	font-size: 2em;
    }
    
    #hotline h2 {
    	float: right;
    	border-left: 0px solid #702453;
    	padding:1%;
    	font-size: 1.5em;
    }
    
    
    #hotline h1 img {
    	float: left;
    	margin-right: 3%;	
    }
    
    
    #hotline .free {
    float: right;
    	margin-right: 3%;
    	width: 90px;
    	height: 90px;
    	}
    /*Hot line ends*/
    
    /*end footer*/
    #endfooter {
    	clear: both;
    	background-color: #fff;
    	border-top: 0px solid #702453;
    	color:grey;
    	font-weight:normal;
    	line-height: 1.2;
    	overflow: hidden; /* contain the floats */
    }
    #endfooter p {
    	float: left; /* line up adjacent */
    	margin-left: -3px;
    	border-left: 0px solid #702453;	
    	width: 100%;
    	font-size:13px;
    	text-align:center;
    	}
    	 /* (29+2+2=33) */
    /*end footer*/
    
    #green {
    margin-left:50%;
    }
    
    #column2 {
    float:left;
    clear:none;
    position:relative;
    width:50%;
    overflow:hidden;
    background-color: #fff;
    border-top: 0px solid #702453;
    color:#622449;
    font-weight:bold;
    }
    
    #column2 p {	
    margin: 0 0 0 15px;
    padding-top: 3px;
    padding-left: 2px;
    color:#622449;
    font-weight:bold;
    padding-bottom:20px;
    	}
    
    #column2 h2 {
    padding:0px;
    margin: 0 0 0 15px;
    color:#B5B43E;
    }
    
    #column2 h1 {
    margin: 0 0 0 5px; 
    padding-bottom:3px;
    padding-top:3px;
    color:#622449;
    }	
    
    #column2 p img {
    	float: left;
    	margin-right: 3%;
    }
    
    #content .paddingblast
    {
    padding:0px;
    margin-left :10px;
    color:#D68126;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    #leftnav .paddingblast
    {
    padding:0px;
    margin-left :10px;
    color:#D68126;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    #leftnav img
    {
    float:left;
    }
    
    #content img
    {
    float:left;
    }
    
    .column2 ul {
    padding-left:170px;
    }
    
    
    
    .column2 ul li {
      margin: 0;
      padding: 2px 0 2px 16px;
      list-style: none;
      background: url('../images/green/tick.jpg') no-repeat top left;
    }
    
    .column2 {
    background-color:#FFFFFF;
    border-top:0 solid #702453;
    clear:none;
    color:#622449;
    float:left;
    font-weight:bold;
    overflow:hidden;
    position:relative;
    width:50%;
    margin-left:-1px;
    }
    
    .column2 h6 { 
    padding: 0;
    margin: 0 0 0 5px; 
    color:#B5B43E;
    font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    line-height: 1.5em;
    }
    
    .paddingblast { 
    padding:0px;
    margin-left :10px;
    color:#D68126;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    .column2 img
    {
    float:left;
    margin-left:15px;
    display:inline;
    margin-right:3px;
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>UK Office coffee services - rent office coffee service solutions - Call Suzy 01924 363 091 - pause...thoughtful refreshment</title>
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    @import "css/homepage_draft1.css";
    </style>
    </head>
    <body>
    <div id="container">
    <div id="hotline">
    <h1><img src="images/testimonial/businessman_3.jpg" alt="Make money sell coffee" />Sell coffee make money</h1>
      <h2>&quot;When it costs 20p per cup and you sell for 2 per cup its easy to see why selling coffee remains one of the most lucrative business opportunities in retail&quot;. Mike Parkes - Senior business development manager for pause.</h2>
    </div>
    <div id="headbanners">
      <p><img src="images/model_machine/brav_therm.jpg" alt="Bravilor Therm" /><span class="sector">Pump coffee machines</span><br />
        Need a portable office coffee service? pause... refreshment recommends the <a href="pump_coffee_machine.html">Bravilor Therm</a>.</p>
      <p><img src="images/model_machine/koro_2.jpg" alt="Koro bean to cup" width="75" height="164" /><span class="sector">Coffee bean machines</span><br />
        Need to rent a coffee bean machine for the office? pause... refreshment recommends the <a href="koro_coffee_machine.html">koro coffee machine</a>.</p>
      <p><img src="images/model_machine/mondo2_2.jpg" alt="rent coffee machines for your corporation" /><span class="sector">Free coffee machine</span><br />
        Need a free coffee machine for the office? pause... refreshment recommends the <a href="mondo2_coffee_machine.html">free mondo 2 coffee machine</a>.</p>
    </div>
    <div id="headbanners">
      <p><img src="images/model_machine/vision_400_2.jpg" alt="Vision 400" /><span class="sector">Instant coffee maker</span><br />
        Need to rent an instant coffee maker for the office? pause refreshment recommends the <a href="vision_coffee_machine.html">Vision 400</a>.</p>
      <p><img src="images/model_machine/franke_flair.jpg" alt="franke flair" width="75" height="163" /><span class="sector">latte coffee machines</span><br />
        Need to rent a latte coffee machine for the office? pause... refreshment recommends the <a href="franke_coffee_machine.html">franke flair coffee machine</a>.</p>
      <p><img src="images/model_machine/franke_evolution2.jpg" alt="franke evolution" width="75" height="163" /><span class="sector">catering coffee machines</span><br />
        Need to rent a catering standard coffee machine for the office? pause... refreshment recommends the <a href="franke_evolution_coffee_machine.html">Franke Evolution</a>.</p>
    </div>
    <div style="clear:both"></div>
    <div class="column2">
      <h6>Jet Petrol  choose pause</h6>
      <p class="paddingblast">"pause makes money for big fuel station chain"</p>
      <p><a href="#"><img src="images/testimonial/rob_150_150.jpg" alt="&quot;The i make from coffee is great&quot;" /></a>Jet 2 garages wanted to offer its customers coffee and earn good profit. Pause refreshment won the contract and now supplies Jet 2 garages with a total coffee service solution. "The margin I make on every cup sold is great" Rob Campbell - Area Manager</p>
      <ul>
      </ul>
    </div>
    <div class="column2">
      <h6>Toni & Guy choose pause</h6>
      <p class="paddingblast">"Prestige hair salon pick pause"</p>
      <p><a href="http://www.pauserefreshment.co.uk/hairdressing_coffee_machine.html"><img src="images/testimonial/toni_guy_black.jpg" alt="Fast rental coffee machine quotes" ></a>Toni & Guy chooses pause... refreshment to supply there salons with a total front of house coffee service. "We'd recommend pause.. refreshment to any business serious about improving front of house hospitality." Rebecca Gill - UK Toni & Guy Business Manager</p>
    </div>
    <div id="thumnails">
      <div>&nbsp;</div>
      <div>&nbsp;</div>
      <ul class="nav">
        <li><a href"#">Need a quote? Call David 01924 330 845 | </a><a href="mailto:david@pause.co.uk">david@pause.co.uk</a></li>
        <li><a href="bean_meets_machine.html">| &nbsp; best selling coffee machines</a></li>
      </ul>
      <div id="endfooter">
        <p>&copy; 2009 pause refreshment | Unit 3 128 Thornes Lane | Wakefield | West Yorkshire | WF2 7RE | 01924 363 091 | <a href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></p>
      </div>
    </div>
    </body>
    </html>
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, just unfloat the paragraph of text
    Code:
    #hotline h2{float:none;}
    And then switch up that entire HTML to this
    Code:
    <div id="hotline">
    <h1>Sell coffee make money</h1><img alt="Make money sell coffee" src="images/testimonial/businessman_3.jpg" />
      <h2>"When it costs 20p per cup and you sell for &#163;2 per cup its easy to see why selling coffee remains one of the most lucrative business opportunities in retail". Mike Parkes - Senior business development manager for pause.</h2>
    </div>
    Add a class to the image, and give that float:left;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan thank you so much again - you fixed it :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome :-).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •