Standard/Responsiv HTML – Layout og design

English

Hvis du lager et design med rammeverkene responsiveHTML eller standardHTML, vil CSS-koden i denne brukerveiledningen hjelpe deg med å tilpasse layouten i tjenesten din. Denne veiledningen går gjennom designinnstillingene for rammeverkene, samt viser CSS-kode for å gjøre enkle endringer i layout-elementene.

Viktig: Du finner færre relevante veiledninger i dette dokumentasjonsområdet hvis tjenestene dine bruker rammeverkene standardHTML eller responsiveHTML. Det anbefales sterkt å gå over til bootstrap-rammeverk, da det gir et bedre fundament for å støtte responsivt design og universell utforming (Universell Utforming i Compose (WCAG)). Fremtidige veiledninger vil hovedsakelig omfatte design i bootstrap. Les siden Bootstrap theme for mer informasjon.

Når du sette pikslene i innstillingene for tjenestedesignet (enten ved forhåndsvisning i skjemabyggeren eller i prosessbyggeren), ser du av illustrasjonen under hvilke bredder som påvirkes.

Farger

Denne CSS-koden kan brukes til å endre fargepaletten til designet:

.Respondent-mainWrapper .left-box-gradient {
    background-color: #E6C239;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6C239', endColorstr='#CF8606'); /* for IE */
    background: -webkit-gradient(linear, left top, right top, from(#E6C239), to(#CF8606)); /* for webkit browsers */
    background: -moz-linear-gradient(left,  #E6C239,  #CF8606); /* for firefox 3.6+ */
}
 
.Respondent-mainWrapper.haveLeftNavigation  .left-menu-color {
    background-color: #FCF4E9 !important;
    border-right: 1px solid #C0C0C0;
    box-shadow: -1px 0 3px 0 #BBBBBB inset;
    left: 0;
    z-index: 2;
}
.Respondent-mainWrapper.haveHelpSection .help-area-color {
    background-color: #f5f5f5;
    border-left: 1px solid #C0C0C0;
    box-shadow: 1px 0 3px 1px #CCCCCC inset;
    left: auto;
    right: 11px;
    z-index: 4;
}

Avrundede hjørner

Sirkelradiusen på hjørnene defineres på en skala fra 24 til 0. De runde hjørnene lages med bilder.

 /* corner roundness - 24 */
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center            { height: 36px; }
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/light/corners-shadow-24.png");
    *background-image: url("images/light/corners-shadow-24.gif");
}
 
 
/* corner roundness - 12 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 24px; width: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 24px; width: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center            { height: 24px; }
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/light/corners-shadow-12.png");
    *background-image: url("images/light/corners-shadow-12.gif");
}
*/
 
 
/* corner roundness - 6 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 16px; width: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 16px; width: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center            { height: 16px; }
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/light/corners-shadow-6.png");
    *background-image: url("images/light/corners-shadow-6.gif");
}
*/
 
 
/* corner roundness - 0 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 12px; width: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 12px; width: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center            { height: 12px; }
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/light/corners-shadow-0.png");
    *background-image: url("images/light/corners-shadow-0.gif");
}
*/

Mørk bakgrunn

Du kan også kombinere de samme avrundede hjørnene med en mørk bakgrunn. Bilder for runde hjørner med en mørk bakgrunn er også tilgjengelige.

  .Respondent-mainWrapper .mainTable {
    background-image: url("images/dark/left-shadow.png");
    *background-image: url("images/dark/left-shadow.gif");
}
.Respondent-mainWrapper .mainTable > div,
.Respondent-mainWrapper .mainTable > div > span {
    background-image: url("images/dark/right-shadow.png") !important;
    *background-image: url("images/dark/right-shadow.gif") !important;
}
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center {
    background-image: url("images/dark/top-shadow.png");
    *background-image: url("images/dark/top-shadow.png");
}
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center {
    background-image: url("images/dark/bottom-shadow.png");
    *background-image: url("images/dark/bottom-shadow.png");
}
 
 
/* corner roundness - 24 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center            { height: 36px; }
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/dark/corners-shadow-24.png");
    *background-image: url("images/dark/corners-shadow-24.gif");
}
*/
 
 
/* corner roundness - 12 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 24px; width: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 24px; width: 24px;
}
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/dark/corners-shadow-12.png");
    *background-image: url("images/light/corners-shadow-12.gif");
}
*/
 
 
/* corner roundness - 6 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 16px; width: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 16px; width: 16px;
}
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/dark/corners-shadow-6.png");
    *background-image: url("images/dark/corners-shadow-6.gif");
}
*/
 
 
/* corner roundness - 0 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span        { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span    { height: 12px; width: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span        { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span    { height: 12px; width: 12px;
}
 
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
    background-image: url("images/dark/corners-shadow-0.png");
    *background-image: url("images/dark/corners-shadow-0.gif");
}
*/

Fjern den venstre stripen med gradientfarge:

 /*Hide left stripe*/
/*
.Respondent-mainWrapper .left-box-gradient {
    display: none;
    width: 0px;
    left: -58975px;
    top: 587495px;
    opacity: 0;
    height: 0px;
}
.Respondent-mainWrapper .mainTable .table-left > span                    { width: 36px; }
.Respondent-mainWrapper .mainTable > div > div > span.table-center        { margin-left: 11px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > .table-borders    { margin-left: -11px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot                    { margin-left: 11px; }
.Respondent-mainWrapper .mainTableTbody > .tbodyContent > .table-left > span { width: 11px; }
 
.Respondent-mainWrapper .mainTable .table-toolbar .table-center > span {
    border-left: 1px solid #AAAAAA;
}

Standard HTML-design:

standard.web.skin.zip