Avatar billede xorioz Nybegynder
14. juni 2006 - 17:16 Der er 10 kommentarer og
1 løsning

fleksipelt genbrugeligt textområde i css?

jeg er for nogle uger siden gået over til at lave mine hjemmesider i css og har da også lært lidt af hvert men jeg er nærmest kommet til et punkt hvor jeg ikke kan komme videre...

jeg er i gang med et design til en hjemmeside (http://xor.snark.dk/design) og vil nu gerne lave et textområåde der ser sådan ud http://xor.snark.dk/design/test.htm ...
der er tale om et textvindu der benytter sog af den samme kode som så kan genbruges på hele siden med en dynamisk højde og længde..

så jeg fx. kan lave flere forskelige vinduer med den samme grafik bare i forskelige størelser uden at skulle skrive den samme kode igen og igen med forskelige højder og text...
jeg har lavet en udskæring af den grafik der skal bruges her http://xor.snark.dk/design/test1.htm.

det stylesheet jeg har lavet til hjemmesiden http://xor.snark.dk/design ser sådan ud

/*CSS Dokument*/
html, body        {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

#container        {
  width: 100%;
  height: 100%;
  margin: 0px auto 0px auto;
  padding: 0;
  position: relative;
  top: 0px;
  left: 0px;
}

#top            {
background: url(bg/banner_r.jpg) repeat-x;
  width: 100%;
  height: 129px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  left: 0px;
}

#content    {
  background: #e7e7e7 url(bg/content_r.gif) repeat-x top;

  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 130px;
  bottom: 0px;
  left: 0px;
}
Avatar billede mclemens Nybegynder
14. juni 2006 - 23:31 #1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="content-language" content="da" /><link rel="stylesheet" type="text/css" href="style.css" /><title>Ikke navngivet</title>

<style type="text/css">

html,body{
margin:0px;
padding:0px;
background:#000;
}

.pa{position:absolute;}
.pr{position:relative;}

.t0{top:0px;}
.l0{left:0px;}
.r0{right:0px;}

.w1{width:100%;}
.w200{width:200px;}
.w400{width:400px;}
.w500{width:500px;}

.w200a{width:200px;position:absolute;top:300px;right:50px;}
.w400a{width:400px;position:absolute;top:50px;left:220px;}
.w500a{width:500px;float:left;margin:10px auto;}

.bgc{background:#fff;border:1px solid #7d7d7d;border-width:0px 1px;padding:0px 5px;}
.tl{background:url('http://xor.snark.dk/design/bg/left_top.gif');width:14px;height:27px;}
.tr{background:url('http://xor.snark.dk/design/bg/right_top.gif');width:8px;height:27px;}
.tm{background:url('http://xor.snark.dk/design/bg/center_top.gif');height:27px;margin:0px 5px;}
.bl{background:url('http://xor.snark.dk/design/bg/left_bottom.gif');width:14px;height:14px;}
.br{background:url('http://xor.snark.dk/design/bg/right_bottom.gif');width:8px;height:14px;}
.bm{background:url('http://xor.snark.dk/design/bg/center_bottom.gif');height:14px;margin:0px 5px;}

.th,.bh{font-size:0px;}

#cont{
width:760px;
margin:10px auto;
}
</style>

<script type="text/javascript">

</script>

</head><body><div id="cont">

<div class="w200 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br /></div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>



<div class="w200a">
<div class="w200 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>
</div>



<div class="w400a">
<div class="w400 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>
</div>


<div class="w500a">
<div class="w500 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>
</div>

</div></body></html>
Avatar billede mclemens Nybegynder
14. juni 2006 - 23:48 #2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="content-language" content="da" /><link rel="stylesheet" type="text/css" href="style.css" /><title>Ikke navngivet</title>

</head><body>

<div id="container">
<div id="top">
  <img src="bg/banner.jpg" />
</div>
<div id="content">

<div class="w200 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br /></div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>



<div class="w200a">
<div class="w200 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>
</div>



<div class="w400a">
<div class="w400 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>
</div>


<div class="w500a">
<div class="w500 pr"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>
</div>

<div class="clearer"></div>

</div></div></body></html>
Avatar billede mclemens Nybegynder
14. juni 2006 - 23:48 #3
html,body{
margin:0px;
padding:0px;
background:#e7e7e7;
}

#container{
width: 100%;
margin: 0px auto;
position: relative;
}

#top            {
background: url('bg/banner_r.jpg') repeat-x;
  width: 100%;
  height: 129px;
  position: absolute;
  top: 0px;
  left: 0px;
}

#content    {
  background: url('bg/content_r.gif') repeat-x top;
  width: 100%;
  position: absolute;
  top: 130px;
  bottom: 0px;
  left: 0px;
}



.pa{position:absolute;}
.pr{position:relative;}

.t0{top:0px;}
.l0{left:0px;}
.r0{right:0px;}

.w1{width:100%;}
.w200{width:200px;}
.w400{width:400px;}
.w500{width:500px;}

.w200a{width:200px;position:absolute;top:300px;right:50px;}
.w400a{width:400px;position:absolute;top:0px;left:220px;}
.w500a{width:500px;float:left;margin:10px auto;}

.bgc{background:#fff;border:1px solid #7d7d7d;border-width:0px 1px;padding:0px 5px;}
.tl{background:url('bg/left_top.gif');width:14px;height:27px;}
.tr{background:url('bg/right_top.gif');width:8px;height:27px;}
.tm{background:url('bg/center_top.gif');height:27px;margin:0px 5px;}
.bl{background:url('bg/left_bottom.gif');width:14px;height:14px;}
.br{background:url('bg/right_bottom.gif');width:8px;height:14px;}
.bm{background:url('bg/center_bottom.gif');height:14px;margin:0px 5px;}

.th,.bh{font-size:0px;}

.clearer{clear:both;font-size:0px;}
Avatar billede mclemens Nybegynder
15. juni 2006 - 01:06 #4
Ovenstående er nok de letteste at håndtere ...
dog er det et problem hvis man ikke kender indholdets størrelse ...
- Her er en udgave mere... Den er ENS med og uden xml deklarationen foran doctypen... <?xml version="1.0" encoding="iso-8859-1"?>

men! Det giver grå hår hvis du vælger xml deklarationen for når du tilføjer indhold skal du tage hensyn til alle browsere samt en IE i quirks - jeg gør det samme på min side ... d.v.s. jeg har ingen borders har (der er dog borders/kanter på dette design...) - men der er også en float margin fejl i IE der giver problemer selvom xml deklarationen ikke er der ;O)

Css.:

html,body{
margin:0px;
padding:0px;
background:#e7e7e7;
}

#container{
width: 100%;
margin: 0px auto;
position: relative;
}

#top            {
background: url('bg/banner_r.jpg') repeat-x;
  width: 100%;
  height: 129px;
  position: absolute;
  top: 0px;
  left: 0px;
}

#content    {
  background: url('bg/content_r.gif') repeat-x top;
  position:absolute;
  width:100%;
  top: 130px;
  left:0px;

}


#menu{
width:20%;
float:left;
padding-bottom:10px;
}

#inner{
width:78%;
position:absolute;
top:0px;left:21%;
padding-bottom:10px;
}

.pa{position:absolute;}
.pr{position:relative;}

.t0{top:0px;}
.l0{left:0px;}
.r0{right:0px;}

.w1{width:100%;}
#menu .wmarg{margin:10px 5px 0px 5px;}
#inner .wmarg{margin:10px 0px 0px 0px;}

.bgc{background:#fff;border:1px solid #7d7d7d;border-width:0px 1px;padding:0px 5px;}
.tl{background:url('bg/left_top.gif');width:14px;height:27px;}
.tr{background:url('bg/right_top.gif');width:8px;height:27px;}
.tm{background:url('bg/center_top.gif');height:27px;margin:0px 5px;}
.bl{background:url('bg/left_bottom.gif');width:14px;height:14px;}
.br{background:url('bg/right_bottom.gif');width:8px;height:14px;}
.bm{background:url('bg/center_bottom.gif');height:14px;margin:0px 5px;}

.th,.bh{font-size:0px;}

.clearer{clear:both;font-size:0px;}
Avatar billede mclemens Nybegynder
15. juni 2006 - 01:06 #5
html:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="content-language" content="da" /><link rel="stylesheet" type="text/css" href="style2.css" /><title>Ikke navngivet</title>

</head><body>

<div id="container">
<div id="top">
  <img src="bg/banner.jpg" />
</div>
<div id="content">



<div id="menu">

<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br /></div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>




<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br />INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>

</div>





<div id="inner">

<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>


<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>


</div>

<div class="clearer"></div>

</div></div></body></html>
Avatar billede mclemens Nybegynder
15. juni 2006 - 02:22 #6
Hov kiggede kun i 800x600 pixels ... der er 1 px i forskel ved 1024x768 ... problemet er måden IE afrunder % på... kommer lige med en fast størrelse istedet :)
Avatar billede mclemens Nybegynder
15. juni 2006 - 02:35 #7
Her er så et andet stylesheet med faste mål ... det er simpelthen en bug i IE ... og bug'en er der uanset om du har xml deklarationen eller ej - fejlen har ikke noget med xhtml at gøre... den er general ved % afrundingen... - så prøv ovenstående med denne css: eller brug første eller andet forslag... % er ikke optimalt med border og IE...






html,body{
margin:0px;
padding:0px;
background:#e7e7e7;
width:100%;
}



#top            {
background: url('bg/banner_r.jpg') repeat-x;
  width: 100%;
  height: 129px;
  position: absolute;
  top: 0px;
  left: 0px;
}

#content    {
  background: url('bg/content_r.gif') repeat-x top;
  position:absolute;
  width:100%;
  top: 130px;
  left:0px;

}

#centcont{
width:770px;
margin:0px auto;
position:relative;
}

#menu{
width:150px;
position:absolute;
top:0px;left:10px;
padding-bottom:10px;
}

#inner{
width:600px;
position:absolute;
top:0px;left:170px;
padding-bottom:10px;
}

.pa{position:absolute;}
.pr{position:relative;}

.t0{top:0px;}
.l0{left:0px;}
.r0{right:0px;}

.w1{width:100%;}

#menu .wmarg{margin:10px 0px 0px 0px;}
#inner .wmarg{margin:10px 0px 0px 0px;}

.bgc{background:#fff;padding:0px 1%;border:1px solid #7d7d7d;border-width:0px 1px;}
.tl{background:url('bg/left_top.gif');width:14px;height:27px;}
.tr{background:url('bg/right_top.gif');width:8px;height:27px;}
.tm{background:url('bg/center_top.gif');height:27px;margin:0px 5px;}
.bl{background:url('bg/left_bottom.gif');width:14px;height:14px;}
.br{background:url('bg/right_bottom.gif');width:8px;height:14px;}
.bm{background:url('bg/center_bottom.gif');height:14px;margin:0px 5px;}

.th,.bh{font-size:0px;}

.clearer{clear:both;font-size:0px;}








.........





<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="content-language" content="da" /><link rel="stylesheet" type="text/css" href="style2.css" /><title>Ikke navngivet</title>

</head><body>

<div id="top">
  <img src="bg/banner.jpg" />
</div>
<div id="content"><div id="centcont">



<div id="menu">

<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br />INDHOLDET HER!<br /></div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>




<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br />INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>

</div>





<div id="inner">

<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>


<div class="wmarg"><div class="th pr w1"><div class="tm"></div><div class="tl pa l0 t0"></div><div class="tr pa r0 t0"></div></div>

<div class="bgc">INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!<br>INDHOLDET HER!</div>

<div class="bh pr w1"><div class="bm"></div><div class="bl pa l0 t0"></div><div class="br pa r0 t0"></div></div></div>


</div>

<div class="clearer"></div>

</div></div></body></html>
Avatar billede mclemens Nybegynder
15. juni 2006 - 02:42 #8
Sidste eksempel her virker med uden xml deklarationen ... <?xml version="1.0" encoding="iso-8859-1"?> glemte at fjerne den... den eneste der ikke virker er:
http://www.eksperten.dk/spm/715431#rid6304758


Disse virker:
http://www.eksperten.dk/spm/715431#rid6304692
----------------------------------------------------------
http://www.eksperten.dk/spm/715431#rid6304707 sammen med:
http://www.eksperten.dk/spm/715431#rid6304708
----------------------------------------------------------
http://www.eksperten.dk/spm/715431#rid6304759 sammen med:
http://www.eksperten.dk/spm/715431#rid6304775
------------------------------------------------------
og den der står lige ovenover dette indlæg...

- den eneste der ikke virker er den css i http://www.eksperten.dk/spm/715431#rid6304758 - den virkede ikke i opløsninger over 800x600 pixels grundet en % afrundingsfejl i IE ... virker som om at den ikke kan vurdere om den skal runde 1 halv pixel eller op til en hel eller ned - så den skiftede lidt :/


... Håber du kunne bruge dem :)
Avatar billede mclemens Nybegynder
15. juni 2006 - 09:05 #9
Der er lige et par fejl før den validerede:
<br> <- Skal erstattes af <br />
<img src="bg/banner.jpg" alt="" /> <- Denne manglede en alt
... Den validerer så transitional men også strict og 1.1
Avatar billede xorioz Nybegynder
18. juni 2006 - 23:26 #10
det tog mig lidt tid at komme genem al den kode men jeg tror jeg har fattet det hele nu... så jeg takker og du kan få dine points
Avatar billede mclemens Nybegynder
18. juni 2006 - 23:56 #11
[ det tog mig lidt tid at komme genem al den kode ]
- Joh, det var nok lidt mange muligheder ...
men alt kan jo gøres på mange måder så ville
lige et par af mulighederne igennem...

[ men jeg tror jeg har fattet det hele nu...
så jeg takker og du kan få dine points ]
Super, det var så lidt.
- Og tak for point :o)
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