I have got following code snippet, where the widths of columns should be working, but somehow its not happening and both divs with column class are coming in next row.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="large-8 columns"> Hello </div>
<div class="large-4 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.
</div>
</body>
</html>
Your foundation.min.css link needs to have a rel="stylesheet" property to specify it is a stylesheet relationship. Otherwise it wont be used as one.
You are also missing a closing </div> on your large-8 columns line.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="small-2 columns"> Hello </div>
<div class="small-10 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.</div>
</div>
</body>
</html>`
Related
can anyone pls explain the different instances in which css won't load properly in an express application? I know that for example, using relative paths css/style.cssinstead of absolute paths /css/style.css can cause the css to not render properly in my webpages; but I was wondering if there's something else that I don't know of that could also cause such a problem?
here's the html code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Property</title>
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abel|Alegreya|Amatic+SC|Architects+Daughter|Barrio|Cabin|Dancing+Script|Dosis|Exo+2|Gloria+Hallelujah|Inconsolata|Josefin+Sans|Karla|Source+Code+Pro|Yanone+Kaffeesatz" rel="stylesheet" type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />
<link rel="shortcut icon" href="/../favicon.ico">
<link rel="stylesheet" href="/css/viewProperty.css">
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" type="text/css" href="/css/component.css" />
<!--style -->
<script src="/js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<header class="main-header">
<i class="fa fa-bars"></i>
<!-- Offsite navigation -->
<nav class="menu">
<i class="fa fa-close"></i>
<h3> spacelist </h3>
<h5><a data-scroll data-toggle="modal" data-target="#myModa3" class="btn button two">Add Property</a></h5>
<ul class="nav">
<li class="cl-effect-1"><a data-scroll href="contactus.html">Contact us</a></li>
<li class="cl-effect-1"><a data-scroll data-toggle="modal" data-target="#myModa4">About</a></li>
<li class="cl-effect-1"><a data-scroll href="#portfolio">Safety</a></li>
<li class="cl-effect-1"><a data-scroll href="#terms">Terms</a></li>
<li class="cl-effect-1"><a data-scroll href="#privacy">Privacy</a></li>
</ul>
</nav>
<form class="form-group">
<div class="search">
<input type="text" id="searchBox" class="search__input search-field" placeholder="Search" autocomplete="off"/>
<button class="fa fa-search search__button"></button>
<ul id="searchResults" class="term-list hidden"></ul>
</div>
</form>
<div class="profile">
<img src="images/opeyemi.jpg" alt="photograph of odedeyi opeyemi" class="profile-photo">
Opeyemi Odedeyi
</div>
</header><!--/.main-header-->
<section class="viewww">
<h1>View Your Property</h1>
</section>
<section class="body content">
<div class="container">
<div class="layout" style="background-image: url(images/test.jpg);"></div>
<h6>Joy 4 Fame Hostel</h6>
<div class="price">
<p>GH₵ 1,000 <span>per Month</span></p>
</div>
<div class="lorem">
<p>Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
</div>
<div class="buttons">
<a class="btn lass edit">Edit</a> <a class="btn lass view">Details</a>
</div>
</div>
</section>
<!-- Footer start -->
<footer class="main-footer">
<!-- <div class="foot">
<span>Icon made by Freepik from www.flaticon.com</span>
</div> -->
<div class="foot2">
<span>© spacelist 2017</span>
</div>
</footer>
<!-- Footer end -->
<!-- Contact section start -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/autoSuggest.js"></script>
<script src="/js/custom-file-input.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/smooth-scroll.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Load custom js for theme -->
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
also back end js code
router.get('/viewProperty/:id', AccessControl.ensureAuthenticated,
function(req, res, next) {
User.findOne({_id: req.params.id})
.populate('properties')
.then(user => {
let model = {
properties: user.properties
};
console.log(user);
res.render('viewProperty', model);
});
});
//was trying test the issue on different routes below
router.get('/test', (req, res, next) => {
res.render('viewProperty');
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm relatively new when it comes to web development but I'm trying to create boxes so they enclose my images. I want it to be divided into 6, something similar to this so that they are neatly formatted:
Anyone know what's the best way to approach this>? Bootstrap, css? Thanks.
its very simple layout, you could use bootstrap columns to achieve this
below is sample layout (make sure you watch this in full page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="text-center">
<h2>Image Gallery</h2>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/500x300">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/500x300">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/500x300">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
So I have currently used basic html and css coding to create a website for a client. The template uploads to the extension manager but when I go to preview it, the page looks nothing like it's supposed to. None of the styles from my css stylesheet are showing up. I'm new to Joomla so some help for this newbie would be greatly appreciated. If you need any more information I will be glad to give it. Unfortunately I am unable to provide a link since the site isn't live yet but will give you guys links to some screen shots.
EDIT:
<?php
defined('_JEXEC') or die;
?>
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Deda's Couture</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/component.css">
<meta="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
</head>
<body class="content">
<header>
<div id="topbar">
<img width="40" height="30" src="images/drupal.svg" alt="" id="drupal">
<img width="40" height="30" src="images/facebook-square.svg" alt="" id="facebook">
<img width="40" height="30" src="images/instagram.svg" alt="" id="instagram">
<img width="40" height="30" src="images/twitter.svg" alt="" id="twitter">
<p>1-800-555-5252</p>
</div>
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<center><img src="images/logo.jpg"></center>
<div id="nav">
<div id="nav_wrapper">
<!-- <ul>
<li>HOME</li>
<li>NEW ARRIVALS</li><li>
APPAREL<img src="images/dropdownarrow.jpg">
<ul>
<li>MENS</li>
<li>WOMENS</li>
<li>CHILDREN</li>
</ul></li>
<li>ACCESSORIES</li>
<li>SHOES</li>
<li>SPECIALS</li>
<li>CONTACT US</li>
</ul> -->
<jdoc:include type="modules" name="mainnav" style="html5" />
</div>
</div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right menu">
<h3 class="cbp-spmenu-open">Menu</h3>
<!-- HOME
NEW ARRIVALS
APPAREL
ACCESSORIES
SHOES
SPECIALS
CONTACT US -->
<jdoc:include type="modules" name="mobilenav" style="html5" />
</nav>
<!-- <button id="showLeftPush">Show/Hide Left Push Menu</button><img id="menu-icon" src="images/menu-icon.svg"></button>
-->
<!-- <img src="images/topbanner.jpg" width="100%"> -->
<section class="banner">
<jdoc:include type="modules" name="banner" style="html5" /></section>
</header>
<div id="wrapper">
<section>
<p class="locate"><!-- HOME // APPAREL // WOMEN'S APPAREL -->
<jdoc:include type="modules" name="breadcrumbs" style="html5"</p>
<!-- <ul id="gallery">
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
<li>
<img src="images/productbox.jpg">
<p> LOREM IPSA DIPA </p>
<p>179.00</p></li>
</ul> -->
<jdoc:include type="modules" name="gallery" style="html5" />
<!-- <h2>HEADLINE</h2>
<p class="primarycontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet faucibus commodo. Cras consectetur ligula et leo rutrum, ac porttitor ipsum lacinia. Nulla volutpat nisl ante, id consequat diam faucibus efficitur. Duis quis placerat tortor. Aenean pharetra maximus bibendum. Donec posuere mauris at est efficitur hendrerit. In sodales nisi nec lorem sollicitudin aliquam.
Suspendisse vel blandit nulla. Vivamus fringilla tortor condimentum convallis vehicula. Suspendisse potenti. Aliquam tempor quam sit amet auctor interdum. Vivamus condimentum mauris a odio scelerisque elementum. Etiam fermentum lorem id commodo placerat. Ut scelerisque nibh eu feugiat euismod.</p> -->
<jdoc:include type="message" />
<jdoc:include type="component" />
</section>
</div>
<footer>
<!-- <div id="bottom-nav">
<nav>
HOME
NEW ARRIVALS
APPAREL
ACCESSORIES
SHOES
SPECIALS
CONTACT US
</nav> -->
<jdoc:include type="modules" name="submenu" style="html5" />
<img src="images/bottomlogo.jpg" alt="">
</div>
<p><span class="copyright">COPYRIGHT © 2015 DEDA'S COUTURE BY 3 | ALL RIGHTS RESERVED</span> <span class="credits">
RESPONSIVE WEBSITE DESIGNED BY FREEDOM CREATIVE SOLUTIONS</span><p>
</footer>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
showLeft = document.getElementById( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
</script>
</body>
</html>
I am fairly new with bootstrap, however I am trying to create a basic website. I have the below code in my index:
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.png">
<title>BoonRadio: Playing the latest hits for you!</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://../bootstrap/css/theme.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style type="text/css"></style><style id="holderjs-style" type="text/css">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style><style type="text/css"></style></head>
<script type="text/javascript">
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<body style="">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">BoonRadio</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Our DJ's</li>
<li>Apply for DJ</li>
<li>Timetable</li>
<li>About</li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign In</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8" style="float: left;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis tincidunt nunc eu iaculis. Curabitur aliquam, purus volutpat tincidunt fermentum, augue erat
scelerisque dui, at aliquet leo lectus quis dui. Nulla congue elit in lacus porttitor, ultricies ultrices ligula porttitor. Praesent faucibus ullamcorper ligula ut
cursus. Vivamus condimentum augue vel dapibus feugiat. Proin vulputate massa at tortor iaculis, in sodales nulla suscipit. Pellentesque commodo venenatis mauris,
vitae feugiat tortor cursus non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quam nisi, semper non tortor vel, tincidunt eleifend dui.
Curabitur pellentesque, nulla eu blandit condimentum, augue ante posuere nunc, at laoreet velit est ac ipsum. Vivamus neque elit, pellentesque eu justo a,
iaculis lacinia leo. Sed pulvinar dapibus diam et vulputate. In porta sem id lorem vestibulum pulvinar. Suspendisse luctus lorem sit amet condimentum volutpat.
Nullam id pharetra tortor.
<br /><br />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" style="float: right;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/holder.js"></script>
</body></html>
Don't mind the hidden ajax code. Anyways, my divs are doing this:
http://i.imgur.com/HdjKFfS.png
The more I add in the main content box, the further down the 3 divs on the right go down. I am wanting them to stay in place so when I add more content, they don't move down. Even adding margin-top to the col-sm-4 div, they still move down.
http://i.imgur.com/aSs1GqP.png
It might be simple and I'm just not thinking properly, but would someone assist me?
You're misunderstanding how Bootstrap's grid system works. Get rid of the float styles on your column divs and it should work; Bootstrap already provides the correct float styles as part of the grid system. Also you have a stray </li> in your nav header. Also, get your indenting sorted out, it's super inconsistent right now, which makes it harder to read and harder to figure out.
I corrected your indenting. There were some closing </div> tags that were unnecessary. As Nathan said, the floating css is not needed with Bootstrap.
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>
please give a look to my http://jesica89.blogspot.com there is a problem that post description is coming after thumbnail , i know this can be solved by setting , i find a solution to it by firebug ::
p:{display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
please someone tell me how to edit this because i can't find this in my source code , i tried to use this div[ ] to override inline stylesheet but noting happened
here goes the post body html code
<!-- begin blog item -->
<div class='postBox'>
<h1><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if></h1>
<div class='entry'>
<div class='clear'/>
<p><b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if></p>
</div>
<div class='clear'/>
</div>
<!-- end blog item -->
</b:includable>
You have
<div class="entry">
in which you have
<div id="summary2601058450852975397">
in which you have
<p><img width="230" height="180" src="http://1.bp.blogspot.com/-edk8FaVPqKs/Tg2PwaOkfdI/AAAAAAAAAF8/n0BE2A5VPBY/s1600/love-relationship.jpg"/><p>
followed by
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae justo tellus. Suspendisse vel lobortis orci. Donec sit amet purus tincidunt felis semper auctor at in libero. Nunc vel nisi accumsan metus volutpat faucibus. Maecenas sit amet nulla<p>
This is the order of your HTML so it will display in that order. If you want the last paragrpah to show first, just change you HTML order.