Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 20:41 Der er 23 kommentarer og
1 løsning

Skrift flytter sig når siden åbnes..

Hej,
Jeg håber i kan hjælpe mig med mit problem, jeg er ved at blive sindssyg over det her...

Jeg har en hjemmeside som er bygget op med en baggrund der går hele vejen ned i midten af siden. Siden er på den måde centreret, og det virker også fint nok, problemet opstår når jeg indsætter tekst på siden. Jeg har indsat teksten i hver sin AP DIV for at jeg kunne flytte rundt på teksten sådan som jeg ville have den.

Det hele ser rigtigt ud i dreamweaver (som jeg har lavet hjemmesiden i) Men så snart jeg åbner den op i firefox, eller en ander browser rykker alt teksten et stykke til højre, og dermed væk fra baggrunden.. Og jeg kan ikke finde ud af hvorfor..??

Så vidt jeg ved skyldes det noget med størrelsen på skærmen, er der en måde så man kan "låse" teksten fast, så den sidder samme sted på alle skærme?

CSS delen til overskriften ser således ud, bare for at have et eksempel:

#apDiv2 {
    position: absolute;
    left:344px;
    top:115px;
    width:235px;
    height:99px;
    z-index:1;
    font-family: "Lucida Calligraphy";
    font-size: 36px;
    font-weight: bold;
    text-decoration: underline;
    overflow: visible;
    float: left;
}

Alle AP Div er bygget op på denne måde...

På forhånd tusind tak for alt den hjælp som jeg kan få, jeg ville ønske jeg kunne give mange flere points, men der er desværre en begrænsning...
Avatar billede pstidsen Novice
12. marts 2011 - 20:47 #1
Ret:
    left:344px;
    top:115px;
    width:235px;
    height:99px;

Til noget med %. F.eks.:

    left:40%;
    top:20%;
    width:30%;
    height:12%;
Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 21:05 #2
Hej.. Tak for det hurtige svar.

Jeg har prøvet at ændre det du sagde til % og fået den til at side der hvor jeg ville have den... (Hvilket ikke var så nemt igen) Men da jeg åbnede den op i firefox sad teksten stadig ikke på samme måde, så jeg rettede den til så den sad rigtigt i firefox, men nu sidder helt forkert i dreamweaver.

Jeg prøvede at åbne den op på en anden computer med anden skærm og der sad den heller ikke på samme måde, hverken som den så ud i dreamweaver eller som den så ud på den første computer i firefox..

Nogen ide om hvorfor den gør det her?
Avatar billede tjens Nybegynder
12. marts 2011 - 21:08 #3
Det kan være default margin eller padding.

Prøv at tilføje:

  margin: 0px;
  padding: 0px;

til din originale css.

Hvor meget rykker det sig?
Avatar billede pstidsen Novice
12. marts 2011 - 21:11 #4
et link til siden ville være dejligt
Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 21:16 #5
Den forbliver til venstre ude fra baggrunden og forandrede ikke noget.. Desværre :(

Ville det hjælpe hvis jeg lagde hele koden op til siden?
Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 21:18 #6
Siden er ikke online lige endnu.. Uploader den først når det problem her er løst.. Men i kan få kildekoden..



<!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>madammadsensblomster.dk</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    color: #333333;
    background-color: #FFF;
    background-image: url();
}
#wrapper {
    width: 100%;
    display: table;
    background-image: url(bg5.png);
    background-repeat: no-repeat;
    background-position: center top;
}
#content {
    width: 916px;
    margin: 30px auto 0;
    background: faebc0;
    padding: 0px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    margin: 0;
    padding: 0;
}
#wrapper #content p {
    font-family: "Lucida Calligraphy";
    text-align: center;
}
#wrapper #content p {
    text-align: justify;
}
#wrapper #content p {
    text-align: center;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
    position:absolute;
    left:181px;
    top:48px;
    width:958px;
    height:127px;
    z-index:1;
}
#wrapper #content p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    text-align: center;
}
#apDiv2 {

    position: absolute;
    left10%;
    top:40%;
    width:20%;
    height:12%;
    z-index:1;
    font-family: "Lucida Calligraphy";
    font-size: 36px;
    font-weight: bold;
    text-decoration: underline;
    overflow: visible;
    float: left;
    left: 141px;
}
#apDiv3 {
    position:absolute;
    left:770px;
    top:494px;
    width:241px;
    height:342px;
    z-index:2;
}
#apDiv4 {
    position:absolute;
    left:100px;
    top:503px;
    width:260px;
    height:333px;
    z-index:3;
}
#apDiv5 {
    position:absolute;
    left:418px;
    top:480px;
    width:365px;
    height:47px;
    z-index:2;
    font-family: "Lucida Calligraphy";
    text-decoration: underline;
    font-size: 24px;
    text-align: center;
}
#apDiv6 {
    position:absolute;
    left:419px;
    top:529px;
    width:361px;
    height:130px;
    z-index:3;
    text-align: center;
}
#apDiv7 {
    position:absolute;
    left:188px;
    top:714px;
    width:493px;
    height:35px;
    z-index:4;
    font-size: 24px;
    font-family: "Lucida Calligraphy";
    text-decoration: underline;
}
#apDiv8 {
    position:absolute;
    left:189px;
    top:751px;
    width:494px;
    height:65px;
    z-index:5;
}
#apDiv9 {
    position:absolute;
    left:190px;
    top:828px;
    width:219px;
    height:135px;
    z-index:6;
}
#apDiv10 {
    position:absolute;
    left:838px;
    top:817px;
    width:204px;
    height:153px;
    z-index:7;
}
#apDiv11 {
    position:absolute;
    left:190px;
    top:972px;
    width:567px;
    height:164px;
    z-index:8;
}
#apDiv12 {
    position:absolute;
    left:174px;
    top:1265px;
    width:288px;
    height:474px;
    z-index:9;
    text-align: center;
}
#apDiv13 {
    position:absolute;
    left:756px;
    top:1276px;
    width:300px;
    height:463px;
    z-index:10;
    text-align: center;
}
#apDiv14 {
    position:absolute;
    left:120px;
    top:1237px;
    width:928px;
    height:28px;
    z-index:11;
    text-align: center;
}
#apDiv15 {
    position:absolute;
    left:173px;
    top:1216px;
    width:288px;
    height:49px;
    z-index:11;
    text-align: center;
    font-family: "Lucida Calligraphy";
    font-size: 24px;
    text-decoration: underline;
}
#apDiv16 {
    position:absolute;
    left:755px;
    top:1215px;
    width:301px;
    height:56px;
    z-index:12;
    text-align: center;
    font-family: "Lucida Calligraphy";
    font-size: 24px;
    text-decoration: underline;
}
#apDiv17 {
    position:absolute;
    left:396px;
    top:1330px;
    width:336px;
    height:176px;
    z-index:13;
}
#apDiv18 {
    position:absolute;
    left:174px;
    top:1756px;
    width:86px;
    height:32px;
    z-index:14;
    font-family: "Lucida Calligraphy";
    text-decoration: underline;
    font-weight: bold;
    font-size: 24px;
}
#apDiv19 {
    position:absolute;
    left:175px;
    top:1784px;
    width:426px;
    height:324px;
    z-index:15;
}
#apDiv20 {
    position:absolute;
    left:174px;
    top:2228px;
    width:248px;
    height:37px;
    z-index:16;
    font-family: "Lucida Calligraphy";
    text-decoration: underline;
    font-weight: bold;
    font-size: 24px;
}
#apDiv21 {
    position:absolute;
    left:175px;
    top:2273px;
    width:684px;
    height:57px;
    z-index:17;
}
#apDiv22 {
    position:absolute;
    left:173px;
    top:2364px;
    width:462px;
    height:42px;
    z-index:18;
    font-family: "Lucida Calligraphy";
    font-size: 24px;
    text-decoration: underline;
}
#apDiv23 {
    position:absolute;
    left:172px;
    top:2415px;
    width:541px;
    height:70px;
    z-index:19;
}
</style>
</head>

<body>
<div id="apDiv2">Begravelse</div>
<div id="apDiv5">Begravelse eller bisættelse</div>
<div id="apDiv6">Afskeden med vore kære<br />
  er en af de anledninger <br />
hvor blomster naturligt hører ned</div>
<div id="apDiv7">En sidste hilsen skal være smuk</div>
<div id="apDiv8">I dag bruges alle slags blomster til pyntning af kisten.<br />
  Ved kistepyntning er det vigtigt, at blomstervalget<br />
harmonere med kistens form og jeres ønsker - vi rådgiver og vejleder gerne.</div>
<div id="apDiv9"><img src="Gallery/image003 (2).jpg" width="195" height="150" alt="blomst" /></div>
<div id="apDiv10"><img src="Gallery/Bårebuket - røde farver.JPG" width="122" height="104" alt="blomst" /></div>
<div id="apDiv11">
  <p>Jeg tager gerne ud i jeres haver og finder blomsterne der. <br />
    Dette kan være med til at gøre binderiet mere personligt.</p>
  <p>&nbsp;</p>
  <p>Til en bårebuket, båredekoration, krans med blomster eller blomsterkrans er der to bånd<br />
    Vælger du en krans, bårebuket eller båredekoration, <br />
    har du mulighed for at lade den tale sit eget personlige sprog via et bånd. <br />
    Brug båndet til et sidste farvel. <br />
  Det øverste bånd bringer din hilsen, mens det nederste bånd fortæller, hvem den er fra.</p>
</div>
<div id="apDiv12">
  <p>Et sidste farvel</p>
  <p>En sidste hilsen</p>
  <p>Det sidste farvel<br />
    <br />
    Tak for alt</p>
  <p>Tak for alt kære</p>
  <p>Farvel kære</p>
  <p>Et kærligt farvel<br />
    <br />
    Tak</p>
  <p>Hvil i fred</p>
  <p>Altid elsket aldrig glemt</p>
  <p>Vi ses igen</p>
</div>
<div id="apDiv13">
  <p>Fra Børnene</p>
  <p>Fra Børnebørnene</p>
  <p>Fra Børn, Svigebørn og Børnebørn</p>
  <p>Fra Børn, Svigebørn,</p>
  <p>Børnebørn og Oldebørn</p>
  <p>Fra Børn og Svigerbørn</p>
  <p>Fra Søskende</p>
  <p>Fra Familien</p>
  <p>Fra Venner</p>
  <p>Fra Naboer</p>
  <p>Fra Naboer og Venner</p>
  <p>Fra Kollegerne<br />
  </p>
</div>
<div id="apDiv15">Det øverste bånd</div>
<div id="apDiv16">Det nederste bånd</div>
<div id="apDiv17"><img src="Gallery/image001 (3).jpg" width="385" height="332" alt="blomst" /></div>
<div id="apDiv18">Kort</div>
<div id="apDiv19">
  <p>Det kan godt være svært at finde teksten til den sidste hilsen. <br />
    Her er nogle eksempler på hvad man evt. kan skrive.<br />
  </p>
  <p>Et kærligt farvel</p>
  <p>Et sidste farvel</p>
  <p>En sidste hilsen</p>
  <p>En sidste kærlig hilsen</p>
  <p>Vi ses igen</p>
  <p>Tak for alt</p>
  <p>Altid elsket aldrig glemt</p>
  <p>Dybeste medfølelse</p>
  <p>Med venlig deltagelse</p>
</div>
<div id="apDiv20">Kirkepyntning</div>
<div id="apDiv21">Såfremt man ønsker kirken pyntet kan man vælge at gøre det selv eller kirken kan foretage pyntningen.<br />
De nærmere omstændigheder aftales med kirkens kirketjener/graver.</div>
<div id="apDiv22">Kirkegården (efter begravelsen)</div>
<div id="apDiv23">Ønsker du at få en lille krans, dekoration eller en buket blomster lagt på gravstedet.<br />
  Fortæl hvilken kirkegård og ca. området hvor gravstedet ligger, hvad du ønsker udført <br />
og hvornår og vi sørger for at bringe det ud.</div>
<div id="wrapper">

<div id="content">
<div align="left">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.php"><img src="forside.png"style="border-style: none"/></a> </li>
    <li><a href="#" class="MenuBarItemSubmenu"><img src="Bestilling.png"style="border-style: none"/></a>
      <ul>
        <li><a href="buketter.php">Buketter</a></li>
        <li><a href="Begravelse.php">Begravelse</a></li>
        <li><a href="Fest.php">Festbinderi</a></li>
        <li><a href="#">Ordreblanket</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#"><img src="kurser.png"style="border-style: none"/></a>
      <ul>
        <li><a href="kurser.php">Aktuelle kurser</a> </li>
        <li><a href="pigeaften.php">Pigeaftner</a></li>
      </ul>
    </li>
    <li><a href="#"><img src="galleri.png"style="border-style: none"/></a></li>
    <li><a href="#" class="MenuBarItemSubmenu"> <img src="links.png"style="border-style: none"/></a>
      <ul>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Blomsterside</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu"><img src="nyheder.png"style="border-style: none"/></a>
      <ul>
        <li><a href="valentine.php">Valentine</a></li>
        <li><a href="paaske.php">P&aring;ske</a></li>
        <li><a href="morsdag.php">Mors Dag</a></li>
        <li><a href="jul.php">Jul</a></li>
      </ul>
    </li>
    <li><a href="contact.php"><img src="kontakt.png"style="border-style: none"/></a></li>
  </ul>
</div>
<h1>&nbsp;</h1>
      <div></div>
      <p><img src="logo2.png" width="512" height="358" /></p>
  <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    <p><?php
    if($_POST['sendmail'])
        mail("madam@madammadsensblomster.dk","Newsletter", "En bruger har forespurgt nyhedsbrevet, som skal sendes på denne mail:\n".$_POST['email']);
?>
</p>
<p>Tilmeld nyhedsbrev<br />
  Indtast din e-mail add:</p>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="email"></label>
    <input name="email" type="text" id="email" />
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="Tilmeld" />
  </p>
</form>
<p><a href="http://madammadsensblomsterblog.wordpress.com/"><img src="word.png" alt="wordpress" width="189" height="138" style="border-style: none" /></a><img src="add.png" width="240" height="147" hspace="100" /><a href="http://www.facebook.com/pages/Madam-Madsens-Blomster/114258861965143"><img src="Facebook.png" alt="facebook" width="129" height="143" hspace="30" style="border-style: none"/></a></p>
  <p>&nbsp;</p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Avatar billede olebole Juniormester
12. marts 2011 - 21:20 #7
<ole>

Hvis siden generelt er opbygget med absolut positionering, bør du skrive den om, så du basrer koden på det naturlige dokument flow. Absolut positionering bør kun undtagelsesvist bruges i helt specielle tilfælde

/mvh
</bole>
Avatar billede olebole Juniormester
12. marts 2011 - 21:21 #8
Okay, koden røg op, mens jeg skrev - men løsningen er som sagt: Skriv det om fra toppen og ned  =)
Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 21:23 #9
Ah okay... Hvad skal jeg rette position til?
Avatar billede olebole Juniormester
12. marts 2011 - 21:26 #10
- og husk, at når man koder web, har man siden loaded i 2-3 browsere. Hvergang man har skrevet nogle linjer (afhængig af, hvor erfaren man er) reloader man alle browserne for at se, hvordan resultatet blev.

Du må aldrig belave dig på, hvad DreamWeaver viser dig. WYSIWYG burde i virkeligheden hedde WYSIWYMG (What You See Is What You May Get)  ;o)
Avatar billede olebole Juniormester
12. marts 2011 - 21:27 #11
Du behøver slet ikke angive noget omkring position - og du skal heller ikke angive left- eller top-værdier
Avatar billede pstidsen Novice
12. marts 2011 - 21:31 #12
Så lige nogle dumme ting ved din side (de har sikkert ikke noget med dit problem at gøre):

Drop <p>&nbsp;</p> og brug <br> i stedet.

Sammel dine styles i deres egen fil som du kan kalde style.css og connect stylesheet med din html fil vha. af: <link rel="stylesheet" type="text/css" href="STIL_TIL_FIL.css">
Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 21:34 #13
Okay nu har jeg fjernet position helt og slettet top og left, men nu sidder alt teksten bare oppe i venstre hjørne, jeg kan ikke flytte den?

Jeg er som du nok kan se nybegynder i html/css, men jeg opdatere faktisk siden i firefox for at se hvordan det ser ud (da jeg har lært man ikke helt kan stole på live view), og havde det på et tidspunkt til at se rigtigt ud i begge, men da jeg åbnede det på en anden skærm så det igen forkert ud..
Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 21:46 #14
Ideen med at flytte hele css scriptet over i et css script er en god ide, helt klart noget jeg vil gøre når jeg har fået løst problemet, på den måde behøver jeg jo kun og ændre i et script i stedet for at ændre i dem alle...
Avatar billede olebole Juniormester
12. marts 2011 - 22:25 #15
Først skal du vide, at det at udvikle websider/-applikationer er et fuldt fag, som det tager ligeså lang tid at lære og mestre som de fleste andre fag.

At have anskaffet DreamWeaver er en rigtig god begyndelse, der svarer til at købe en værktøjskasse. Selvom du har købt en værktøjskasse i dag, kan du ikke bygge en Formel 1 racer de første par (mange) år. Hvis du aldrig har haft værktøj i hånden, kan du måske bygge en helt simpel sæbekassebil om nogle måneder.

Der findes masser af HTML og CSS tutorials på WWW, men skræmmende mange af dem er skrevet af folk, som selv har gigantiske videnshuller - og har misforstået bunker af det, de tror, de forstår. Det betyder, at det ofte er en ret uoverskuelig opgave at finde gode, troværdige tutorials. Mange af dem, man oftest ser anbefalet, er desværre også nogle af dem, der skodder mest!  :o|

Ét sted, du dog altid kan finde troværdige opltysninger om, hvordan god webkode skrives er på http://w3.org - men det kan ofte synes lidt 'tørt' for begynderen. Du kan dog ligeså godt begynde, da du ikke kommer udenom sitet, hvis du vil være bare en smule seriøs omkring din kodning  =)

En godt sted at begynde, synes jeg, er gennemgangen af CSS' visuelle formateringsmodel:
    http://www.w3.org/TR/CSS2/visuren.html

Der står noget nær, hvad du har brug for, når du vil layout'e dine sider
Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 22:44 #16
Jeg er godt klar over at dette ikke er noget jeg kan lære på en dag, men noget der tager lang tid at lære.. Når jeg siger jeg er nybegynder er det ikke fordi jeg startede i går, men det er lang tid siden jeg sidst har kodet i html/css..

Men tak for linksne jeg vil helt klart kikke dem igennem...

Men kan du svarer mig ærligt på en ting, kan jeg rette det her op, eller er jeg nød til at skrive det hele om igen?
Avatar billede olebole Juniormester
12. marts 2011 - 22:59 #17
For så lige at sikre de sidste misforståelser, så må du endelig ikke tage mine kommentarer ilde op. Desværre er der mange, der misforstår, hvad webkode er - og ikke er klar over, hvor komplekst, det er blevet - så jeg ville bare sikre mig, du var orienteret. Og efter disse gensidige høflige forklaringer, kan vi så kaste over os det egentlige problem  *D

Jeg er bange for, du gør dig selv en tjeneste ved at skrive det om i et tomt dokument. Jeg skriver lige et par simple eksempler til dig, der forklarer, hvordan du kan placere elementer - forhåbentligt som du vil  =)

Vent lige 10 min ...
Avatar billede olebole Juniormester
12. marts 2011 - 23:18 #18
Her er et par simple eksempler:


<p>Her er to div. Da de er block-elementer, vil de placere sig over hinanden:</p>

<div>En linje</div>
<div>- og en linje mere</div>

<hr>

<p>Her er to div. De vil lægge sig ved siden af hinanden, da de 'flyder mod venstre' - ovenpå andre elementer.<br>
    Hvis de skal optage plads i dokument flow'et, må vi efterfølgende indsætte et element med clear (derudover sikrer vi bare, det ikke fylder noget selv med left, right og overflow)</p>
   
<div style="float:left;width:300px;background:yellow">Et div</div>
<div style="float:left;width:300px;margin-left:50px;background:red">- og et ved siden af</div>
<div style="width:0;height:0;overflow:hidden;clear:both"></div>

<p>Bemærk, at jeg har sat bredde på divene. Ellers vil de fylde det hele i bredden og ikke lægge sig ved siden af hinanden.</p>

<hr>

<p>Horisontal centrering opnår du med en wrapper med margin:auto i siderne</p>

<div style="width:750px;margin:0 auto">
Heri lægger du hele dit sideindhold, som kommer til at fylde 750px i bredden og er centreret vandret i browseren.
</div>

Avatar billede olebole Juniormester
12. marts 2011 - 23:29 #19
Når man placerer elementer i forhold til hinanden, bruger man primært margin og/eller padding. Margin lægges uden om elementet - padding indenfor elementets kanter. Padding skal være 0 eller et positivt antal px. Margin derimod kan godt være negativ - omend det bør bruges sparsomt.

Et eksempel på brug af negativ margin er ved samtidig vertkal og horisontal centrering af et site - som dog kræver, at højden er sat:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>

<div style="position:relative;width:750px;height:500px;top:50%;margin:-250px auto 0 auto;background:#ededed">
Heri lægger du hele dit sideindhold, som kommer til at fylde 750px i bredden og 500px i højden. Boksen er centreret vandret og lodret i browseren.
</div>

</body>
</html>

Avatar billede hitmanfreak Nybegynder
12. marts 2011 - 23:34 #20
Fantastisk... Det ligner meget noget som jeg kan bruge.. Jeg vil prøve at se om ikke jeg kan flette det ind med det jeg allerede har.. Selvom jeg godt ved det ville være smartere at starte på ny...
Jeg vender tilbage senere om det lykkes ;)
Avatar billede hitmanfreak Nybegynder
13. marts 2011 - 11:47 #21
Det virker ikke helt..

Jeg har prøvet at skrive det ind på samme måde som dit eksempel ovenover... Men skriften sidder oppe i toppen af skærmen, jeg prøvede at flytte den ned ved at bruge margin: 20px; men så skubbede den jo alt omkring sig væk... Og stadigvæk da jeg åbnede den op i firefox, sad det ikke på samme måde igen...
Avatar billede hitmanfreak Nybegynder
13. marts 2011 - 16:45 #22
Så lykkes det at få løst problemet..

I skal have rigtig mange tak alle sammen for hjælpen, jeg sætter stor pris på den...

Især tak til dig olebole, hvis du lægger et svar skal jeg nok give points din vej :)
Avatar billede olebole Juniormester
13. marts 2011 - 17:34 #23
Jeg samler ikke længere points, men tak for tilbudet  ;o)
Avatar billede hitmanfreak Nybegynder
11. maj 2011 - 13:22 #24
Lukket
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