Computerhilfen.de Logo
Forum
Tipps
News
Frage stellen
search
search

<div> Element kann nicht genau an Grafik angepasst werden

Ich habe ein Webseitenlayout mit <div> Elementen erstellt(ist noch in der Entwicklungsphase).
Im oberen Element habe ich eine (Banner)Grafik. Es bleibt aber ein kleiner Streifen unter
der Grafik zum Elementen Rand hin frei. margin, padding sind schon auf 0, trotzdem bbleibt
dieses freie Stück. Habe es bis jetzt Nur wegbekommen wenn ich die Grafik als Hintergund
für dieses Elemnt definiert habe.
Woran liegt das Problem?

Moderator informieren  

Antworten zu <div> Element kann nicht genau an Grafik angepasst werden:

Hallo. Es würde mir helfen, wenn du mir den Quellcode schicken würdest. Dann könnte ich es dir sagen. Alternativ kann man das aber auch über PHP lösen (Imagefunktion). Also, wenn es keine Umstände macht, einfach Code schicken und wir sehen weiter :) (Oder einen entsprechenden Weblink *gg*)

Moderator informieren  
Code: [Auswählen]
#banner {
  padding: 0;
  margin-left:0em;
  margin-top: 0em;
  margin-bottom: 0em;
  width: 100%;
  height: 150px;
}---
Code: [Auswählen]
<div id="banner">
<img src="bild.jpg" width="913" height="150" alt="">
</div>

So das ist das wesentliche. Reicht das oder brauchst du alles.
Moderator informieren  

So, ich habe mal eben versucht, das Problem zu lösen. Hatte bei Eingabe deines Codes genau das gleiche, wie abzusehen. Habe nun folgende Änderungen vorgenommen, ich hoffe, das Ergebnis entspricht deinen Vorstellungen, wenn nicht, schreib bitte nochmal genau, wie dein div angezeigt werden soll. :)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<style>
#banner {
   background-color:#00CC33;
   padding: 0px;
   width: 913px;
   height: 150px;
   clear: none;
   float: none;
   margin: 0px;
   text-decoration: none;
   left: auto;
   top: auto;
   right: auto;
   bottom: auto;
   clip: rect(auto,auto,auto,auto);
}---
</style>
<body>
<div id="banner">
<img src="bild.gif" width="913" height="150" alt=""></div>

</body>
</html>

Moderator informieren  

Sind alle CSS Angaben nötig, oder ist da eine (Schlüssel)Angabe bei die das Problem löst.
Möchte ich nur mal rein informativ wissen.

Moderator informieren  

Das ist eine lediglich optimale Lösung, die auch browserübergreifend funktioniert. Andernfalls einfach einige Angaben löschen. Eine Frage. die habe ich mir schon gestern gestellt. Wozu dient die Angabe "em"??? Sie wurde mehrere Male verwendet, allerdings kenn ich sie nicht. Technisch kannst du alle <div> Angaben auf die Pixelangaben reduzieren, die anderen Angaben, optimale Angaben, dienen zu späteren Verwendung (nach dem Prinzip: Sicher ist Sicher :) ).

Moderator informieren  
Zitat
Für die Ausgabe auf dem Bildschirm sind vor allem relative Einheiten wie em, ex, Prozentwerte oder Schlüsselworte geeignet, absolute Einheiten wie pt, cm usw. sollten Seite Drucklayouts vorbehalten sein.

bei dem zitat ging es zwar gerade um scriftgrößen aber allgemein für höhenangaben kann man das ja auch benutzen. Habs aber noch nie benutz deshalb kann ich da jetzt keine genaueren angaben zu machen

Gruß Jan
Moderator informieren  

In diesem Layout funktioniert es nicht. Auf jeden Fall nicht im IE. Die anderen Browser habe ich noch nicht ausprobiert(muss erstmal das Problem lösen).

Code: [Auswählen]
<head>
<style type="text/css">
body {
  padding: 0;
  margin: 0;
}

#banner {
   background-color:#00CC33;
   padding: 0px;
   width: 913px;
   height: 150px;
   clear: none;
   float: none;
   margin: 0px;
   text-decoration: none;
   left: auto;
   top: auto;
   right: auto;
   bottom: auto;
   clip: rect(auto,auto,auto,auto);
}

.main {
       position: relative;
       margin : auto;
       min-height : 300px;
       width : 58.1em;
       background-color : #ffffff;
}

#navi {
 float : left;
 width: 10em;
 height: 50em;

}

#navi ul{
padding: 0;
margin: 0em 0em 0em 0em;
        list-style-type: none;
}

#navi ul li {
  padding: 0em 0em 0em 3.3em;
}

#inhalt {
        float : left;
width: 40em;
height: 50em;
        margin : auto;
padding-left: 3em;
padding-right: 3em;
}

#info {
   float: right;
   width: 8em;
   height: 50em; 
}

div {border: 1px solid red} <!-- Zur besseren Übersicht -->
</style>
</head>
<body>
<div id="banner">
<img src="bild.jpg" width="913" height="150" alt="">
</div>
<div class="main">
<div id="navi">
<img src="bild2.jpg" width="141" height="75" alt="">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">usw</a></li>
  </ul>
</div>
<div id="inhalt">
<p>
Hier schreibe ich mal etwas Inhalt.
</p>
</div>
<div id="info">
Info
</div>
</div>
</body>
</html>
Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Zitat von: Sourcerer am 05.12.05, 09:35:44
Eine Frage. die habe ich mir schon gestern gestellt. Wozu dient die Angabe "em"??? Sie wurde mehrere Male verwendet, allerdings kenn ich sie nicht. Technisch kannst du alle <div> Angaben auf die Pixelangaben reduzieren, die anderen Angaben, optimale Angaben, dienen zu späteren Verwendung (nach dem Prinzip: Sicher ist Sicher :) ).

Also ich benutze immer "em", seit ich angefangen habe, nur noch mit CSS und nicht mehr mit Tabellen zu arbeiten. Ich weiß nicht, warum ich dazu umgestriegen bin, aber ich weiß inzwischen alle Werte aus dem Kopf, wie groß diese dargestellt werden.

0.6em ist das kleinste, was man gerade noch so lesen kann
0.8em z.B. ist kleiner Text (genauso wie ein <small> Tag)
1.0em ist Standardwert, also "normal"
1.8em ist eine optimale Größe für Überschriften (<h1)

Das größte was ich bisher benutzt habe ist 5em, das ist allerdings schon ziemlich bildschirmfüllend. Ich hab irgendwann mal gehört, mit em wäre die Seite gleich für verschiedene Schriftgrößen optimiert, weil em im Gegensatz zu Pixel nicht absolut definiert wird, sondern relativ zu einem Basiswert (1.0em). Weiß aber nicht ob das so genau stimmt.
Moderator informieren  

Dankeschön für Erklärung. Ich benutzer eigentlich nur Pixelangaben und das funktioniert auch ohne Probleme, aber dann kann ich mich ja mal mit diesen Angaben auseinandersetzen und gucken, was raus kommt. :)

Moderator informieren  
Zitat von: Sourcerer am 04.12.05, 19:50:15
Habe nun folgende Änderungen vorgenommen, ich hoffe, das Ergebnis entspricht deinen Vorstellungen, wenn nicht, schreib bitte nochmal genau, wie dein div angezeigt werden soll. :)

Das Ergebnis entspricht nicht ganz meinen Vorstellungen. Klappt mit meinem Layout nähmlich nicht.
Wie mein div angezeigt werden soll: siehe 3 Beiträge weiter oben.
Moderator informieren  

Achso ;) Jetzt weiß ich auch, was du haben willst. Ich habe für solche Probleme immer auf ein Turtorial zurückgegriffen. Es wurde mit PHP umgesetzt, veranschaulicht aber sehr gut die Nutzung von <div>. Die Adresse: http://tut.php-q.net/. Siehe 3-Spalten-Layout. In deinem Fall einfach nur modifizieren :) (und, PHP entfernen).

Moderator informieren  

Ich kenne das Tut. Habe es selber gelesen.

Das ist aber eine sehr vereinfachte Version von dem was ich habe, und nicht wirklich Designstabil.

Moderator informieren  

Seiten: [1]
« HTML-SpielHTML Spiel selber machen »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

koerschgen2001 Gast

Datum: 04.12.05, 18:42:08

2482x gelesen, 12 Antworten.

Seiten: [1]

0 und 1 Gast betrachten dieses Thema.
Fremdwörter? Erklärungen im Lexikon!
Grundstrich
Der Begriff des Grundstrichs im Bereich der Typografie, bezeichnet den senkrechten Strich der Buchstaben. Bei Schriftarten mit variabler Strichstärke, wie zum Beispi...

Haarstrich
Der Begriff Haarstrich stammt aus dem Bereich der Typographie. Bei Schriften, wie zum Beispiel der Antiquaschrift mit unterschiedlichen Strichstärken, wird zwischen ...

Bitmap Grafik
Bei dem Begriff Bitmap Grafik handelt es sich um eine punkt-, beziehungsweise pixelweise Form der Speicherung von Bildern und Grafiken. Bei schwarz-weiß Grafiken be...


Mehr zu <div> Element kann nicht genau an Grafik angepasst werden

Ansichtseinstellungen werden nicht gespeichert

Normalerweise lässt Windows den Benutzer das Aussehen der e...

Mehr Performance durch weniger Grafik-Effekte

Durch die Reduzierung von optischen Effekten steigt die Rech...

FacebookFacebook stellt die Email-Adressen um - so kann man das ändern

Facebook hat seit heute die Email-Adressen in den Profilen geändert: Während früher die eigene Em...

Ähnliche Fragen: