Cyberholli: Boxen "springen" bei div. Auflösungen

SELF-Forum

Boxen "springen" bei div. Auflösungen

Cyberholli
– Informationen zu den Bewertungsregeln

Hallo Ihr,

irgend etwas mache ich wohl falsch.
Unter einer Überschrift möchte ich drei CSS-Boxen unterbringen, wobei die beiden rechten an den "Schnörkeln" der Überschrift (z. T. Grafik)
ausgerichtet werden sollen.
Bei der Auflösung von 1024 x 768 bin ich mit dem Internet Explorer mit der Darstellung zufrieden. Beim Firefox ist noch etwas "Feintuning" angebracht.
Da ich von der Auflösungsoptimierung weg möchte, bin ich mit der springenden Darstellung z. B. mit 800x600 und 1280x1024 unglücklich.
Ich denke, dass die von mir verwendete Maßeinheit "em" beim "margin-left" der auszurichtenden Boxen zu starr und somit schlecht gewählt ist.
Doch alternative Prozentangaben werden leider von IE und Firefox recht verschieden interpretiert.

Daher bitte ich Euch um eine Info, wie ich es richtig (=flexibel) positionieren kann.

Den Quelltext, zur besseren Sichtbarkeit mit eingebetteten Styles, füge ich unten bei.

Vielen Dank im Voraus für die Hilfe!

Cyberholli

P.S. Die umständliche Deklaration der border irritiert mich auch, und ich überlege immer noch, ob ich sie so eingegeben habe.
Hexerei? Da befasse ich mich dann später mit.

Hier nun der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Floattest</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css media=screen>UNKNOWN
 .lucy1{font-family:"Lucida Calligraphy";font-size:3.6em;color:#990033;}
    .lucy2{font-family:"Lucida Calligraphy";font-size:1.9em;color:#808080;}

.link
  {display:block;text-align:center; vertical-align:center;width:7.5em;height:1.6em;border:4px solid #C8C8C8;
  padding:0.2%;text-decoration:none;margin-bottom:25px; /*IE rechnet bei margin die Prozente anders*/
  font-family: arial;font-weight : bold; font-size:1em;}
 .link:link
  {color:#E0DDDD;background-color:#aaaaaa;}
 .link:visited
  {color:#808080;background-color:#E0DDDD;}
 .link:hover
  {color:#FFF0E1;background-color:#aaaaaa;}
 .link:active
  { text-decoration:none; font-weight:bold;color:#00000a; background-color:#FFF0E1; }

#head       /*in diese Box sollen die Überschrift und die head-Grafiken*/
{
 border:solid 2px maroon;
 margin-left:18%;
 padding-bottom:0.5%;
}

.float1       /*linke Links*/
{
 BORDER-RIGHT: maroon 2px solid;
 BORDER-TOP: maroon 2px solid;
 BORDER-LEFT: maroon 2px solid;
 BORDER-BOTTOM: maroon 2px solid;
 margin-top:0.5%;
 WIDTH: auto;    /*11.2em*/
 FLOAT: left;
}
.float2      /*die nächsten Links*/
{
 BORDER-RIGHT: maroon 2px solid;
 BORDER-TOP: maroon 2px solid;
 BORDER-LEFT: maroon 2px solid;
 BORDER-BOTTOM: maroon 2px solid;
 margin-top:0.5%;
 FLOAT: left;
 WIDTH:auto;     /*17.5em */
 margin-left:3.4em;   /*10%; bei % "interessante" Browserreaktionen*/

}
.float3      /*Foto*/
{
 BORDER-RIGHT: maroon 2px solid;
 BORDER-TOP: maroon 2px solid;
 BORDER-LEFT: maroon 2px solid;
 BORDER-BOTTOM: maroon 2px solid;
 margin-top:0.5%;
 FLOAT: left;
 WIDTH: 338px;
 margin-left:10em;   /*12% - über Prozente haben IE und Firefox leider diverse Ansichten*/
}
</STYLE>

<BODY>

<div id="head">   <!-- Überschrift und head-Grafiken -->
<img src="../grafik/engel_links.gif" width="70" height="67">
<span class="lucy2">Basis f. vertikale Ausrichtg.</span>
<img src="../grafik/engel_rechts.gif" width="70" height="67">
<img src="../grafik/g.gif">
</div>

<DIV class=float1>
<a class="link"  href="files/service.html" >Service </a>
<a href="files/kontakt.html" class="link">Kontakt</a>
<a href="files/impressum.html" class="link">Impressum</a>
<a href="files/email.html" class="link">e-mail</a>
<a href="files/agb.html" class="link">AGB</a>
<a href="files/main.html" class="link">Startseite</a>
</DIV>
<DIV class=float2>
<a href="hochzeit.html" class="link">Hochzeiten</a>
<a href="jubil.html" class="link">Jubil&auml;en</a>
<a href="feiern.html" class="link">Feiern, Parties</a> <!-- das ursprüngliche " / " sorgte beim IE für Zeilenumbruch im Link -->
<a href="bfeste.html" class="link">Betriebsfeste</a>
<a href="reisen.html" class="link">Reisen</a>
</DIV>
<DIV class=float3>
<img src="../grafik/service.jpg" width=338px height=450px alt="feierliches Ambiente im Schloss Styrum">
</DIV>
<DIV class=float3>
Leer - kannze vergessen.
</DIV>
</BODY>
</HTML>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Boxen "springen" bei div. Auflösungen

    Orlando Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Cyberholli,

    Ich denke, dass die von mir verwendete Maßeinheit "em" beim "margin-left" der auszurichtenden Boxen zu starr und somit schlecht gewählt ist.

    Bevor du dich darum kümmerst, ist es erforderlich, alle Browser mit dem korrekten Box-Modell rechnen zu lassen.

    Doch alternative Prozentangaben werden leider von IE und Firefox recht verschieden interpretiert.

    Das liegt am Doctype.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    Nach Lektüre von Dokumenttyp-Deklarationen für den standardkonformen Modus empfiehlt sich die Verwendung von

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

    Damit lässt sich nun wesentlich besser arbeiten.

    Grüße
     Roland

    --
    Drucklayouts mit CSS gestalten
    Benutzerstylesheet für das SELFHTML-Forum
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Boxen "springen" bei div. Auflösungen

      Cyberholli
      – Informationen zu den Bewertungsregeln

      Hallo Roland,

      danke für diese ausführliche Antwort. Sogar mit links, klasse.

      Werde ich mir umgehend zu Gemüte führen.

      Viele Grüße
      Cyberholli

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln