✔ Width anpassen

Z

Zandermaul

Grünschnabel
Hallo, ich habe ein Problem und brauche eure Hilfe.
Wenn ich meine Seite ganz normal anschaue sieht alles gut aus.
https://prnt.sc/gpm7wp

Wenn ich aber meine Seite im Browser verkleinere sieht das ganze dann so aus:
https://prnt.sc/gpmb18
https://prnt.sc/gpmb9y

Hier könnt ihr euch das mal anschauen:
zandermaul.000webhostapp.com

Ich hoffe ihr könnt mir helfen, Danke im voraus.
MFG

HTML: 
<!DOCTYPE HTML>

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="assets/css/main.css" />

</head>

<body>



    <header id="header">
        <span> test123test</span>





    </header>





    <div id="main-wrapper">
        <div id="tabmenu">

            <input type="radio" name="tabmenus" id="tab1" checked>
            <label for="tab1" class="tab1c">Montag</label>
            <input type="radio" name="tabmenus" id="tab2">
            <label for="tab2" class="tab2c">Dienstag</label>
            <input type="radio" name="tabmenus" id="tab3">
            <label for="tab3" class="tab3c">Mittwoch</label>
            <input type="radio" name="tabmenus" id="tab4">
            <label for="tab4" class="tab4c">Donnerstag</label>
            <input type="radio" name="tabmenus" id="tab5">
            <label for="tab5" class="tab5c">Freitag</label>

            <div id="ud_tabmenu_tab1" class="ud_tab_content1">
            </div>
</body>

</html>

[code=css]



body {
margin: auto;

    }


            #header {
                text-align: center;

                box-sizing: border-box;
                font-size: 2em;

                font-family: 'Open Sans Condensed', sans-serif;
                font-weight: 700;
                text-transform: uppercase;
                padding: 3.3em 0 0.3em 0;
                border-bottom: solid 5px #e8491d;
                margin: 0 auto;
                background-color: #35424a;

            }




                #header .logo {
                    position: relative;
                    text-align: center;


                }

                    #header .logo div {

                        position: relative;
                        display: inline-block;
                        padding: 0 1.5em 0 1.5em;
                        top: -0.65em;



                    }

                    #header .logo h1 {
                        display: inline;
                        color: #e8491d;
                    }

                    #header .logo p {
                        display: inline;
                        color: #ffffff;
                    }




                    #tabmenu {
                    max-width:80em;
                    width:90%;
                    position: absolute;
                    left:5%;
                    transform: translate(-50%,-50%;)
                    background: #fff;
                    height:300px;
                    color:white;

    }

                #tabmenu #tab1  {
                display: none;

                    }

                    #tabmenu #tab2  {
                    display: none;

                        }

                        #tabmenu #tab3  {
                        display: none;

                            }
                            #tabmenu #tab4  {
                            display: none;

                                }

                                #tabmenu #tab5  {
                                display: none;

                                    }

                    #tabmenu .ud_tab_content1  {
                    display:none;
                    width:98%;

                        }

                        #tabmenu .ud_tab_content2  {
                        display:none;
                        width:98%;

                            }

                            #tabmenu .ud_tab_content3  {
                            display:none;
                            width:98%;

                                }

                                #tabmenu .ud_tab_content4  {
                                display:none;
                                width:98%;

                                    }

                                    #tabmenu .ud_tab_content5  {
                                    display:none;
                                    width:98%;

                                        }

        #tabmenu .tab1c  {
    position: relative;
    right: 1em;
    top:1.1em;
    border-radius: 20px;


        }

        #tabmenu .tab2c  {
    position: relative;
    left: 8em;
    bottom:0.4em;
    border-radius: 20px;


        }

        #tabmenu .tab3c  {
    position: relative;
    left: 17em;
    bottom: 1.9em;
    border-radius: 20px;


        }

        #tabmenu .tab4c  {
    position: relative;
    left: 26em;
    bottom:3.4em;
    border-radius: 20px;

        }

        #tabmenu .tab5c  {
    position: relative;
    left: 35em;
    bottom: 5em;
    border-radius: 20px;

        }
                    #tabmenu label {
                display: block;
                text-decoration: none;
                color: white;
                font-size: 30px;
        padding: 0.4%;
                font-weight:normal;
                text-align: center;
                cursor: pointer;
    background: #e8491d;
                width:20%



                        }

    #tabmenu #ud_tab_content1 {
    background: #fff;
    width: 90%;
    display: none;
    padding:5%;


        }

        #tabmenu [id^="tab"]:checked + label {
    background:#FACB1F;
    color:white;

            }


            #tab1:checked ~ #ud_tabmenu_tab1 {
            display: block;

                }


                #tab2:checked ~ #ud_tabmenu_tab2 {
                display: block;

                    }

                    #tab3:checked ~ #ud_tabmenu_tab3 {
                    display: block;

                        }

                        #tab4:checked ~ #ud_tabmenu_tab4 {
                        display: block;

                            }

                            #tab5:checked ~ #ud_tabmenu_tab5 {
                            display: block;

                                }
    #ud_tabmenu_tab1 {
    color:black;
        }
        #ud_tabmenu_tab2 {
        color:black;
            }




                            #main-wrapper {
                                text-align: center;
                                font-size: 2em;
                                font-family: 'Open Sans Condensed', sans-serif;
                                font-weight: 700;
                                text-transform: uppercase;
                                height: 3em;
                                margin: 0 auto;
                                background-color: #35424a;
                            }
 
Hallo

Zunächst enthält der Quellcode mehrere Fehler.

Im body-Bereich fehlen vor dem schließenden body-Tag zwei schließende div-Tags.

Im CSS ist hier ein Fehler enthalten:

Code: 
      #tabmenu {
         max-width: 80em;
         width: 90%;
         position: absolute;
         left: 5%;
         transform: translate(-50%, -50%;
         ) background: #fff;
         height: 300px;
         color: white;
      }

transform und background gehen fehlerhaft ineinander über.

Das solltest du zunächst korrigieren.

Wobei du offensichtlich schon versucht hast das fehlerhafte CSS an anderer Stelle zu überschreiben, anstatt den eigentlichen Fehler zu finden und zu beseitigen. Diese Überschreibungen wirst du also auch suchen und überschreiben müssen. Dazu habe ich keine Lust.

Denn insgesamt hast du vollkommen veraltete Vorstellungen vom Erstellen von Webseiten. Anstatt das natürliche Verhalten von Elementen auszunutzen willst du viel zu viel selbst bestimmen. Damit blockierst du aber die Möglichkeiten von Elementen sich an unterschiedliche Fensterbreiten anzupassen.

Damit unterliegst du dem Papierdenken. Informativ dazu:

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Das CSS sollte also deutlich entschlackt werden. Und dabei auch gleich das Inline-CSS entfernt werden. Nebenbei können dann auch gleich die aktuellen HTML-Elemente verwendet werden.

Du hast auch noch nicht mitgeteilt, wie sich die Schaltflächen (label-Elemente) bei unterschiedlichen Fensterbreiten überhaupt verhalten sollen.

Gruss

MrMurphy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück