> 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