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

Frage bezüglich Grundaufbau einer Website

K

Kevinb_91

Mitglied
Guten Tag,
und zwar bin ich neu in der ganzen HTML und CSS Branche und habe mal eine Frage bezüglich des Grundgerüstes einer Website.
Wie sollte man ran gehen, um die Homepage ansehnlich, für jedermann, zu gestalten? Denn es gibt ja viele verschiedene Desktop Auflösungen die Leute benutzten und somit sieht die Page bei anderen ggf. nicht so gut aus wie ich es gerne hätte.
Sollte man daher generell irgendwie mit % Angaben der Größen Arbeiten, oder wie geht man an sowas ran?
 
Erstmal danke,
ich habe mich jetzt ein wenig über Bootstrap erkundigt und wollt einfach nochmal eine Frage anhängen.
Ist es denn sinnvoll, dass ich als Neueinsteiger direkt auf Bootstrap zurückgreife, da einem ja dort doch das meiste vorgekaut wird?

Mfg.
 
Naja nicht wirklich sinnvoll, da du erstmal die Grundlegenden Kenntnisse in HTML und CSS erlernen solltest bevor du mit dem Frameworks umgehst.
 
Das kommt auf deine Zielsetzung an. Willst du nur schnell eine Website auf die Beine stellen, dann ist Bootstrap eine gute Sache.
Willst du allerdings längerfristig Webentwicklung betreiben, dann leg Bootstrap erstmal auf die Seite und beschäftige dich mit den Grundlagen von HTML und CSS. Nutze Bootstrap vielmehr als Spickzettel und versuche die Dinge zu verstehen, die dort passieren.
Ein Webentwickler sollte durchaus in der Lage sein, eine Website auch ohne Bootstrap oder andere Frameworks aufzubauen. Denn auch Bootstrap wird irgendwann abgelöst werden und einen Frontend-Entwickler der HTML und CSS mit dem Zusatz "nur mit Bootsrap" wird wohl keiner einstellen...
 
Was ist denn die sinnvollste Methode um, sagen wir mal, einen Standard Footer, oder auch eine Headnavigation, zu erstellen, der die komplette Seitenbreite einnimt. Habe mal ein X-beliebiges Bild hier gefunden wo dies der Fall ist: http://i.stack.imgur.com/P9sPj.png
Wie geht man damit um? sollte man in % arbeiten, oder wie macht man das?

Mfg.
 
ganz grob für den Footer auf dem Bild:

html:
HTML: 
<footer>
    <div class="wrapper">
        <div>
            <h3>Services</h3>
            <ul>
                <li><a href="#">...</a></li>
                ...
            </ul>
        </div>
        <div>
            ...
        </div>
        <div>
            ...
        </div>
        <div>
            ...
        </div>
        <div>
            ...
        </div>
    </div>
</footer>

css:
HTML: 
footer {
    width: 100%;
    background: #000;
    border-top: 2px solid red;
}

footer > .wrapper {
    width: 100%;
    max-width: 960px;
    overflow: hidden;
}

footer > .wrapper > div {
    width: 20%;
    float: left;
}
 
Ok super alles klar, also ganz simpel in % Angaben.

Dann noch eine aller letzte Frage, nochmal bezogen auf Bootstrap;
Dort ist ja alles vorgegeben und nehmen wir mal an mir gefällt dort z.B. ein Button... Dieser ist jetzt aber rot, ich möchte aber einen Gradient Background einfügen.
Der Mensch im Tutorial was ich mir angesehen habe sagt, man könne Elementen ganz einfach mehrere classes zuordnen und solle seine eigene, z.b. "meincss.css" Datei erstellen und dem HTML Dokument beifügen, dort sollte man diese Sachen dann stylen, OHNE die Bootstrap css Dateien anfassen zu müssen!
Jetzt aber zu meiner Frage; Wenn ich dort 2 classes angebe, in denen folglich 2 verschiedene Background Eigenschaften angegeben sind (In der Bootstrap.css der rote Background und in meine.css der was weiß ich... blaue Background), wie mach ich das denn, dass er auch die Farbe nimmt die ich letztendlich in meiner css Datei wünsche und den Rest aus der Bootstrap.css Datei?

Mfg.
 
Jetzt aber zu meiner Frage; Wenn ich dort 2 classes angebe, in denen folglich 2 verschiedene Background Eigenschaften angegeben sind (In der Bootstrap.css der rote Background und in meine.css der was weiß ich... blaue Background), wie mach ich das denn, dass er auch die Farbe nimmt die ich letztendlich in meiner css Datei wünsche und den Rest aus der Bootstrap.css Datei?
Zum Vergrößern anklicken....

Du musst dazu im HTML diese Klasse in das entsprechende Element schreiben, und dazu eine CSS Datei erstellen, in welcher die Klasse mit Attributen belegt wird. Wenn du Bootstrap verwendest, hast du mindestens zwei CSS Files. Die boostrap.css und eine weitere, bsw. styles.css, in welche du eigene Anweisungen schreibst.
 
Aber im Bootstrap sind diese Sachen ja bereits definiert. Z.B. gibt es dort einen sagen wir weißen Button der in der Bootstrap.css dann mit "Background-Color: #FFFFFF" definiert ist. Nun kann ich natürlich in meine styles.css schreiben "Background-Color: #e5e5e5" und ins entsprechende Tag beide Klassen... Blos das kollidiert doch irgendwie wenn ich 2 Klassen angebe in denen BEIDE eine background-Color definiert haben. Wie genau vermeide ich denn diese Kollision ohne in der Bootstrap.css rumzufuschen?

Mfg.
 
Hallo,

nein, da kollidiert nichts. Der Browser nimmt einfach die letzte Anweisung und überschreibt damit alle vorher definierten. Ausnahmen sieher weiter unten im Text.

Dieses Verhalten ist eines der bestimmenden Merkmale vom CSS und deshalb auch im Namen festgehalten, nämlich im C = Cascading.

Ein Vorteil ist zum Beispiel, das die Anweisungen von Bootstrap greifen, falls deine eigenen in einem Browser nicht funktionieren sollten. Die Seite wird dann zwar etwas anders aussehen, aber trotzdem funktionieren.

wenn ich 2 Klassen angebe

Du sollst gar nicht unbedingt eine zweite Klasse angeben, sondern kannst die Anweisungen von Bootstrap in deiner eigenen CSS-Datei direkt überschreiben. Das ist in der Regel sinnvoller als eigene Klassen zu definieren, die zudem den HTML-Quelltext aufblähen.

Wenn du eine zweite Klasse erstellst musst du zudem noch Rangregeln beachten. Durch die kann es passieren, das eine bereits vorhandene Klasse höher bewertet wird als eine nachfolgende und deshalb nicht überschrieben wird.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben