Udvikleren.dk - Seneste [position] forum tr�de

Placere billede et specifikt sted p� hjemmesiden

Thu, 04 Sep 2014 07:43:47 GMT

Hej alle.
S� har jeg et nyt problem

Jeg kunne godt t�nke mig at placere et billede et specifikt sted p� hjemmesiden, uden at det flytter sig hvis det er forskellige "sk�rmst�rrelser" osv.
Det er det gr�nne blad der er "problemet"

Jeg har pt. pr�vet med position:absolute og position:relative, men uden held.
Er det umuligt, eller er det bare mig der ikke kan finde ud af det?

S�dan her kunne jeg godt t�nke mig det s� ud:
�nske t�nkning

I kan se hjemmesiden her:
Webpage

H�ber I kan hj�lpe.

MVH,
Michael

Koloner med CSS - de sidste detalier

Tue, 23 Apr 2013 07:34:56 GMT

Hej gutter og gutinder

Hovedideen er jeg skal fylde to kolonner (div E og F) med data fra min database. De parvis skal st� overfor hinanden, selvom indholdet ikke fylder lige meget.

HTML kode

 <!DOCTYPE HTML>
 <HTML>
 <HEAD>
 <TITLE>Hjemmeside for og af Roar Pedersen</TITLE>
 <LINK rel=stylesheet type=text/css href="stylesheet/localStyle2.css">
 </HEAD>
 
 <BODY>
 
 <div class="A">
     <div class="B">
         <h1>B</h1>
     </div>
 
     <div class="C">
         <div class="img"><h1>C</h1></div>
     </div>
 </div>
 
 <div class='vBar'></div>
 
 <div class='D'>
     <div class='E'><span class='G'>E: ATP Koncernen</span><span class='H'>2001-01-01 : 2005-01-03</span></div>
     <div class='F'>F: Danmarks største pensions- og sikringsselskab løser opgaver for næsten alle borgere og virksomheder i Danmark. ATP rangerer blandt Europas største pensionsvirksomheder</div>
 </div>
 
 <div class='D'> 
     <div class='E'><span class='G'>E: IBM</span><span class='H'>2006-01-02 : 2009-12-31</span></div>
     <div class='F'>F: IBM Danmark ApS er landets førende virksomhed inden for informationsteknologiske produkter, løsninger og serviceydelser. De primære forretningsområder ligger inden for netværksløsninger, systemintegration, service- og konsulentvirksomhed.</div>
 </div>
 
 <div class='D'> 
     <div class='E'><span class='G'>E: Tryg</span><span     class='H'>2010-01-01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
     <div class='F'>F: Tryg er det næststørste skadeforsikringsselskab i Norden. Tryg er et kendt brand hvis historie strækker sig tilbage til 1731.</div>
 </div> 
 
 </BODY>

CSS kode

 body {
 background-color: #ffffff;
 font-family:"Times New Roman";
 font-size: 15px;
 }
 
 h1 {
 color: green;
 }
 
 span, div {
 border: solid black 1px;
 }
 
 div.vBar {
 clear: both; 
 width: 100%;
 border-top: solid blue 5px;
 }
 
 #vBar {
 border-top: solid blue 5px;
 }
 
 
 div.img {
 float: right;
 }
 
 
 div.D {
 padding: 10px 10px 0px 0px; /* top right bottom left */ 
 }
 
 div.A, div.D {
 margin: 0 auto;           
 clear: both; 
 width: 980px;
 border: solid red 1px;
 }
 
 div.B, div.E {
 float: left;
 width: 29%;
 }
 
 div.F {
 padding: 10px 0px 0px 10px; /* top right bottom left */
 }
 
 div.C, div.F {
 float: right;
 width: 69%;
 border-left: solid blue 1px;
 }
 
 span.G {
 float: left;
 width: 40%;
 }
 
 span.H {
 float: right;
 width: 58%;
 }

Og det virker! Der er bare et par detalier, der ikke fungerer - og jeg ved ikke hvorfor? Jeg har sat et par rammer omkring de enkelte div klasser for at illustrere problemstillingen.

Hvorfor er der h�jde p� div.D, n�r div.A ikke fylder noget (og det er d�t, jeg �nsker)?

Hvorfor er div.C smallere end div.F? Burde de ikke have samme brede?

Hvorfor er div.2 ikke inde i div.1, n�r <div 1><div 2></div></div>. Div.2 opf�rer sig basalt set som om den var.

Der er et eller andet i min basale forst�else af div, som ikke er helt p� plads endnu, men jeg h�ber I kan hj�lpe mig :-)

Placere div uden for "ramme"

Mon, 16 Apr 2012 21:07:08 GMT

Hej k�re udviklere.

Jeg har brug for lidt kyndig IT viden. Har selv sat og bakset med det i mange timer nu, og jeg synes egentlig det driller mig nok til jeg selv kan se hvad der g�r galt.

P� siden http://mbstech.dk/test kan i se en side med en ramme. Jeg vil meget gerne ha en div p� siden af den ramme. I begge sider.

Som det er nu er der en div i h�jre side, og det er fint nok. Men hvis jeg pr�ver at placere en div i venstre side, s� ser det ogs� fint nok ud n�r jeg har maksimeret vinduet, men s� snart jeg laver det mindre bliver det noget lort, og div g�r ind over rammen.

Har pr�vet med forskellig "position:" faktisk alle sammen, men det synes ikke rigtig at virke. I nedenst�ende kodeboks er der henholdsvis html og css.

HTML kode

 <!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">
 
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <title>Div uden om rammen</title>
 
 <link type="text/css" href="ny.css" rel="stylesheet" media="screen" />
 
 <script src="js/jqFancyTransitions.1.8.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="scriptet/jquery.min.js"></script>
 
 <script type="text/javascript" src="scriptet/jquery.cycle.all.js"></script>
 <script type="text/javascript">
 
 $(document).ready(function() {
 
     $('.slideshow').cycle({
 
         fx: 'scrollUp' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
 
     });
 
 });
 
 </script>
 
 </head>
 
 <body>
 
 <div id="streg">
 
 <div id="banner" >
 
 Banner her...</div>
 
 <div id="kassen">
 
 <div id="container">
 
 <div id="right">
 
 <div class="post-it5">
 
 <h2>Overskrift her</h2>
 
 <p>Tekst</p>
 
 </div>
 
 <div class="post-it1">
 
 <div class="menupunkt">
 
 <img class="menuimage" src="dsj/menupunkt.png" alt="dfgd" />
 
 <h1><span class='over'><strong>Se mere her...</strong><br /><br /></span>
 
 <a class="menul" href="link1"> Link 1</a><br />
 
 <a class="menul" href="link2"> Link 2</a><br />
 
 <a class="menul" href="link3"> Link 3</a><br />
 
 <a class="menul" href="link4"> Link 4</a><br />
 
 <a class="menul" href="link5"> Link 5</a><br />
 
 <a class="menul" href="link6"> Link 6</a>
 
 </h1>
 
 </div>
 
 </div>
 
 <div class="post-it2">
 
 kjdfgnkjn
 
 </div>
 
 <div class="post-it3">
 
 
 
 <h2>Bla...</h2>
 
 <p class="footalign">
 
 Bla Bla Bla Bla igen....
 </p>
 
 
 
 </div>
 
 <div class="post-it4">
 
 
 
 <p class="indholdgultape">Bla Bla Bla
 
 <br /> <br />Bla Bla <b>Bla</b>.<br /> Den her div er uden for ramme. Det samme vil jeg gerne ha i den anden side. Nogenlunde sammested.</p>
 
 </div></div>
 
 
 
 <div id="content">
 
 <h5>......</h5>
 
 <p class="indholdpapir">
 
 osgoiaenrgoienrgåoineråogibenoåbutenåobnetoåb
 
 </p>
 
 
 
 </div>
 
 
 
 <div class="post-it6">
 
 
 
 <h2>euoeourgoueg</h2>
 
 
 
 
 
 
 <div class="post-it7">
 
 <h2>oijnhoitehnjorti</h2>
 
 <p>
 itejghoijthoi
 
 </p>
 
 
 
 </div>
 
 </div>
 
 </div>
 
 </div>
 
 <div class="bil1"><img class="tape" alt="Tape" src="tape.png" /><img class="billed1" alt="Facebook" src="img/vindcamp.png" /></div>
 
 <div class="bil2"><img class="tape" alt="Tape" src="tape.png" /><img class="billed2" alt="Google Places" src="img/elcom.png" /></div>
 
 <div class="bil3"><img class="tape" alt="Tape" src="tape.png" /><img class="billed3" alt="Twitter" src="img/twitter.png" /></div>
 
 </div>
 
 
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
 
 
 </body>
 
 </html>

CSS kode

 body     {background: url(77566.gif) ;   
 
       background-color: transparent; 
 
           font-size: 14px; 
 
       font-family: 'Gloria Hallelujah', cursive;
 
           color:#000; 
 
           padding:0px;
 
           margin:0;}
 
 
 
 
 
 h2     {font-size:22px;
 
           padding-top:0px;
 
       background-color: transparent;
 
       padding-left:2px;
 
           margin:-3px;
 
       margin-bottom:3px;
 
       font-family: 'Gloria Hallelujah', cursive;}
 
 
 
 
 
 h3     {font-size:19px;
 
           padding-top:0px; 
 
       padding-left:6px;
 
           margin:-3px;
 
       font-family: 'Gloria Hallelujah', cursive;}
 
 
 
 
 
 h4     {font-size:19px;
 
           padding-top:0px;
 
       padding-left:20px;
 
           margin:-3px;
 
       font-family: 'Gloria Hallelujah', cursive;}
 
 
 
 
 
 h5     {font-size:25px;
 
           padding-top:65px;
 
           letter-spacing:-1px;
 
       padding-left:70px;
 
       font-family: 'Gloria Hallelujah', cursive;}
 
 
 
 h6     {margin: 0px;
 
       margin-top: 50px; 
 
           margin-left: 32px;
 
         font-size: 18px; 
 
       font-family: 'Gloria Hallelujah', cursive;}
 
 
 
 
 
 
 
             a:link    {text-decoration: none; color: #000;}
 
             a:visited {text-decoration: none; color: #000;}
 
             a:active  {text-decoration: underline; color: #000;}
 
             a:hover   {text-decoration: underline; color: #000;}
 
 
 
     a.menul:link    {line-height: 1.8; position:relative; top: -15px; margin-left:60px; font-size: 17px; text-decoration: none; color: #000;}
 
     a.menul:visited {line-height: 1.8; position:relative; top: -15px; margin-left:60px; font-size: 17px; text-decoration: none; color: #000;}
 
     a.menul:active  {line-height: 1.8; position:relative; top: -15px; margin-left:60px; font-size: 17px; text-decoration: underline; color: #000;}
 
     a.menul:hover   {line-height: 1.8; position:relative; top: -15px; margin-left:60px; font-size: 17px; text-decoration: underline; color: #000;}
 
 
 
 
 
             a.phonelink:link {color: #000; text-decoration: none; }
 
             a.phonelink:visited {color: #000; text-decoration: none; }
 
             a.phonelink:hover {color: #000; text-decoration: underline; }
 
             a.phonelink:active {color: #000; text-decoration: underline; }
 
 
 
 
 
 
 
 #container {
 
 width: 1000px;
 
 background-color: transparent; 
 
 margin-bottom: 20px;
 
 margin: 0 auto;
 
 }
 
 
 
 
 
 #streg {
 
 width: 1000px;
 
 margin-top: -57px;
 
 margin: 0 auto;
 
 background-color: transparent; 
 
 }
 
 
 
 
 
 #kassen {
 
 background-color: transparent; 
 
 width: 1000px;
 
 margin-top: -57px;
 
 height: 850px;
 
 background: url(bg.jpg) no-repeat center center;
 
 background-size: 100% 100%;
 
 -moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
 
 -o-background-size: 100%; /* Opera 9.5 */
 
 -webkit-background-size: 100%; /* Safari 3.0 */
 
 -khtml-background-size: 100%; /* Konqueror 3.5.4 */
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 }
 
 
 
 
 
 
 
 
 
 
 
 #banner {
 
 background-color: transparent; 
 
 text-align: center;
 
 padding: 0px;
 
 margin-top: 0px;}
 
 
 
 
 
 
 
 #content {
 
 padding: 0px;
 
 background-color: transparent; 
 
 margin: 0 0px;
 
 left:0;
 
 width:492px;
 
 background: url(dsj/papir.png) no-repeat left;
 
 background-position: 0px 0px;}
 
 
 
 div#content { 
 
 min-height:600px;
 
 height:expression(this.scrollHeight > 600 ? "auto":"600px");}
 
 
 
 
 
 
 
 
 
 #right {
 
 float: right;
 
 background-color:transparent;
 
 width: 300px;
 
 margin: 0;
 
 padding: 0;
 
 margin-top: 0px;
 
 
 
 }
 
 
 
 a.alignbundleft  {margin-left:5px;}
 
 textarea {resize:none;}
 
 #fb-root  {float:right; margin-top:-40px;}
 
 
 
 p.italic     {font-style:italic;}
 
 p.italic2     {margin-top: -15px;margin-left:15px;padding: 0px 0px; font-style:italic;}
 
 p.right     {text-align:right;}
 
 p,pre,form     {margin: 3px; margin-top: 3px;margin-left:0px;padding: 0px 0px; }
 
 
 
 
 
 .indholdpapir    {width: 340px; font-size: 17.5px; line-height:176%; padding: 15px 70px; position:relative; top:-24px;}
 
 .indholdgultape  {padding: 0px 30px; margin: 0px; }
 
 .indholdmidtsmallright {float:right; padding: 5px 2px;font-size: 12px; margin: 0px; margin-left:10px;}
 
 .foottext        {position: relative; text-align:left; top: 50px;font-size: 10px;}
 
 .footalign       {margin-top:0px; margin-left:0px;  text-align: left;}
 
 .findos          {border-left: 1px solid #A6A6A6; height: 93px; position: relative; right: 0px; bottom:-10px; float:right;}
 
 .copyright       {margin-top: -18px; color: #000; text-align:center;}
 
 .alignright      {margin-top: 0; text-align: right;}
 
 .alignbundright  {margin-top: 0; text-align: right;}
 
 
 
 
 
     img.foot       {left:5px;bottom:105px;}
 
     img.facebook   {position:absolute;right:210px;width:35px;height:35px;bottom:20px;}
 
     img.twitter    {position:absolute;right:175px;width:35px;height:35px;bottom:20px;}
 
     img.linkedin   {position:absolute;right:140px;width:35px;height:35px;bottom:20px;}
 
     img.googleplus {position:absolute;right:105px;width:35px;height:35px;bottom:20px;}
 
     img.wikipedia  {position:absolute;right:75px;width:36px;height:36px;bottom:20px;}
 
     img.youtube    {position:absolute;right:40px;width:34px;height:32px;bottom:22px;}
 
     img.facade     {width:200px; padding:5px;}
 
     img.menuimage  {margin-top:-35px; height:330px;}
 
     img.billed1    {margin-top:-15px;
 
                  border: 0px solid #ddd;
 
                              border-radius: 5px;
 
                            -moz-border-radius: 5px;
 
                           -khtml-border-radius: 5px;
 
                          -webkit-border-radius: 5px;}
 
     img.billed2    {margin-top:-15px;
 
                  border: 0px solid #ddd;
 
                              border-radius: 5px;
 
                            -moz-border-radius: 5px;
 
                           -khtml-border-radius: 5px;
 
                          -webkit-border-radius: 5px;}
 
 
 
     img.billed3    {margin-top:-15px;
 
                  border: 0px solid #ddd;
 
                              border-radius: 5px;
 
                            -moz-border-radius: 5px;
 
                           -khtml-border-radius: 5px;
 
                          -webkit-border-radius: 5px;}
 
 
 
 img.tape {
 
 position:relative;
 
 width:10%;
 
 height:10%;
 
 margin-left: 165px;
 
 background: url(tape.png) no-repeat;}
 
 
 
 
 
 
 
 .bil1 {
 
 width: 325px;
 
 margin-top:-22px;
 
 float:left;
 
 background-color: transparent; }
 
 
 
 .bil2 {
 
 width: 325px;
 
 margin-top:-22px;
 
 float:left;
 
 background-color: transparent; }
 
 
 
 .bil3 {
 
 width: 325px;
 
 margin-top:-22px;
 
 float:left;
 
 background-color: transparent; }
 
 
 
 .slideshow { height: 55px; width: 230px; margin-left:0px; }
 
 
 
 
 
 .menupunkt {position: relative; width: 100%; /* for IE 6 */}
 
 
 
 h1 {
 
    position: absolute;
 
    top: -10px;
 
    left: 0;
 
    font-size: 30px; 
 
    width: 100%;
 
 }
 
 
 
 h1 span.over {
 
    color: black;
 
    font-size: 30px; 
 
    letter-spacing:-1px;
 
    line-height: 0.9;
 
    background: rgb(0, 0, 0); /* fallback color */
 
    background: rgba(0, 0, 0, 0.0);
 
    margin-left: 49px;
 
    padding: 10px;
 
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .post-it1 {
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 -moz-transform: rotate(0deg);
 
 -webkit-transform: rotate(0deg);
 
 -o-transform: rotate(0deg);
 
 -ms-transform: rotate(0deg);
 
 transform: rotate(0deg);
 
 box-shadow: 0px 0px 0px transparent;
 
 -moz-box-shadow: 0px 0px 0px transparent;
 
 -webkit-box-shadow: 0px 0px 0px transparent;
 
 padding:10px; 
 
 margin-top:-220px;
 
 width:390px;
 
 height:300px;
 
 position:relative;
 
 left: 0px;
 
 
 
 }
 
 
 
 .post-it2 {
 
 background: url(dsj/gul2.png) no-repeat center;
 
 background-position: -30px 0px;
 
 background-size: 100% 100%;
 
 -moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
 
 -o-background-size: 100%; /* Opera 9.5 */
 
 -webkit-background-size: 100%; /* Safari 3.0 */
 
 -khtml-background-size: 100%; /* Konqueror 3.5.4 */
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 -moz-transform: rotate(-3deg);
 
 -webkit-transform: rotate(-3deg);
 
 -o-transform: rotate(-3deg);
 
 -ms-transform: rotate(-3deg);
 
 transform: rotate(-3deg);
 
 
 
 
 
 box-shadow: 0px 0px 0px transparent;
 
 -moz-box-shadow: 0px 0px 0px transparent;
 
 -webkit-box-shadow: 0px 0px 0px transparent;
 
 padding:10px; 
 
 position:relative;
 
 width:270px;
 
 height:285px;
 
 left: 0px;
 
 margin-top:-10px;
 
 
 
 }
 
 
 
 .post-it3 {
 
 background: url(dsj/red.png) no-repeat center;
 
 background-position: -32px 0px;
 
 background-size: 100% 100%;
 
 -moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
 
 -o-background-size: 100%; /* Opera 9.5 */
 
 -webkit-background-size: 100%; /* Safari 3.0 */
 
 -khtml-background-size: 100%; /* Konqueror 3.5.4 */
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 -moz-transform: rotate(-3deg);
 
 -webkit-transform: rotate(-3deg);
 
 -o-transform: rotate(-3deg);
 
 -ms-transform: rotate(-3deg);
 
 transform: rotate(-3deg);
 
 
 
 
 
 box-shadow: 0px 0px 0px transparent;
 
 -moz-box-shadow: 0px 0px 0px transparent;
 
 -webkit-box-shadow: 0px 0px 0px transparent;
 
 padding:10px; 
 
 position:relative;
 
 width:310px;
 
 height: 270px;
 
 left: 12px;
 
 margin-top:15px;
 
 }
 
 
 
 
 
 .post-it4 {
 
 background: url(dsj/gul2.png) no-repeat center;
 
 background-size: 100% 100%;
 
 -moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
 
 -o-background-size: 100%; /* Opera 9.5 */
 
 -webkit-background-size: 100%; /* Safari 3.0 */
 
 -khtml-background-size: 100%; /* Konqueror 3.5.4 */
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 -moz-transform: rotate(-3deg);
 
 -webkit-transform: rotate(-3deg);
 
 -o-transform: rotate(-3deg);
 
 -ms-transform: rotate(-3deg);
 
 transform: rotate(-3deg);
 
 
 
 
 
 box-shadow: 0px 0px 0px transparent;
 
 -moz-box-shadow: 0px 0px 0px transparent;
 
 -webkit-box-shadow: 0px 0px 0px transparent;
 
 padding:10px; 
 
 width:300px;
 
 height:270px;
 
 position:relative;
 
 left: 225px;
 
 margin-top:-590px;
 
 }
 
 
 
 
 
 
 
 .post-it5 {
 
 background: url(dsj/orange.png) no-repeat center;
 
 background-position: -30px 0px;
 
 background-size: 100% 100%;
 
 -moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
 
 -o-background-size: 100%; /* Opera 9.5 */
 
 -webkit-background-size: 100%; /* Safari 3.0 */
 
 -khtml-background-size: 100%; /* Konqueror 3.5.4 */
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 -moz-transform: rotate(1deg);
 
 -webkit-transform: rotate(1deg);
 
 -o-transform: rotate(1deg);
 
 -ms-transform: rotate(1deg);
 
 transform: rotate(1deg);
 
 
 
 
 
 box-shadow: 0px 0px 0px transparent;
 
 -moz-box-shadow: 0px 0px 0px transparent;
 
 -webkit-box-shadow: 0px 0px 0px transparent;
 
 padding:10px; 
 
 width:270px;
 
 height:200px;
 
 position:relative;
 
 right:280px;
 
 margin-top:10px;
 
 }
 
 
 
 
 
 .post-it6 {
 
 background: url(dsj/light-blue.png) no-repeat center;
 
 background-position: -30px 0px;
 
 background-size: 100% 100%;
 
 -moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
 
 -o-background-size: 100%; /* Opera 9.5 */
 
 -webkit-background-size: 100%; /* Safari 3.0 */
 
 -khtml-background-size: 100%; /* Konqueror 3.5.4 */
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 -moz-transform: rotate(2deg);
 
 -webkit-transform: rotate(2deg);
 
 -o-transform: rotate(2deg);
 
 -ms-transform: rotate(2deg);
 
 transform: rotate(2deg);
 
 
 
 
 
 box-shadow: 0px 0px 0px transparent;
 
 -moz-box-shadow: 0px 0px 0px transparent;
 
 -webkit-box-shadow: 0px 0px 0px transparent;
 
 padding:10px; 
 
 width:270px;
 
 height:190px;
 
 position:relative;
 
 left:29px;
 
 margin-top:20px;
 
 }
 
 
 
 
 
 .post-it7 {
 
 background: url(dsj/green.png) no-repeat center;
 
 background-position: -30px 0px;
 
 background-size: 100% 100%;
 
 -moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
 
 -o-background-size: 100%; /* Opera 9.5 */
 
 -webkit-background-size: 100%; /* Safari 3.0 */
 
 -khtml-background-size: 100%; /* Konqueror 3.5.4 */
 
 -moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
 
 -moz-transform: rotate(2deg);
 
 -webkit-transform: rotate(2deg);
 
 -o-transform: rotate(2deg);
 
 -ms-transform: rotate(2deg);
 
 transform: rotate(2deg);
 
 
 
 
 
 box-shadow: 0px 0px 0px transparent;
 
 -moz-box-shadow: 0px 0px 0px transparent;
 
 -webkit-box-shadow: 0px 0px 0px transparent;
 
 padding:10px; 
 
 width:270px;
 
 height:250px;
 
 position:relative;
 
 left:400px;
 
 margin-top:-390px;
 
 }

Vil blive super glad hvis der var en der ku� hj�lpe.

P� forh�nd mange tak.

/Peace

CSS - tekst position

Mon, 24 Oct 2011 18:54:54 GMT

Hej.
Jeg st�r her og er helt ny indenfor CSS & HTML.
Jeg har sat min side op med hj�lp af CSS.
Dog kan jeg ikke f� teksten i menuen til at st� i midten af baren (vertikalt), hvordan f�r jeg den til det?

I kan se siden her: jakobnissen.dk/www

HTML kode:

HTML kode

 <!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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Jakob Nissen</title>
 <link rel="stylesheet" href="stylesheet.css" type="text/css" />
 </head>
 
 <body bgcolor="#ebebeb" >
 <center>
 <table width="944" height="520">
 <tr>
   <td width="729" height="91" id="topbar">&nbsp;</td>
   <td width="203" height="49" id="social2">&nbsp;</td>
 </tr>
 <tr>
   <td height="54" colspan="2" id="menu"> <ul id="ulnav">    
 <li id="linav"><a href="#" class="nav">Forside</a></li>
 <li id="linav"><a href="#" class="nav">Om mig</a></li>
 <li id="linav"><a href="#" class="nav">Blog</a></li>
 <li id="linav"><a href="#" class="nav">Kontakt</a></li>
 </ul></td>
 </tr>
 <tr>
   <td height="350" colspan="2" id="content">Velkommen til min forside. :-)
 </td>
 </tr>
 <tr>
 <td height="25" colspan="2" id="copyright">Copyright © Jakob Nissen </td>
 </tr>
 </table>
 </center>
 </body>
 </html>

CSS kode:

CSS kode

 @charset "UTF-8";
 /* CSS Document */
 #topbar {
     background-image:url(logo.gif);
     background-repeat:no-repeat;
     width:769px;
     height:91px;
 }
 
 #menu {
     background-image:url(topbar.gif);
     background-repeat:no-repeat;
     font-family:Tahoma;
     font-size:18px;
     color:#ebebeb;
     font-weight:bold;
     width:940px;
     height:58px;
 }
 
 #social2 {
     background-image:url(social.gif);
     background-repeat:no-repeat;
     background-position:center;
 }
 
 #content {
     background-color:#FFF;
     border-style:solid;
     border-width:thin;
     border-color:#999;
     font-family:Tahoma;
 }
 
 #copyright {
     background-image:url(copyright.gif);
     background-repeat:no-repeat;
     color:#FFF;
     text-align:center;
     font-size:12px;
     font-family:Tahoma;
     width:940px;
     height:25px;
 }
 
 #ulnav {
     list-style-type:none;
 }
 
 #linav {
     float:left;
 }
 
 a.nav:LINK, a.nav:visited {
     display:block;
     width:150px;
     color:#FFF;
     text-align:center;
     text-decoration:none;
 }
 
 a.nav:hover {
     color:#000;
     background-color:#ebebeb;
 }

Java Swing

Wed, 20 Apr 2011 21:15:20 GMT

Hej alle udviklere!

Jeg har et problem som jeg simpelthen ikke kan l�se.

Jeg er ved at lave et program med Java Swing.
Jeg har lavet en hovedoverskrift med JLabel. Nu pr�ver jeg p� at lave en under-overskrift, som, som navnet antyder, skal v�re under overskriften. Problemet er at jeg ikke kan finde en l�sning til hvordan jeg putter underoverskrifts-label'en under den f�rste. Jeg har pr�vet setVerticalAlignment, setVerticalTextPosition og en milliard andre ting.

Jeg bruger JFrame med layoutet FlowLayout.

Er der nogen der har en l�sning?