I want to implement this view But I have one question: The text which

Question

0

Asked: May 31, 20262026-05-31T23:02:34+00:00 2026-05-31T23:02:34+00:00

I want to implement this view But I have one question: The text which

0

I want to implement this view
enter image description here

But I have one question: The text which says “Munstycke…” should not have the linebreak this far to the left, it should be like in the specification:
enter image description here

My code that achieves the view first mentioned is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
<html>
<head>
    <link href="css_js/styles.css" rel="stylesheet" type="text/css">
    <link href="css_js/positions.css" rel="stylesheet" type="text/css">
    <link href="css_js/floats.css" rel="stylesheet" type="text/css">
    <script src="css_js/sorttable.js"></script>
    <script language="JavaScript1.2" src="css_js/general_arendeprocess.js"></script>
    <script language="JavaScript1.2" type="text/javascript">
    function ingVar(x) { 
    var applicationDependence;
    applicationDependence = x;
    document.getElementById('ff').style.display='none';
    document.getElementById('avd').style.display='none';
    document.getElementById('utb').style.display='none';
    document.getElementById('oepa').style.display='none';
    document.getElementById('aooep').style.display='none';
    if (applicationDependence == 'ff'){ 
            document.getElementById('ob').style.display='none';
            document.getElementById('ff').style.display='';
            }
    if  (applicationDependence == 'avd'){
            document.getElementById('ob').style.display='none';
            document.getElementById('avd').style.display='';
            }
    if  (applicationDependence == 'utb'){
            document.getElementById('ob').style.display='none';
            document.getElementById('utb').style.display='';
            }       
    if  (applicationDependence == 'oepa'){
            document.getElementById('ob').style.display='none';
            document.getElementById('oepa').style.display='';
            }
    if  (applicationDependence == 'aooep'){
            document.getElementById('ob').style.display='none';
            document.getElementById('aooep').style.display='';
            }       
    if  (applicationDependence == 'ob'){
            document.getElementById('ob').style.display='';
            }       
    }
    </script>
    <title>Ingivningsdag - NAT. - Pandora </title>
</head>
<%
    final Logger logger = Logger.getLogger("arendeprocess_grunduppgifter.jsp");
    ArendeProcessPageController apc = new ArendeProcessPageController(request);
    GrunduppgifterPageController pc = new GrunduppgifterPageController(request);
    String arendeTyp = apc.getArendeTyp();
    boolean showSearch = false;
    AnsokanInfo ansokanInfo = apc.getAnsokanInfo();
    PersonInfo editPerson = new PersonInfo();
    if(ansokanInfo != null && ansokanInfo.hasEditPersonInfo()) {
        editPerson = ansokanInfo.getEditPersonInfo();
    } else {
        editPerson.setFornamn(apc.getNyregPerson().getFornamn());
        editPerson.setEfternamn(apc.getNyregPerson().getEfternamn());
        editPerson.setForetag(apc.getNyregPerson().getForetag());
        //editPerson.setOrgnr(apc.getNyregPerson().getOrgnr());
        editPerson.setLandKod(apc.getNyregPerson().getLandKod());
    }
    if(apc.getLatestAction().equals("Namnsokning") && apc.getLatestActionCommand().equals("search")) {
        showSearch = true;    
    }

%>

<body><form name="actionForm" action="PandoraActionServlet" style="display: inline;" method="post">
    <input type="hidden" name="currPage" value="<%=request.getRequestURI()%>" />
    <input type="hidden" name="action" value="" />
    <input type="hidden" name="actionCommand" value="" />
    <input type="hidden" name="actionModifier" value="" />
    <input type="hidden" name="actionTarget" value="" />
    <input type="hidden" name="destination" value="" />
    <input type="hidden" name="currIndex" value="" />


<!--sidinneh&aring;ll-->
<div class="form-bg">
<div class="data-bar">
<div class="yta2  TB_nb fontS80 ">
    <div class="clear ">&nbsp;</div>
    <div class="fr1 ">&nbsp;</div>
    <div class="fr5 "><input type="button" value="Historik"></div>
    <div class="fl30"><h2>Grunduppgifter</h2></div>
    <div class="clear quarter">&nbsp;</div>
</div>
</div>
<div class="data-bar">
<div class="clear "></div>

<div id="indag" class="yta2   TB_nb fontS80">
    <div class="clear half">&nbsp;</div>
    <div class="fl10"><h3>Ingivningsdag</h3></div>

    <div class="fl20">Ans&ouml;kans beroende:</div>
    <div class="fl20">Oberoende</div>
    <div class="fl10">&nbsp;</div>
    <div class="fl1">&nbsp;</div>
    <div class="fl20"></div>
    <div class="clear"></div>

    <div id="ob">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod<br><br></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Datum ingivningsdag:</div>
        <div class="fl20">

        <strong>2009-01-01</strong>
    </div>
<div class="clear"></div>
    <div class="data-bar"></div><br>
    <div class="fl10"><h3>Sökande</h3></div>
    <div class="fl20"><div class="data-box">

    <table border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div></div>

    <div class="clear"></div>

    <div class="fl10"><h3>Uppfinnare</h3></div>
    <div class="fl20"><div class="data-box">

    <table id="table" border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div></div>


    <div class="clear"></div>

    <div class="fl10"><h3>Ombud sökande 1-2</h3></div>
    <div class="fl20"><div class="data-box">

    <table border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div></div>

    <div class="clear"></div>
    <div class="data-bar"></div><div class="clear"></div><br>

    <div class="fl10"><h3>Benämning</h3><br>Uppfinningens benämning:</div>
    <div class="fl20">

    Munstycke och oftast ett mycket längre krångligt begrepp i en lång lång texststträng längre krångligt begrepp i en lång lång textsträng längre krängligt begrepp i en lång lång textsträng längre krånglig textsträng

    </div>

    <div class="clear"></div>

    <div class="fl10"><h3>Prioriteter</h3></div>
    <div class="fl20">

    <table border="0">
        <tr><td>Prioritet</td><td>Prioritetsdag</td><td>Prio. dok i ärende</td></tr>
        <tr><td>DK 0900231-1</td><td>2009-03-21</td><td>0800213-3</td></tr>
        <tr><td>EP 123234.3</td><td>2009-02-11</td><td>PCT/SE2002/000231</td></tr>
        <tr><td>SE PCT/SE2006/032131</td><td>2006-02-12</td><td></td></tr>
        </table>

    </div></div>

    <div class="clear"></div>

    <div class="fl10"><h3>Deposition mikroorganismer</h3></div>
    <div class="fl20">

    <table border="0">
        <tr><td>Depositionsmyndighet</td><td>Depositionsdatum</td><td>Depositionsnummer</td><td>Endast utlämning till expert</td></tr>
        <tr><td>Smittskyddsinstitutet</td><td>2009-03-21</td><td>11123</td><td>Nej</td></tr>

        </table>

    </div>

    <div class="clear"></div>

    <div class="fl10"><h3>Handläggare</h3></div>
    <div class="fl20">

    Markus Stålö, MSTÅ

    </div>

    <div class="clear"></div>

    <div class="fl10"><h3>Resultat</h3></div>
    <div class="fl20">

    <table border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div>

</div><!-- indag -->

</div>

</div>
</div>
</form>
</body>
</html>


*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}

.labb{F0F0E3; c1c1b3 }

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}   

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
line-height:50%;
}

.quarter{
line-height:25%;
}

.lh10{
line-height:10%;
}

.checkmargin {margin-right: 25px;}  
.checkmarginL {margin-left: 25px;}  

.pusher {padding-left: 15px;"}
.pusherR {margin-right: 40px;"}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 580; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 500px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}

body
{
background-color:#eeefdf;
}


.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}

.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}

.right {
float:right;
width:700px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
}

Can you tell me how I should do it? Any other suggestion how I can make my result look more like the specification?

Thank you

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-31T23:02:36+00:00

you can solve it with floating elements like this:

<div style="float:left;width:200px">
    <span>Name</span>
</div>
<div style="float:left">
   <ul style="clear:both">
     <li style="list-style:none">
      <p style="float:left;width:200px;">c o Andersson</p>
      <p style="float:left;width:200px;"> Telefon </p>
      <p style="float:left;width:200px;"> 123456 </p>
     </li>
     <li style="clear:both; list-style:none">
       <p style="float:left;width:200px;">Angeredsgatan</p>
       <p style="float:left;width:200px;">Fax</p>
       <p style="float:left;width:200px;">7551444</p>
     </li>
  </ul>


</div>
    <div style="clear:both;float:left;width:200px">
        <span>name</span>
    </div>
    <div  style="float:left;">
     <span>Munstycke och oftast ett mycket längre krångligt begrepp i en lång lång texststträng längre krångligt begrepp i en lång lång textsträng längre krängligt begrepp i en lång lång textsträng längre krånglig textsträng
      </span>
    </div>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I want to implement this view But I have one question: The text which

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply