Thomas: Buttonformatierung

Beitrag lesen

Hi,

Morgen Michael, alles klar? Ist ja bald Wochenende :-) Habe jetzt die HTML Seite vom aussehen wie ich sie haben will. Hier mal der Quelltext:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="author" content="Thomas Gawlitta">
<meta name="copyright" content="2002 (C)opyrights And All (R)ights (R)eserved by Thomas Gawlitta">
<title>Herzlich Willkommen auf dem Intranetportal der Firma XXX;user</title>

<link rel="stylesheet" type="text/css" href="intranet.css">

<style>
BODY {     scrollbar-3d-light-color:#999999;
           scrollbar-arrow-color:#0066FF;
           scrollbar-base-color:black;
           scrollbar-dark-shadow-color:#333333;
           scrollbar-face-color:#666666;
           scrollbar-highlight-color:#999999;
           scrollbar-shadow-color:black}
</style>
<base target="_blank">
</head>
<body background="file:///S:/DV_GAST/Intranet/images/background.jpg">
<script Language=VBScript>
<!--
function load_word(mode, pfad)
    'mode 0 = normal open
    'mode 1 = open as dot
    Set appWord = CreateObject("Word.Application")
    ' Display the application.
        appWord.WindowState = 0
        appWord.Height = 600
        appWord.Width = 800
        appWord.Left = 0
        appWord.Top = 0
    appWord.Visible = TRUE

' Open the document.
   ' mode 1 = dot file 0 = docfile
   if mode = 1 then
    appWord.Documents.Add (pfad)
   end if
   if mode = 0 then appWord.Documents.Open (pfad) end if
    ' Close the object variable.
    Set appWord = Nothing
end function
-->
</script>
<script language="JavaScript1.2">
<!--

top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}

//-->
</script>
<form>
  <div style="width: 313; height: 181" >
    <table height="1" width="291">
      <tr>
        <td valign="top" align="left" width="283" height="12"> <button STYLE="align: left; width: 280; border-color: #FFFFFF; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p><b> <font face="Tahoma" size="3" color="#0066FF"><img border="0" src="images/link.gif" align="left">
 <sup>
           Antrag DV-Zugriffsberechtigung </sup></font>
 <sup>
 <font face="Tahoma" size="3" color="#FFFFFF">BLINDT</font></sup></b></button></td>
      </tr>
      <tr>
        <td valign="top" align="left" width="283" height="6"> <button STYLE="align: left; width: 280; border-color: #FFFFFF; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\Internet_Zugriff.dot'">
          <p><b><font face="Tahoma" size="3" color="#0066FF"><img border="0" src="images/link.gif" align="left">
 <sup>
           Antrag Internet-Zugriffsberechtigung </sup></font>
 <sup>
           <font face="Tahoma" size="3" color="#FFFFFF">B</font></sup></b></button></td>
      </tr>
      <tr>
        <td valign="top" align="left" width="283" height="6"> <button STYLE="align: left; width: 280; border-color: #FFFFFF; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\Outlook_WEB_Access.dot'">
          <p><b><font face="Tahoma" size="3" color="#0066FF"><img border="0" src="images/link.gif" align="left">
 <sup>
           Antrag Outlook-Web-Access </sup></font>
 <sup>
           <font face="Tahoma" size="3" color="#FFFFFF">BLINDTEXT</font></sup></b></button></td>
      </tr>
      <tr>
        <td valign="top" align="left" width="283" height="12"> <button STYLE="align: left; width: 280; border-color: #FFFFFF; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT-FAHRT.dot'">
          <p><b><font face="Tahoma" size="3" color="#0066FF"><img border="0" src="images/link.gif" align="left">
            <sup> Anforderung Fahrdienst </sup></font><sup><font face="Tahoma" size="3" color="#FFFFFF">BLINDTEXT</font></sup>
            <sup> <font face="Tahoma" size="3" color="#FFFFFF">BLIN</font></sup></b>
          </button></td>
      </tr>
      <tr>
        <td valign="top" align="left" width="283" height="12"> <button STYLE="align: left; width: 280; border-color: #FFFFFF; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT-VV.DOT'">
          <p><b><font face="Tahoma" size="3" color="#0066FF"><img border="0" src="images/link.gif" align="left">
 <sup>

Verbesserungsvorschlag </sup></font>
 <sup>

<font face="Tahoma" size="3" color="#FFFFFF">BLINDTEXT BLIN</font></sup></b></button></td>
      </tr>
    </table>
  </div>
</form>
</body>
</html>

Habe alles erreicht was ich wollte. Habe bei der Buttonbeschriftung geschummelt und einfach BLINDTEXT weiss formatiert. Habe langsam keinen Nerv mehr das vernünftig zu lösen. Leider erkennt man jetzt bei meinen Buttons nicht mehr, dass sie ein Link sind. Gibt es irgendwelche Hoverelemente für Knöpfe?

kann man noch mehr aufräumen? ich hasse langsam CSS.

der Sinn der Sache ist, daß Du _nur_ noch CSS hast und nicht irgendwelche Wechselwirkungen verschiedener Formatierungsmethoden. (Und daß Du nur noch eine Formatierungssprache und deren Interpretation in den verschiedenen Browsern kennen mußt.)

<p><b><img border="0"

<b> ist Formatierung -> style="font-weight:bold"

<sup>

<sup> ist Formatierung - müßte sich mit "text-align" und kleinerer Schriftgröße (75%) nachbilden lassen.

</font>

Das ist ganz böse.

In Deinem HTML-Dokument soll tendentiell nur noch Logik drin stehen, also _welche_ Elemente darzustellen sind. Nicht aber, _wie_ sie darzustellen sind.
Falls Du jemals "strict" erreichen möchtest, müßten auch noch Deine <table>-Parameter raus, fürchte ich.

Viele Grüße
      Michael
(der sich selbst mit CSS herumschlägt und mit den aktuellen Browser-Implementierungen auch nicht glücklich ist - manches funktioniert einfach nicht, vor allem in Netscape 4.)

CU Thomas

P.S.: Brauche kein Netscape da in der Fa (Intrantseite) nur IE verwendet wird.