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

[ERLEDIGT] Flexible Html-Div Box?

Thehtmler

Neues Mitglied
Moin,
Ich hätte da mal eine frage ich möchte auf meiner Seite mit aside eine div box an der Seite positionieren diese soll der Nutzer dann individuell in die länge ziehen können (ähnlich wie im Windows Explorer mit der Verzeichnisstruktur am Rand)
Nur wie kriege ich das nun realisiert ich habe dazu nicht im Internet gefunden
Ich hoffe ihr könnt mir helfen und das ihr versteht was ich meine:-)
LG
 
Werbung:
Am besten wäre es, wenn du mit Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) dein Aside Element in die Seite einbaust.
Das mit der individuellen Größe sollte dann mit dem CSS Format 'resize' zu machen sein.
https://www.w3schools.com/cssref/css3_pr_resize.asp
Danke,
das hilft mir schon sehr aber wie krieg ich jetzt hin das man die sidebar nicht nur unten an diesem kleinen punkt verschieben kann sondern von überall am rand.
LG :-)
 
Werbung:
Das wird mit reinem HTML und CSS nicht realisierbar sein - zumindest ist mir da nichts bekannt.
Es gibt sicherlich Wege das mit JavaScript umzusetzen... frag doch mal die Suchmaschine deines Vertrauens - gibt da bestimmt fertige Scripte.
 
Das wird mit reinem HTML und CSS nicht realisierbar sein - zumindest ist mir da nichts bekannt.
Es gibt sicherlich Wege das mit JavaScript umzusetzen... frag doch mal die Suchmaschine deines Vertrauens - gibt da bestimmt fertige Scripte.
Was muss ich denn dann am besten eingeben um dafür Ergebnisse zu bekommen
:-)?
 
Schwierig - habe keinen passenden Suchbegriff gefunden, der nur brauchbare Ergebnisse liefert :frown:.
Aber ich gebe dir einen Link, wo was brauchbares zu finden ist.
https://jqueryui.com/resizable/
Der Code (leicht modifiziert, damit er auch außerhalb der Ursprungsseite läuft) sieht so aus.
HTML:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Resizable - Default functionality</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
        <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
        $( function() {
                $( "#resizable" ).resizable();
        } );
        </script>
</head>
<body>

<div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
</div>


</body>
</html>
Viel Erfolg!
 
Werbung:
Schwierig - habe keinen passenden Suchbegriff gefunden, der nur brauchbare Ergebnisse liefert :frown:.
Aber ich gebe dir einen Link, wo was brauchbares zu finden ist.
https://jqueryui.com/resizable/
Der Code (leicht modifiziert, damit er auch außerhalb der Ursprungsseite läuft) sieht so aus.
HTML:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Resizable - Default functionality</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
        <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
        $( function() {
                $( "#resizable" ).resizable();
        } );
        </script>
</head>
<body>

<div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
</div>


</body>
</html>
Viel Erfolg!
Sehr nett danke :-)
 
Zurück
Oben