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

Problem mit Reponsivem Design

SkyDefend

SkyDefend

Mitglied
Hallo ITler :),

ich habe mitterweile ein Template für meine Webseite in Nutzung, die mir jedoch Kopfschmerzen bereitet.
Erstmal der Link: https://patr18.de

Und zwar, ich habe genauer gesagt 3 Probleme.

Zu 1.

Wenn ich am Pc mir die Homepage angucke ist alles noch super, am Smartphone ebenfalls, jedoch hakt es bei Tablets ( Ich habe es jetzt mal über ein IPad getestet, Bildschirmgröße ist ja mit anderen vergleichbar).
Der zieht die Navbarleiste einfach nach unten, anstelle Sie wie normal üblich zu verengen, bis schließlich irgendwann der Dropdownbutton erscheint, dass hat den unschönen Nebeneffekt, dass Teile meiner Überschrift im Header verschwinden, weil die Navbar eben zu groß wird.
Woran kann das liegen?

Zu 2.

Ich hole mir Content teilweise von http://www.mydivision.net und an der Webseite gefällt mir sehr gut die oberste Leiste, wo die Suche und anderer Gimmick eingebaut ist.
Kann mir eventuell irgendjemand helfen, soetwas für meine Seite zu bauen, ich habe leider noch nicht soviel Erfahrung in HTML, CSS.

Zu3.

Ich nutze aktuell für die Englische Seite ebenfalls einen Button, würde aber gerne in dieser Leiste wie in 2 beschrieben eine englische Flagge als Icon einbauen, jedoch passt sich die nie der Größe an (Ich hab das mit der Flagge schon in meiner Navbar versucht, ohne Erfolg)

Es wäre super freundlich, wenn mir jemand helfen könnte.

Schönen Abend,

Frozen
 
Werbung:
Das liegt am Zeilenumbruch. Um den zu verhindern, könntest du in der mittleren Auflösung Menüpunkte ausblenden, Das lässt sich aber nicht in einem Forenpost erklären. Dazu musst du die Navigation von Bootstrap samt Media Queries und Breakpoints verstehen.
http://getbootstrap.com

Wenn dir jemand etwas bauen soll, wende dich an das Job Forum.
 
Hallo

Zu 3 - Sprachauswahl mit Flagge

Darauf solltest du verzichten, da es sachlich schlicht falsch ist.

Flaggen präsentieren Staaten und keine Sprachen. Eine Sprachauswahl per Flagge mag zwar für einige Webseitenersteller hübsch ausschauen, hat aber ansonsten nur Nachteile und zeigt eher die Ignoranz / Arroganz / Unwissenheit der Webseitenersteller.

So sind Englisch, Französisch, Deutsch, Arabisch und so weiter jeweils Amtssprachen in vielen Staaten. Umgekehrt haben viele Staaten mehrere Amtssprachen.

Geschichtlich kommt hinzu, dass vielen Staaten ihre jetzige Amtssprache von Kolonialmächten oder anderen Eroberern aufgezwungen wurde. Dort wird es teilweise als Beleidigung oder Erniedrigung empfunden die Flagge ihrer damaligen Eroberer zur Sprachauswahl anklicken zu müssen.

Und warum willst du die englische Flagge für Englisch wählen? In den USA sprechen doch viel mehr Personen Englisch.

Weiterhin kommst du meiner Ansicht mit den Flaggen auch selbst durcheinander. Die englische Flagge (rotes Kreuz auf weißem Grund) kennt kaum jemand. Du meinst eher die bekanntere Flagge vom "Vereinigten Königreich Großbritannien und Nordirland". Wobei das wiederum keine offizielle Amtssprache hat. Aber in vielen Staaten der Welt als ehemalige Kolonialmacht mit negativen Gefühlen verbunden ist.

Überleg dir auch mal andersrum: Wie würdest du es empfinden, für Deutsch auf die Flaggen Belgiens, Italiens, Lichtensteins Luxemburgs, Österreichs, der Schweiz oder Polens klicken zu müssen? Dort ist Deutsch jeweils die oder eine von mehreren Amtssprachen.

Und so gibt es zwischen Flaggen und Sprachen noch viele Probleme, da die nicht zusammengehören. Nur, weil viele Webseiten Flaggen zur Sprachauswahl verwenden wird es keinen Deut richtiger.

Der sinnvollste Weg zur Sprachauwahl ist deshalb die Sprache in ihrer jeweiligen Schreibweise anzugeben, also zum Beispiel

Deutsch
English
Français
Nederlands
Русский

Gruss

MrMurphy
 
Werbung:
Tronjer schrieb:
Das liegt am Zeilenumbruch. Um den zu verhindern, könntest du in der mittleren Auflösung Menüpunkte ausblenden, Das lässt sich aber nicht in einem Forenpost erklären. Dazu musst du die Navigation von Bootstrap samt Media Queries und Breakpoints verstehen.
http://getbootstrap.com

Wenn dir jemand etwas bauen soll, wende dich an das Job Forum.
Zum Vergrößern anklicken....

Dann bleibt mir eigentlich nur übrig meinen Lehrer zu fragen und zu hoffen, dass er mir da weiterhelfen kann.
Tortzdem vielen Dank für die Aufklärung :).
Mit Job Forum meinst du hier? https://www.html.de/forums/jobboerse.12/
Wenn ja hoffe ich, dass mir da einer kostenlos weiterhelfen kann ;D

@MrMurphy
Du hast schon recht, ich glaube ich würde mir da auch etwas blöd vorkommen :D .
Dann werde ich es so lassen, wie es jetzt ist, außer English statt "Englisch" anzugeben :).
 
Zuletzt bearbeitet:
Code: 
@import "variables.less";
@import "mixins.less";

// Global Components

body {
   .serif;
   font-size: 20px;
   color: @gray-dark;
}

// -- Typography

p {
   line-height: 1.5;
   margin: 30px 0;
   a {
     text-decoration: underline;
   }
}

h1,
h2,
h3,
h4,
h5,
h6 {
   .sans-serif;
   font-weight: 800;
}

a {
   color: @gray-dark;
   &:hover,
   &:focus {
     color: @brand-primary;
   }
}

a img {
   &:hover,
   &:focus {
     cursor: zoom-in;
   }
}

blockquote {
   color: @gray;
   font-style: italic;
}

hr.small {
   max-width: 100px;
   margin: 15px auto;
   border-width: 4px;
   border-color: white;
}

// Navigation

.navbar-custom {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 3;
   .sans-serif;
   .navbar-brand {
     font-weight: 800;
   }
   .nav {
     li {
       a {
         text-transform: uppercase;
         font-size: 12px;
         font-weight: 800;
         letter-spacing: 1px;
       }
     }
   }
   @media only screen and (min-width: 768px) {
     background: transparent;
     border-bottom: 1px solid transparent;
     .navbar-brand {
       color: white;
       padding: 20px;
       &:hover,
       &:focus {
         color: @white-faded;
       }
     }
     .nav {
       li {
         a {
           color: white;
           padding: 20px;
           &:hover,
           &:focus {
             color: @white-faded;
           }
         }
       }
     }
   }
   @media only screen and (min-width: 1170px) {
     -webkit-transition: background-color 0.3s;
     -moz-transition: background-color 0.3s;
     transition: background-color 0.3s;
     /* Force Hardware Acceleration in WebKit */
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     &.is-fixed {
       /* when the user scrolls down, we hide the header right above the viewport */
       position: fixed;
       top: -61px;
       background-color: fade(white, 90%);
       border-bottom: 1px solid darken(white, 5%);
       -webkit-transition: -webkit-transform 0.3s;
       -moz-transition: -moz-transform 0.3s;
       transition: transform 0.3s;
       .navbar-brand {
         color: @gray-dark;
         &:hover,
         &:focus {
           color: @brand-primary;
         }
       }
       .nav {
         li {
           a {
             color: @gray-dark;
             &:hover,
             &:focus {
               color: @brand-primary;
             }
           }
         }
       }
     }
     &.is-visible {
       /* if the user changes the scrolling direction, we show the header */
       -webkit-transform: translate3d(0, 100%, 0);
       -moz-transform: translate3d(0, 100%, 0);
       -ms-transform: translate3d(0, 100%, 0);
       -o-transform: translate3d(0, 100%, 0);
       transform: translate3d(0, 100%, 0);
     }
   }
}

// Header

.intro-header {
   background-color: @gray;
   background: no-repeat center center;
   background-attachment: scroll;
   .background-cover;
   // NOTE: Background images are set within the HTML using inline CSS!
   margin-bottom: 50px;
   .site-heading,
   .post-heading,
   .page-heading {
     padding: 100px 0 50px;
     color: white;
     @media only screen and (min-width: 768px) {
       padding: 150px 0;
     }
   }
   .site-heading,
   .page-heading {
     text-align: center;
     h1 {
       margin-top: 0;
       font-size: 50px;
     }
     .subheading {
       font-size: 24px;
       line-height: 1.1;
       display: block;
       .sans-serif;
       font-weight: 300;
       margin: 10px 0 0;
     }
     @media only screen and (min-width: 768px) {
       h1 {
         font-size: 80px;
       }
     }
   }
   .post-heading {
     h1 {
       font-size: 35px;
     }
     .subheading,
     .meta {
       line-height: 1.1;
       display: block;
     }
     .subheading {
       .sans-serif;
       font-size: 24px;
       margin: 10px 0 30px;
       font-weight: 600;
     }
     .meta {
       .serif;
       font-style: italic;
       font-weight: 300;
       font-size: 20px;
       a {
         color: white;
       }
     }
     @media only screen and (min-width: 768px) {
       h1 {
         font-size: 55px;
       }
       .subheading {
         font-size: 30px;
       }
     }
   }
}

// Post Preview Pages

.post-preview {
   > a {
     color: @gray-dark;
     &:hover,
     &:focus {
       text-decoration: none;
       color: @brand-primary;
     }
     > .post-title {
       font-size: 30px;
       margin-top: 30px;
       margin-bottom: 10px;
     }
     > .post-subtitle {
       margin: 0;
       font-weight: 300;
       margin-bottom: 10px;
     }
   }
   > .post-meta {
     color: @gray;
     font-size: 18px;
     font-style: italic;
     margin-top: 0;
     > a {
       text-decoration: none;
       color: @gray-dark;
       &:hover,
       &:focus {
         color: @brand-primary;
         text-decoration: underline;
       }
     }
   }
   @media only screen and (min-width: 768px) {
     > a {
       > .post-title {
         font-size: 36px;
       }
     }
   }
}

// Sections

.section-heading {
   font-size: 36px;
   margin-top: 60px;
   font-weight: 700;
}

.caption {
   text-align: center;
   font-size: 14px;
   padding: 10px;
   font-style: italic;
   margin: 0;
   display: block;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
}

footer {
   padding: 50px 0 65px;
   .list-inline {
     margin: 0;
     padding: 0;
   }
   .copyright {
     font-size: 14px;
     text-align: center;
     margin-bottom: 0;
   }
}

// Contact Form Styles

.floating-label-form-group {
   font-size: 14px;
   position: relative;
   margin-bottom: 0;
   padding-bottom: 0.5em;
   border-bottom: 1px solid @gray-light;
   input,
   textarea {
     z-index: 1;
     position: relative;
     padding-right: 0;
     padding-left: 0;
     border: none;
     border-radius: 0;
     font-size: 1.5em;
     background: none;
     box-shadow: none !important;
     resize: none;
   }
   label {
     display: block;
     z-index: 0;
     position: relative;
     top: 2em;
     margin: 0;
     font-size: 0.85em;
     line-height: 1.764705882em;
     vertical-align: middle;
     vertical-align: baseline;
     opacity: 0;
     -webkit-transition: top 0.3s ease,opacity 0.3s ease;
     -moz-transition: top 0.3s ease,opacity 0.3s ease;
     -ms-transition: top 0.3s ease,opacity 0.3s ease;
     transition: top 0.3s ease,opacity 0.3s ease;
   }
   &::not(:first-child) {
     padding-left: 14px;
     border-left: 1px solid @gray-light;
   }
}

.floating-label-form-group-with-value {
   label {
     top: 0;
     opacity: 1;
   }
}

.floating-label-form-group-with-focus {
   label {
     color: @brand-primary;
   }
}

form .row:first-child .floating-label-form-group {
   border-top: 1px solid @gray-light;
}

// Button Styles

.btn {
   .sans-serif;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 1px;
   border-radius: 0;
   padding: 15px 25px;
}

.btn-lg {
   font-size: 16px;
   padding: 25px 35px;
}

.btn-default {
   &:hover,
   &:focus {
     background-color: @brand-primary;
     border: 1px solid @brand-primary;
     color: white;
   }
}

// Pager Styling

.pager {

   margin: 20px 0 0;

   li {
     > a,
     > span {
       .sans-serif;
       text-transform: uppercase;
       font-size: 14px;
       font-weight: 800;
       letter-spacing: 1px;
       padding: 15px 25px;
       background-color: white;
       border-radius: 0;
     }

     > a:hover,
     > a:focus {
       color: white;
       background-color: @brand-primary;
       border: 1px solid @brand-primary;
     }
   }

   .disabled {
     > a,
     > a:hover,
     > a:focus,
     > span {
       color: @gray;
       background-color: @gray-dark;
       cursor: not-allowed;
     }
   }
}

// -- Highlight Color Customization

::-moz-selection {
   color: white;
   text-shadow: none;
   background: @brand-primary;
}

::selection {
   color: white;
   text-shadow: none;
   background: @brand-primary;
}

img::selection {
   color: white;
   background: transparent;
}

img::-moz-selection {
   color: white;
   background: transparent;
}

body {
   webkit-tap-highlight-color: @brand-primary;
}

Ich habe mal hier etwas rausgesucht, wo man die Größe wohl einstellen kann, jedenfalls laut Bootstrap Hilfe

""
Punkt anpassen, an dem sich das Navbar-Layout verändert
Die Navbar faltet sich zu ihrer vertikalen mobilen Ansicht zusammen, wenn das Anzeigefenster schmaler als @grid-float-breakpoint ist und wird horizontal wenn die Breite des Anzeigefensters mindestens @grid-float-breakpoint ist. Verändere diese Variable im Less-Quellcode, um zu kontrollieren, wann die Navbar zwischen der kleinen mobilen und der breiteren Ansicht wechselt. Der Standard-Wert ist 768px (der kleinste "small"-, oder "tablet"-Bildschirm).

""

Ich habe versucht, es zu ändern, dabei passiert aber garnichts, egal ob ich jetzt 1.000px anstelle von 768px nehme.
Kennt sich damit vielleicht jemand aus und kann mir helfen, dass automatisch das Drowdown Menü erscheint, sobald der Home Button links an "The Division Fanpage" stößt?
 
SkyDefend schrieb:
Ich habe versucht, es zu ändern, dabei passiert aber garnichts, egal ob ich jetzt 1.000px anstelle von 768px nehme.
Kennt sich damit vielleicht jemand aus und kann mir helfen, dass automatisch das Drowdown Menü erscheint, sobald der Home Button links an "The Division Fanpage" stößt?
Zum Vergrößern anklicken....

Die vendor files verändert man grundsätzlich nicht, sondern überschreibt diese höchstens durch eigene Styles. Im vorliegenden Fall reicht es aber wahrscheinlich schon, hidden-* classes von Bootstrap hinzuzufügen, um Menüpunkte je nach Auflösung auszublenden.
http://getbootstrap.com/css/#responsive-utilities
 
Werbung:
Tronjer schrieb:
Die vendor files verändert man grundsätzlich nicht, sondern überschreibt diese höchstens durch eigene Styles. Im vorliegenden Fall reicht es aber wahrscheinlich schon, hidden-* classes von Bootstrap hinzuzufügen, um Menüpunkte je nach Auflösung auszublenden.
http://getbootstrap.com/css/#responsive-utilities
Zum Vergrößern anklicken....

Wenn ich was ändere, mache ich generell immer eine kopie davon und nutze diese dann :D -
Wie genau würde das bei mir aussehen, regel ich das dann in HTML selber?

Code: 
<div class="index.html">Home</a>
                    </li>
                    <li>
                        <a href="about.html">Über das Spiel</a>
                    </li>
                    <li>
                        <a href="neues.html">Neuigkeiten</a>
                    </li>
                    <li>
                        <a href="galerie.html">Galerie</a>
                    </li>
                    <li>
                        <a href="gaestebuch.html">Gästebuch</a>
                    </li>
                    <li>
                        <a href="kontakt.html">Kontakt</a>
                    </li>
                    <li>
                        <a href="impressum.html">Impressum</a>
                    </li>
                    <li>
                        <a href="changelog.html">Changelog</a>
                    </li>
                    <li>
                        <a href="ev/index.html">Englische Version</a>
                    </li>
                </ul>
            </div>

Sorry wegen den blöden Fragen, aber für einen Profi ist das immer einfacher als für einen Neueinsteiger ^^
 
Achso sieht das aus oO
Vielen Dank, ich sagte ja, nicht jeder versteht HTML auf Anhieb, besonders nicht nach so einer kurzen Zeit :D

Ok ich habe das jetzt mal gemacht, aber ich bin anscheinend einfach unfähig.
Die vershwinden jetzt in der Tat, dafür taucht aber kein Dropdownmenü auf, was ja auch nicht ganz richtig sein kann.
Was muss ich da noch machen?
Hab es jetzt nur an der Home Seite ausprobiert.
Allerdings rutschen die Menüpunkte wieder nach unten, sodass die Leiste groß wird. :/
Sorry, wenn es manchen vorkommt als würde ich mich seltenblöd anstellen :(

@Tronjer
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben