/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
css: styring af tekst/scrollbar/tekst-skyg~
Fra : Tommy Olesen


Dato : 30-10-02 09:43

jeg har smidt en test-side op på:

http://www.friserverplads.dk/tommy_olesen/default.htm

mine problemer med siden er flg.:

1.) jeg kan ikke finde ud af om man kan styre teksten således at
når man f.eks. laver en indrykning af en ny sætning, også kan få
den efterfølgende tekst til at overholde dette indryk, sådan at
teksten ikke ser "sjusket" ud. Det skal siges at problemet
variere ved forskellige skærmstørrelser (opløsninger ?).

Det drejer sig om flg. afsnit:
"- Dygtiggøre dig fagligt, få en professionel vejledning og få
styrket dine sociale sider.
- Indgå i et forpligtende samarbejde og fællesskab
- Være en god kammerat."

Kan dette løses v.h.a. css ?

2.)der er en scrollbar på tværs af skærmen, hvordan fjerner jeg
den ?

3.) jeg har lavet en css-skygge-effekt på Header'en, men vil også
gerne have en på teksten "Horsens Produktionshøjskole", som er
placeret over den - hvordan gøres det ( m. css ) ?

alle forslag ( meget gerne med eksempler ) modtages med tak.





--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Hintzmann (30-10-2002)
Kommentar
Fra : Hintzmann


Dato : 30-10-02 10:18

> 1.) jeg kan ikke finde ud af om man kan styre teksten således at
> når man f.eks. laver en indrykning af en ny sætning, også kan få
> den efterfølgende tekst til at overholde dette indryk, sådan at
> teksten ikke ser "sjusket" ud. Det skal siges at problemet
> variere ved forskellige skærmstørrelser (opløsninger ?).

Benyt dig af lister:
http://www.w3.org/TR/REC-html40/struct/lists.html

ex.
<ul>
<li>Dygtiggøre dig fagligt, få en professionel vejledning og få styrket
dine sociale sider.</li>
<li>Indgå i et forpligtende samarbejde og fællesskab</li>
<li>Være en god kammerat</li>
</ul>


> 2.)der er en scrollbar på tværs af skærmen, hvordan fjerner jeg
> den ?

Det er din skygge effekt på headeren der er for bred. Sæt bredden på header
til f.eks. 90%

> 3.) jeg har lavet en css-skygge-effekt på Header'en, men vil også
> gerne have en på teksten "Horsens Produktionshøjskole", som er
> placeret over den - hvordan gøres det ( m. css ) ?

Sæt border/skygge-effelt på dit b element i div'en header.

NB. læg mærke til at b elementet er erstattet af strong elementet i strict
XHTML1.0.




Tommy Olesen (05-11-2002)
Kommentar
Fra : Tommy Olesen


Dato : 05-11-02 22:49

> Benyt dig af lister:
> http://www.w3.org/TR/REC-html40/struct/lists.html
>
> ex.
> <ul>
> <li>Dygtiggøre dig fagligt, få en professionel vejledning og få styrket
> dine sociale sider.</li>
> <li>Indgå i et forpligtende samarbejde og fællesskab</li>
> <li>Være en god kammerat</li>
> </ul>

ja, det var det helt rigtige...
>
>
> > 2.)der er en scrollbar på tværs af skærmen, hvordan fjerner jeg
> > den ?
>
> Det er din skygge effekt på headeren der er for bred. Sæt bredden på header
> til f.eks. 90%

hmm, den driller lidt, men jeg synes at jeg - ind til videre - har fundet den
acceptable løsning at leve med 95%, og en minimal scrollbar på tværs.

men så har jeg fået et nyt problem: jeg prøver at lave teksten "Horsens
Produktionshøjskole" ( der er placeret i header'en ) gennemsigtig
(transparent) og placerere den med z-index i forhold til baggrunds-gif'en, men
så bliver der rykket rundt på teksten i body'en og der kommer en scrollbar på
tværs af siden, og jeg kan ikke finde ud af at rette det. Måske skulle den
fjernes fra header'en og rykkes ud som et selvstændigt element i css'et... men
jeg kan ikke lige overskue det.

jeg har har igen smidt testsiden ud på nettet, denne gang både med en
"før-og-efter" z-index.

her er siden som den så ud før jeg rodede med z-index:

http://www.friserverplads.dk/tommy112/default.htm

og det tilhørende css:

body {
   margin:0px;
   padding:0px;
   font-family:verdana, arial, helvetica, sans-serif;
   color:#333;
   background-color:#DFFFBF;
}
h1 {
   margin:0px 0px 15px 0px;
   padding:0px;
   font-size:28px;
   line-height:28px;
   font-weight:900;
   color:#ccc;
   }
p {
   font:14px/20px verdana, arial, helvetica, sans-serif;
font-weight:800;
margin:10px 40px 10px 10px;
   padding:1px;
border: 1px 1px 1px 1px;
   }
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a.knap {color:black;
font-weight: 500;
text-decoration: none;
display: block;
width: 109px;
height: 21px;
background: transparent url(blank.gif);
text-align: center}

a.knap:hover {color:yellow;
font-weight: 500;
text-decoration: none;
display: block;
width: 109px;
height: 21px;
background: transparent url(blank2.gif);
text-align: center}

menu {position: absolute; left: 25px; bottom: 40px}

#Header {
width: 95%;
font: normal bold 20px Verdana;
letter-spacing: 4px;
text-decoration: none;
background: transparent url(hupslogo8.gif);
z-index: 1;
background-position: left;
margin:20px 0px 7px 0px;
   padding:17px 0px 13px 50px;
   /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and
bottom border widths] */
   height:33px; /* 14px + 17px + 2px = 33px */
   border-style:solid;
   border-color:black;
   border-width:1px 0px; /* top and bottom borders: 1px; left and right borders:
0px
*/line-height:11px;filter:progid:DXImageTransform.Microsoft.dropShadow(Color=0
00000,offX=3,offY=3,positive=true);
   
/* Here is the ugly brilliant hack that protects IE5/Win from its own
stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
   voice-family: "\"}\"";
   voice-family:inherit;
   height:14px; /* the correct height */
   }
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds
correct
length values to user agents that exhibit the parsing error exploited above
yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS
include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above).
*/
body>#Header {height:14px;}




#Content {
    margin:0px 5px 20px 140px;
    padding:10px;
    }

#horsens_produktionsskole { /* foto fra vågøvej */
float:right;
    width: 100px;
margin:20px 20px 16px 20px;
    padding:5px;
filter:
progid:DXImageTransform.Microsoft.dropShadow(
Color=000000,offX=4,offY=4,positive=true);
border: 1px 1px 1px 1px;
}

STRONG {
color: black;
background: #FFFF66;
font-weight: 900;
font-family: Courier New, Verdana, Arial;
padding:4px;
border: 5px dotted green;
z-index: 1;
}


UL {
font:14px/20px verdana, arial, helvetica, sans-serif;
font-weight:800;
margin:10px 0px 0px 40px;
padding:10px 10px 10px 15px;
border: 1px 1px 1px 1px;
}

... og her så siden med det problematiske z-index:

http://www.friserverplads.dk/tommy_olesen/default.htm

... og det tilhørende css:

body {
   margin:0px;
   padding:0px;
   font-family:verdana, arial, helvetica, sans-serif;
   color:#333;
   background-color:#DFFFBF;
}
h1 {
   margin:0px 0px 15px 0px;
   padding:0px;
   font-size:28px;
   line-height:28px;
   font-weight:900;
   color:#ccc;
   }
p {
   font:14px/20px verdana, arial, helvetica, sans-serif;
font-weight:800;
margin:10px 40px 10px 10px;
   padding:1px;
border: 1px 1px 1px 1px;
   }
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a.knap {color:black;
font-weight: 500;
text-decoration: none;
display: block;
width: 109px;
height: 21px;
background: transparent url(blank.gif);
text-align: center}

a.knap:hover {color:yellow;
font-weight: 500;
text-decoration: none;
display: block;
width: 109px;
height: 21px;
background: transparent url(blank2.gif);
text-align: center}

menu {position: absolute; left: 25px; bottom: 40px}

#Header {
width: 95%;
font: normal bold 20px Verdana;
letter-spacing: 4px;
text-decoration: none;
background: transparent url(hupslogo8.gif);
position:absolute;
z-index: 1;
background-position: left;
margin:20px 0px 7px 0px;
   padding:17px 0px 13px 50px;
   /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and
bottom border widths] */
   height:33px; /* 14px + 17px + 2px = 33px */
   border-style:solid;
   border-color:black;
   border-width:1px 0px; /* top and bottom borders: 1px; left and right borders:
0px
*/line-height:11px;filter:progid:DXImageTransform.Microsoft.dropShadow(Color=0
00000,offX=3,offY=3,positive=true);
   
/* Here is the ugly brilliant hack that protects IE5/Win from its own
stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
   voice-family: "\"}\"";
   voice-family:inherit;
   height:14px; /* the correct height */
   }
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds
correct
length values to user agents that exhibit the parsing error exploited above
yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS
include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above).
*/
body>#Header {height:14px;}




#Content {
    margin:0px 5px 20px 140px;
    padding:10px;
    }

#horsens_produktionsskole { /* foto fra vågøvej */
float:right;
    width: 100px;
margin:20px 20px 16px 20px;
    padding:5px;
filter:
progid:DXImageTransform.Microsoft.dropShadow(
Color=000000,offX=4,offY=4,positive=true);
border: 1px 1px 1px 1px;
}

STRONG {
color: darkgreen;
font-size: 25px;
font-weight: 900;
font-family: Courier New, Verdana, Arial;
padding:4px;
border: 5px dotted transparent;
position:absolute;
z-index: 2;
filter: progid:DXImageTransform.Microsoft.dropShadow(
Color=000000,offX=2,offY=2,positive=true);
}


UL {
font:14px/20px verdana, arial, helvetica, sans-serif;
font-weight:800;
margin:10px 0px 0px 40px;
padding:10px 10px 10px 15px;
border: 1px 1px 1px 1px;
}


Det blev noget af et langt indlæg - jeg håber det kan accepteres... og vil
gerne høre fra alle der mener at have en løsning ( igen - meget gerne med
eksempler )
på forhånd tak





--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408872
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste