DropDown-Kästchen bei CSS nach Bildschirm anpassen?

Schönen guten Abend,

ich würde gerne mein DropDown-Menü so ändern, dass er auf die Bildschirmgröße angepasst ist. Kann mir da wer einer helfen?.

Mein bisheriger code für die Boxen des Menüs:

Bild zum Beitrag

2 Antworten

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

07.11.2019, 20:44

würde ich zu einem framework wechseln . ob bootstrap oder oder oder ... man muss das rad nicht neu erfinden und da du es wahrscheinlich gleich für mobiles etc haben willst ist ds der beste weg .

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

07.11.2019, 20:21

Arbeite mit relativen Einheiten (rem, em, %, vw, ...).

MarcPolo

Beitragsersteller

07.11.2019, 20:25

Kannst du das bitte etwas weiter formulieren, wenn ich die px-Angaben durch rem bzw. em tausche und anpasse ändert sich nicht wirklich am gesamtbild

0

regex9

07.11.2019, 20:58

Hast du dir den verlinkten Artikel nicht durchgelesen?

0

Ähnliche Beiträge

Dropdown Menü mit Links - HTML?

Ich möchte gerne ein Dropdown Menü auf meiner Webseite einfügen, in den man verschiedene links in den "Auswahlfeldern" hat.

Gemeint:

[Dropdown Menü]
[Link 1]
[Link 2]
[Link 3]
[Link 4]
[Link 5]

Wie kann ich es machen das diese Links funktionieren?

Könnt ihr mir eine Beispiele Code zeigen?

Geht das in HTML?

html/css text dynamisch anpassen?

hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.

Kann man mit html/ css eine Seite automatisch an den Bildschirm anpassen?

Hallo,

jede website die ich im Internet sehe passt sich ohne probleme an die Bildschirm größe automatisch an. Meine Seite tut das nicht ( bin neu in css und co). Gibt es eine Möglichkeit, dass sich mit css/html die Seite an jede Bildschirmgröße anpasst ? oder braucht man ein skript (JS oder PHP)? Irgendwie müssen es die anderen Websites ja schaffen ^^ Google hab ich übrigends rauf und runter durchsucht alle lösungen dort haben mir nicht geholfen.

Der HTML code lässt sich leider nicht einfügen.

LG Mares

Wie kann ich mein HTML Code für verschiedene Bildschirme anpassen?

Also, das meine ganze Seite z.B. mein Header auf die größe des Bildschirm resized wird.

CSS Navigation nur mit einem Bild?

Hallo,

weiß jemand wie ich eine Grafik (in dem Fall ein Logo) als Navigationsleiste einbaue? Wenn man über das Logo fährt soll sich eine Art Dropdown-Menü öffnen.

Schonmal danke im Voraus

CSS Bildgröße automatisch an div-Box anpassen

Ich bin grad bei dem Layout für meinen Onlineshop (Info-Projekt also kein echter Shop^^). Das Layout sieht bisher so aus, dass ich 2 Div-Boxen zentriert habe mittels Margin-left/right="auto". Die obere Spalte ist box ist der Header, die untere für den Inhalt. In die obere Box soll jetzt ein Schriftzug als Logo rein. Gibt es irgendeine Möglichkeit, dass das Bild automatisch an die Größe der div-Box angepasst wird? Als Größenangabe habe ich beim Header nur "width:850px" und "height: 20%". Wenn ich diese Angaben dann aber an das Bild schreibe (also dass ich in der CSS-Datei für das Bild "width="850px" etc. schreibe), funktioniert es nicht. Gibt es irgendeinen automatischen Befehl oder kann man das irgendwie ausrechnen? Danke ;)

PS: Die Auflösung des Bild ist 1500x909, falls das irgendetwas ändern würde ;)

CSS Box erstellen?

Für eine Aufgabe muss ich den gelben Container erstellen. Der grüne und blaue ist bereits erstellt. Wie bekomme ich das hin? Welcher CSS Code wird benötigt😬

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!!

DIV-CONTAINER an Bildschirmgröße anpassen?

Liebe Commuity, Ich bin sehr neu in sachen HTML und CSS. Wir haben ein Projekt von der Schule aus, eine Website erstellen. Nun habe ich einen Div-Container mit einem Hintergrund gemacht (Auf den Hintergrund kommt ein Text). Jedoch wenn ich es auf meinem großen Bildschirm anordne und dann auf meinen Laptop gehe, ist klarerweise alles verschoben. Wie kann ich dies verhindern? :)

LG Flagga005

HTML/PHP/CSS Code funktioniert nicht?

Ich benutze den Code <div class="Box">BOX</div> in einer php Datei und den Code .Box {

background-color: black;

}

in einer css Datei aber bei mir steht dort am ende nur "BOX".

Textfarbe des von JavaScript ausgegebenen Textes ändern?

Hallo, ich schreibe gerade eine HTML-Seite.

Dabei benutze ich ein JS um zu bestimmten Uhrzeiten einen bestimmten Text auszugeben. Dazu benutze ich die Funktion getTime().

Wie kann ich den Text, der hierbei ausgegeben wird (also durch answer="xxx" ) verändern? Also durch CSS z.B. die Schriftfarbe und -größe ändern??

Hier mein bisheriger Code:

<script language="JavaScript">
    
</script>

html/css box neben box bekommen?

Bekomme mit diesem code meine box in die andere box. will sie aber ausserhalb der box haben:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Spezialitäten</title>
<meta charset="UTF-8"/>
<style type="text/css">
h1 {
font-size: 80px;
text-align: left;
color: red}
.hauptbox {
background-image: url(1783.jpg);
background-size: cover;
width: 1500px;
height: 600px;
border: solid;
}
.banner {
height: 200px;
border: solid;
margin: 25px;
width: 1450px;
}
.link {
width: 206px;
height: 300px;
border: solid;
float: right;
color: white;
A:active {color:red};
}
</style>
</head>
<body bgcolor="lightblue">
<div class="hauptbox">
<div class="banner">
<h1>Gdddd</h1>
</div>
<div class="link"
<a name="suche"><h4>Zurück zum Anfang</h4></>
</body>
</html>

HTML/CSS Seite an Bildschirm Größe des jeweiligen Geräts anpassen?

Ich hab ein Bild zentriert,(auf jedem Bildschirm) allerdings schaffe ich es nicht, Art „Boxen“ zu zentrieren... bin nh absolute Laie und kein „Nerd“ der sich mit sowas auskennt, hab einfach Info als 4. Hauptfach genommen... . Naja, meine Frage ist einfach wie ich diese Boxen zentrieren kann, ich hab jetzt bestimmt 2 Stunden lang im Internet gesucht und absolut nichts gefunden. Vermutlich stell ich mich einfach dumm an.🥲

Ich hoffe ihr versteht meine Frage weil ich bin dumm und kann das alles nicht und jaaa danke

HTML

CSS

Beispiel Box

Warum funktioniert mein Dropdown Menü nicht?

Hallo könnte sich bitte einmal jemand meinem Code ansehen?
Wenn ich über den Menü Punkt Hover wird das Untermenü nicht angezeigt.
Ebenso wenn ich in der mobile Version auf das Hamburger Icon klicke
Ich finde den Fehler einfach nicht.

Link zum Code https://codepen.io/Bastian_code21/pen/YzKooXY

Danke schonmal!

Was möchtest Du wissen?

Deinen Beitrag erstellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }