Søg
Avatar billede stenger Nybegynder
27. juni 2005 - 18:38 Der er 18 kommentarer og
1 løsning

Centrering af tekst i et layer, inden i et andet layer

Hej alle sammen!

Er begyndt at sidde lidt og øve mig med at designe udelukkende ved hjælp af layers.

Jeg har et horisontalt menulayer, som indeholder nogle andre "under-layers", som skal indeholde noget links-tekst. Jeg har en del problemer med at få denne tekst centreret inde i dets "under-layer". Koden er :

#menulayer {
    position:absolute;
    top:90px;
    left:0px;
    height:20px;
    width:780px;
    background-color:#CCFFCC;
}

#menu_agenturer {
    position:absolute;
    top:0px;
    left:550px;
    height:100%;
    width:100px;
    background:#33FF00;
}
   
#menu_kontakt {
    position:absolute;
    top:0px;
    left:660px;
    height:100%;
    width:110px;
    background:#33FF00;
}               

#menutext {
    position:absolute;
    /*left:3em;*/ IGNORER DISSE
    /*bottom:20%;*/ IGNORER DISSE
    font-family:Verdana;
    font-size:10px;
    color:#000000;
    font-weight:bold;
}

<div id="menulayer">
<div id="menu_hjem"><p class="menutext">Hjem</p></div>
<div id="menu_om_os"><p class="menutext">Om os</p></div>
<div id="menu_produkter"><p class="menutext">Produkter</p></div>
<div id="menu_datablade"><p class="menutext">Datablade</p></div>
<div id="menu_info"><p class="menutext">Information</p></div>
<div id="menu_agenturer"><p class="menutext">Agenturer</p></div>
<div id="menu_kontakt"><p class="menutext">Kontakt</p></div>
</div>

Håber der er nogen, som kan forstå hvad jeg mener... :)

På forhånd tak,
Stenger
Avatar billede Slettet bruger
27. juni 2005 - 18:58 #1
Du sætter følgende ind i #menu_agenturer og #menu_kontakt:
text-align: center;
Avatar billede stenger Nybegynder
27. juni 2005 - 19:12 #2
Har prøvet det (og lige gjort det igen). Det har ikke rigtig nogen effekt... det flytter sig ikke en meter :(

Mit body-tag ser forresten sådan ud... ved ikke om det har indflydelse;

body {
margin:0px 0px; padding:0px;
text-align:center;
background-color:#FFFFFF;
}
Avatar billede Slettet bruger
27. juni 2005 - 19:17 #3
Med den body, og en korrekt doc-type:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

...ser det helt forkert ud.

Sæt den rigtige doc-type ind, og fjern text-align:center fra din body.
Avatar billede stenger Nybegynder
27. juni 2005 - 19:18 #4
Ok, prøver det lidt senere.
Har "hugget" lidt fra andre sider, da jeg bare prøver mig frem, så derfor den doc-type.
Avatar billede Slettet bruger
27. juni 2005 - 19:23 #5
Det er altid vigtigt at have korrekt doc-type på, da det er den der fortæller browseren hvordan siden skal fortolkes.

Der er rigtig mange sider der ikke benytter det, men det bliver ris til egen røv på et tidspunkt.
Avatar billede stenger Nybegynder
27. juni 2005 - 20:48 #6
Har ændret doc-typen, men kan ikke rigtig ændre body-tagget (eller har ihvertfald ikke fundet ud af en anden måde at gøre det på). Text-align tagget i body gør at siden er centreret, uafhængig af skærmopløsning.

Under alle omstændigheder virkede det ikke rigtigt... Hele koden er:

<html>
<head>
<title>Untitled</title>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<style>

body {
margin:0px 0px; padding:0px;
text-align:center;
background-color:#FFFFFF;
}

#toplayer {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:90px;
    background-color:#FFFFFF;
}

.toplogo {
    position:absolute;
    top:0px;
    left:0px;
    height:90px;
    width:100%;
    z-index:99;
}   

#menulayer {
    position:absolute;
    top:90px;
    left:0px;
    height:20px;
    width:100%;
    background-color:#CCFFCC;
}

#menu_hjem {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100px;
    background:#33FF00;
}   

#menu_om_os {
    position:absolute;
    top:0px;
    left:110px;
    height:100%;
    width:100px;
    background:#33FF00;
}

#menu_produkter {
    position:absolute;
    top:0px;
    left:220px;
    height:100%;
    width:100px;
    background:#33FF00;
}   

#menu_datablade {
    position:absolute;
    top:0px;
    left:330px;
    height:100%;
    width:100px;
    background:#33FF00;
}

#menu_info {
    position:absolute;
    top:0px;
    left:440px;
    height:100%;
    width:100px;
    background:#33FF00;
    text-align:center;
}

#menu_agenturer {
    position:absolute;
    top:0px;
    left:550px;
    height:100%;
    width:100px;
    background:#33FF00;
}
   
#menu_kontakt {
    position:absolute;
    top:0px;
    left:660px;
    height:100%;
    width:110px;
    background:#33FF00;
}               

.menutext {
    position:absolute;
    left:3em;
    /*width:50%;*/
    bottom:20%;
    font-family:Verdana;
    font-size:10px;
    color:#000000;
    font-weight:bold;
}

#sidelayer {
  position:absolute;
  bottom:20px;
  left:782px;
  height:97%;
  width:16px;
  margin:0px auto;
  background-color:#33FF00;
}

#content {
    position:relative;
    top:3px;
    width:800px;
    height:99%;
    margin:0px auto;
    border:1px solid #8587BC;
    background-color:#FFFFFF;
}

html>#centerBoks {
    width:800px;
}

.contentpic {
    position:absolute;
    top:425px;
    left:455px;
    height:200px;
    width:275px;
    z-index:99;   
}   

#bottomlayer {
    position:absolute;
    bottom:0px;
    left:0px;
    height:20px;
    width:100%;
    margin:0px auto;
    background-color:#33FF00;
}

.bottomtext {
  position:absolute;
  left:0px;
  width:100%;
  bottom:4px;
  font-family:Verdana;
  font-size:10px;
  color:#000000;
  font-weight:bold;
}

</style>
</head>


<body>

<div id="content">
<div class="contentpic" id="contentpic"><img src="images/contentpic.gif" width="275" height="200" /></div>

<div id="toplayer"></div>
<div class="toplogo" id="toplogo"><img src="images/toplogo.gif" width="100%" height="90" /></div>

<div id="menulayer">
<div id="menu_hjem"><p class="menutext">Hjem</p></div>
<div id="menu_om_os"><p class="menutext">Om os</p></div>
<div id="menu_produkter"><p class="menutext">Produkter</p></div>
<div id="menu_datablade"><p class="menutext">Datablade</p></div>
<div id="menu_info"><p class="menutext">Information</p></div>
<div id="menu_agenturer"><p class="menutext">Agenturer</p></div>
<div id="menu_kontakt"><p class="menutext">Kontakt</p></div>
</div>

<div id="sidelayer"></div>

<div id="bottomlayer"><p class="bottomtext">bla bla bla </p></div>

</div>

</body>
</html>   


Måske nogen, der kan finde noget smart? :)Der er al teksten i "menutext"-classen, der skal centreres.
Avatar billede Slettet bruger
27. juni 2005 - 21:54 #7
Der er flere ting der skal ændres!

Prøv lige denne med ændringer, hvis jeg forstår dig rigtigt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>

<style type="text/css" media="screen">

body {
margin:0px 0px; padding:0px;
text-align:center;
background-color:#FFFFFF;
}

#toplayer {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:90px;
    background-color:#FFFFFF;
}

.toplogo {
    position:absolute;
    top:0px;
    left:0px;
    height:90px;
    width:100%;
    z-index:99;
} 

#menulayer {
    position:absolute;
    top:90px;
    left:0px;
    height:20px;
    width:100%;
    background-color:#CCFFCC;
}

#menu_hjem {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100px;
    background:#33FF00;
} 

#menu_om_os {
    position:absolute;
    top:0px;
    left:110px;
    height:100%;
    width:100px;
    background:#33FF00;
}

#menu_produkter {
    position:absolute;
    top:0px;
    left:220px;
    height:100%;
    width:100px;
    background:#33FF00;
} 

#menu_datablade {
    position:absolute;
    top:0px;
    left:330px;
    height:100%;
    width:100px;
    background:#33FF00;
}

#menu_info {
    position:absolute;
    top:0px;
    left:440px;
    height:100%;
    width:100px;
    background:#33FF00;
    text-align:center;
}

#menu_agenturer {
    position:absolute;
    top:0px;
    left:550px;
    height:100%;
    width:100px;
    background:#33FF00;
}
 
#menu_kontakt {
    position:absolute;
    top:0px;
    left:660px;
    height:100%;
    width:110px;
    background:#33FF00;
}             

.menutext {
    position:absolute;
    left:3em;
    /*width:50%;*/
    bottom:20%;
    font-family:Verdana;
    font-size:10px;
    color:#000000;
    font-weight:bold;
}

#sidelayer {
  position:absolute;
  bottom:20px;
  left:782px;
  height:97%;
  width:16px;
  margin:0px auto;
  background-color:#33FF00;
}

#content {
    position:relative;
    top:3px;
    width:800px;
    height:99%;
    margin:0px auto;
    border:1px solid #8587BC;
    background-color:#FFFFFF;
}

html>#centerBoks {
    width:800px;
}

.contentpic {
    position:absolute;
    top:425px;
    left:455px;
    height:200px;
    width:275px;
    z-index:99; 
} 

#bottomlayer {
    position:absolute;
    bottom:0px;
    left:0px;
    height:20px;
    width:100%;
    margin:0px auto;
    background-color:#33FF00;
}

.bottomtext {
  position:absolute;
  left:0px;
  width:100%;
  bottom:4px;
  font-family:Verdana;
  font-size:10px;
  color:#000000;
  font-weight:bold;
}

</style>
</head>


<body>

<div id="content">
<div class="contentpic" id="contentpic"><img src="images/contentpic.gif" height="200" width="275" border="0" alt="billed"></div>

<div id="toplayer"></div>
<div class="toplogo" ID="toplogo"><img src="images/toplogo.gif" width="100%" height="90px" alt="logo"></div>

<div id="menulayer">
<div id="menu_hjem"><p class="menutext">Hjem</p></div>
<div id="menu_om_os"><p class="menutext">Om os</p></div>
<div id="menu_produkter"><p class="menutext">Produkter</p></div>
<div id="menu_datablade"><p class="menutext">Datablade</p></div>
<div id="menu_info"><p class="menutext">Information</p></div>
<div id="menu_agenturer"><p class="menutext">Agenturer</p></div>
<div id="menu_kontakt"><p class="menutext">Kontakt</p></div>
</div>

<div id="sidelayer"></div>

<div id="bottomlayer"><p class="bottomtext">bla bla bla </p></div>

</div>

</body>
</html>
Avatar billede stenger Nybegynder
27. juni 2005 - 22:17 #8
Tak for forsøge, ibtage... men no luck! Menuclass-punkterne vil åbenbart bare ikke centreres. For lige at genopfriske for folk... der er en lang, horisontal bjælke (menulayer). Denne har en width på 100% og dækker hele siden. Inden i denne ligger en masse små layers (menu_hjem, menu_om_os og så videre). Disse fylder et vist antal pixels i width. Inde i disse er der noget tekst, som er defineret som en class, nemlig "menutext". Hvordan man så får denne tekst centreret inde i f.eks. "menu_hjem" eller "menu_info" er det store spørgsmål... :)
Avatar billede Slettet bruger
28. juni 2005 - 09:32 #9
Jeg har prøvet at forenkle din kodning lidt. Her er selve sideopbygningen incl. menuen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
    <head>
      <title>Untitled</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
    margin:30px 0px 30px 0px;
    padding:0px;
    background-color:#FFFFFF;
    color:#000000;
}

#content {
    position:relative;
    margin:0px auto 0px auto;
    width:800px;
    height:1000px;
    border:1px solid #8587BC;
    background-color:#FFFFFF;
}

#toplogo {
    position:relative;
    top:0px;
    left:0px;
    width:800px;
    height:90px;
    background-color:#cccccc;
    color: #000000;
}

#menu {
    position:relative;
    overflow: hidden;
    height:20px;
    width:800px;
    background-color:#CCFFCC;
    color:#000000;
}

#menupunkter a{
    padding-top: 3px;
    margin:0px 6px 0px 6px;
    float:left;
    height: 20px;
    width:100px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight:bold;
    text-align:center;
    background-color: #33FF00;
    color: #000000;
    text-decoration: none;
    display: block;
}   

#menupunkter a:hover{
    color:#CCFFCC;
}


</style>
</head>


<body>

<div id="content">

  <div id="toplogo"></div>

  <div id="menu">
    <div id="menupunkter">
      <a href="hjem.htm">Hjem</a>
      <a href="omos.htm">Om os</a>
      <a href="produkter.htm">Produkter</a>
      <a href="datablade.htm">Datablade</a>
      <a href="information.htm">Information</a>
      <a href="agenturer.htm">Agenturer</a>
      <a href="kontakt.htm">Kontakt</a>
    </div>
  </div>
</div>

</body>
</html>

Et par gode råd:
Valider altid dit arbejde mod www.w3c.org i deres html-validator, da den eleminerer de mest elementære fejl.
Brug indrykninger i din kode, for at visualisere hvilke DIV der er placeret inde i andre DIV'er. Det gør det lettere at overskue.
Husk at linjen med doctype ALTID skal være den første linje i dit dokument, og der må ikke være hverken blanke linjer, eller blanke tegn foran den. Det kan give problemer.
Avatar billede Slettet bruger
28. juni 2005 - 09:34 #10
Glemte lige en detalje:
I CONTENT laget er der sat højde på. Ved at fjerne denne højde, vil siden altid ændre højde efter dig indhold. Dvs. jo mere indhold jo længere/højere en side.
Der vil altid være en margin i bunden magen til den i toppen.
Avatar billede stenger Nybegynder
28. juni 2005 - 13:00 #11
Takker, kfisker... jeg kigger lige lidt på koden. Der er nogle ting, jeg ville være ked af at skulle slette og andre ting jeg kan bruge. Det er bare et legeprojekt og ikke noget vigtigt, så det er ikke essentielt at det kører 100%. Consider it a learning process :)
Avatar billede Slettet bruger
28. juni 2005 - 13:02 #12
Du mener åbenbart ikke du har fået noget brugbart siden du ta'r alle pointene selv?
Avatar billede stenger Nybegynder
28. juni 2005 - 13:02 #13
Og så kom jeg så lige til at give mig selv nogle point... sorry, duer undskyldningen med at jeg er ny her? Fatter ikke helt det point-halløj...
Avatar billede Slettet bruger
28. juni 2005 - 13:07 #14
Det var ikke så meget pga. pointene, så behold du bare dem.

Der kører bare en del virak herinde for tiden, men brugere der ikke giver point efter fortjeneste.

Det vil være klogt at læse denne igennem, for at undgå problemer senere hen:
http://www.eksperten.dk/regler.phtml?Esession=2b577538eb552890a667749f11138223
Avatar billede stenger Nybegynder
28. juni 2005 - 13:10 #15
Will do :) Jeg forsøgte at give dig dem, men et eller andet gik galt. Hvis du kan undvære dem, ok... jeg kan se der er nogen, som går helt kolde over at man oprette en tråd med "Point til..." . De mener åbenbart at det er at snyde for hårdt.
Avatar billede roenving Novice
28. juni 2005 - 13:10 #16
>>kfisker

-- du skal nok skynde dig at logge af, så der ikke er andre, som begynder at lave sjov med din bruger-profil !-)
Avatar billede Slettet bruger
28. juni 2005 - 13:18 #17
roenving...> Hehe, der er fra en session, hvor jeg ikke var logget på, så de må more sig alt det de vil *g*
Avatar billede roenving Novice
28. juni 2005 - 13:27 #18
-- og måske skulle man også give stenger linket til faq'en: http://expfaq.1go.dk !-)
Avatar billede Slettet bruger
28. juni 2005 - 13:34 #19
God idé

Man kan undre sig over hvorfor Experten ikke har sin egen "hjælpefunktion" vedr. den slags.

Der er mange der har problemer med måden man giver/fordeler/rettet i antal 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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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 dag 13:21 ms Forms Af leahcim i Andet software
I går 21:30 Blokeret på Snapchat? Af LineP i Chat & Messaging
09/0816:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
White papers
Flere white papers »