Beiträge von lady_x

lady_x · 10. Januar 2021

Zitat von Sempervivum

Ich habe mir noch deinen Header und die Screenshots in Posting #6 angesehen und eine Lösung ausgearbeitet, die mit absoluter Positionierung arbeitet. Etwas, wovon man i. allg. abrät, weil es häufig die Ursache von Problem ist. Der Grund ist, dass es dann einfach ist, das Seitenverhältnis des Bildes beim Skalieren beizubehalten.
Den Container .ueberschrift habe ich auf die volle Höhe gesetzt und die Texte mit Flex vertikal mittig ausgerichtet. Dann mit zwei Mediaqueries die Schriftgröße angepasst, so dass die Text immer gut hinein passen.

Vielen Dank! Jetzt funktioniert es das, was ich wollte. Ich freue mich, immer wieder neue Dinge zu erfahren.

lady_x · 9. Januar 2021

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial=scale=1.0" />
        <link rel="stylesheet" href="Style.css">
        <title>Vispra</title>
    </head>

    <script>
        'use strict';
            (function () {
                function init() {
                    document.getElementById('ls-button')
                        .addEventListener('click', changeHTMLContent);
                }

            function changeHTMLContent() {
                var neu = "<span>Herzlich Willkommen!</span><br/><br/>Du möchtest Gebärdensprache lernen<br/>aber Gebärdensprache ist schwer?<br/><br/>Du möchtest mit Menschen unterhalten<br/>aber sie können nicht über Mund laut aussprechen?<br/><br/>Du bist hier richtig!<br/><br/>Vispra ist kostenlos.<br/>Und hat keine Werbung.<br/>Vispra ist Gebärdensprache für alle Leute.<br/><br/>Viel Spaß!";
                document.getElementById('absatz')
                        .innerHTML = neu;
            }
            document.addEventListener('DOMContentLoaded', init);
            }());


            'use strict';
            (function () {
                function init() {
                    document.getElementById('translate')
                        .addEventListener('click', changeHTMLContent);
                }

            function changeHTMLContent() {
                var neu = "<span>Welcome!</span><br/><br/>You want to learn sign language, but you don't know what to do?<br/>You would like to communicate with people who cannot speak via spoken language?<br/><br/>Then you've come to the right place!<br/>Vispra is an ad-free and free information site about visual language for everyone.<br/><br/>Have fun trying it out!";
                document.getElementById('absatz')
                        .innerHTML = neu;
            }
            document.addEventListener('DOMContentLoaded', init);
            }());


            function checkSupported() {
                canvas = document.getElementById ('canvas')
                if (canvas.getContext) {
                    ctx = canvas.getContext('2d');
                    this.gridSize = 10;
                    start ();   
                }
                else {
                alert ("We're sorry, but your browser does not support the canvas tag." +
                "Please use any web browser other than Internet Explorer.");    
                }
            }
    </script>

    <body>

        <div class="container">

            <header>
                <img id="header-pic"src="./Header.jpg">
            </header>

                <div class = "logo">
                    <a href="./Home.html"><img id = "logo-pic" src="./Logo.png"></a>
                </div>
                
                <div class = "überschrift">
                    <div id = "headline">Vispra</div>
                    <div id = "subline"><b>Vis</b>uelle <b>Spra</b>che für alle</div>
                </div>

                <!--<div class = "header-pic">Bild (Header)</div>-->


            <!--Navigator-->

                <div class = "nav">
                    
                    <ul class= "nav-bar">
                        <li class = "bar"><a class= "bar-hover" href="#">Home</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">Vispra</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">DGS</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">LBG</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">"Zwergensprache"</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">Über uns</a></li>
                    </ul>

                    
                </div>

            
            <!--<content>
               <canvas id="canvas"></canvas> 
            </content>-->

                <div class = "inhalt">
                    <p id="absatz"><span>Herzlich Willkommen! </span>
                    <br />
                    <br />
                        Du möchtest Gebärdensprache lernen, aber du weißt nichts anzufangen? <br />
                        Du möchtest mit Menschen kommunizieren, die aber nicht über Lautsprache sprechen können?
                    <br />  
                    <br />  
                        Dann bist du hier genau richtig! <br />
                        Vispra ist eine werbefreie und kostenlose Informationsseite über die visuelle Sprache für alle. 
                    <br />   
                    <br /> 
                    Viel Spaß beim Ausprobieren!
                    </p>

                </div>

            <div class = "search">
                <p>
                    <label for="search"></label>
                    <input type="search" id="search" placeholder="Suchbegriff eingeben">
                    <button id= "search-button">Suche</button>
                </p>
            </div>

            
            <aside><!--Icons--></aside>
                
                <div class = "buttons">
                    <button id = "ls-button">Leichte Sprache</button>
                    <button id = "translate">English</button>
                </div>

          
            <footer><!--Impressum/Datenschutz--></footer>
            
                <div class = "foot">
                    <div id = "left">
                    <dl>
                        <li class = "impressum"><a href="#">Impressum</a></li>
                        <li class = "impressum"><a href="#">Datenschutz</a></li> 
                    </dl>
                    </div>

                   <div id = "right"> 
                    <dl>
                        <li class = "adress">Email: <a href="#">martina.mustermann@mustermail.de</a></li>
                        <li class = "adress">Telefon: 01234 5678910</li>
                        <li class = "adress">Fax: 01234 5678911</li>
                    </dl>
                   </div>

                   <div id = "middle">
                    <dl>
                        <li class = "adress">Martina Mustermann</li>
                        <li class = "adress">Musterstraße 45</li>
                        <li class = "adress">123456 Musterstadt</li>
                    </dl>
                   </div>

                </div>

            <div class = "leer"></div> 

        </div>

    </body>

    </html>

Alles anzeigen

lady_x · 9. Januar 2021

Zitat von Sempervivum

Oh, auch ohne das HTML sieht man schon, dass da einiges durcheinander geht:

Du verwendest float und grid gemischt, verzichte auf float und versuche, das Layout konsequent mit grid umzusetzen.

Ah, das macht Sinn. Wie kann ich texte z.B. Adresse in Footer nebeneinander schreiben ohne zusätzlich Spalten zu machen?

Float kommt nicht im Header vor, auch nicht bei Head- und Subline. Trotzdem ändert sich das, was ich nicht möchte.

lady_x · 9. Januar 2021

Zitat von Sempervivum

Das war jetzt wiederum ein bisschen sehr wenig Code. Poste doch wenigstens die Container, die Inhalte kannst Du ja weg lassen.

CSS

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');

@media screen {

    .container { 
        width: 100%;
        display: grid; 
        grid-template-rows: auto auto auto auto; 
        grid-template-columns:15% 70% 15%; 
        grid-template-areas:  
            "logo überschrift header-pic" 
            "leer navigator search"
            "leer inhalt buttons" 
            ". footer ." 
      }

        .leer {
            grid-area: leer;
            background-color: rgb(218, 218, 218)
        } 

        header { 
            grid-column: 1/4; 
            grid-row: 1/2;
        }    

                #header-pic {
                    width: 100%;
                    height: 100%; 
                }

                .logo {
                    grid-area: logo;
                    padding: 20px;
                }

                        #logo-pic {
                            width: 80%;
                            margin-left: 15px;
                        }


                .überschrift {
                    grid-area: überschrift;
                    padding: 100px;
                    margin-left: 50px;
                }

                        #headline {
                            font-family: 'Josefin Sans', sans-serif;
                            font-size: 6em;
                            line-height: none;
                        }

                        #subline {
                            font-family: 'Josefin Sans', sans-serif;
                            font-size: 3em;
                            line-height: none;
                            margin-left: 50px; 
                        }
                        
                       
                .header-pic {
                    grid-area: header-pic;
                }


        /*nav {
            grid-column: 2/3; 
            grid-row: 2/3;
        }*/

                .nav {
                    grid-area: navigator;
                }

                ul.nav-bar {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                    background-color: #333;
                  }
                  
                  li.bar {
                    float: left;
                    border-right: 1px solid #bbb;
                  }

                  li:last-child.bar {
                    border-right: none;
                  }
                  
                  li a.bar-hover {
                    display: block;
                    font-size: 1.5em;
                    font-family: 'Josefin Sans', sans-serif;
                    color: white;
                    text-align: center;
                    padding: 20px 22px;
                    text-decoration: none;
                  }
                  
                  li a:hover.bar-hover {
                    background-color: #111;
                  }
        

        #search {
            position: absolute;
            margin-left: 15px;
            width: 185px;
            height: 2em;
            border: 2px solid #999;
            font-size: 1em;
        }

                #search-button {
                    position: absolute;
                    margin-left: 11%;
                    font-size: 1em;
                    height: 2em;
                }


        content {
            grid-column: 2/3; 
            grid-row: 3/4;
        }

                .inhalt {
                    grid-area: inhalt;
                    font-family: 'Times New Roman', Times, serif;
                    font-size: 1.5em;
                    margin-top: 450px;
                    text-align: center;
                }

                        #willkommen {
                            font-size: 2em;
                            font-weight: bold;
                        }
       
                
                .search {
                    grid-area: search;
                    background-color: rgb(218, 218, 218)
                }

                span {
                    font-size: 2em;
                    font-weight: bold;
                }

                /*canvas {
                    border: 1px solid #111;
                    width: 800px; 
                    height: 400px;
                    margin-left: 21%;
                    margin-top: 4%;
                    position: relative;
                }*/


        aside {
            grid-column: 3/4; 
            grid-row: 3/4;
        }

                .buttons {
                    grid-area: buttons;
                    padding: 10px;
                    background-color: rgb(218, 218, 218)
                }

                #ls-button {
                    font-family: 'Josefin Sans', sans-serif;
                    font-size: 1em;
                    height: 2em;
                    background: #333;
                    color: white;
                    margin-top: 800px;
                    margin-right: 5%;
                    margin-left: 20%;
                    float: right;
                }

                #translate {
                    font-family: 'Josefin Sans', sans-serif;
                    font-size: 1em;
                    height: 2em;
                    background: #333;
                    color: white;
                    margin-top:5px;
                    margin-right: 5%;
                    float: right;
                }


        footer {
            background: #f1f1f1;
            grid-column: 1/4; 
            grid-row: 4/5;
        }

                .foot {
                    grid-area: footer;
                    padding: 30px;
                    font-size: 10pt;
                }

                #left {
                    float: left;
                    margin-left: 5%;
                    padding: 0;
                }

                #middle {
                    float: left;
                    margin-left: 10%;
                    padding: 0;
                }

                #right {
                    float: right;
                    margin-right: 0;
                    padding: 0;
                }

                .impressum {
                    list-style: none;
                    color: #555;
                    border: none;
                    text-decoration: none;
                }

                a:visited, a {
                    color: rgb(56, 56, 56);
                }

                /*a:link, a:visited {
                    text-decoration: none;
                }*/

                .adress {
                    color:rgb(56, 56, 56);
                    list-style: none;
                }
}

Alles anzeigen

lady_x · 9. Januar 2021

Zitat von AndreasB

Ich habe mir den Code angesehen, aber ich muss zugeben, dass ich nicht verstehe, was du mit
meinst.

Wenn du meinst, dass sich der Button und das Input-Feld überlappen, liegt das nicht an dem Grid, sondern an dem position: absolute.
Das hat aber nix mit "hoch oder runter" zu tun.

Übrigens:
In dem CSS Code, den du gepostet hast, befinden sich Unerlaubte Zeichen, die im W3C Validator, zu Einlesefehlern führt:
html-seminar.de/woltlab/attachment/2801/
Wenn das in deiner Datei auch so ist (und dies nicht nur beim Einfügen in den Codeblock passiert ist) kann das zu unerwarteten Ergebnissen führen.

Alles anzeigen

html-seminar.de/woltlab/attachment/2803/

Headerbild: width: 100% und height: auto

html-seminar.de/woltlab/attachment/2804/

Headerbild: width 100% und height 100%

Das ist ein Beispiel von einem halben Browserfenster. Es wäre schön wenn, da keine Umbrüche macht oder verzerrt.

lady_x · 9. Januar 2021

CSS

.container { 
        width: 100%;
        display: grid; 
        grid-template-rows: 400px 100px auto 150px; 
        grid-template-columns:15% 70% 15%; 
        grid-template-areas:  
            "logo überschrift header-pic" 
            "leer navigator search"
            "leer inhalt buttons" 
            ". footer ." 
      }

        .search {
                    grid-area: search;
                    background-color: rgb(218, 218, 218)
                }

                #search {
                    position: absolute;
                    margin-left: 15px;
                    width: 185px;
                    height: 2em;
                    border: 2px solid #999;
                    font-size: 1em;
                    }

                #search-button {
                    position: absolute;
                    margin-left: 11%;
                    font-size: 1em;
                    height: 2em;
                }

Alles anzeigen

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial=scale=1.0" />
        <link rel="stylesheet" href="Style.css">
        <title>Vispra</title>
    </head>
    <body>
            <div class = "search">
                <p>
                    <label for="search"></label>
                    <input type="search" id="search" placeholder="Suchbegriff eingeben">
                    <button id= "search-button">Suche</button>
                </p>
            </div>
    </body>
</html>

Alles anzeigen

Ich habe nur auf diesen Suchbutton eingefügt.

lady_x · 9. Januar 2021

Servus,

ich habe an einer Website mit Grid gearbeitet.

Das Problem: Wenn ich den Browserfenster z.B. halbiere, dann rutscht alles hoch oder runter (siehe Bild).

html-seminar.de/woltlab/attachment/2799/

Was musst ich machen, dass alles automatisch verkleinert, wenn sich das Browserfenster ändert?

Ich habe einen ziemlich langen Code geschrieben, weshalb ich hier nicht eingefügt habe. Auf konkrete (Probem-)Stellung, die ihr mit nennen könnt, füge ich dann gerne den Code ein.

Danke vorraus.

lady_x · 19. November 2020

Ich halte mich bloß an die Regeln von Dozenten. Wenn er so will, dann ist es so.

Ok, danke für den Tipp, werde ich mal ändern.

lady_x · 19. November 2020

Danke für die Meldung. Ich vergas noch hinzuschrieben: Ich musst mit CSS im Head arbeiten, nicht das Style-Attribut im Body.

Sry!

lady_x · 19. November 2020

Servus,

trotz nach sorgältige Lesen der Regeln, habe ich hier im Forum erstmal gesucht ob nicht jemand das gleiche Problem hatte wie ich. Trotzdem finde ich die Lösung nicht.

Problematik:

Das Bild soll rechts stehen, während der Text (Content 2) links umfließt. Ich habe alles mit margin, float, clear usw. versucht. Trotzdem klebt es an Footer (geht bei Impressum los). Mit CSS-Grid und Flexbox möchte ich erstmal nicht arbeiten. Siehe Bild unter Quellcode.

Bitte beachte, dass ich den folgenden Quellcode nur das nötige rauskopiert habe. Eigentlich geht der viel, viel länger. xD

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>Beispiel</title>
        <style>    
        @media screen {
        .container {
            width: 100%;
        }
        .blindtext {
            width: 60%;
            margin-left: 5%;
            clear: left;
            
        }
        #pic {
            float: right;
            margin-right: 5%;
            margin-left: 5%;
            width: 20%;
            clear: right;
        }
        h2 {
            margin-left: 5%;
            clear: left;
        }
        h3 {
            margin-left: 5%;
        }
        }
      </style> 
    </head>
    <body>
<div class="section" >
                <div id="content">
                <div class="container">
                <h2>Content 1</h2>

                <p class="blindtext">LLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
                    <br />
                    <br />
                    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
                    
                    Nam liber tempor cum soluta nobis eleifend option doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   
                    
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit molestie consequat, vel illum dolore eu feugiat nulla facilisis.   
                    <br />
                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    
                    <h2>Content 2</h2>

                    <p class="blindtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
                    <br />
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
                </p>
                <img id="pic" src="./IMG_0190.jpg">
                </div>
            </div>
        </div>
</body>

Alles anzeigen

html-seminar.de/woltlab/attachment/2673/

Beiträge von lady_x

Skalieren des Browserfensters mit Grid

Skalieren des Browserfensters mit Grid

Skalieren des Browserfensters mit Grid

Skalieren des Browserfensters mit Grid

Skalieren des Browserfensters mit Grid

Skalieren des Browserfensters mit Grid

Skalieren des Browserfensters mit Grid

Text um Bild umfließen lassen (Suche nach Problematik)

Text um Bild umfließen lassen (Suche nach Problematik)

Text um Bild umfließen lassen (Suche nach Problematik)