How can I add carousel without click handler using react-bootstrap
<Carousel></Carousel>
When you look into the documentation, you will find out, that a Carousel is working without any click handler per default: https://react-bootstrap.netlify.app/components/carousel/#example
Just define Carousel.Items or images directly and you are ready to go: the image will change every every 5 seconds:
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=First slide&bg=373940"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Second slide&bg=282c34"
alt="Second slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Third slide&bg=20232a"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
Related
My web site's links are not working.
My site : https://overlap.ulb.be/public/
When I click on a link, I have a 404 NOT FOUND (on any link)
If I click on the link "à propos" (about), I have this link :
https://overlap.ulb.be/about
We can see that I don't have anymore the public name in the URL.
This is a part of my code (routes)
Route::get('about', [PlanteController::class, 'about']);
and the controller code :
public function about()
{
return view('phyto.about' );
}
And the view's code :
<x-phyto-layout>
<style>
.h4-about-first {
margin: 0 0 10px 0;
}
.h4-about-m20 {
margin: 20px 0 10px 0;
}
.h4-about {
font-family: "Lato", Helvetica, Verdana, sans-serif;
/*font-family: "Arial Rounded MT Bold", Helvetica, Verdana, sans-serif;*/
font-weight: 500;
line-height: 120%;
padding: 0;
/*padding-left: 0px;*/
/*margin: 0 0 10px;*/
/*color: #413d3d;*/
color: rgba(0, 0, 0, 0.5);
}
.h4-about {
font-size: 22px;
}
.p-about {
font-family: "Lato", Helvetica, Verdana, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #413d3d;
/*margin: 0 0 18px 0;*/
margin: 0 !important;
padding: 0;
/*padding-left: 0px;*/
}
</style>
<!-- About page container -->
<div class="page-container">
<div class="bloc bloc-fill-screen l-bloc" id="bloc-7">
<div class="container fill-bloc-top-edge">
<div class="row">
<div class="bloc l-bloc" id="bloc-13" style="">
<div class="container bloc-lg">
<div class="row">
<div class="col">
{{--<h3 style="font-size: 24px !important" class="mg-md h3-style">À propos de nous</h3>--}}
<h4 class="h4-about h4-about-first">À propos de nous</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
</p>
{{--<h3 style="padding-top: 24px;font-size: 24px !important" class="mg-md h3-style">Projet Phyto ?</h3>--}}
<h4 class="h4-about h4-about-m20">Projet Phyto ?</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
</p>
{{--<h3 style="padding-top: 24px;font-size: 24px !important" style="padding-top: 30px" class="mg-md h3-style">Collaborateurs</h3>--}}
<h4 class="h4-about h4-about-m20">Collaborateurs</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
</p>
<h4 class="h4-about h4-about-m20">Nom latin</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Le nom latin fait référence à la dernière classification (lien : www.derniere-classification.org)
</p>
<a href="/gpd?p=search" class="btn btn-lg btn-more-link-style btn-sq btn-golden-green float-lg-none mt-5">
Recherche de plantes
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- bloc-7 END -->
Thank you
{{--<div class="bloc none l-bloc" id="home-about">
<div class="container bloc-xl">
<div class="row">
<div class="col-md-2 order-md-1">
<img src="/images/valeriane_rouge.jpg" data-src="/images/valeriane_rouge.jpg" class="img-fluid mx-auto d-block lazyloaded">
</div>
<div class="col-md-2 align-self-center">
<h2 class="mg-md titulo01 h2-margin-bottom">Qu'est ce que ULB-PHYTO?</h2>
<p class="parrafo01">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta error explicabo,
harum hic ipsam laboriosam molestiae nihil odit optio porro provident repellendus
saepe sed sequi similique velit vitae, voluptatem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium amet delectus,
dicta dolor ea eligendi ex, excepturi facere
incidunt iste maiores porro possimus, qui rerum velit vitae voluptatem! Repudiandae.
</p>
</div>
</div>
</div>
</div>--}}
I also have a .htaccess :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
your issue was not loading your asset correctly. you can put the full URL of styles and javascript in your app layout including the public or you can use the asset function to generate a URL for an asset using the current scheme of the :
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
if you are using the asset method you should put the ASSET_URL variable in your .env file
ASSET_URL=https://overlap.ulb.be/public
UPDATED
if you mean images in your style you have two solutions, you can write inline style in your blade in this case you can use the asset method like the above example OR change all background URLs in the external style CSS file with
background-image: url("/public/images/...");
I use the templates plugin for my ckeditor and I input a 2 column structure like this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="two_col half">
<p>Info Block Two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
My content editors then edit the content of each div and input whatever text they need to.
The issue I'm having is that when my editors highlight the lorem ipsum text and delete it to start their content, the delete action also deletes the actual div itself, resulting in this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
Is there something I can do to stop that from happening, I would like the div to remain after the user deletes the lorem ipsum placeholder text.
I'm using version 4.5.4
I don't know how to prevent it from the CK Editor perspective, but from Kentico point of view, you can style the template to have two Editable texts next to each other for those two columns. You can either have two web part zones - one editable text per each or two texts in one zone.
I'v created three websites with TYPO3 V7.6.x. All of them use fluid_styled_content extension. As setup for output I use 10.variables.content < styles.content.get and in template {content -> f:format.raw()}. Whit these all the output html code has lots of blank lines. For example:
<!--TYPO3SEARCH_begin-->
<div id="c26">
<h1>Fachstelle Gesundheitsförderung Uri</h1>
</div>
<div id="c14">
<div class="ce-textpic ce-left ce-above">
<div class="ce-bodytext">
<p><span class="lead-text">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Dolores et ea rebum. Stet clita , no sea takimata.</span></p>
</div>
</div>
</div>
<div class="row link-box"><div class="col-sm-6"><img src="/fileadmin/_processed_/8/7/csm_teaser-1_f496539e13.jpg" width="720" height="375" class="img-responsive" alt="Gesundheitsförderung" ><div class="link-box-title"><h2>Gesundheitsförderung</h2></div></div><div class="col-sm-6"><img src="/fileadmin/_processed_/8/7/csm_teaser-1_f496539e13.jpg" width="720" height="375" class="img-responsive" alt="Cool & Clean" ><div class="link-box-title"><h2>Cool & Clean</h2></div></div><div class="col-sm-6"><img src="/fileadmin/_processed_/8/7/csm_teaser-1_f496539e13.jpg" width="720" height="375" class="img-responsive" alt="Verein" ><div class="link-box-title"><h2>Verein</h2></div></div><div class="col-sm-6 news-latest"><div class="link-box-description"><p>15. November 2016</p><h3>Projekt Ernährung</h3><p class="teaser">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et...</p></div><div class="link-box-title"><h2>News</h2></div></div></div>
<div id="c40">
<h2>Weitere Infos</h2>
<div class="ce-textpic ce-left ce-above">
<div class="ce-bodytext">
<p>NewsletterVeranstaltungenKontakt </p>
</div>
</div>
</div>
<!--TYPO3SEARCH_end-->
How can you remove the unneeded blank lines?
Thanks in advance
Daniel
As Dan already noted: use the f:spaceless VH.
Aside of that you could optimize all templates of your installation, but that is a very painful work as you need to work on a lot of templates. on the other side you will make all these templates unreadable as you loose the structure of indention.
A better approach would be to use extensions and external tools to optimize the resulting html. E.g. there is the extension tidy but that also needs the software tidy to be installed and accessible on your server. Then there are other minifier and compressor extensions.
A last (and possibly the easiest) optimization would be to configure your server (apache) to use compression / gzip for delivery. So those whitespace gets compressed to nearly nothing.
another newbie-question regarding rails and bootstrap.
I am using something like this:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">About us</li>
<li>Address</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<%= render 'about_us' %>
</div>
<div class="tab-pane" id="tab9">
<%= render 'address' %>
</div>
</div>
My problem is that I render 'address' which includes a form. By submitting this form I end up in an different controller. After saving a new address with this controller I would like to redirect to this page and show the address tab.
The redirect command I tried was: redirect_to salon_path(#salon.id.to_s + "#tab9")
This results in calling the url .../salons/1%23tab9. What I think I need its .../salons/1#tab9.
But maybe you are having a better solution how to choose one specific tab.
Using:
gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.3'.
I could figure it out myself, this post here brought me onto the right track: How to get Twitter-Bootstrap navigation to show active link?
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="<%= 'active' if params[:tab] == 'tab1' %>">About us</li>
<li class="<%= 'active' if params[:tab] == 'tab9' %>"> Address</li>
</ul>
<div class="tab-content">
<div class="<%= if (params[:tab] == 'tab1' || !params[:tab])then 'tab-pane active' else 'tab-pane' end%>" id="tab1">
<%= render 'about_us' %>
</div>
<div class="<%= if params[:tab] == 'tab9' then 'tab-pane active' else 'tab-pane' end%>" id="tab9">
<%= render 'address' %>
</div>
</div>
And in my example I call it like this:
redirect_to salon_path(#salon.id, tab:"tab9")
For future reference and for users with similar issues, I would add one more feature to Marcus's response. The solution itself is perfect and works like a charm but what happens if no tab parameter is passed? Then bootstrap does not show any tab content and only the tabs are shown. For me, this looks rather ugly and unprofessional. In my case, I added the following jQuery to fix it.
$(document).ready(function() {
//The following set of code checks to see if any tab is already active (this occurs if a parameter to tab would be passed)
//If no tab is active, make the first tab and tab-pane active
var elementAlreadyActive = false;
$('.nav-tabs li').each(function(index, li) {
var element = $(li);
if (element.attr("class") == "active"){
elementAlreadyActive = true;
}
});
if (!elementAlreadyActive){
$('.nav-tabs li:first').addClass('active');
$('.tab-content div:first').addClass('active');
} });
Instead of showing nothing if the parameter is not passed, the code checks all the li elements to see if any are already active. If none of them are, it makes the first tab and tab-pane active.
Although making the first tab active may not be useful to everybody, the code above can easily be modified to make a specific tab active if no parameters are passed.
You just have to do data-toggle="tab" for each list item anchor and the class="tab-pane" for each tab
<div class="tabbable">
<ul class="nav nav-tabs" id="proftabs">
<li><a href="#profile_tab" data-toggle="tab" >Profile</a></li>
<li>Friends</li>
<li>Photos</li>
<li>Videos</li>
<li>Quotes</li>
<div class="tab-content">
<div id="profile_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid excepturi id, maxime nesciunt recusandae repellat unde veritatis! Eveniet, fugiat, ipsum. Architecto assumenda, culpa impedit molestias natus porro quisquam repudiandae sunt!
</div>
<div id="friends_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis cupiditate incidunt. Accusantium adipisci architecto dignissimos eligendi est explicabo ipsa molestiae nesciunt optio porro provident, sint soluta, tempore temporibus vitae?
</div>
<div id="photos_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ex harum iste magnam necessitatibus sed sit. A adipisci amet cupiditate delectus dolor itaque numquam officia omnis, provident quod temporibus voluptatibus?
</div>
<div id="videos_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto at autem dolore, dolorum eaque earum eius, id in iste molestias officia, possimus qui quis recusandae repellat reprehenderit suscipit voluptatum!
</div>
<div id="quotes_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur, in necessitatibus qui quidem tenetur unde voluptatum! Aspernatur dolorem earum id labore molestiae nam quas quisquam, sapiente sequi ut voluptatibus.
</div>
</div>
</div>
I have a hard time finding out why my html+css looks fine in a browser and in the mailchimp preview function but looks ugly in the inbox of outlook.
Are there some things that cant be done in a html outlook email?
Here's the source 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scandia Housing</title>
<style type="text/css">
body {
background:#eeeeee;
margin:0; padding:0;
}
a {
color:#2f894d;
text-decoration:none;
}
h2 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#2d4760;
font-weight:lighter;
}
h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:15px;
color:#2d4760;
font-weight:lighter;
}
#headtext {
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
color:#9aaec2;
text-align:center;
width:720px; display:block;
clear:both; margin:auto;
margin-bottom:10px;
}
#content {
display:block;
margin:auto;
background:#fff;
width:720px;
}
#rowbox1 {
padding:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
margin-top:30px;
width:720px; height:250px;
display:block;
}
#rowbox2, #rowbox3, #rowbox4 {
padding:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
margin-top:20px;
width:720px; height:210px;
display:block;
}
#rowbox1 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/rowboxbg.png) no-repeat bottom;
}
#a1 img, #c1 img, #d1 img, #e1 img {
margin-right:10px;
margin-bottom:10px;
}
#b1 img {
margin-left:10px;
}
#a1, #b1, #c1, #d1, #e1 {
color:#606060;
width:350px; height:240px;
display:block;
float:left;
margin-left:30px;
}
#b1, #c1, #d1, #e1 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/boxbg.png) bottom;
width:380px; height:170px;
padding:10px;
}
#a1 h2, #b1 h3, #c1 h3, #d1 h3, #e1 h3 {
margin:0; padding:0;
}
#a2 h2, #b2 h3, #c2 h3, #d2 h3, #e2 h3 {
margin:0; padding:0;
}
#a2, #b2, #c2, #d2, #e2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
color:#2d4760;
width:230px;
height:190px;
display:block;
float:left;
margin-left:20px;
}
#a2, #b2, #c2, #d2, #e2 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/line.png) bottom no-repeat ;
}
#a2 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/listbox.png) no-repeat;
width:260px; height:220px;
margin-left:70px;
}
#b1 {
height:210px;
}
#b2 {
width:268px; height:210px;
}
#a2 h3 {
margin:5px 0 0 10px; padding:0;
}
#a2 ul {
margin:0; padding:0;
margin:20px 0 0 30px;
}
#a2 h3 {
color:#fff;
}
#footer {
text-align:center;
font-size:10px;
font-family:Tahoma, Geneva, sans-serif;
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/footer.png);
color:#fff;
padding:20px;
}
</style>
</head>
<body>
<div id="headtext"><a href="*|ARCHIVE|*">Hvis du modtager denne email, er du blevet tilmeldt Scandia Housings nyhedsbrev.<br />
Har du problemer med at få vist dete nyhedsbrev, så klik her og få det vist i din browser.</a></div>
<div id="content"><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/header.png" width="720" height="137" />
<div id="rowbox1">
<div id="a1">
<h2>Velkommen til vores nyhedsbrev </h2>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/peter.gif" width="119" height="176" align="left" />Lorem ipsum dolor sit amet, consectetur adipisc ing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhonc us, viverra a risus. <img style="margin-top:20px;" src="http://www.scandiahousing.com/DND/nyhedsbrev/images/petersign.png" width="112" height="50" /><br />
</p>
</div>
<div id="a2">
<h3>Nyt fra Scandia Housing </h3>
<ul>
<li>Lejemarkedet om 5 år</li>
<li>Regeringen vil lokke udenlandsk talent til Danmark</li>
<li>Århus Universitet kommenterer regerings-planerne</li>
<li>Fokus på boligen</li>
<li>Scandia Housing vokser</li>
<li>Travl periode i udsigt</li>
<li>Lektor Morten Skak's antagelser</li>
</ul>
</div>
</div>
<div id="rowbox2">
<div id="b1">
<h3><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/person1.gif" width="118" height="178" align="right" />Århus Universitet kommenterer <br />
regeringsplanerne</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. Quisque leo tellus.</p>
<p>>> Læs yderligere her</p>
</div>
<div id="b2">
<img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/pictures.png" width="268" height="210" />
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Fokus på boligen</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house.gif" width="138" height="83" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p> Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu.</p>
<p>>> Læs yderligere her</p>
</div>
<div id="c2">
<h3>Travl periode i udsigt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p>>> Læs yderligere her</p>
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Scandia Housing vokser</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
<p>>> Læs yderligere her</p>
</div>
<div id="c2">
<h3>HR chefens top 5 liste</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p>>> Læs yderligere her</p>
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Lektor Morten Skak's antagelser</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
<p>>> Læs yderligere her</p>
</div>
<div id="c2">
<h3>Lejemarkedet om 5 år</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p>>> Læs yderligere her</p>
</div>
</div>
<div id="footer">Capella Huset • Indiakaj 1 • 2100 København Ø • Danmark • Telefon: (+45) 33 93 11 81<br />
Vestergade 19B • 8000 Århus C • Danmark • Telefon: (+45) 72 30 04 88<br />
Telefax København: (+45) 33 93 14 46 Telefax Århus (+45) 86 27 11 87: • e-mail: scandiahousing#scandiahousing.com<br />
</div>
</div>
</body>
</html>
In the current version I have hardcoded all the images paths and they are showing correctly.
It is the formatting that goes completely wrong.
Which version of Outlook? 2007 uses Word to render HTML email and can't handle floats or positions and sometimes background images...among a host of other things. I've found the best way to generate HTML email is to write it like a website from 2000. Table based layouts etc...