Beiträge von John_Raider

Hast du mal bei der ARGE nachgefragt? Die bieten Beratungsgespräche für Abiturienten.

Gruß John

Hallo zusammen,

wie ich dank einiger sehr freundlicher Benutzer in diesem Forum festgestellt habe, muss ich in Richtung HTML5 und CSS3 noch einiges lernen.
Dies werde ich auch tun, aber für die Projekte welche ich plane, habe ich dafür leider nicht mehr genügent Zeit.
Ich wollte mal anfragen, ob sich jemand bereit stellt, mir das ganze zu erstellen, das Design bei einer der beiden Projekte ist schon fertig. Ich könnte mit Paysafe zahlen, oder euch
eine Domain und Webspace anbieten, wie ihr möchtet. "Ich hoffe das ganze ist hier überhaupt gestattet!"
Bei den beiden Projekten geht es um reine Informationsseiten d.h. kein Datenbanken etc...

Gruß John

Okay vielen Dank wirklich sehr nett von euch, ich sehe ich muss noch einiges lernen.

Ich danke euch, bin gerade ein bisschen verzweifelt, ich sehe teilweise Begriffe in dem Code, die ich noch nie gesehen habe und auch die Anpassungen in den IE bringen mich voll aus dem Konzept.
Ich verstehe es einfach nicht mehr, es hat alles funktioniert und jetzt scheint es falsch zu sein bzw. wenn ich es auf meinen Webspace hochlade nicht zu funktionieren.
Ich muss jetzt mal gucken, mit dem Header weiß ich wirklich nicht anders weiter.

Zitat von wolf

könnt ihr bitte aufhören hamburger zu posten? :x

Klares schlichtes Design ist wichtig.. mehr nicht, weniger auchnicht..

Ok, also zurück zum Thema.
Hab das mit dem Footer jetzt wie folgt gelöst, bei mir funktioniert es, ist nur die Frage, aber der Code in Ordnung ist, oder ob ihr mir etwas anderes empfehlen würdet.

<div id="fussbereich">
<p>Test</p>
</div>

#fussbereich {
    background-image: url(images/test.png);
    background-repeat: repeat-x;
    height: 150px; 
    position: absolute;
    bottom: 0;
    width: 100%;
}




#fussbereich p {
    color: azure;
    line-height: 150px;
}

Zitat von JR Cologne

Eine Frage: Was soll das ganze eigentlich werden? Deine eigene Website oder soll das nur zur Übung sein und beziehst du dich auf irgendeine Aufgabe aus dem HTML-Seminar?

Falls es deine eigene Website werden soll, würde ich erstmal HTML5 und CSS3 mithilfe des HTML-Seminars lernen. Denn dann weißt du auch, wie du das ganze besser umsetzen kannst/solltest.

Wenn es nur zur Übung ist, kannst du ruhig erstmal so weitermachen. Wichtig ist halt nur, dass du dir später dann auch andere Arbeitsweisen anschaust, damit du nicht für immer bei der alten Variante bleibst.

Wenn du auf das blaue noch ein Logo packen willst, kannst du es einfach per CSS einbinden und dann entsprechend, wie du es haben willst, positionieren.

Die Angaben in px kannst du entweder so lassen oder du gibst sie halt in % an. Dadurch bringt dir aber erst was, wenn du die Seite veröffentlichen möchtest.

Mit dem <header>-Tag musst du erstmal nicht arbeiten, wenn du es nicht gerade hochlädst. Falls du es aber hochlädst, käme dort dann der Kopfbereich rein und nicht mehr und auch nicht weniger.

Alles anzeigen

Das ganze soll für einen guten Freund von mir sein. Ich hatte mal in einem anderen Forum nachgefragt und dort hatte man mir gesagt, wenn ich mit Photoshop halbwegs gut umgehen kann, dann hätte ich schon die halbe Miete.
Die andere Hälfte wäre angeblich kein Problem.

Ich hab mir das auf html-seminar jetzt schon ein paar mal angeschaut, dennoch komme ich damit irgendwie nicht so ganz zurecht, ich bräuchte einfach mal ein Beispiel anhand meiner Sachen.

Zitat von MrMurphy

Hallo

Eine veraltete Vorstellung. Niemand besucht eine Seite wegen ihres Layouts. Entscheidend ist nur der Inhalt. Ob der Header wie mit Photoshop aussieht oder nur ähnlich oder ganz anders interessiert die Besucher kein bißchen.

Das beste Layout ist jenes, welches von den Besuchern überhaupt nicht wahrgenommen wird. Wahrgenommen wird es nämlich nur wenn es stört oder sogar nervt.

Gruss

MrMurphy

Alles anzeigen

Deine Aussage würde ich nicht wirklich unterstützen, es gibt das Sprichtwort, dass das "Auge immer mit isst". So ist es auch bei der Homepage, natürlich darf das Design nicht überladen sein, aber ich denke es macht schon einen großen Unterschied, wenn ich ein Design benutze, welches sehr aufgeräumt und ansehnlich wirkt im Gegensatz zu einer Homepage, bei der nur Wert auf den Inhalt gelegt wurde.

Zitat von JR Cologne

Ich würde nicht sagen, dass es so wichtig ist die Höhen und Breiten relativ anzugeben. Das ist eigentlich erst wichtig, wenn er eine Website auch mal hochladen möchte. Denn bei ihm wird die Seite ja komplett richtig angezeigt. Sicherlich ist es richtig, wenn man das so lernt, aber es gibt am Anfang einfach wichtigere Dinge.

Ein guter Schritt in die richtige Richtung wären sicherlich HTML5 und CSS3.

Wolf hat ja auch schon gesagt, dass du den Schatten nicht mithilfe eines divs und einem Bild umsetzten solltest, sondern es mit CSS gestalten solltest. Dafür gibt es nämlich den guten Box-shadow, womit du halt deinem Kopfbereich, einen Schatten verpassen kannst.

Du bist also der Auffassung, dass ich erstmal so weiter machen soll?

[Blockierte Grafik: http://fs2.directupload.net/images/150702/temp/ak6key3f.png]

Hier ist der Header, denn habe ich dann in die 3 Teile aufgeteilt, wie ihr oben in der CSS einsehen könnt. Zudem soll auf das blaue noch ein Logo, langsam verzweifel ich.
Wie machen ich das denn jetzt besser? Der Header soll vom linken bis rechten Rand laufen, der Inhalt aber nur 850px ca.
Soll ich dem inhalt dann eher sagen width:60% statt width 850px? Und die 3 Bilder? und die 3 Bilder alle in <header> reinpacken?

Zitat von JR Cologne

In deinem Fall würde dann HTML und CSS auf jeden Fall ausreichen.

Wie das genau mit Photoshop ist, weiß ich nicht. Vielleicht gibt es da ja noch irgendwas, was dann bzgl. der Tatsache, dass du mit Photoshop arbeitest, ganz hilfreich wäre zu lernen. Aber mir fällt jetzt nichts ein, was du machen könntest.

Eins noch: Wenn du noch tiefer in HTML/CSS einsteigen willst und du dem englischen halbwegs mächtig bist, kann ich dir w3schools nur empfehlen. Dort kann man dann nochmal ganz gute Ergänzungen zum HTML-Seminar finden.

Ok ich danke dir.

Zitat von wolf

Du brauchst in morderner webentwicklung am ende kein photoshop mehr .. keine Hintergrund bilder für buttons keine transparenten bilder für schatten usw.. alles via CSS lösbar (ein paar ausnahmen gibt es)..

Ja ich hab es schon gesehn, man kann nun auch Farbverläufe etc einfach per CSS deklarieren, hab nur Angst,dass es irgendwie von manchen Broswern nicht ganz akzeptiert wird.
Bin halt noch relativ neu im Bereich HTML und CSS.
Zudem hab ich einen Header, bei dem ich bezweifel, dass man den komplett nur über CSS erstellen kann.

Zitat von JR Cologne

Du darfst Divs selbstverständlich benutzen. Allerdings gibt es mittlerweile Alternativen, die du aufgezeigt bekommst, wenn du dich mit HTML 5 befasst. Da wird dann z.B. der div für den Kopfbereich mit dem Header-Tag ausgetauscht. Das ist aber im Prinzip das gleiche, wie ein div, nur halt mit einem anderen Namen und zusätzlich haben diese Tags dann auch noch eine semantische Bedeutung, im Gegensatz zum normalen div-Tag.

Ja ok, hatte mich da falsch ausgedrückt, wollte wissen wie ich das stattdessen machen.

Zitat von wolf

Wenn du einen Schatten brauchst, dann nimmst du kein extra Div dafür sondern machst ihn da hin wo du ihn bruachst, ohne extras..

Ok ich bring euch ein Beispiel, ich habe mir mit Photopshop einen Header zusammen gebastelt, nach meiner Variante, würde ich es wie folgt machen:

<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="schatten"></div>
<div id="inhalt">
        <p>Inhalt</p>    
        <p>Inhalt</p>
        <p>letzte Zeile vom inhalt</p>
</div>





</body>

#header {
    background-image: url(images/kopfbereich.gif);
    background-repeat: repeat-x;
    background-position: top;
    height: 309px;
}




#navigation {
    background-image: url(images/naviback.gif);
    background-repeat: repeat-x;
    height: 48px;
}




#schatten {
    background-image: url(images/Schatten.png);
    background-repeat: repeat-x;
    height: 15px;
}

Wie soll ich das nur anders machen? Im Header ist auch siehe "#navigation" der Hintergrund für die Navi mit drin. Es funktioniert einwandfrei, aber würde natürlich gerne besser, bzw. neuerer arbeiten wollen.

Wir mache ich das Design denn sonst, wenn ich keine Div's benutzen darf? Hab das alles aus dem HTML-seminar..

Hallo zusammen..

mittlerweile habe ich es geschafft einen Header zu erstellen, sogar aus mehreren "Div's" d.h. zum Beispiel den Schatten nochmal als extra "div" usw.
Nun hab ich aber einige Probleme mit dem Footer, ich habe hier im Forum gelesen, dass es bessere alternative angeblich zu dem Sticky Footer gibt.
Ich hab das Tutorial ausprobiert, es funktioniert, aber sobald ich das ganze in meinen Code intergrieren möchte gehts schief. hab zum Beispiel meinen jetztigen Header mit "repeat-x" von ganz links nach ganz rechts laufen lassen. Aber durch die fest definierte Größe von "850px" was in dem Tutorial notwendig war, ändert er mir jetzt auch den header auf diese Größe, ich hoffe ihr versteht ein bisschen was ich meine. Hab das gleiche eigentlich auch mit dem Footer vor, aber da hab ich mich noch nicht dran getraut.

<body>
<div id="homepage">
        <div id="header"></div>   
        <div id="inhalt">
        <p>Inhalt</p>    
        <p>Inhalt</p>
        <p>letzte Zeile vom inhalt</p>
    </div>

    <div id="fussbereich">
    ww.html-seminar.de
    </div>
</div>




    
</body>

* {
    margin: 0;
    padding: 0;
}




html, body {
    height: 100%;
    text-align: center;
}




#header {
    background-image: url(images/kopfbereich.gif);
    background-repeat: repeat-x;
    background-position: top;
    height: 309px;
}




#homepage {
    position: relative;
    min-height: 100%;
    width: 850px;
    margin: 0 auto;
    background-color: black;
}




#inhalt {
    text-align: left;
    background-color: brown;
    padding-bottom: 2em;
}




#fussbereich {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: aqua;
    height: 2em;
    line-height: 2em;
}

Gruß John

Also ich bleib eher bei Internetseite, bei denen der Benutzer sich lediglich ein paar Informationen einholen kann zum Beispiel über eine Firma, d.h. in diesem Sinne nur ein paar Links.
Mir geht es halt nur darum, mehr aus dem Design rauszuholen, ich behaupte von mir, dass ich sehr gut mir Photoshop umgehen kann und da ist halt die Frage, ob CSS da reicht?

Zitat von JR Cologne

CSS

#navigation {
	text-align: center;
	background-color: black; /* in deinem Fall käme dann dort das Hintergrundbild hin */
	height: 48px;
	/* background-repeat: repeat-x;   // das kannst du bei der Nutzung deines Hintergrundbildes dann wieder auskommentieren */
	line-height: 48px; /* das sorgt für die vertikale Zentrierung, also nicht vergessen :D */
}




#navigation li {
	width: 140px;
	letter-spacing: 4px;
	list-style: none;
	display: inline;
}

Alles anzeigen

Das wäre die Lösung, wenn ich es richtig verstanden habe, dass du die Schrift vertikal zentrieren möchtest...

Genau das meinte ich, wirklich super. Vielen vielen Dank.
Endlich mal ein Forum, in dem einem wirklich geholfen wird.

Gruß John

Zitat von MrMurphy

Hallo

Nein. Ich habe schlicht die Grundlagen gelernt (aktuell HTML5 / CSS3) sowie mich mit Responsive Design und Media Queries beschäftigt und wende sie an. Also ganz klassisch.

Gruss

MrMurphy

Alles anzeigen

Zitat von wolf

Hier kannst du nachschauen was unterstützt wird: http://caniuse.com/
Hier kannst du deinen Code wenn du fertig bist mit allen nötigen Präfixen versehen lassen: http://pleeease.io/play/

Ansonnsten noch in allen Browsern ähnliches aussehen: http://necolas.github.io/normalize.css/
jQuery src: http://cdnjs.cloudflare.com/aj…query/2.1.3/jquery.min.js
CSS Tutorials: https://css-tricks.com/
Ispiration: https://dribbble.com/, http://tympanus.net/codrops/, http://ettrics.com/blog/
Fülltexte: http://meettheipsums.com/

...

EDIT..
http://google.com/ .. hatte ich vergessen

Alles anzeigen

Vielen Dank euch beiden, hatte letzte Woche die ganzen HTML und CSS3 von html-seminar durchgearbeitet. Hat mich wirklich um einiges weiter gebracht. Sollte ich am besten neben HTML und CSS noch etwas lernen, oder meint ihr das reicht volkommen aus?

Zitat von wolf

Das gehört einfach zum Design dazu
Ne ehrlich, du machst es dir evtl leichter wenn du das mit CSS umsetzt.. erzähl halt wie der hintergrund aussieht..

bit background-position kannst du das bild auch noch verschieben..

Hier hab ich mal ein Bild:

[Blockierte Grafik: http://fs2.directupload.net/images/150629/temp/hooyvtxf.png]

Die rote Linie wäre eigentlich der Punkt, wo ich die Navigation gerne hätte. Verstehst du jetzt ungefähr was ich meine?

Hallo zusammen,

ich wollte mal fragen, wie ihr bei HTML und CSS vorgeht? Ich habe einige Beispiele gesehen, bei dem der "Border" zum Beispiel auch noch mal in der alten Schreibweise (CSS) zusätzlich in den Code eingebunden wurde?
Ein anderes Problem gibt es angeblich bei dem "IE", der nur zentriert, wenn man

body {
	text-align: center;
}

in den Code mit einfügt.

Gibt es da eine Sammlung, auf die ihr achtet oder irgendwas ähnliches?

Gruß John

Zitat von MrMurphy

Hallo,

mit deinem Quellcodeschnipseln ist bei mir alles ok.

Gruss

MrMurphy

Alles anzeigen

Ja genau, dass weiß ich, aber wird das Menu bei dir auch der "background" Grafik entsprechend vertiakl zentriert? Und nicht nur horizontal.

Zitat von wolf

Blöde frage aber brauchst du wirklich ein Bild als Hintergrund?

Ja gehört einfach zum Design dazu.
Mit padding top und bottom kann man nicht arbeiten, oder gibt es irgendeinen Trick?

Gruß John

Hallo zusammen,

ich komme direkt mal zu meiner ersten Frage.
Ich habe meiner Navigation einen Hintergrund gegeben, die Höhe des Backgrounds beträgt 48px.

Das einzige Problem was ich momentan habe, die einzelnen "Reiter" zentrieren sich nicht vertikal.

Mit padding-top und padding-bottom, habe ich es irgendwie nicht geschafft.

<div id="navigation">
	<li><a href="index.html">Home</a></li>
	<li><a href="referenzen.html">Referenzen</a></li>
	<li><a href="service.html">Service</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
</div>

#navigation {
	text-align: center;
	background-image: url(images/naviback.gif);
	height: 48px;
	background-repeat: repeat-x;
}




#navigation li {
	width: 140px;
	letter-spacing: 4px;
	list-style: none;
	display: inline;
}

Mit freundlichen Grüßen

John