Avatar billede trine_uldall Nybegynder
22. august 2009 - 14:17 Der er 7 kommentarer og
1 løsning

centrering med z-index

Hej, jeg ville være overglad, hvis nogle kunne hjælpe mig til at centrere www.media-now.dk -Der er en masse z-index-elementer og jeg har hørt at det skulle være muligt alligevel at få centreret indholdet? but how....
Hilsen Trine
Avatar billede Slettet bruger
23. august 2009 - 05:43 #1
Hej Trine

Jeg har så brugt en 1/2 time på at kikke din HTML kode igennem uden at finde et svar. Men et eller andet sted har du opgivet at den "ramme" /billed er bredere end som så, derfor bliver den centreret rigtigt i forhold til disse oplysninger, men oplysningerne er bare forkerte.

Kik i din HTML kode og find hvor du angiver at Rammen er bredere end den rent faktisk er og der vil du finde svaret.

Håber det giver dig et fingerpeg :-)
Avatar billede andreas13_fam Nybegynder
23. august 2009 - 11:32 #2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Hjemmeside</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Language" content="da">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div style="text-align:center;">
            <div style="width:400px;height:50px;margin:0 auto;border:1px solid #333; text-align:left;">
                Centeret div boks.
            </div>
        </div>
    </body>
</html>

PS: det er jo ikke god reklame at bruge invalid kode :)
Avatar billede andreas13_fam Nybegynder
23. august 2009 - 11:33 #3
Sorry fik kopiret den forkeret tekst:

Har også set på din side og tror du kan nå rigtig langt med:
a) Få en html 4.01 strict DOCTYPE på : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
b) Dernæst bør du gå i krig med at vaidlere din side på http://validator.w3.org/
c) Det er ikke nødvendigt med z-layer for at center prøv
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Hjemmeside</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Language" content="da">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div style="text-align:center;">
            <div style="width:400px;height:50px;margin:0 auto;border:1px solid #333; text-align:left;">
                Centeret div boks.
            </div>
        </div>
    </body>
</html>
Avatar billede trine_uldall Nybegynder
23. august 2009 - 23:53 #4
Tak for jeres forslag, jeg er ophængt pt og får nok først prøvet dem af i næste uge. Men jeg glæder mig!
Avatar billede trine_uldall Nybegynder
24. august 2009 - 19:25 #5
Hej Andreas, din box gør fuldstændig det, den skal, men alt min indhold sidder som klistret fast...Har prøvet at ændre absolute til relative, men nej...Forstår ikke det andet forslag med rammen ovenover, har du et andet bud? Jeg mangler vist en super let indgang til "hjemmesider med div og css", men kan ikke begynde at lave den om. (Lidt nedtur at sætte al koden ind her, men ved ikke, hvad jeg ellers skulle gøre.)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Hjemmeside</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Language" content="da">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    </head>

<body background="web-baggrund.gif">

  <div style="text-align:center;">
            <div style="width:900px; height:800px;margin:0 auto;border:1px solid #333; text-align:left;">
                Centeret div boks.
       
<div id="Layer2" style="position:absolute; left:164px; top:66px; width:807px; height:560px; z-index:1"><img src="70site.png" width="806" height="561"></div>

<div id="Layer5" style="position:absolute; left:192px; top:400px; width:751px; height:153px; z-index:13">
  <div align="center">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="142" height="142" hspace="100">
      <param name="movie" value="/logoer%20til%20media-now.dk.swf">
      <param name="quality" value="high">
      <embed src="/logoer%20til%20media-now.dk.swf" width="142" height="142" hspace="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>
  </div>
</div>

<div id="Layer1" style="position:absolute; left:539px; top:232px; width:50px; height:14px; z-index:14">
  <div align="center"><a href="forside.php"><font color="#666666" face="Verdana, Arial, Helvetica, sans-serif">>></font></a></div>
</div>

<div id="Layer10" style="position:absolute; left:192px; top:201px; width:710px; height:59px; z-index:10">
  <div align="center"> <a href="forside.php" target="_parent"><img src="logo-media-now.dk.gif" width="193" height="37" border="0"></a>
  <br>
    <br>
   
    <table width="99%">
      <tr>
        <td width="40%"><div align="right">
            <p>GRAFISK DESIGN
            <font color="#333333" face="Geneva, Arial, Helvetica, sans-serif"></font> </p>
          </div></td>
         
        <td width="35%"><div align="center">
            <p><font color="#333333" face="Geneva, Arial, Helvetica, sans-serif">WEBDESIGN
              </font></p>
          </div></td>
        <td width="25%"><div align="left">
            <p><font color="#333333" face="Geneva, Arial, Helvetica, sans-serif">REKLAME</font></p>
          </div></td>
         
      </tr>
    </table>
   
  </div>
</div>

<div id="Layer8" style="position:absolute; left:604px; top:615px; width:460px; height:9px; z-index:8">
  <p><font color="#000000" size="1">Siden vises bedst med explorer 7.0, firefox
    3 eller nyere</font></p>
</div>

<div id="Layer3" style="position:absolute; left:193px; top:631px; width:164px; height:79px; z-index:15"><a href="http://www.ingenco2.dk/crt/dispcust/c/191/l/2"><img src="/CO2_neutralt_website_260%5B1%5D.png" width="132" height="59" border="0"></a></div>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>


<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9028461-2");
pageTracker._trackPageview();
} catch(err) {}</script>

</div>
        </div>

</body>

</html>
Avatar billede andreas13_fam Nybegynder
04. juli 2010 - 13:24 #6
Af en og anden grund,har jeg desvære først fået en mail om at du har skrevet nu.
Det ser dog ud som om at du har ændret dit design markant, og i den forbindele har fået mere styr på position:relative; .

Hvis jeg må have lov til at give et godt råd: så bør du stadig tage et kik på http://validator.w3.org/check?uri=http://www.media-now.dk/
og få rettet de fejl der er.
Avatar billede trine_uldall Nybegynder
04. juli 2010 - 17:15 #7
Ja, jeg har dog stadig et problem her: www.trineuldallkunstogdesign.dk

Jeg ved ikke, om det er ukorrekt at anvende "minus"position, ligesom det ikke er korrekt at anvende "minus" margin. Det røde felt kan jeg kun løfte med en minus-positionering og jeg kan ikke forstå hvorfor. Kan du?

Tak for det gode råd. Det er virkelig et problem for mig at få tid til at validere. Er det sådan noget, du arbejder med?
Avatar billede andreas13_fam Nybegynder
04. juli 2010 - 18:56 #8
Hej trine
Der er intet i vejen med at bruge minus sådan at det fx stå -10px
Jeg forstår dog ikke helt spørgsmået, men prøv at se om du ikke kan få det til at virke med denne udgave:

<!DOCTYPE html>
<html lang="da">
    <head>
        <title>Susan Liebe - keramisk design</title>
        <meta charset="utf-8">
       
        <style type="text/css">
        body, html { /* stjernen er fjernet, da det bruger mange computer kræfter og dette ikke altid er det man ønsker*/
            margin: 0px;
            padding: 0px;
            border: none; /* tilføjet nogen browser har en grim sort eller hvid streg ellers */
            height: 100%; /* gør at du kan besteme højden på et element relativt, dvs. i procent */
        }
       
        #content {
            /* har fjernet position:relative;left:0px;top:0px; , da det ikke er nødvendigt*/
            width: 1100px; /* husk på at ikke alle skærme er så brede*/

            /* kan forkortes til margin: 5px auto 0 auto; */
            margin-top:5px;
            margin-right: auto;
            margin-left: auto;
           
            border:1px solid #666;
            text-align: center;
            /* z-index træder kun i kræft hvis postion er absolute eller fixed, ellers ignores den */
        }
       
        #house_in_cph{
            /* du ønsker at center elementet og skuppe den 10px ned. Derfor bør:
                position: relative;
                left: 100px;
                top: 10px;
              erstates med:
            */
            margin: 10px auto 0 auto;
            /* men det du gør er ikke forkeret */
           
            width:900px;
            height:150px;
           
            border:1px solid #666;
            /* en div er som standart 0px i margin og padding, så det er også fjernet. */
        }


        #inner_content{
            margin: 0 auto;
            /* her havde du sat både top og bottom til 0px, hvilket ikke er så godt */

            width:900px;
            height:300px;
           
            border:1px solid #666;

            background-color: #F30;
        }
       
            #home_pil{
                position: relative;
                left: -60px; /* her bruger jeg -60px hvilket der intet forkert er i */
                top: 20px;
       
                width:150px;
                height: 51px;
       
                border: 1px solid #999;
            }
           
            #workshop{
                position: relative;
                left: -60px;
                top: 60px;
       
                width:150px;
                height: 64px;
       
                border: 1px solid #999;
            }
        </style>
</head>

<body>
    <div id="content">
        #content
        <div id="house_in_cph">#house_in_cph</div>
        <div id="inner_content">
            <!-- #home_pil og #workshop er flyttet ind i inner_content, da de visuelt høre til der -->
            <div id="home_pil">
                <img src="http://www.trineuldallkunstogdesign.dk/images/pil.jpg">
            </div>
            <div id="workshop">
                <img src="http://www.trineuldallkunstogdesign.dk/images/workshop.jpg">
            </div>
            #inner_content
        </div>
    </div>
</body>
</html>


Dernæst så tror jeg ikke der er nogen der arbejder med at validere HTML kode. Støre fimaer som IBM, Oracle eller Microsoft har også fejl på deres sider, der ved vil jeg sige at der er ingen lov om at ens side skal validere.

Men når man validere sin side så sikre man sig mod at skulle bruge flere timer på at finde en dum fejl.

Jeg er desuden 17 år og arbejder derfor ikke med HTML eller ligende.  Jeg hygger mig bare med http://netkogeren.dk
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
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

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