Home/ Questions/Q 7609193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:06:41+00:00

I want to make my HTML and CSS like above to display a white

  • 0

enter image description here

I want to make my HTML and CSS like above to display a white frame with a heading around these two form fields. The HTML I’ve prepared is just the fields:

<div class="fl20 smallg">&mdash;&mdash; Fysisk person &mdash;&mdash;</div>
        <div class="clear"></div>       
        <div class="fl20">F&ouml;rnamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>
        <div class="clear"></div>
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
        <div class="clear"></div>

Can you tell me what I should do to create the white frame with the heading “fysisk person”?

Thank you

Update

using the fieldset tag nearly does what I want, but I need to put the heading inside the frame like above and move the whole thing to the left since it displays to far to the right after the change, and some text is white instead of black so I need to change that too:
enter image description here

Update

Now I’m close. This is the mockup that shows what we want:

enter image description here

and here is my result this far:
enter image description here

I basically only need to do this with CSS instead of tables and make the button with its text to the right display lower on the page. How can I finish it this way?

The code now is

<fieldset class="whiteborder">
         <legend>Fysisk person</legend> 
        <div class="fl20">F&ouml;rnamn:</div>
        <input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>">
        <div class="fl20">Efternamn:</div>
        <input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>">
        </fieldset></td><td>
        <div class="fl20">S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''"></div></td></tr></table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As @Bas Tuijnman said, use the fieldset. To expand, you then apply CSS to it increase the border size and adjust the padding/margins for display layout.

    JSFiddle

    Style:

    body { 
    background-color: #333333; 
}

.whiteborder {
    color: #ffffff; 
    border: 3px solid #ffffff; 
    padding: 10px; 
    margin: 10px;
}
​

    Html:

    <fieldset class="whiteborder">
    <legend>Fysisk Person:</legend>
    <div class="fl20">F&ouml;rnamn:</div>
    <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>
    <div class="clear"></div>
    <div class="fl20">Efternamn:</div>
    <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
</fieldset>​

    Edit: In order to get the button/extras to align how you want them, you should encase both blocks in separate divs that are floated left. Then apply appropriate padding/margins to the text block to achieve the spacing you’re looking for.

    <div style="float: left;">
    <!-- Fieldset html goes here -->
</div>
<div style="float: left; padding: 20px; margin: 10px;">
    <!-- text/buttons markup goes here -->
</div>
    • 0