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

Width im CSS wird ignoriert

M

Murdoc

Neues Mitglied
So liebe HTML Cracks, ich hab wieder mal ein Problem.
Eigentlich ist es erneut total simpel, vermute ich:

Ich möchte ein Logo mit dem oben links mit definierter Größe einbinden. Diese Größe möchte ich mit einer px Angabe ins Stylesheet definieren.
Sieht wie folgt aus:
Code: 
div#Logo    {
        padding:0px;
        border-color:black;
        border-style:hidden;
        border-width:1px;
        width:697px;
        height:101px;
        }
(Der Rahmen wurde versteckt, dass ich ihn ein und ausblenden kann, wenn ich sehen will, wie weit der div-Bereich reicht.)

Eingebunden ins HTML ist es:

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

<html>
  <head>
    <title> Wegbeschreibung Dr.Laure-Plasma</title>    
    <link rel="stylesheet" type="text/css" href="./formate.css">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
    </style>
  </head>


  <body>
    <div id="Logo">
      <img src="../grafiken/logo/logo_trans.gif" alt=Logo.jpg> 
        <!-- 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="./fotogalerie.html">Fotogalerie</a></li>
      <li><a href="./kontakt.html">Kontakt</a></li>
      <li><a href="./impressum.html">Impressum</a></li>
    </ul>


    <div id="Inhalt">
      <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Dr+Laure&amp;sll=48.608398,9.133759&amp;sspn=0.259239,0.727158&amp;ie=UTF8&amp;ll=48.685578,9.212379&amp;spn=0.016889,0.045447&amp;t=h&amp;z=14&amp;iwloc=A&amp;cid=8085795123635163549&amp;output=embed"></iframe><br><small><a href="http://maps.google.de/maps?f=q&amp;source=embed&amp;hl=de&amp;geocode=&amp;q=Dr+Laure&amp;sll=48.608398,9.133759&amp;sspn=0.259239,0.727158&amp;ie=UTF8&amp;ll=48.685578,9.212379&amp;spn=0.016889,0.045447&amp;t=h&amp;z=14&amp;iwloc=A&amp;cid=8085795123635163549" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small>
    
    </div>
    <p id="Fusszeile"> &copy; 2009 by Sebastian email: <a href="mailto:XXXX">XXXXX</a></p>

  </body>
</html>
Also das Problem ist, dass das Logo in Orginalgröße in der HTML ist.
Das Kommentar in der HTML ist nur für mich, weil ich sonst lieber in jpg abspeicher :)

Ich vermute ich hab jetzt einen Fehler in den Meta-Tags...

Achja, zuerst hatte ich das Logo direkt im .html zurechtdefiniert mit width="" und height="", da meinte aber der Validator, dass ich nur Ganzzahlige Zahlen benutzen darf ( was ich ja eigentlich habe oO).

Vielleicht kann mir ja jemand von euch sagen, was ich falsch gemacht habe. Bei weiteren Fragen, einfach fragen^^.

Ach online kann ich sie euch gerade nicht zeigen, weil mein Webspaceserver down ist -.-"


EDIT: Ich hab mir die Frage zur Hälfte schon selber beantwortet: Wenn ich width und height im HTML beim img-Tag verwende, dann darf keine px dahinter stehen, dann wäre es valides HTML.
bsp:
Code: 
<img src="../grafiken/logo/logo_trans.gif" alt=Logo.jpg width="697" height="101">
Nur will ich das jetzt schon übers CSS machen, wenns geht. Mein Ehrgeiz ist gepackt
 
Zuletzt bearbeitet:
Beides widerspricht sich nicht und ist korrekt.
Im Image-Tag darfst du die Angaben ohne Einheit verwenden.
Da sich ein DIV in seiner Breite und Höhe seinem Inhalt anpasst, ist es in diesem konkreten Fall unnötig, per CSS eine Breite und Höhe zu definieren. Die ergibt sich automatisch über das Image.
Du brauchst auch keinen gesonderten DIV für diesen Fall, sondern kannst die CSS-angaben direkt dem Image mit
Code: 
<img id="Logo" ...>
zuweisen.
Wenn du keinen Rahmen brauchst, dann ist #Logo ohnehin überflüssig.
 
Ist es nicht veraltet oder "decapdingbums", wenn man die Größe eines image über HTML definiert?

Eigentlich hab ich auch #logo eingeführt, dass ich eben nur einmal die Größe definieren muss und nicht für jede Seite einzelner. Ich dachte über das CSS das zu definieren ist einfach die elegantere Weise.

Aber danke jedenfalls für deine sehr schnelle Antwort :)
 
Beim Imgage-Tag geht das noch in Ordnung.
Du könntest aber noch eleganter folgendes machen:
Lass den img-Tag weg und weise dem #Logo das Bild als Hintergrundgrafik zu.
Vorteil: Wenn du es mal austauschen willst, dann musst du lediglich die CSS-Datei einmal an dieser Stelle ändern und brauchst nicht bei jeder Seite eine neue Grafik einzufügen.
 
Genau so, wollt ich das machen, dachte nur nicht daran, es als Hintergrund zu verwenden. Das Problem jetzt aber dass ich es über die .css nicht auf die Größe bekomme die ich will, obwohl es so drinsteht:
Code: 
div#Logo    {
        width:697px;
        height:101px;
        margin:0px;
        padding:0px;
        border-color:black;
        border-style:hidden;
        border-width:1px;
        background-image:url(../grafiken/logo/logo_trans.gif);
        }
Im HTML sieht es jetzt schlichteweg nur noch so aus: (der betreffende Bereich)
HTML: 
  <body>
    <div id="Logo">
      
        <!-- Muss .gif sein, sonst keine Transparenz!-->
    </div>
Da mein Webserver immernoch down ist, hab ich dir hier mal ein (schlechten) Screenshot angehängt, den icha uf die schnelle gemacht hab. ^^°
Ich hoffe du erkennst was ich meine.http://img11.imageshack.us/img11/9056/fehlerg.png (346KB)
Wenn ich mit dem hier genannten Code arbeite, dann ignoriert der hintergrund die Angaben und ist nicht die genannten 697px*101px groß sondern die Orginalgröße.

Und ich vermute ich hab mir selber schon die Antwort gegeben:
Ich werde mit einem Bildbearbeitungsprogramm das Logo genau eben 697px*101px großmachen, da der Hintergrund über den div-Bereich hinausgeht.

Aber: gibt es keine Möglichkeit, mit Stylesheet das Hintergrundbild, des div-bereichs "Logo", auf eine Größe von 697px*101px zu definieren?

(Das war dann meine letzte Frage für heute ^.^morgen hab ich auch schon eine: Der IE macht mit meinen div-Bereichen was er will....)
 
Zuletzt bearbeitet:
background-size ist noch kein offizieller Standard.
In diesem Fall musst du die Größe der Grafik entsprechend der des Div anpassen.
 
Ich hab die Logo.gif jetzt bearbeitet und direkt in der richtigen Größe eingefügt. Find ich zwar unelegant aber naja...

Ich hab jetzt noch ne Frage, weils im IE anderst angezeigt wird, als im FF. Ich vermute, dass es das Box-Modell-Problem ist, ich weiß es aber nicht. Dazu hab ich die Seite schon hochgeladen. Soll ich die genaue Frage hier im Thread stellen oder nochmal einen neuen erstellen? (Ich will hier nicht Threadspammen)
 
Startseite Dr.Laure-Plasma
Das ist meine Homepage, es wird nix mehr geändert, außer inhaltlicher Text.
Ich bin bisher zufrieden, außer, dass der verfluchte Internet Explorer (des Todes)*grrr* es nicht so darstellt, wie er es soll. Bzw. wie ich es will :D

Zum einen schiebt sich die Navigationsleiste nach oben und zieht sich außeinander, auf den Seiten: Anlagen, Technologie, Produkte, Links, Kontakte und Impressum.

Auf der Startseite und Unternehmen vergößter sich der Rahmen von dem div-Bereich "inhalt" so weit nach links, dass er die Navigationsleiste auch umschließt.

Mein externes Stylesheet ist unter
http://murdoc.cwsurf.de/Homepage/formate.css zu erreichen.
(Dort hab ich öfters noch eine versteckte border, dass ich schauen kann, wie weit welcher Bereich reicht, sprich ich kann sie schnell mal einblenden und wieder verstecken).

Ich habs mit Browsershot.org getestet und wirklich nur der IE (und Dillo, aber von dem hab ich noch nie was gehört) hat Probleme mit der Darstellung.

Sind das Fehler die auf das defekte Box-Modell vom IE hinweißen? Gibt es Lösungsvorschläge oder Ansätze?

Viele Grüße

edit: Achja und ab und zu ist die Navigation nicht "{position:fixed}", manchmal schon.

Edit2: So also die Navi is edlich gefixt. Mein einzigstes Problem: Ich hab irgendwo vergessen zu clearen. Kann das bitte jemand nachschaun? Auf den Seiten: Startseite, Anlagen, Unternehmen und Links, also überall wo ich das CSS ID="Bildrechts verwendet habe, außer bei Dienstleistungen.

Edit3: Ich vermute ich weiß das Problem jetzt, ich hab mit clear:both falsch gecleart! Ich hätte nur clear:left/right benutzen sollen....
Ich kanns aber erst morgen ausprobiere
 
Zuletzt bearbeitet:
Ich kann den Fehler leider nicht lokalisieren.
Aufgefallen ist mir folgendes:
Mit dieser Definition hinterlegst du für jedes Element 5px margin:
Code: 
* 		{
		margin:5px;
		padding:0px;
		}
Das ist unüblich.
Setze margin besser auf 0 und definiere ihn dann für body mit 5px. Ob das aber hilft, vermag ich nicht zu beurteilen.
 
Hat leider nichts gebracht :/

Also eingegrenzt habe ich das Problem, indem ich weiß, dass es mit dem floaten und clearen zu tun hat.

Ich weiß nicht, ob ich eine id="float:X" mit class="clear:X" clearen kann.
Muss ich gerade nachlesen.
Ansonsten hatte ich "clear:both" genommen, auch wenn ich nur einseitig gefloatet habe. Ob das korrekt ist weiß ich auch nicht.

Jedenfalls tut alles im Firefox, nur nicht im IE ( ob nur 7 abwärts weiß ich nicht, da ich im moment kein Zugriff auf den 8er habe).

Im IE reicht die border vom div-Bereich "Inhalt" über die gesamte Bildschirmbreite. Der Text der im "Inhalt" steht (ist das der content?) fängt wie ich will rechts neben der Navigationsleiste an.

edit:
So, mit IE8 sollte das ganze gegessen sein!(Ich hasse den IE, ich hasse den IE, ich....)
 
Zuletzt bearbeitet:
Uff, da hast du mir aber ein Brocken hingeknallt. Zum Glück hab ich den ganzen Tag Zeit es zu lesen ^.^°

Ich hoff, ich kapiers auch xD (als ich grad reingeschaut hab hab ich relativ wenig kapiert gehabt)

:arrow:bin lesen ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben