Søg
Avatar billede eyes Nybegynder
09. december 2004 - 12:31 Der er 28 kommentarer og
1 løsning

Div tags og centreret table

Hej eksperter jeg sidder her og har lavet er design i et table som virker meget godt.

Da jeg bruger divtags som layers ovenpå, vil jeg gerne høre om man kan sætte div taggets position ud fra ens table istede for hjørnet i browseren.

det virker nemlig kun når mit jeg har mit table venstre justeret, og ikke centreret.

ved i om man kan give sit table et ID og styre ud fra dette?

jeg bruger denne streng til at placere mine div tags.
<div style="position:absolute; top:340px; left:852px;>
Avatar billede morteeart Nybegynder
09. december 2004 - 12:34 #1
position absolut er ret dårligt, prøv at komme hele tin kode, så kan du få bedre hjælp.

Men jo du kan både style divs og tables, og også centerer divs og tables.

Men hele koden, evt. et link tak.
Avatar billede eyes Nybegynder
09. december 2004 - 12:39 #2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WOW</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.bg     {   
            background: #000000 url(elwynn-bg.gif) repeat-x;
        }

.toppoint         {background: #000000 url(toppoint.gif) repeat-x;
        }       
.lowpoint         {background: #000000 url(lowpoint.gif) repeat-x;
        }
.leftpoint         {background: #000000 url(leftpoint.gif) repeat-y;
        }
.rightpoint     {background: #000000 url(rightpoint.gif) repeat-y;
        }
.NavigationLeftTrim     {background: #000000 url(NavigationLeftTrim.gif) repeat-y;
        }
.NavigationRightTrim     {background: #000000 url(NavigationRightTrim.gif) repeat-y;
        }
.leftback         {background: #000000 url(leftback.jpg) repeat-y;
        }
.rightback         {background: #000000 url(rightback.jpg) repeat-y;
        }
.leftgold         {background: #000000 url(goldleft.gif) repeat-y;
        }
.rightgold         {background: #000000 url(goldright.gif) repeat-y;
        }

td#menupunkt {
color: #FFA800;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}

body {
    margin-left: 50px;
    margin-top: 20px;
}
-->
</style></head>

<body class="bg">
<div style="position:absolute; top:255px; left:840px;">
  <img src="wowlogo.gif"></div>
<div style="position:absolute; top:140px; left:25px;">
  <img src="basilisk.gif">
</div>

  <div style="position:absolute; top:325px; left:98px;">
  <img src="menu.gif">
</div>

<table width="980" border="0" align="default" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="goldtop.gif" width="980" height="4"></td>
    </tr>
</table>   
<table width="980" height="1000" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="4" rowspan="6" class="leftgold"><img src="spacer.gif" width="4" height="4"></td>
    <td height="213" colspan="7"><img src="top.jpg" width="972" height="213"></td>
    <td width="4" rowspan="6" class="rightgold"><img src="spacer.gif" width="4" height="4"></td>
  </tr>
  <tr>
    <td height="5" colspan="7"><img src="linetop.gif" width="972" height="5"></td>
  </tr>
  <tr>
    <td height="26" colspan="7" class="toppoint">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" height="23" class="lowpoint">&nbsp;</td>
  </tr>
  <tr>
    <td height="5" colspan="7"><img src="linebottom.gif" width="972" height="4"></td>
  </tr>
  <tr>
    <td width="22" height="100%" class="leftpoint">&nbsp;</td>
    <td width="175" height="100%" valign="top" class="leftback">   
    <br><br><br>
    <table width="130" border="0" align="center" cellpadding="3" cellspacing="4">
      <tr>
        <td height="0" id="menupunkt">- News</td>
      </tr>
      <tr>
        <td height="0" id="menupunkt">- Members </td>
      </tr>
      <tr>
        <td height="0" id="menupunkt">- Login </td>
      </tr>
      <tr>
        <td height="0" id="menupunkt">- Forum </td>
      </tr>
      <tr>
        <td height="0" id="menupunkt">- History </td>
      </tr>
      <tr>
        <td height="0" id="menupunkt">- Rules </td>
      </tr>
      <tr>
        <td height="0" id="menupunkt">- Join </td>
      </tr>
      <tr>
        <td height="0" id="menupunkt">- Links </td>
      </tr>
    </table></td>
    <td width="15" height="100%" class="NavigationLeftTrim">&nbsp;</td>
    <td width="590" height="100%">&nbsp;</td>
    <td width="15" height="100%" class="NavigationRightTrim">&nbsp;</td>
    <td width="175" height="100%" class="rightback">&nbsp;</td>
    <td width="23" height="100%" class="rightpoint">&nbsp;</td>
  </tr>
</table>
  <table width="980" border="0" align="default" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="goldbuttom.gif" width="980" height="4"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
</table>   




<div style="position:absolute; top:340px; left:852px;>

<table width="100" height="100" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3"><img src="heroframetop.gif" width="135" height="5"></td>
      </tr>
      <tr>
        <td><img src="heroframeleft.gif" width="6" height="184"></td>
        <td width="124" height="184"><!--#include virtual="/wow/site/adrotate.asp"--></td>
        <td><img src="heroframeright.gif" width="5" height="184"></td>
      </tr>
      <tr>
        <td colspan="3"><img src="heroframebuttom.gif" width="135" height="5"></td>
      </tr>
  </table>
</div>

<div style="position:absolute; top:558px; left:852px; height: 100; width: 100;">

<table width="100" height="100" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3"><img src="heroframetop.gif" width="135" height="5"></td>
      </tr>
      <tr>
        <td><img src="heroframeleft.gif" width="6" height="184"></td>
        <td width="124" height="184"><!--#include virtual="/wow/site/adrotate1.asp"--></td>
        <td><img src="heroframeright.gif" width="5" height="184"></td>
      </tr>
      <tr>
        <td colspan="3"><img src="heroframebuttom.gif" width="135" height="5"></td>
      </tr>
    </table>
</div>

</body>
</html>

http://www.eye-web.dk/wow/site/

Ja, men det er fordi jeg vil have mulighed for at ligge grafiske ting ovenpå hinanden, og dette er divs, genial til.
Avatar billede eyes Nybegynder
09. december 2004 - 12:42 #3
noget andet, ved du om en include gir extra luft, eller hvordan. Når jeg includer billeder kommer der nemlig luft i bunden, som kan ses i rammerne. Jeg har sat border til 0 på billederne
Avatar billede morteeart Nybegynder
09. december 2004 - 12:42 #4
mm, men så er din side fucked i bestemte opløsninger.

bare lav dette på din yderse table

<table border="0" style="margin: auto; width: 980px;"  cellpadding="0" cellspacing="0">

Er stadig lidt i tvivl om hvad der er du vil helt nøjagtig, men hvorfor ikke bygge din side op af KUN <div> og ingen tables ?
Avatar billede morteeart Nybegynder
09. december 2004 - 12:43 #5
i dit css

img
{
border: 0xp;
vertical-align: top; /* eller bottom */
}

så burde det blive fixet.
Avatar billede morteeart Nybegynder
09. december 2004 - 12:45 #6
og husk at droppe body->margin hvis du centrere din table.
Avatar billede eyes Nybegynder
09. december 2004 - 12:45 #7
ligger lige noget op, så kan du se det, 1 minut
Avatar billede eyes Nybegynder
09. december 2004 - 12:51 #8
Hvis jeg kunne måle placeringen af et div tag ud fra det yderste table hjørne i venstre, ville det kunne løse det
Avatar billede morteeart Nybegynder
09. december 2004 - 13:09 #9
Prøv at beskriv helt nøjagtigt hvad du vil.
Avatar billede eyes Nybegynder
09. december 2004 - 13:16 #10
Jeg har mit table som jeg vil have centreret, som det er nu.

Da jeg ikke gider ændre i designfilerne, vil jeg gerne kunne placere div tags ovenpå det centrede table, og mine div tags skal så holde placeringen af hvor de er i forhold til mit table. f.eks. rammerne med billeder i skal blive ude i menuen til højre osv. så når man eksempelvis resizer vinduet eller kører en anden opløsning så ser man det samme.

kan man lave det med udelukkende af div tags så sig til, men husk det skal være i center.
Avatar billede morteeart Nybegynder
09. december 2004 - 13:20 #11
ja, du kan sagtens lave det med udelukkende divs.

laver lige et eksempel.
Avatar billede eyes Nybegynder
09. december 2004 - 14:00 #12
ok, men kan man godt indsætte asp i det så det automatisk kan udvide sig i størrelse, ligesom et table
Avatar billede morteeart Nybegynder
09. december 2004 - 14:33 #13
se her:

http://thedeathart.dk/wow/

det er kun topppen, men koden er ekstrem mere overskuelig nu, og meget mere strukturert og ren.

Det er så ikke 100% css, men en god kombination.
Avatar billede morteeart Nybegynder
09. december 2004 - 14:34 #14
og ja self, CSS boxe virker ligsom tables, de er bare hurtigere og bedre.
Avatar billede morteeart Nybegynder
09. december 2004 - 14:42 #15
vender tilbage engang omkring midnat
Avatar billede eyes Nybegynder
09. december 2004 - 14:49 #16
jeg må sige jeg er imponeret :)

vil lige prøve at lave videre selv.
Avatar billede eyes Nybegynder
09. december 2004 - 17:27 #17
forsøgte ....

http://www.eye-web.dk/wow/site/wow1.htm
Avatar billede morteeart Nybegynder
09. december 2004 - 23:51 #18
okay, så prøver jeg lige at gøre siden helt færdigt.

Men godt at du selv forsøgte først :)
Avatar billede eyes Nybegynder
10. december 2004 - 00:09 #19
den eneste fejl der er nu, er at den laver luft ved billedet i top. meget underligt, har indsat img i stylesheet filen
Avatar billede eyes Nybegynder
10. december 2004 - 02:03 #20
hvis du kigger på http://www.eye-web.dk/wow/site/ så fungerer den perfekt nu, bortset fra luft ovre ved rammerne og ved guldstregen i midt.

det er kun i IE at det forekommer, ikke i firefox
Avatar billede morteeart Nybegynder
10. december 2004 - 09:22 #21
ser umidbart ud til at være en fejl mht. højder.

sæt nøjagtig height på ALLE elementer over dit tekst område, ellers synes IE at den skal bestemme det hele selv.
Avatar billede eyes Nybegynder
10. december 2004 - 11:52 #22
men skal jeg definere højde på div tags?
Avatar billede morteeart Nybegynder
10. december 2004 - 13:25 #23
definer højde og brede på så meget som overhovedet muligt.

måske lige med undtagelse af den box som indeholder din tekst.
Avatar billede morteeart Nybegynder
10. december 2004 - 13:27 #24
Men ellers uendeligt nice design.
Avatar billede eyes Nybegynder
10. december 2004 - 15:19 #25
tak :)

det virker ikke efter hensigten det med størrelsen :S
gider du forsøge at rette det, 200point til dig så.

Den failer når man includer med ASP
http://www.eye-web.dk/wow/site/ja.asp
Avatar billede morteeart Nybegynder
10. december 2004 - 19:05 #26
eh, link fejl ?

Jeg kan ikke helt se forskellen.

Men når du include, hvis der så opstår en include fejl, så vil ASP måske annulerer indlæsninge af resten af siden.(sådan fungerer det ihvertfald i php)

Lav evt. "View Souce", og se html outputtet, og se om du kan se nogle fejl.
Avatar billede eyes Nybegynder
11. december 2004 - 15:46 #27
har rettet det nu.
Tjek www.eye-web.dk/wow/site

Tak for hjælpen
Avatar billede eyes Nybegynder
11. december 2004 - 15:46 #28
Smid et svar
Avatar billede morteeart Nybegynder
11. december 2004 - 18:11 #29
okay

En sidste kommentar:

når du bruger include så skal dette her _IKKE_ være på undersiderne

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

og heller ikke:

</body>
</html>
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 11:04 Outlookproblem Af g91 i E-mail programmer
I dag 09:21 Firefox - Bøvl med idelig genbekræftelse af identitet Af andershl i Browsere
I går 15:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
16/0822:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
16/0812:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
White papers
Flere white papers »