bin aktuell dabei mein Portfolio zu coden. Dazu muss man sagen, dass ich erst seit ~1 Woche wieder GFX'e und das Coden/Webdesign noch nie gemacht habe.
Ich hab es jetzt geschafft mein Design einfach in HTML/CSS zu packen. Das bedeutet ich hab mein Design geslicet, also in Header/Content/Home-Button/About-Button etc. und dann in HTML umgesetzt. In meinem HTML Quellcode siehts dann wie folgt aus:
quote:
<div id="header"></div>
Im CSS hab ich dann bei der #header einfach das geslicete Header bild als Backgroundimage definiert, sieht so aus:
In diesem Stil hab ich mein ganzes "zerslicetes" Portfolio wieder zusammengesetzt. Nun hab ich aber eine Frage: Macht man das so ? & wenn "Ja", wie realisiere ich damit ne Navigation? Weil ich will dann eine Navigation mit meinen Buttons & der dazugehörigen Schrift, so wie ich es im Design gemacht hab & die dann auch einfach geslicet hab. Ich glaube per Backgroundimage im CSS geht das nicht, das bedeutet ich muss die Bilder im HTML in meinen "<div>" packen, bloß wenn ich da dann nen Link drum tue verschiebt sich das ganze Design & alles passt nicht mehr.
Ich bin ein bischen verzweifelt, bin ein totaler Anfänger im Coden und mach das jetzt effektiv seit 2 Tagen. Ich hoffe mein Problem ist für einige klar geworden, sodass ihr mir helfen könnt.
a:
{
display:block;/* inline elemente koennen keine groesse und breite haben, demenstprechend musst du es auf block umstellen */
width:100px;/*je nachdem wie gross dein button ist*/
height:30px;
background-image:url(pfad/zur/url);
text-decoration:none;
}
/*wenn du nun nen hover haben willst fuer den link solltest du das schreiben*/
a:hover
{
background-image:url(pfad/zum/hoverbild);
}
Das war jetzt einfach mal so eben hier im Board runtergeschrieben, kann sein das da nen Fehler drin ist,weil ich hier kein Syntaxhighlighting habe.
Wie dem auch sei, so kannst du nun deine Linsk gestalten.
Was du als naechstes dir anschaun solltest ist, wie man ein Menu mit einer Liste erstellt
das sieht dann ca so aus:
das wuerde bis jetzt nen normales vertikales menu erstellen, wenn du das ganze nun horizontal haben moechtest dann machste folgendes:
du gibst deinen li von der liste ein float:left sieht dann so aus
code:
1:
2:
3:
4:
5:
6:
7:
ul li
{
float:left;
margin-left:10px;
}
damit ist es dann horizontal, dein menu, jedenfalls macht es den anschein.
was du als naechstes machen musst ist natuerlich den float aufloesen, das geht damit, dass du das uebergeordnete element auch floatest, was in diesem fall die ul waere, bzw du musst ein clear machen:
Gesagt sei noch, dass man das ganze Design natürlich nicht mit hintergrundbildern umsetzt. Alles was du kannst, setzt du mit Markup (HTML u.ä.) um. Da wären zum Beispiel Text, Interaktive-elemente wie links oder Navigationen und so weiter.
Zu deinem Problem mit dem Image, padding, border oder margin sind schuld. Im CSS einfach die 3 nacheinander null setzen. zb margin; 0;. Dann weist du wer es war
Oder du verwendest ein reset-sheet...
Schön ist das mit dem bild aber nicht, deswegen machen wir das auch nicht. Bilder die per <img> eingebunden werden gehören zum Inhalt. Du solltest versuchen, dein Markup und dein Layout zu trennen. Also alles was dem Auge dient gehört nicht ins Markup.
Ich bin mir nicht sicher ob ich das ganz verstanden hab. Also ich setzte mein Design nicht mit Hintergrundbildern um, bedeutet das, dass ich alle Bilder (sprich die die aus dem slicen hervorgegangen sind, Buttons, Header etc.) direkt ins Html packe und dann bloß per CSS positioniere? Und was is jetzt genau der Unterschied zwischen Markup & Layout?
Sorry dass ich nochmals nachfrage, bin bloß sehr sehr neu in der Materie, daher sind mir viele Zusammenhänge auch nicht auf Anhieb klar
Nein nein, bilder gehören nur dann ins markup, wenn sie zum inhalt gehören, oder ihm dienlich sind.
Markup ist die struktur samt inhalt. Mit Layout ist das Design gemeint, also headerhintergrund und alles was nicht inhalt ist, also alles für das auge.
ungefähr so:
quote:
Eine Website sollte sich leicht in andere Darstellungen umwandeln lassen (sogenannte "graceful transformation"), da Benutzeragenten wie Browser oder Screen Reader die Website jeweils unterschiedlich darstellen. Die Umwandelbarkeit ist leichter gewährleistet, wenn die Struktur einer Website in HTML (Hypertext Markup Language) oder XHTML (Extensible Hypertext Markup Language) programmiert und das Design in CSS (Cacading Style Sheets) erstellt sind, wenn möglichst viel Inhalt als Text oder zumindest als zusätzliche Erklärung von Multimediainhalten vorliegt, und wenn die HTML-Dokumente nicht nur mit einer bestimmten Hardware (z.B. nicht alleine mit einer Computermaus, sondern auch mit der Tastatur) genutzt werden können.
Allgemein wird empfohlen, den Inhalt in einfacher und verständlicher Sprache zu vermitteln und übersichtlich zu gliedern. Es sollte leicht fallen, innerhalb der Website zu navigieren.
Alles was sogenannter inhalt/struktur ist, wird in markup(html) umgesetzt. Alles was Design und Aussehen ist, setzt du mit CSS um. (u.a. auch mit bildern)
ich hoffe du verstehst nun, was ich meine
(Einfach so viel wie möglich mit html umsetzen)
/e:
wenn es hilft, mache ich dir mal ein beispiel?
This post has been edited 2 time(s), it was last edited by quantum: 03.01.2010 17:52.
If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.
After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.
In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.
Sign up now and enjoy the advantages as a registered member.
(This website will be ad-free after a complete free sign up.)
probier es aus und wenn du fragen hast, stell sie einfach
05.01.2010 