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

Grafik randlos einfügen

Status
Für weitere Antworten geschlossen.

nickles

Neues Mitglied
Hallo ihr lieben,

ich habe folgende Frage und benötige wenn möglich einen Lösungsweg:

Da ich ein Anfänger in HTML bin und mich dennoch ins HTML stürze (zugegeben...der Rechner war kurz davor aus dem Fenster geworfen zu werden *grrrrrrrr) .
Hier nun meine Problematik:
Mein Firmenlogo ist bereits in der oberen linken Ecke (was gut ist, ich es allerdings nicht ganz so oben an den Rand gequetscht haben möchte).
Nun möchte ich eine Grafik (ein grauer Balken) über die komplette Breite des Bildschirms einfügen. Also ohne einen Rand. Sie soll außerdem nur 50% der Originalhöhe haben und natürlich wiederholt werden (da sie doch nicht lang genug wäre).
Ich hoffe ihr habt verstanden was ich meine und könnt mir helfen.....bevor ich diesen Rechner anzünde und das komplette Internet in Brand setze
1f609.png

Vielen Dank schonmal
 
Werbung:
Bei dem Logo kann ich dir helfen und zwar musst du z.B.: margin:10px; eingeben!
Dies bewirkt, dass der Abstand zum Fensterrand (von deinem Explorer) 10px entfernt ist!
 
Werbung:
Ohne Link zu Seite.. oder zumindest den HTML Quellcode mit dem zugehörigen CSS.. ist eine zielführende Hilfe nicht möglich.
 
Klar gerne:
HTML Code:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein Titel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="html/kaskade.css">
</head>
<body>
<div id="img-logofinal">
<img src="images/logofinal.png" alt="Firmenlogo"></div>
<div id="logo-new">
<img src="images/graphic-solo.jpg" alt="Hintergrundbild"></div>
</body>
</html>

CSS:
#img-logofinal{ width: 100%;
height: auto;
position: absolute;
top: 10px;
left: 10px;
}
}

#logo-new { position: absolute;
max-width: 100%;
height: 25%;
margin: 0px;
padding: 0px;
left: 0px;
}

Und es sieht richtig nach Müll aus. Könnte kotzen.
Ich möchte unter dem Firmenlogo (das oben links in der Ecke steht) einen durchgehenden Balken aus der Grafik (graphic-solo) erstellen. Allerdings sollte diese nicht verzerrt sein wie auf dem Bild:
http://www.bilder-upload.eu/show.php?file=68ff31-1521045774.png
 
Könntest du bitte auch mal die beiden Grafiken (logofinal.png und graphic-solo.jpg) hier hochladen?
Aus dem angehängten Screenshot ist leider nicht wirklich ersichtlich, was dein Problem ist.
 
Werbung:
verstehe auch nicht warum erden Balken nicht mit css macht.Aber er antwortet ja nicht mehr.
EDIT
Sorry hast doch geantwortet. Aber das kriegt man auch mit css hin zumindest fast.Warum machst du das Bild nicht gleich so gross wie du es brauchst?.

Aber lad die Bilder mal hoch damit man die Bilder richtig sieht und die grösse und soweiter kennt



Auf dem Bild ist nur eine schwarze Fläche zu sehen, keine Grafik (abgesehen vom Logo).
Wenn sich die Grafik wiederholen soll, ist es eine gute Wahl, sie als Hintergrundgrafik anzulegen.
Verzichte auf absolute Positionierung, dann vermeidest Du das Problem , dass ein Element ein anderes überdeckt.
Das Bild ist richtig ,das soll so sein der schwarze (graue ) Balken. Hatte mich erst auch verwundert.

Das soll so aussehn
https://codepen.io/basti1012/pen/zWqoZj ( Nur als Optik ,kein fertiger Code)
Nur mit den richtigen Fotos und als Hintergrundsbild was sich dann anpasst bzw wiederholt
 
Zuletzt bearbeitet:
Das ist ja das "schöne" an Crosspostings, da beschäftigen sich ja gleich mehrere Leute mit einem Problem. Aber warum man in unterschiedlichen Foren darauf antwortet, wird mir ein Rätsel bleiben. Es sei denn, man ist wild auf viele Beiträge.
 
Auf dem Bild ist nur eine schwarze Fläche zu sehen, keine Grafik (abgesehen vom Logo).
Wenn sich die Grafik wiederholen soll, ist es eine gute Wahl, sie als Hintergrundgrafik anzulegen.
Verzichte auf absolute Positionierung, dann vermeidest Du das Problem , dass ein Element ein anderes überdeckt.

Erst einmal recht herzlichen Dank für die Antworten. Ein klein wenig schlauer bin ich jetzt schon ;)
Vor allem mit der absoluten Positionierung. Das überlagert also das andere Bild.

Könntest du bitte auch mal die beiden Grafiken (logofinal.png und graphic-solo.jpg) hier hochladen?
Aus dem angehängten Screenshot ist leider nicht wirklich ersichtlich, was dein Problem ist.

Selbstverständlich. Lade die "Balkendatei hoch"
Die Grafik ist relativ klein und bei dem auseinanderdehnen wird die Struktur darin verändert. Und das möchte ich nicht. Die Kleinigkeiten sind es doch die es ausmachen ;)
Außerdem möchte ich verstehen wie so etwas realisiert werden könnte. Also diese kleine Datei an einen bestimmten Ort (in meinem Fall unterhalb des Logos) und dann die Höhe verändern und es in die Breite wiederholen (das es den gesamten Bildschirm in der Breite bedeckt)

Das ist ja das "schöne" an Crosspostings, da beschäftigen sich ja gleich mehrere Leute mit einem Problem. Aber warum man in unterschiedlichen Foren darauf antwortet, wird mir ein Rätsel bleiben. Es sei denn, man ist wild auf viele Beiträge.

Und wie kann mir diese Antwort jetzt weiterhelfen? Ich persönlich finde überhaupt nichts schlimmes dran, wenn Leute sich an ein Thema hilfreich beteiligen. Egal wo und egal wie oft.
Ich würde niemanden kritisieren der Hilfe sucht und erst recht keinen Helfer. Du kannst mich jederzeit bei Buchhaltungsfragen anschreiben. Ich helfe sehr gern. Dann brauchst du auch keinen Steuerberater mehr ;)
Aber falls du eine hilfreiche Antwort auf mein hoffentlich kleines Problem hast, wäre ich sehr dankbar.
Nur bitte keine unnötigen Kommentare.
Vielen Dank nochmals an alle.

P.S. basti1012, hast was gut bei mir
 

Anhänge

  • graphic-solo.jpg
    graphic-solo.jpg
    14,9 KB · Aufrufe: 4
Werbung:
In einem anderen Forum wird häufig dies zum Thema Crossposting geschrieben:
Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.
Vielleicht verstehst du jetzt, dass man Crosspostings lassen sollte.
 
Das ist ja das "schöne" an Crosspostings, da beschäftigen sich ja gleich mehrere Leute mit einem Problem. Aber warum man in unterschiedlichen Foren darauf antwortet, wird mir ein Rätsel bleiben. Es sei denn, man ist wild auf viele Beiträge.

Wenn du ein Crossposting unterstellst, dann poste den Link dazu und ich schließe den Thread.
 
Werbung:
versuche es mal so:
Habe zum testen den CSS Teil in den Quellcode <style></style> geschrieben.
HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein Titel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<!-- <link rel="stylesheet" href="html/kaskade.css"> -->
<style>
body, html {
  margin: 0px;
  padding: 0px;
}

#img-logofinal {
   width: 100%;
}

#img-logofinal img {
   margin: 10px 0px 0px 10px;    /*margin - oben rechts unten links; so einstellen, dass es passt*/
}

#logo-new {
   width: 100%;
   height: 25vh;  /*Höhe so einstellen, dass es passt! vh -> relative zur Höhe des Anzeigegerätes (viewport)*/
   background-image: url('images/graphic-solo.jpg');

}
</style>

</head>
<body>
<div id="img-logofinal">
  <img src="images/logofinal.png" alt="Firmenlogo">
</div>
<div id="logo-new">

<!-- <img src="images/graphic-solo.jpg" alt="Hintergrundbild">   -->

</div>
</body>
</html>
 
Und wie kann mir diese Antwort jetzt weiterhelfen? Ich persönlich finde überhaupt nichts schlimmes dran, wenn Leute sich an ein Thema hilfreich beteiligen. Egal wo und egal wie oft.

Vielleicht weißt du es nicht, aber Fragen zur Programmierung gleichzeitig in mehreren Foren zu stellen, zählt grundsätzlich als Unhöflichkeit.

Weiterhelfen kann dir diese Antwort insofern, als dass bei zukünftiger Einhaltung der Netiquette dein Thread nicht geschlossen wird.

/closed.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben