• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wieder vermutlich ein float Problem

M

Murdoc

Neues Mitglied
Servus liebe HTML-Gemeinde,
ich bin dran meine erste HP zu gestalten und treff jetzt auf Probleme.

Mein Auftrag ist es eine Homepage umzugestalten und dazu hab ich mir versucht alles mal anzueignen. Klappt bisher eigentlich ganz gut.
Bis auf jetzt.
Das leidige Thema, dass ein Bild aus einem div-Bereich hrausragt, sogar in einen Text rein.

meine Css-Datei sieht folgendermaßen aus:
Code: 
body         {
        background-image: url(../Hintergrund/blau_005.jpg);
        font-size:14px;
        font-family:Verdana,sans-serif;
        font-style:normal;
        }



ul#Navigation    {
        font-size: 0.91em;
        float:left;
        width:14em;
        border-width:1px;
        border-color:#000000;
        border-style:solid;
        padding:10px;
        position:fixed;
        top:130px;
        }

ul#Navigation li {
        list-style:none;
        margin-left:1em;
        }

ul#Navigation a {
        display:block;
        font-weight:bold;
        text-decoration:none;
        }
    
ul#Navigation a:link {
        color:blue;
        }

ul#Navigation a:visited {
        color:#F00000;
        }

ul#Navigation a:hover {
        color:#FF00FF;
        }

ul#Navigation a:active {
        color:#00FF00;
        }

ul#Navigation h3 {
        color:#000000;
        font-size:1.1em;
        }

div#Inhalt     {
        border-style:solid;
        border-color:black;
        border-width:1px;
        margin-left:15em;
        margin-top:34px;
        padding:10px;
        }

div#Inhalt h1     {
        font-size:1.5em;
        color:#000000;
        }

div#Inhalt h2    {
        font-size:1.2em;
        color:green;
        }

div#Inhalt p    {
        font-size:1em;
        color:#000000;
        border-style:none;
        border-width:2px;
        border-color:#000000;
        padding: 15px;
        }

div#Logo    {
        padding:0px;
        border-color:black;
        border-style:hidden;
        border-width:1px;
        }


p#Fusszeile    {
        font-size:0.7em;
        padding: 0.1em;
        text-align: left;
        border: 1px solid;
        margin-left:21.4em;
        }

div#Bildrechts    {
        clear:both;
        float:right;        
        }

div#Bildlinks    {
        clear:both;
        float:left;
        }

div#kursiv    {
        font-style:italic;
        }
der HTML Code dazu so:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "./Test2_Css.html">
<html>
  <head>
    <title> Dienstleistungen </title>    
    <link rel="stylesheet" type="text/css" href="./formate.css">
  </head>


  <body>
    <div id="Logo">
      <img src="../Grafiken/logo/logo_trans.gif" alt=Logo.jpg width="50%"> 
        <!-- Muss .gif sein, sonst keine Transparenz!-->
    </div>

    <ul id="Navigation">
    <li><h3>Navigation</h3></li>
      <li><a href="./startseite.html">Startseite</a></li>
      <li><a href="./unternehmen.html">Unternehmen</a></li>
      <li><a href="./anlagen.html">Anlagen</a></li>
      <li><a href="./technologien.html">Technologien</a></li>
      <li><a href="./produkte.html">Produkte</a></li>
      <li><a href="./dienstleistungen.html">Dienstleistungen</a></li>
      <li><a href="./links.html">Links</a></li>
      <li><a href="./fotogallerie.html">Fotogallerie</a></li>
      <li><a href="./kontakt.html">Kontakt</a></li>
      <li><a href="./impressum.html">Impressum</a></li>
    </ul>


    <div id="Inhalt">
      <h1>Dienstleistungen</h1>
      <div id="Bildrechts" align="right"><img src="../grafiken/ESCA_klein.jpg" alt="" width="50%"></div>
      <p>Die xxx GmbH verf&uuml;gt &uuml;ber ein Photoelektronen- spektrometer (ESCA). Die Photoelektronenspektrometrie erlaubt die Analyse von Festk&ouml;rperoberfl&auml;chen hinsichtlich der 
    chemischen Zusammensetzung. Es k&ouml;nnen alle Elemente mit Ausnahme von Wasserstoff detektiert werden. Neben der quantitativen Bestimmung der Elementverteilung ist h&auml;ufig zus&auml;tzlich die Bestimmung des chemischen 
    Bindungszustandes m&ouml;glich. So lassen sich z.B. Oxidationen oder sonstige chemischen Ver&auml;nderungen einer Probenoberfl&auml;che detailliert untersuchen. Die Empfindlichkeit des Ger&auml;ts ist abh&auml;ngig vom jeweils 
    nachzuweisenden chemischen Element, in der Regel lassen sich Anteile von weniger als 1 Atomprozent noch problemlos detektieren. Die Proben k&ouml;nnen auch in Pulverform vorliegen. Auch elektrisch nichtleitende Materialien k&ouml;nnen untersucht werden.
      </p>    
      <p>Die Photoelektronenspektrometrie ist ein Obefl&auml;chenanalyseverfahren, d.h. es wird nur die Zusammensetzung der obersten Atomlagen einer Oberfl&auml;che ermittelt. Eine Tiefeninformation kann durch Absputtern der Schichten erhalten werden.    
      </p>

      <div id="Bildlinks" align="left"><img src="../grafiken/RKM.jpg" alt="" width="50%"></div>
      <p>Zudem ist die Dr. Laure Plasmatechnologie GmbH im Besitz eines Rasterkraftmikroskops. Mit Hilfe der Rasterkraftmikroskopie ist es m&ouml;glich, Oberfl&auml;chen auf ihre Struktur und Topographie hin zu untersuchen. 
    Dabei sind bei entsprechender Beschaffenheit der Oberfl&auml;che bez&uuml;glich ihrer H&auml;rte und Rauhigkeit Aufl&ouml;sungen bis in den Nanometerbereich m&ouml;glich. Es k&ouml;nnen elektrisch leitende aber auch nicht leitende Materialien untersucht werden. 
      </p>     

      
    </div>
    
    <p id="Fusszeile"> &copy; 2009 by .... email: <a href="[email protected]">[email protected]</a></p>

  </body>
</html>
Mein Problem ist, dass das RKM-Bild in den darüber liegenden Text hineinragt und unten aus dem Rahmen heraus.

Im Prinzip wollte ich links die Navi hinhaben, oben das Logo (130px groß) und rechts den weiteren Block. Innerhalb des Blocks "Inhalt" soll nun links Text stehen und rechts das Bild Esca darunter dann links das Bild RKM und recht der Text.

Ich hoffe es ist verständlich was ich will ^^ und dass ihr mir helfen könnt.
(Ich vermute mal es is ein ganz popeliger Anfängerfehler ;) )

Außerdem hab ich noch nicht ganz verstanden wozu der Css-Tag: clear:both; da ist. Kann mir das jemand näher erklären? Es stellt den textfluss wieder her. Was soll das heißen?


Mit freundlichem Gruße Murdoc *wink*
 
Ein Link zum ansehen wäre hilfreicher.

Wenn du diese Angaben für die Navi verwendest

Code: 
ul#Navigation    {
        font-size: 0.91em;
        float:left;
        width:14em;
        border-width:1px;
        border-color:#000000;
        border-style:solid;
        padding:10px;
        position:fixed;
        top:130px;
        }

Dann benötigt #Inhalt einen Linksabstand von
14em + 2px border + 20px padding = ???

Das kannst du dir jetzt ausrechnen, was schwierig ist, weil zwei unterschiedliche Einheiten verwendet werden. So 1em ~ 16px sind, würden also margin-left von 15em nicht ausreichen.
Am besten eine einheitliche einheit verwenden. Vermutlich heißt es auch deshalb "Einheit" :D

<div id="Bildlinks" align="left" >
Zum Vergrößern anklicken....
ist veraltet und auch überflüssig, weil #Bildlinks bereits gefloatet ist. Es könnte aber auch am clear: both; bei diesem ID hängen.

Ansonsten müsste man sich wie gesagt die komplette Seite mal im Zusammenhang ansehen.
 
Okay, dann versuch ich mal irgendwo Webspace aufzutreiben oO".
Ich vermute mal, dass ich die unfertige Version nicht auf den offiziellen Webspace hochladen darf.

Och ich verwende halt Zweiheiten ;)
Ja is klar, das werd ich dann auch mal umschreiben.

Als ich den Tag noch nicht mit
Code: 
align="left"
beschrieben hab hat es nicht so funktioniert wie es sollte ^^.
Darum hab ich auf dieses Veraltete zurück gegriffen, aber ja, auch das werde ich ändern.


edit: Soo Webspace gefunden und: aaaaaaahhh oO!
Also ich hab mal Testweise 3 Seiten hochgeladen, die Grafiken, die Hintergründe und die css. Da alles relativ addressiert wurde, sollte er es laden können.
Die Ordner "Homepage", "Grafiken" und "Hintergrund" sind auf der selben Ebene.

Nur lädt er jetzt keinerlei Grafiken.
Hier mal der Link zur Startseite. In der Navigationsleiste sollten die Seiten "Dienstleistungen" und "Unternehmen" verfügbar sein.
Der Text der da steht ist ein normaler Standarttext und wird noch geändert ^^
Achso Link: http://murdoc.cwsurf.de/TestForum/Homepage/startseite.html


So als Zusatz: Ich hab das ganze lokal mit dem FF, neueste Version getestet. Mit dem IE siehts eh besch..... aus. Aber das wollt ich später über eine Browserweiche lösen, wenns je mals im FF gut aussieht.
Danke nochmal

edit 3: nachdem ich endlich rausgefunden hab, wieso online keine Bilder erkennbar sind (verfluchte Groß-Kleinschreibung!). Könnt ihr endlich mein problem sehen.
 
Zuletzt bearbeitet:
Ungetestet:

Ersetze diese Zeilen (Doctype)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "./Test2_Css.html">

damit, sonst hat der IE Probleme mit dem CSS-Boxmodell:

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

Entferne wie bereits vorgeschlagen bei
#Bildlinks und
#Bildrechts
jeweils die Clear-Angabe.
 
Hey vielen Dank, das hilft schon ungemein.
Komischerweise hat der IE meine Navi-Leiste irgendwo horizontal verschoben, aber da die Position eh "fixed" sein soll, hab ich das schnell mit einem "left:5px;" in der Css-Datei berichtigt.

achja, wer nochmal in die neue .css schauen möchte, sie ist unter dem oberen Link erreichbar, wenn man statt "Startseite.html" "formate.css" eingibt. Aber das ist euch eh bekannt, denke ich.

Jetzt können wir endlich zum eigentlichen Problem ;)
Der IE macht bei mir unter Dienstleistungen ein Bild größer, als es überhaupt im Orginal ist, obwohl es ja mit
Code: 
width="50%"
eigentlich halb so groß sein sollte.
Im FF sprengen gewisse Grafiken den Rahmen, den ich um den div-Bereich mit der ID "Inhalt" versehen habe. Das bekomm ich auch noch nicht alleine hin ^^

edit: Der untere Rahmen um den div Bereich "Inhalt" soll also einfach noch so weit nach unten gehen, dass das Bild noch miteingeschlossen ist.
 
Du musst vor dem Schließen von #Inhalt noch clearen, z.B. so:
Code: 
Schichtsysteme behandelt. </p>
<div style="clear: both;"> </div>
     </div>

Das Bilderproblem kann ich nicht nachvollziehen.
Warum speicherst du die Bilder nicht gleich in der richtigen Größe ab und verwendest einen Pixelwert?
 
Wo wohnst du? Dass ich weiß, wo ich hinpilgern muss um zu huldigen.
Das mit dem clearen war genau das was gefehlt hatte, jedenfalls lokal, ich probiers gleich mal online.
Vielen Dank.

Die Seite ist je grade erst im Aufbau, da ist noch nicht klar, wie groß die Bilder sind, darum hab ich sie mal im Orginal noch abgespeichert und ändere dann noch viel mit width="50%". So hab ich doch mehr Flexibilität, oder?

Ich hoffe, das wird das letzte sein, was ihr von mir als Threadersteller hört, das würde bedeuten, dass ich keine Probleme mehr habe^^°.
Super Forum und nette Member.:smile:

Ich werd dann mal weiterschreiben/coden oder wie man auch immer sagt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben