Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

text wrap issue

Engaged ,
Feb 09, 2017 Feb 09, 2017

Ok I have a DW document which I need to wrap text  inside. I actually have a div there that is doing it but I need for it to behave like this

see image screenshots.

SHOT 1 WHEN BROWSER IS MADE SMALLER THE TEXT WRAPS FINE BUT I NEED THE TEXT TO NEVER BE WIDER THAN THE IMAGE FOLLOW?

SHOT TWO IS THE BROWSER SMALLER BUT THE IMAGE IS ALWAYS SMALLER THAN THE TEXT

SHOT THREE IS WHERE I NEED THE TEXT TO BEGIN WRAPPING

THIS PROJECT WAS EXPORTED FRIOM INDESIGN AND I HAVE THE HEADER IMAGE SET TO FLOW WITH THE TEXT.

I KNOW A BIT ABOUT CSS BUT NEED A WRAPPER SET TO % BUT CANT GET ONE TO WORK.

ANY HELP?

shot1.pngShot2.pngLIKETHIS.jpg

773
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 09, 2017 Feb 09, 2017

matthewdee wrote:

I sent you the url in your inbox , plz have a look and you will see exactly what I mean. This project was originally an InDesign project, so I just exported to html and really did not have to do too much except add css and html in certain areas.

plz advize and thanks for helping out.'R

Code below: (please note you need to type back in the email address for Denis as I have used a series of xxxxxxx to stop spam harvestors grabbing it from the forum.

<!DOCTYPE html>

<html>

<head>

<meta c

...
Translate
Community Expert ,
Feb 09, 2017 Feb 09, 2017

Exporting from InDesign is probably never going to work. It's terrible at generating real world html and css.

Put the image and the text in the same element and make that element's width max out at the image's maximum natural width. If the image's width were 900 pixels for example...

#element_id {
     max-width:900px;

     margin:0 auto; /* centers an element with a fixed width */

}

#element_id img {

     max-width:100%;

}

<div id="element_id">
     <img src="yourimage.jpg">
     <p>your text</p>
</div>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 09, 2017 Feb 09, 2017

Well you are going to have to post your code here because its most likely as a result of your code exported from InDesign, not a great idea.

A simple example below. This assumes your image is a minimum width of 900px. If it is less then you would have to reduce the percentage width of the 'page_wrapper' container from 50% to something less.

<div class="page_wrapper">

<img src="yourImage.jpg" alt="">

<p>Your text goes here in paragraphs</p>

<p>Your text goes here in paragraphs</p>

</div>

<!--end page wrapper  -->

CSS:

.page_wrapper {

width: 50%;

max-width: 900px;

margin: 0 auto;

}

img {

max-width: 100%;

height: auto;

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Feb 09, 2017 Feb 09, 2017

I sent you the url in your inbox , plz have a look and you will see exactly what I mean. This project was originally an InDesign project, so I just exported to html and really did not have to do too much except add css and html in certain areas.

plz advize and thanks for helping out.'R

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 09, 2017 Feb 09, 2017

matthewdee wrote:

I sent you the url in your inbox , plz have a look and you will see exactly what I mean. This project was originally an InDesign project, so I just exported to html and really did not have to do too much except add css and html in certain areas.

plz advize and thanks for helping out.'R

Code below: (please note you need to type back in the email address for Denis as I have used a series of xxxxxxx to stop spam harvestors grabbing it from the forum.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>AM_Executive_Brief_Moving_The_Needle-WEB2_9</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 14px;

line-height: 20px;

}

* {

box-sizing: border-box;

}

img {

max-width: 100%;

height: auto;

  

}

.page_wrapper {

width: 55%;

margin: 0 auto;

max-width: 800px;

}

@media screen and (max-width: 1150px) {

.page_wrapper {

width: 85%;

}

}

@media screen and (max-width: 768px) {

.page_wrapper {

width: 80%;

}

}

@media screen and (max-width: 480px) {

.page_wrapper {

width: 90%;

}

}

.page_wrapper h2 {

margin: 0;

padding: 15px 0;

font-size: 30px;

line-height: 40px;

color:#0085c9;

font-weight: normal;

}

.page_wrapper h3 {

margin: 0;

padding: 30px 0;

font-size: 20px;

line-height: 30px;

font-weight: normal;

font-style: italic;

}

.page_wrapper h4 {

margin: 0;

padding: 15px 0;

font-size: 20px;

color:#0085c9;

font-weight: normal;

}

.page_wrapper p {

margin: 0;

padding: 0 0 15px 0;

}

.case_in_point {

padding: 20px 30px;

margin: 20px 0;

}

.panel_one {

background-color: #fff0d4;

}

.panel_two {

background-color:#e4e4e3;

}

.panel_three {

background-color:#e3ebf5;

}

.panel_four {

background-color:#c9d6eb;

}

li {

padding: 0 0 10px 0;

font-weight: bold;

color:#0085c9;

}

ol > li {

font-weight: normal;

color: #000;

}

.author {

text-align: center;

}

.author span {

display: block;

padding: 15px 0;

}

</style>

</head>

<body>

<div class="page_wrapper">

<img src="http://www.dagwaremedia.com/AMExec_2_9_17/AM_Executive_Brief_Moving_The_Needle-WEB2_9-web-resources/..." alt="" />

<h3>There is never enough time or money to satisfy all the technology demands of an organization. Executives must direct limited resources towards initiatives that really “move the needle” and impact business results.</h3>

<h4>So many technology demands, so few resources</h4>

<p>Few companies are satisfied with the return on their IT investment. Leaders are frustrated technology initiatives take too long, cost too much and under deliver. At the same time, companies increasingly depend on technology for all aspects of their business. </p>

<p>Whether they are looking to grow revenue, increase customer loyalty, reduce cycle times or dramatically reduce costs, technology is most often at the center of the strategy. </p>

<p>With limited resources, executives must prioritize where to invest their IT resources to get the most business value.</p>

<p>In a typical company, nearly 80% of IT spending goes towards maintenance of existing systems. That leaves little time or resources to pursue new strategic initiatives or leverage emerging technologies. Leaders need to think hard about where to direct their best people’s efforts then attack those priorities relentlessly. </p>

<p>The challenge is for executives to be deliberate about future technology investments, minimize non-strategic maintenance spend and find discretionary dollars to pursue strategic priorities that will enhance technology capabilities and provide a competitive advantage.</p>

<h4>Follow the money...where does it all go?</h4>

<p>The first challenge most executives face is limited visibility into where the money goes and what value they get for it.</p>

<p>In large organizations, financial systems report technology spending in broad categories such as labor, software and telecommunications.</p>

<p>Little insight is provided about the systems or projects supported, the underlying activities that drove spending, the business results produced or other information that would enable executives to evaluate returns and take action to improve results.</p>

<p>Technology costs can show up on any number of cost line items and in a many different departmental budgets. Increasingly, companies are spending money on third parties and cloud service providers in business units and functions outside of IT.</p>

<h4>What are they really working on?</h4>

<p>Another challenge is to analyze the technology spend based on activity as opposed to the general ledger/chart of accounts reporting.</p>

<p>With labor generally being one of the largest cost components, it’s critical to know what projects and activities people are actually working on.</p>

<p>If you don’t drill down behind the expense line item to understand the activities that drive costs, you don’t have a chance of changing them.</p>

<div class="case_in_point panel_one">

<h4>CASE IN POINT</h4>

<p>A&M worked with a client that thought it was spending $50 million a year on IT. When we dug in, we found an additional 25% of software, hardware and telecom charges that was hidden in departments outside the purview of IT.</p

<p>Much of the hidden spend contributed to complexity of maintaining systems and unplanned difficulties in data management. Additional opportunities for simplification and savings became apparent when management had transparency and visibility to the true spend.</p>

</div>

<!-- end case_in_point/panel_one -->

<h4>Simplify and clarify</h4>

<p>Success is dependent on a clear, easily understood technology strategy and effective execution. As Leonardo da Vinci famously put it, “Simplicity is the ultimate sophistication.” Yet executives struggle to create a clear technology strategy that highlights the vital few initiatives that will truly make a difference to the company.</p>

<p>Even the best technology strategy can be torpedoed by poor execution and communication. Sometimes, senior management is clear on the strategy, but the message gets distorted as it moves through layers of middle management.</p>

<p>Other times, the strategy sounds impressive but is too high level to be actionable. In either case, the strategic messaging gets diluted or is misunderstood by the “doers” who must implement it.</p>

<div class="case_in_point panel_two">

<h4>CASE IN POINT</h4>

<p>A large financial services firm struggled to implement a complex IT strategy designed by a well-known consultancy.</p>

<p>The strategy was complex, with nearly 100 projects planned or underway. Employees were confused about where to focus their time, project meetings overlapped, and a small army of consultants tracked project status (most fell further behind schedule each week).</p>

<p>A&M was asked to make the strategy actionable. We worked with senior and middle management to clarify the definition of success and the value to be realized, then defined and prioritized a dozen initiatives.</p>

<p>Project management overhead was simplified, project leaders focused on execution, and expected benefits were achieved faster than believed possible.</p>

</div>

<!-- end case_in_point/panel_two -->

<h4>Create small, accountable teams</h4>

<p>Don’t waste precious resources by asking them to multi-task on too many projects. People can be bottlenecks, especially if they are involved on multiple project teams.</p>

<p>Keep core project teams small and charge them with driving progress; use advisory teams to expand the number of participants who have a voice (but not a vote). Understand where each individual can maximize their contribution, and eliminate distractions where possible.</p>

<p>Once the team is ‘right-sized’, organize for success. Use a RACI chart to identify key participants and clarify responsibilities.</p>

<div class="case_in_point panel_three">

<h4>CASE IN POINT</h4>

<p>After being carved-out from a Fortune 100 company, the new company formulated a strategy to terminate a transitional services agreement (TSA) by implementing a new ERP system.</p>

<p>As we reviewed the project team structure, it became apparent that two people were especially critical to the success of the effort. Both were highly skilled individuals who were sought out by multiple teams for their advice and support, which they were happy to provide, often to the detriment of completing their assigned work.</p>

<p>We challenged the project manager to know what these two people were doing at all times, and to eliminate distractions. The result was we found other people who were willing and able to step up, thus expanding their contribution and allowing the critical people to stay focused on their assigned tasks.</p>

<p>The system was implemented on time, allowing management to terminate the TSA and avoid significant penalties.</p>

</div>

<!-- end case_in_point/panel_three -->

<h4>Focus and prioritize</h4>

<p>We often use a simple framework to stimulate discussion around strategic technology priorities. Start with a 2x2 model that compares “Investment” (could be measured in time, labor, dollars or risk) on the horizontal axis and “Return” (as measured as to what is important to your business – revenue growth, cost reduction, reduced cycle times, increased cash flow) along the vertical axis. Plot each of the identified technology initiatives in the framework and discuss as a team.</p>

<img src="http://www.dagwaremedia.com/AMExec_2_9_17/AM_Executive_Brief_Moving_The_Needle-WEB2_9-web-resources/..." alt="" />

<p>It will create debates. People will argue as to what’s high return or high risk and what’s not. The value of those conversations comes from the insights gained about what’s really going on and what distractions or assumptions are keeping the team from making better progress with your “move the needle” projects.</p>

<div class="case_in_point panel_four">

<h4>CASE IN POINT</h4>

<p>A newly appointed CIO of a pharmaceutical giant inherited a $100+ million portfolio of technology projects that had been historically managed with little oversight or cross-functional collaboration. Spend had never been prioritized and the increasing costs were eating into their ability to invest in R&D. The CIO wanted to ensure that the IT organization was focused on the right projects to drive the most business value.</p>

<p>The solution included creating a cross-functional, cross-business inventory of all in-flight projects and a governance framework that prioritized technology investments according to business impact.</p>

<p>The CIO was surprised to learn that there were roughly 150 projects in-flight and roughly 1/3 were unapproved. Furthermore, the Top 10 projects that were expected to generate 80% of the business value were behind schedule. The team quickly streamlined the list of projects by almost 40% and shifted resources to accelerate the completion of the Top 10 projects. Simultaneously, they reduced spend by roughly 25%.</p>

</div>

<!-- end case_in_point/panel_four -->

<h2>SUMMARY</h2>

<p>Clear visibility into how and where technology resources are used is essential to powerful decision-making. Our framework helps leaders create focus on projects that really move the needle and prune distractions. Senior leaders need to ask questions and drill down to some very basic, yet critical questions:</p>

<ul>

<li>Where is the money going?</li>

<li>What are the business benefits?</li>

<li>Are our best people focused on the most important priorities?</li>

</ul>

<p>Resources are always scarce. Finally, here are five tips for ensuring your technology organization is focusing on projects that will really move the needle:</p>

<ol>

<li>First, 'follow the money' and understand how your company creates value. Is IT actively engaged with increasing revenue, reducing cost, improving working capital or strengthening regulatory compliance? An effective IT strategy supports business objectives and creates new capabilities.</li>

<li>Set clear technology strategies and communicate frequently and consistently. Resist the urge to create a ‘flavor of the month’. Keep stategy simple and consistent. Leaders need to reinforce priorities often.</li>

<li>Create small teams staffed by people who are willing to be accountable for results. Let them participate in developing and executing the strategy, and resist the urge to overcommit them to multiple initiatives or stifle them with bureaucracy.</li>

<li>Focus on priorities. Review the portfolio of IT projects regularly, and understand where/how resources are used. Ruthlessly prune distractions and non-strategic initiatives.</li>

<li>Excel at execution. Strategy is meaningless if you don’t produce results.</li>

</ol>

<div class="author">

<h4>About the Author</h4>

<img src="http://www.dagwaremedia.com/AMExec_2_9_17/AM_Executive_Brief_Moving_The_Needle-WEB2_9-web-resources/..." alt="" />

<p>Denis Picard<br>

Managing Director<br>

dpicard@xxxxxxxxxxxxxxxxxxxxx.com I +1 212 328 8573<br>

<span></span>Denis Picard is a Managing Director with Alvarez & Marsal in New York, with more than 30 years of technology leadership experience, including roles as Chief Information Officer (CIO) of privately held companies and interim CIO for a multi-billion dollar financial services carve-out.</span>

</p>

</div>

<!-- end author -->

</div>

<!-- end page_wrapper -->

</body>

</html>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Feb 09, 2017 Feb 09, 2017

Great, I see you added the css in the head of the doc. Works fine now as I haven't done html / css work in a while. Thank you so very much for helping@

MD

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 09, 2017 Feb 09, 2017
LATEST

No problem. You'll have to add the image about the company in at the bottom but hopefully you can type that in as text -  it will look better as html text and just use the company logo as an image.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines