html bild link maps funktion?

5 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

grusselig ,

also den rahmen bekommste weg mit border="0" im img tag.

aber bei deinem html verstehe ich nicht das div im div ist , ich dachte die pfeile sollen nebeneinader oder übereinander sein .

Das div habe ich da um den schrift zug im pfeil zu platzieren.
Ja die pfeile solllen untereinander sein.
border = 0 hat nicht funktioniert, das habe ich auch schon wo gelesen. Aber ich habe ja keine border die mich da stört. Die bilddatei ist einfach in einer box und ich möchte den link nur dahin legen wo auch wirklich das bild ist und nicht drum herrum

0
@chemick
<a hrefwww.google.dede">

das kann nicht funktionieren , denk mal drüber nach , ergo funktioniert der rest auch nicht wie er soll . und was du mit box meinst habe ich keine ahnung , wenn du ein rahmen meinst dann ist ds border=0 . aber erstmal solltest du dein html mal korrekt schreiben . such dir mal ein anständigen editor .

0
@RakonDark

Hi da habe ich mich als ich es hier abgetippt habe vertippt. schau ich habe einen screen shot eingefügt wie es da steht.

0

habe mal noch nen screenshot angehangen

0

So soll das am ende quasie aussehen, halt mit anderem font und anderen pfeilen typen.

 - (Computer, Technik, Technologie)

Hier noch ein beispiel. Wenn ich nun den link auf den Gelben pfeil lege dann kann ich den link auch klicken wenn ich oberhalb oder unterhalb auf den Pfeil klicke.

 - (Computer, Technik, Technologie)

wird ja noch schlimmer zweimal die ID "GelberPfeilBild" ... du weisst schon das ID nur einmal vorkommen darf .

lern einfach die grundlagen , schreib ordentliches HTML .

trotzdem der blaue rahmen ums bild kommt vom a tag weil es als link umrahmt wird , das bekommt man mit border 0 weg .

und dann gehört in den a tag nicht auch noch das div mit dem impressum.

sorry aber mach doch einfach mal HTML und nicht wirres zeug.

0
@RakonDark

Ja das weiss ich schon... Ich lerne gerade html und stehe ja vor nem Problem was ich nicht verstehe und die datei ist gerade sehr messi ich weiss.
Aber ich möchte doch das man wenn man auf den text klickt ebenfalls den link aktiviert. Wenn ich es als div vor liegen habe war es für mich leichter es auszurichten... Ja ich bin Anfänger es tut mir leid.

0
@RakonDark

Ich habe nun den code nochmal aufgeräumt. Ich habe halt immer noch keine Ahnung wie das mit dem link gehen sollte. Aber danke für deine Hilfe.
Ich denke ich werde da ja auch eine span nehmen können anstatt ein p... sind ja beides inline elemente oder?

ps. ich habe das e bei google.dee nun schon zweimla weg gemacht aber wenn ich auf senden drücke kommt es immer wieder.


<map name="map">
        <area shape="poly" coords="0, 19, 1850, 20, 1833, 2, 1867, 1, 1902, 34, 1867, 73, 1834, 73, 1850, 54, 0, 57" />
    </map>
    <div id = "navdiv">

      <a href=https://www.google.dee"  usemap="#map"/>
        <img src="test pfeil100.png" alt="Das ist ein Teil des Menüs" id="BlauerPfeilBild" usemap="#map"/>
        <span id = "kontakt"><b>Kontakt</b></span>
      </a>
    </div>


0
@chemick

am besten du arbeitest weniger mit ID sondern mit class . mit dem span musst du gucken ob das das line-height animmt .

aber dein usemap ist völliger unsinn , nutz das am besten nie den funktioniert nur mittelprächtig und ist für andere zwecke damals gedacht worden, damit nämlich die koordinaten an das php gesendet werden und nicht damit man links auf ein bild packt ;)

1
@RakonDark

Ok. Gut zu wissen. Ich habe die lösung ja auch ur aus nem Forum herrausgelesen und ich dachte ich probiere es mal. Fällt dir denn ein weg ein wie ich das machen könnte?

0
@chemick

ich weiss ja nicht mal was du haben willst . mit beschreibung wird das nix , male ein Bild . Bilder sgaen mehr als 1000 Worte.

0
@RakonDark

Habe ich dir oben hingesetzt ^^ Sorry für das ganze hin und her.

0

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

LG

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zur Frage

Bild im HTML/CSS verrutscht seitlich?

Hallo,

ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.

Da sich die Seitengröße / das Bildschirm-Seitenverhältnis auch mal ändern kann, soll das "Dunkle" auch hinter dem Bild sein.

Nun wollte ich den Farbverlauf mit einem box-shadow abbilden und der ist am Rand eben um die Box und nicht gerade runter.

Also habe ich mir diesen Code hier ausgedacht:

<html>
<head>
<style>


#example {
    box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
    /*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
    margin-left: -10vw;
    margin-right: -10vw;
    margin-top: 0px;
    margin-bottom: 6vh;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 0px;
    padding-bottom: 0px;
    boarder-left: 0px;
    boarder-right: 0px;
    boarder-top: 0px;
    boarder-bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 2vh;
    left: 0px;
}
</style>
</head>
<body>
<div id="example">
    <img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>

</body>

Den kann man praktisch unter https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow2 einsetzen und ausprobieren.

Ich hab also den Hintergrund, nebst Farbverlauf, 10% in der Breite erweitert und meinte mit dem Padding dann das Bild in die Mitte zu bekommen. Aber das klappt nicht, es landet zu weit rechts.

Woran liegt das und wie kann ich das vermeiden?

(Firefox Dev-Edition 66.0b1 (64-bit))

...zur Frage

Dropdown Menu Buttons nebeneinander?

Ich habe für meine Website ein Dropdown Menu gemacht,dass aus einem Button besteht,der,wenn man draufklickt eine neue Liste unterhalb des Buttons öffnet,die Links enthält.Um eine Navigtionsleiste zu erstellen,die übersichtlich ist,will ich mehrere Buttons nebeneinander positionieren.Das hat soweit auch geklappt und das erste Menü öffnet sich perfekt,wenn ich aber den anderen Button anklicke,öffnet sich nur das Menü des ersten Buttons.

Hier der Code,bestehend aus html,css und JavaScript (die entsprechende Stellen) :

HTML

<div class="dropdown">    <button onclick="myFunction()" class="dropbtn">Charaktere</button>    <div id="myDropdown" class="dropdown-content">      <a href="#">1</a>      <a href="#">2</a>      <a href="#">3</a>  </div> </div> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Charaktere</button> <div id="myDropdown" class="dropdown-content">  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a> </div>   </div>

CSS

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

JavaScript

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

...zur Frage

Wie schaffe ich es, dass das "Nicht-Sicher" in Chrome weg geht?

Wie schaffe ich es, dass das "Nicht-Sicher" in Chrome weg geht und meine Scripte direkt vollständig geladen werden?

Live-Ansicht: www._______.com

Ihr müsst für die Entwickler Ansicht STRG + SHIFT + I drücken, da ich das Menü deaktiviert habe.

Aktueller Code:

 <html lang="en" oncontextmenu="return false;">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <link href="style.css" type="text/css" rel="stylesheet">
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="js/jquery.cookie.js"></script>  <script type="text/javascript">  $(document).ready(function() {  $('body header a').click( function() {   var text = $(this).text();   $("#main").load(text + ".html");  }); });  </script>
<!-- Das ist das aktuelle Script (für Gutefrage.net und Foren)-->     <script type="text/javascript"> $(document).ready(function(){ $('#close1').click(function() {  $('#warn1').slideUp(); }); }); </script>
  <title>TheLegalGroup</title> </head>
 <body>  <header>   <a href="#home" class="button" id="m_home">Home</a>   <a href="#apply" class="button" id="m_apply">Apply</a>   <a href="#map" class="button" id="m_map">Map</a>   <a href="#news" class="button" id="m_news">News</a> </header>  <div id="warn1">   <a id="close1">×</a>   <p>This website is in beta status!</p>
  </div>  <div id="warn2">
  </div>  <div id="main">   <a id="share" href="https://api.whatsapp.com/send?text=https://thelegalgroup.netlify.com/">...</a>
   <p>This is an example</p>  </div>  </body>
</html>
...zur Frage

html / css navbar und dropdown menü?

Hey liebe Community,

ich habe ein kleines html Problem :)

Ich möchte gerne auf einer Website ein Dropdown Menü in der Navbar machen. Hat alles geklappt, bis auf eine sache und zwar wenn ich über "Social Media" fahre, dann werden "Twitter" und "YouTube" zwar richtig angezeigt aber der navbar hintergrund wird bei denen auch noch angezeigt... hat wer eine Lösung für dieses kleine Problemchen? :)

Hier ist das CSS Dokument:

nav {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #383638;
  overflow: hidden;
  list-style-type: none;
  display: block;
}
li {
  float: left;
  display: block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #008a8a;
}
.active {
  background-color: #025c6c;
}
#socialmedia_dropdown {
  display: none;
}
.nav_right {
  float: right;
}

Hier ist das html Dokument:

<!DOCTYPE html>
<!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->
<html lang="de">
  <head>
    <title>
      Projekt-Z3ro.de
    </title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <script href="scripts.js"></script>
  </head>
  <body>
    <nav>
      <li><a href="#" class="active">Test</a></li>
        <span><li id="dropdown">
          <a id="socialmedia" onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Social Media</a>
          <div id="socialmedia_dropdown">
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Twitter</a>
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">YouTube</a>
          </div></li></span>
          <li><a href="#">Impressum</a></li>
          <li class="nav_right"><a href="#" class="register">Registrieren</a></li>
          <li class="nav_right"><a href="#" class="login">Einloggen</a></li>
    </nav>

    <script>     function socialmedia() {       document.getElementById("socialmedia_dropdown").style.display = "block";     }     function socialmediaout() {       document.getElementById("socialmedia_dropdown").style.display = "none";     }     </script> <!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->   </body> </html>

...zur Frage

Was möchtest Du wissen?