[html] x,y coordinaten van een <tabel> - Softwareontwikkeling

zaterdag 25 februari 2006 14:02

Acties:

Old skool

Topicstarter

hallo, wil een table gecentreerd en b.v. -2px onder de bovenkant van de browser plaatsen.. een layer can ik met coordinaten plaatsen maar niet centeren op de pagina.. Een table kan ik centreren (zodat het met alle resoluties gecentreerd weergegeven word in de browser) maar geen coordinaten aan geven.. een dilemma dus, heeft iemand de gouden tip? hoe word hier door de meeste webdesigners mee omgegaan? Op advies van iemand met css gaan werken, "met css kan je toch het zelfde doen met een tabel als dat je met een div doet"? waren zijn woorden.. Zo gezegd zo gedaan,

Mijn css;

table#center {
position: relative;
top: -2px;
width: 600px;
height: 600px;
margin: 0px auto; // boven
}

Mijn html;

<table align="center" id="center">
<tr>
<tr>
<td bgcolor="#000000"></td>
</tr>
</table>

Het werkt alleen maar gedeeltelijk, (klik) zijn er nog brilliante ideeen, ik denk dat best veel beginnende html site bouwers hiermee worstelen...

Verwijzingen naar literatuur zijn ook welkom, specifiek gericht op een site ontwerp klaar te stomen om door allerlei verschillende browsers bekeken te worden op allerlei verschillende type beeldschermen met verschillende resoluties, rekeninghoudend met de eigenaardigheden van de meestgebruikte browsers...

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

zaterdag 25 februari 2006 14:09

Acties:

Verwijderd

Wil je in die tabel ook daadwerkelijk tabulaire data weergeven, of wil je het gebruiken om andere layout elementen in te stoppen?

In het laatste geval kun je de table beter uit je hoofd zetten en gaan werken met css.

Wat (volgens mij) al werkt is:

Cascading Stylesheet:

body {
  text-align: center;
}
div.bottomcenter {
  position:relative;
  top: -2px;
  width: 600px;
  height: 600px;
  margin: 0px auto;
}

HTML:

<html>
    <head>
        <title>my 1337 page</title>
    </head>
    <body>
        <div class="bottomcenter">hier je 1337 inhoud of tabel</div>
    </body>
</html>

[ Voor 19% gewijzigd door Verwijderd op 25-02-2006 14:10 ]

zaterdag 25 februari 2006 14:10

Acties:

--MeAngry--

aka Qonstrukt

Ook even de margin van je body op 0px zetten. Dat helpt ook een boel.

Tesla Model Y RWD (2024)

zaterdag 25 februari 2006 14:12

Acties:

eghie

Spoken words!

Wat dacht je van:

HTML:

<html>
<head>
    <title>test</title>
    <!--[if lte IE 6]>
    <style type="text/css">
        body {
            
            text-align: center;
        }

        .centerdiv {
            text-align: left;
        }
    </style>
    <![endif]-->
    <style type="text/css">
        html {
            margin: 0px;
        }

        body {
            margin: 0px;
        }

        .centerdiv {
            position: relative;
            top: -2px;
            width: 600px;
            height: 600px;
            margin-left: auto;
            margin-right: auto;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="centerdiv">
    </div>
</body>
</html>

Het werkt nu voor zowel IE als Firefox.

Om coordinaten aan te geven zou je top en left kunnen gebruiken.

Dat IF blok wat ik daar gebruik valt onder Conditional comments. Hiermee kun je content alleen voor IE laten gelden. Ook kun je hiermee CSS alleen voor IE laten gelden. Je zou het ook zo kunnen oplossen:

HTML:

<!--[if lte IE 6]>
    <link href="./ieonlystyle.css" media="all" rel="stylesheet" type="text/css" title="IE only CSS" />
<![endif]-->
<link href="./style.css" media="all" rel="stylesheet" type="text/css" title="Basis stylesheet" />

[ Voor 104% gewijzigd door eghie op 25-02-2006 14:28 ]

zaterdag 25 februari 2006 14:16

Acties:

Verwijderd

Als je toch persee je table wilt gebruiken: (wat ik begrijpelijk vindt btw)
Je table heeft op dit moment padding, als je cellspacing='0' en cellpadding='0' in je table zet heb je waarschijnlijk geen last van je vreemde ruimte.
Wil je dat niet moet je je padding opnemen in je CSS, dus ipv: top: -2px; top: -6px; (4 px voor je padding)

HTML:

<table border='0' cellspacing='0' cellpadding='0'>
 <tr>
  <td>dinges</td>
 </tr>
</table>

[ Voor 15% gewijzigd door Verwijderd op 25-02-2006 14:16 ]

zaterdag 25 februari 2006 14:52

Acties:

fU_fITA

Old skool

Topicstarter

even een bedankje voor de top reacties, ik ga hier de komende dagen mee aan de slag, ik hou jullie op de hoogte...

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

zondag 26 februari 2006 00:04

Acties:

fU_fITA

Old skool

Topicstarter

Verwijderd schreef op zaterdag 25 februari 2006 @ 14:09:
Wil je in die tabel ook daadwerkelijk tabulaire data weergeven, of wil je het gebruiken om andere layout elementen in te stoppen?

Geen tabulaire data maar om buttons en een achtergrondfoto in te plaatsen. Het is een layout (tabel die grafische elementen bevat (de tabel bevat slices gemaakt in photoready).

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

zondag 26 februari 2006 00:34

Acties:

SiliconError

:(){ :|:& };:

Verwijderd schreef op zaterdag 25 februari 2006 @ 14:16:
Als je toch persee je table wilt gebruiken: (wat ik begrijpelijk vindt btw)

Sshht!

fU_fITA schreef op zondag 26 februari 2006 @ 00:04:
Geen tabulaire data maar om buttons en een achtergrondfoto in te plaatsen. Het is een layout (tabel die grafische elementen bevat (de tabel bevat slices gemaakt in photoready).

Op grond van onze geloofsovertuiging zijn we verplicht je te vragen om dat toch maar niet te doen.
De slices zijn ook vast heel goed neer te zetten met CSS.
Als je er nog niet bekend mee bent lijkt me dit het goede moment om er mee te beginnen

dinsdag 28 februari 2006 10:48

Acties:

fU_fITA

Old skool

Topicstarter

uiteindelijk deze css gebruikt, het werkt niet in Firefox, maar wel in IE6 zie link

code:

<html>
<head>
    <title>test</title>
    <!--[if lte IE 6]>
    <style type="text/css">
        body {
            
            text-align: center;
        }

        .centerdiv {
            text-align: left;
        }
    </style>
    <![endif]-->
    <style type="text/css">
        html {
            margin: 0px;
        }

        body {
            margin: 0px;
        }

        .centerdiv {
            position: relative;
            top: -2px;
            width: 600px;
            height: 600px;
            margin-left: auto;
            margin-right: auto;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="centerdiv">
    </div>
</body>
</html>

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

dinsdag 28 februari 2006 10:52

Acties:

fU_fITA

Old skool

Topicstarter

oeps, ik denk dat het een check browser functie ligt voor mozilla firefox... exuse moi..

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

dinsdag 28 februari 2006 11:10

Acties:

fU_fITA

Old skool

Topicstarter

nee, toch niet check browser funtie eruit gehaald en hij doet het nog steeds... kijk maar [in firefox]

http://www.willemblokker.nl/__site/__mai.htm

in IE6 word mijn div gecentreerd weergegeven in resolutie 1280x 1024, maar in firefox word de helft weergegeven aan de rechterzijde...

[ Voor 19% gewijzigd door fU_fITA op 28-02-2006 11:15 ]

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

dinsdag 28 februari 2006 14:36

Acties:

eghie

Spoken words!

Iets zegt me dat er veel niet klopt aan je html: Validatie site

Dreamweaver en ook andere WYSIWYG editors willen nog wel eens je HTML door elkaar gooien. Dit is hier ook gebeurd. Ik zou bijvoorbeeld dat statusbar scriptje weg halen, als iemand achter de URL wil komen dan lukt dat toch wel. Die tabellen in die div zijn niet helemaal goed ingedeeld. Ik denk dat daarom Firefox (je hebt geloof ik 1.5) problemen gaat opleveren met renderen.

[ Voor 58% gewijzigd door eghie op 28-02-2006 14:52 ]

dinsdag 28 februari 2006 19:49

Acties:

fU_fITA

Old skool

Topicstarter

alle fouten zijn er nu uit op 1 na..

weet alleen niet hoe deze op te lossen, iemand nog een idee?

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

woensdag 1 maart 2006 11:09

Acties:

eghie

Spoken words!

dit hoort tussen de head tags:

HTML:

<!--[if lte IE 6]>
    <style type="text/css">
        body {
            
            text-align: center;
        }

        .centerdiv {
            text-align: left;
        }
    </style>
    <![endif]-->

Maar kun je ook mischien iets duidelijker je probleem uitleggen?

[ Voor 19% gewijzigd door eghie op 01-03-2006 11:17 ]

donderdag 2 maart 2006 12:36

Acties:

fU_fITA

Old skool

Topicstarter

eghie schreef op woensdag 01 maart 2006 @ 11:09:

Maar kun je ook mischien iets duidelijker je probleem uitleggen?

oke, om te beginnen de template pagina is nu fout-vrij klik

Dus dat scheelt weer

Vandaar doe ik weer een opinie peiling bij Got, ik heb nog een tabel met slices, gegenereerd in Adobe ImageReadyCS vs.8, die bevat alle buttons en rollovers, moet ook nog in dezelfde div geplaatst worden.. maar dat is voor latere zorg..

hier is mn html >

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head>
<title>| willem blokker © 2006 | home |</title>
<link href="_css/des.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--[if lte IE 6]>
    <style type="text/css">
        body {
            
            text-align: center;
        }

        .centerdiv {
            text-align: left;
        }
    </style>
    <![endif]-->
    <div class="centerdiv">
    </div>
</body>
</html>

en hier is mn CSS

Cascading Stylesheet:

body, td, p { font-family: verdana; font-size: 7pt; font-style: bold ; color: #203E48; }
body {
        background-image:  url(IJ-water.jpg);
        background-repeat: no-repeat; 
        background-position: left 0%; 
        background-attachment: fixed;
}
p 
{
overflow: scroll
}
#visible {
    overflow: visible;
}
html { margin: 0px;
       overflow-x: hidden;
       overflow-y: auto;
} 
body { margin: 0px;}
.centerdiv {
            position: relative;
            top: -23px;
            width: 1024px;
            height: 635px;
            margin-left: auto;
            margin-right: auto;
            background-image:  url(willem.jpg);
            background-repeat: no-repeat; 
            background-position: left 0%; 
            background-color: white;
}
h1 { letter-spacing:3; border-bottom: 0px solid #203E48; font-size:8pt; margin-bottom:5}
a:link, a:visited { color:203E48; cursor: hand; text-decoration: none }
a:hover { color:#7CAAB1; text-decoration:overline underline;}
BODY { scrollbar-arrow-color: #203E48; scrollbar-face-color: #F9FCFB; scrollbar-3dlight-color: #203E48; scrollbar-highlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-shadow-color: #203E48; scrollbar-track-color:white
}

    <![endif]-->

Het grootste probleem is dat ik de overflow niet wegkrijg, de scroll bars blijven steeds zichtbaar in IE6 en Ff1.5. Sugesties zijn welkom.

Nobody steals our chicks... and lives! Duke Nukem 3D (1996)

Pagina: 1

Reageer