Søg
Avatar billede bonaparte Nybegynder
25. maj 2007 - 13:18 Der er 8 kommentarer og
1 løsning

elastisk webside - hvordan?

Hejsa:)

jeg er igang med at lave en website, hvor jeg er interesseret i at layoutet i sig selv er fikseret, men at det automatisk - alt efter skærmopløsning - placere sig i midten..

Jeg lavede selve rammen lavede jeg sådan:

#ydreboks {
    width:795px;
    height:782px;
    z-index:1;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:10px;
    z-index:1;
    background-color: #FFFFFF;
    padding: 0px;
    }

Hvilket fungerede perfekt, men da jeg så skulle have en lidt mindre ramme ovenpå, gik det galt, både placerings- og elastisitets mæssigt.. hvordan positioner jeg hvor rammen skal lige og hvordan får jeg de andre elementer til at "følge" ydreboksens fleksible midterplacering i forhold til skærmopløsning??

Ved ikke om det er forståeligt hvad jeg mener, ellers er der et eksempel på www.nudnu.dk

Jeg er stadig grøn bag ørene, så gerne i et lidt pædagogisk sprog;)
Avatar billede canedo Nybegynder
25. maj 2007 - 13:44 #1
Jeg skal lige forstå det rigtigt.

Den flash-ting du har sat ind på siden, er det den der skal ligge på midten af siden uanset browserens størrelse på skærmen?
Avatar billede bonaparte Nybegynder
25. maj 2007 - 13:49 #2
Den site jeg refererer til er ikke min side, men blot et eksempel på hvordan jeg gerne vil have det skal fungere:)
Avatar billede canedo Nybegynder
25. maj 2007 - 13:56 #3
Jeg kan ikke lige gennemskue det med div's, men jeg ville bruge tabeller til at gøre det i... det føler jeg bedre at jeg kan styre. Men måske en anden herinde kan med divs?
Avatar billede roenving Novice
26. maj 2007 - 23:26 #4
Sæt position:relative; ind i din ydreboks-definition, og så kan du placere andre elementer inde i den både relativt og absolut !-)
Avatar billede bonaparte Nybegynder
27. maj 2007 - 12:38 #5
Jeg har prøvet at lege med det, kan bare ikke få det hen..

Min #ydreboks opfører sig som den skal; den er elastisk og placerer sig centralt når jeg ændre størrelsen på mit browservindue.
Min #indreboks er ikke flesibel, den følger ikke min #ydreboks når jeg ændre størrelsen på browservinduet..

Hvordan skal min CSS atributter være til min #indreboks?

Her er nogle informationer om min #indreboks:

#indre_ramme {
    width:769px;
    height:757px;
    z-index:2;
    background-color: #FFFFFF;
    border: 1px solid #6B8116;
}
Avatar billede roenving Novice
28. maj 2007 - 09:21 #6
Prøv at se, om du kan dekode dette eksempel !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Centreret 'fleksibelt' design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;text-align:center;}
#site{width:860px;margin:0 auto;height:100%;position:relative;border:solid red;border-width:0 2px;}
#content{width:740px;background:#aaf;float:left;height:600px;}
#right_menu{width:120px;float:left;background:#ffa;height:600px;}
.clearDiv{clear:both;font-size:0;line-height:0;height:0;}
#flyder1{width:200px;height:100px;position:absolute;top:350px;left:250px;color:white;background:#f00;}
#flyder2{width:200px;height:100px;position:absolute;top:150px;left:650px;color:white;background:#0a3;}
</style>
</head>
<body>
  <div id="site">
    <div id="content">
      <h1>Her er indholdet</h1>
    </div>
    <div id="right_menu">
      <h5>Her er noget et eller andet</h5>
    </div>
    <div class="clearDiv">&nbsp;</div>
    <div>
      <h3>Her noget helt tredje</h3>
    </div>
    <div id="flyder1">
      Dette befinder sig helt udenom andet indhold
    </div>
    <div id="flyder2">
      Dette befinder sig helt udenom andet indhold - 2
    </div>
  </div>
</body>

</html>
Avatar billede bonaparte Nybegynder
29. maj 2007 - 15:49 #7
Super fedt, Så har jeg den - skulle lige få forståelsen for det:)

D.v.s. det havde jeg egentlig også(sådan da;), med en undtagelse: hvordan jeg skrev(placerede) div tagene i body'en.. lige som dit div id="site" som fungere som en slag container.

Du har meget pædagogisk IKKE serveret facitet, men givet mig hints, så jeg selv kunne finde frem til det - du får dine points ;-D
Avatar billede roenving Novice
29. maj 2007 - 15:55 #8
Velbekomme '-)
Avatar billede roenving Novice
29. maj 2007 - 16:04 #9
-- og tak for point ;~}
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
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bat file. Af johnnylassen i Andet programmering 4 23/04/202616:10 24/04/202609:43
Hjælp til Api.asmx Af lurup i Andet programmering 1 17/03/202609:27 17/03/202614:12
burgermenu til hjemmeside - hjælp! Af SabrinaL i Andet programmering 2 12/11/202514:10 02/12/202520:42
Hjælp til programmering af website Af hamdenlange i Andet programmering 16 17/08/202522:26 19/08/202515:53
Kan man registrere hvis folk lukker en side ned Af KurtG i Andet programmering 8 24/07/202513:06 28/07/202517:03
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 17:11 Har glemt navn på min ene konto på eksperten! Af ErikHg i Fri debat
I går 15:00 RIP af DVD med MakeMKV Af dcedata1977 i Servere
I går 10:08 slet windows Af jajoh i Windows
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
White papers
Flere white papers »