Bootstrap Hyperlink?

Möchte gerne web.html öffnen. Wenn ich eine https Adresse einfüge, geht es problemlos.

Was mache ich falsch?

2 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

31.12.2022, 12:43

Liegt die web.html lokal auf deinem Computer oder wird diese bereits auf einem Webserver gehostet? In beiden Fällen solltest du die Verlinkung überprüfen. Verwende relative Pfade für eigene, absolute Pfade für externe Seiten.

Ein relativer Pfad steht immer in Relation zum Wurzelverzeichnis (Root). Wenn dein Projektordner MeineWebsite (root) heißt und sich sämtliche HTML-Dokumente in diesem Verzeichnis befinden, können relative Verzweigungen erstellt werden.

Verzeichnisstruktur:

[root]
  |-- index.html
  |-- page.html
  |
  |-[subfolder]
         |
         |-- subpage.html

HTML:

<!-- index.html -->
<a href="page.html">page</a>
<a href="subfolder/subpage.html">subpage</a>

<!-- subpage.html -->
<a href="../index.html">index</a>
<a href="../page.html">page</a>

Wenn die Seiten nicht in Relation stehen, weil sie z.B. auf einem anderen Laufwerk (einem anderen Server) abgelegt sind, werden absolute Pfade angeben. Als Beispiel dient wieder die oben genannte index.html, jedoch mit einem absoluten Zweig.

HTML:

<!-- index.html -->
<a href="https://www.example.com">example</a>
<a href="https://www.example.com/page-1.html">example - page 1</a>

IDH Köln - Relative vs. Absolute Pfade

Nachtrag:

man muss die link und script Elemente, die die Verlinkung zu Bootstrap beinhalten, mit zu dem Code von web.html packen.

Wenn das Bootstrap Framework eingebunden werden soll, kann und sollte dies innerhalb des <head> Elements geschehen. Alles nötige wird auch in der offiziellen Dokumentation inkl. Code-Snippets beschrieben.

Get started with Bootstrap - Introduction

LG medmonk

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

JoboJobo604

Fragesteller

31.12.2022, 13:02

Hallo,

ist localhost. Habe vergessen, die Bootstrap-Dateien auch in die subhtmlpage zu schreiben.

Grüße

1337j4x

31.12.2022, 12:22

Ich kenne den Ordnerpfad nicht. Vielleicht überprüfst du den nochmal. Musst du vielleicht einen Ordner zurück, vorher?

href="../cdn/html/web.html"

oder zwei?

href="../../cdn/html/web.html"

Hast du vielleicht oben einen Base-Link drin, der dir den Pfad verfälscht?

JoboJobo604

Fragesteller

31.12.2022, 12:42

Guten Tag,

man muss die link und script Elemente, die die Verlinkung zu Bootstrap beinhalten, mit zu dem Code von web.html packen.

Ähnliche Fragen

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}

...zur Frage

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zur Frage

Html, Button mit href?

Hallo, wenn ich eine Button mit einem Youtube Link erstelle, wird der link auf geöffnet, wenn ich neben den Button klicke. Wie kann ich die href wirklich nur auf den Button legen, so dass der Link nur geöffnet wird, wenn ich auch nur auf den Button drücke? Bisher habe ich das so gemacht:

<button class="Button_Youtube"> Test Knopf </button> </a>

Dann ist wird der Link aber viel zu groß, so dass ich auch, wenn ich ich über/neben/unter den Button drücke geöffnet wird.

...zur Frage

Automatische active-Klasse in der Navigation?

Moin,

ich habe bei mir eine Navigation, die wie folgt aussieht:

<nav id="navigation">
  <ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
  </ul>
</nav>

Ich möchte dort gerne eine active-Klasse einfügen, sodass es immer automatisch auf der aktuellen Seite der Hintergrund des Menüpunktes eine andere Farbe erhält. Ich benutze jQuery.

Kann mir hier jemand weiterhelfen, wie man so etwas hinbekommt?

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

CSS Problem mit Firefox?

Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.

Hier ein ganz einfacher Testcase:

HTML

<nav>
 <span class="menu" tabindex="-1">
  Menü aufrufen
  <ul>
   <li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
   <li><a href="https://www.google.com/" target="_blank">Google</a></li>
  </ul>
 </span>
</nav>

CSS

.menu {
 position: relative;
 border: 1px solid silver;
 border-radius: 5px;
 padding: 4px 8px;
}

.menu:focus {
 background-color: coral;
}

.menu ul {
 display: none;
}

.menu:focus ul {
 position: absolute;
 display: block;
}

Link

https://jsfiddle.net/Babelfisch/bck65qeo/6/

Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.

...zur Frage

Bootstrap: CSS Styling nur mit!important möglich?

Hallo,

warum kann ich Eigenschaften am CSS Framework nur mit !important verändern?

Dieser Code funktioniert ohne !important nicht. Warum ist das so?

Auf !important sollte doch weitestgehend vermieden werden.

<h2>Badges</h2>
  <a class="btn badges" href="#">Kommentare <span class="badge badge-secondary">20</span></a>

.btn{ border: 2px solid #CCC !important; border-radius: 5px !important; color:#CCC !important; }

...zur Frage

Wie stelle ich einen Bootstrap Navbar Menüpunkt auf Active, wenn die Navbar per PHP eingebunden wird?

Hallo, ich nutze in meiner Website bootstrap.

Den Header sowie die Navigation-Bar binde ich per PHP in die Website ein. Ist es möglich, einen Menüpunkt in dieser Konstellation auf active zu stellen?

Wenn ich es in meiner nav.php ändere (class="active") ist es ja dauerhaft, ich würde aber gerne den aktuellen menüpunkt aktivieren.

Vielen Dank im Voraus Nico

...zur Frage

PHP - alles in einen großen PHP Befehl packen?

Heya!

Einmal noch ne "kleine" Frage zu PHP.

Ich soll meine Nav so umschreiben, dass es komplett in einem großen PHP "Container" ist und nicht html kommt, php, dann wieder html, wieder php

Habs bisschen mittels echo probiert aber anscheinend ist das nicht komplett zielführend wie ich das dachte

Der Code:

<ul class="nav">
    <li><a class="navtext <?php echo ($page == 'home.php') ? "active":"" ?>"
            href="index.php?page=home&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_HOME']; ?>        
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'ueberuns.php') ? "active":"" ?>"
              href="index.php?page=ueberuns&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_ABOUT_US']; ?>
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'karriere.php') ? "active":"" ?>"
           href="index.php?page=karriere&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_CARRER']; ?>    
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'blog.php') ? "active":"" ?>"
           href="index.php?page=blog&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_BLOG']; ?>        
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'kontakt.php') ? "active":"" ?>"
           href="index.php?page=kontakt&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_CONTACT']; ?>    
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'team.php') ? "active":"" ?>"
           href="index.php?page=team&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_TEAM']; ?>        
        </a></li>
</ul>

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

Warum funktioniert mein Text Decoration nicht?

CSS:

body{

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

margin: auto 0;

}

.nav{

background: rgb(0, 47, 255);

padding: 0.3em;

color: white;

text-decoration: none!important;

.contact{

text-decoration: none;

}

HTML:

<body>

XXX <span>XXX</span>

</div>

<a class="contact" href="#">Contact</a>

<a class="about-me" href="#">About Me</a>

<a class="projects" href="#">Projects</a>

</div>

</container>

<div>

Test

</div>

</container>

</body>

...zur Frage

Bootstrap Dropdown Menü öffnet außerhalb des Bildschirms?

Hi, ich habe auf meiner Website ein Bootstrap Dropdown Menü eingebaut. Dieses befindet sich links am Bildschirmrand. Wenn ich drauftippe, öffnet es sich so, dass die Schrift außerhalb des Bildschirm ist, man das menü also nur zur Hälfte sehen kann. Wie kann ich den Code hier verändern, damit Bootstrap weiß, dass es das menü nicht nach links sondern nach rechts öffnen soll.

Der Code:

<div class="dropdown">
                <button class="btn btn-secondary btn-success px-3" type="button" id="dropdownMenuButton1"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-bars"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                    HIER SIND DIE EINZELNEN LISTENELEMENTE!!!
                </ul>
            </div>

Da das Problem schwer zu erklären ist, kann gerne auch unter meiner GuteFrage profil Seite auf meine Website gehen und auf den Menübutton drücken. Man meine website dann nur auf einem handy oder so öffnen, da sonst der Bildschirm groß genug für das Menü wäre.

Danke für jede Hilfe!!

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen