Avatar billede kasseper Nybegynder
30. maj 2002 - 10:39 Der er 1 kommentar og
1 løsning

CSS : linebreak og indryk....?

Jeg har følgende kode :


<html>
<head>
    <title>Untitled</title>
    <LINK href="/include/global.css" type='text/css' rel='stylesheet'>
    <LINK href="/include/fqmmain_backup.css" type='text/css' rel='stylesheet'>
    <style>
BODY
{
    COLOR: #3c3c30;
    FONT-FAMILY: Arial;
    FONT-SIZE: 12px;
    FONT-WEIGHT: bold
}
DIV.greyHeadline_cont
{
    BACKGROUND-COLOR: #d2d2c6;
    HEIGHT: 17px;
    POSITION: relative;
    WIDTH: 100%
}
DIV.select_box
{
    position:absolute;
    left: 10px;
    top: 10px;
    height: 300px;
    width: 220px;
    background-color: white;
    BORDER-BOTTOM: #d2d2c6 1px solid;
    BORDER-LEFT: #d2d2c6 1px solid;
    BORDER-RIGHT: #d2d2c6 1px solid;
    BORDER-TOP: #d2d2c6 1px solid;
}
DIV.box_cont
{
    position:relative;
    overflow:auto;
    height: 281px;
}
SPAN.itemElement
{
    color:#000099;
    left: 6px;
    top: 2px;
    MARGIN-BOTTOM: 2px;
    HEIGHT: 0px;
    position: relative;
    cursor: hand;
}
SPAN.itemNo
{
    position: relative;
    vertical-align : top;
}
SPAN.itemText
{
    position: relative;
    vertical-align : top;
}
</style>
</head>
<body>
<div class="select_box" style="left: 100px;">
<DIV class=greyHeadline_cont id=box3_head>&nbsp; <SPAN id=50>Test questions</SPAN></DIV>
<DIV class=box_cont id=box3>
    <SPAN class=itemElement style="COLOR: black; CURSOR: default" itemid="51"><SPAN class=itemNo>T:<SPAN class=itemText>Just a text</SPAN></SPAN></SPAN><BR><br>
    <SPAN class=itemElement><SPAN class=itemNo onclick="">T1:<SPAN class=itemText> This is a fairly short text</SPAN></SPAN></SPAN><BR>
    <SPAN class=itemElement><SPAN class=itemNo onclick="">T2:<SPAN class=itemText> This is a looong text, a line break is needed to show it</SPAN></SPAN></SPAN><BR>
    <SPAN class=itemElement><SPAN class=itemNo onclick="">T3:<SPAN class=itemText> This is a even longer text, a line break is needed to show it, and another one just to make me happy.</SPAN></SPAN></SPAN><BR>
    <SPAN class=itemElement><SPAN class=itemNo onclick="">T0:<SPAN class=itemText> Other</SPAN></SPAN></SPAN><BR></DIV>
</div>
</body>
</html>


------------------------------------------------------
SOM SKAL SES I IE 5.01 +.
------------------------------------------------------

Som man kan se så sker der det at når mine 'spans' laver et linebreak, så rykker den nye linie ind under det bogstav der står og det er ikke meningen. Det skal være sådan at hvis linien ikke kan være der, så skal der laves et indryk sådan at linie 2+ skal starte ligeså langt inde som den første linie, lidt ligesom hvis man havde anvendt en table, men det skal jeg ikke......
Desuden skulle det gerne være sådan at jeg selv kan specifisere hvor langt inde teksten skal starte, således at hvis man kommer op på T100, så starter teksten ved T1 lige så langt inde som teksten ved T100.
Det skal ikke være dynamisk, men bare en fast pixel værdi....

Håber i har nogle ideer.....
Avatar billede shaman Nybegynder
30. maj 2002 - 13:33 #1
Umiddelbart ville jeg foreslå dig at lave det med <UL><LI></LI></UL>, dvs bullet lists, og så definere bullettype via stylesheet:

http://www.w3schools.com/css/pr_list-style-type.asp

ex.
ul {list-style-type:decimal-leading-zero;}

Hvorefter listen bliver 01, 02, 03, 04 osv.

Ellers hvis bulletlists ikke lige passer dig kan du lave det med <table> hvor du har 2 arrays, et med punktnummer og et med punkt indhold.

Så putter du punktnummeret i første <td> med valign="top" og indholdet i den anden... På den måde kan du selv specificere hvor lang inde det hele skal være.
Avatar billede kasseper Nybegynder
30. maj 2002 - 15:36 #2
Den går ikke helt. Jeg skal holde mig til spans da vi har en global rutine der looper events på, så jeg skal holde mine containere.
Men jeg fandt en løsning på det. Jeg satte en width på både itemText og itemNo og en left positionering på Text der var ca 20 px. så fik jeg mit linebreak der var ok, så var problemet bare at når event'sne var loopet på så var der onMouseover på hele span'ets width også selvom der ikke stod noget tekst. Men det er acceptabelt, så problemet er løst....
Men tak for hjælpen , anyway
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester