Also ich möchte eine Stylsheet Datei haben, in der dann mein ganzes Layout ist. Nur leider weiss ich nicht wie ich eine Navigationsleiste aus 6 Bildern mit Hyperlink definieren kann? Könnt ihr mir helfen??

Schon mal danke im Vorraus!!!

Hat niemand eine Ahnung von CSS ich will doch nur Bilder ohne lücke nebeneinander positionieren und dann alle einzeln verlinken und das in einer externen CSS Datei.

Also eigentlich brauchst du da nichtmal CSS... du kannst doch einfach Links mit bildern füllen und sie neben einander positionieren... es sei denn du wolltest irgentwas besonderes haben. aber das müsstest du uns dann auch mitteilen.

das einfachste ist:

Code: Alles auswählen

<div>
<a href="ziehl1.html"><img src="bild1.jpg" alt="ziehl1" height="50" width="200" border="0" /></a>
<a href="ziehl2.html"><img src="bild2.jpg" alt="ziehl2" height="50" width="200" border="0" /></a>
[...]
<a href="ziehl6.html"><img src="bild6.jpg" alt="ziehl6" height="50" width="200" border="0" /></a>
</div>


falls du unbedingt so viel wie möglich auslagern willst schreibst du halt un deine CSS-datei:

Code: Alles auswählen

div a img {border: 0px; height: 50px; width: 200px;}

wenn du mehrere div's imt links verwendest kannst du auch diesem div noch eine ID geben und es dadurch eindeutig markieren. zb so:

html-datei

Code: Alles auswählen

...
<div id="navi">
...
</div>
...

CSS-datei

Code: Alles auswählen

div#navi a img {...}

mfg H-milch

Hey cool das werd ich mal aus probieren, ja ich wollte nämlich soviel wie möglich auslagern damit ich nicht immer das selbe in jede einzelne HTML Seite schreiben muss

Man das klappt einfach nicht.

Hab in der HTML Datei:

<div id="navi"></div>

und in der CSS Datei:

div#navi a img {
image:url(pic/image.bmp);
border: 0px;
height:50px;
width:200px;
}

TheTobi89 hat geschrieben:<div id="navi"></div>

Das ist ja auch LEER bzw, das ist jetzt nur der Layer, da ist noch kein Link (<a>) und auch kein Bild (<img>) drinn.
Probier es mal mit

Code: Alles auswählen

<div>
  <a href="ziehl1.html">
    <img src="bild1.jpg" alt="ziehl1" />
  </a>
</div>

Ist der Code von H-Milch weiter oben

TheTobi89 hat geschrieben:div#navi a img {
image:url(pic/image.bmp);
border: 0px;
height:50px;
width:200px;
}

Die CSS-Eigenschaft "image" gibt es nicht !

AHHHHHHHH !!!!!!
Hast du wirklich vor Bitmap-Datein als Grafiken zu vewenden ?
Das ist eins der schlechtesten Grafikformate die es für das Web gibt. Einmal deswegen weil die Datein risig sind (gleich lange Ladezeiten) und zum anderen weil ich glaube das nur der InternetExplorer das unterstützt !
Schau mal hier: http://www.informationsarchiv.net/foren/beitrag-31116.html#281245 mit meinem letztem Satz sage ich welche Dateitypen geeignet sind und in dem Post drüber wird auch gesagt welche die angebrachten sind.

MfG
Dragonl

PS. Bitte sei doch so freundlich und nutze in Zukunt die [code]-Tags wenn du hier Quelltexte postest, die sind dan einfacher zu lesen

Hmm ich glaube ihr versteht mich nicht richtig liegt wahrscheinlich daran das ich mich falsch ausdrücke

Also ich will in einer externen CSS Datei definieren das ich auf jeder Website die selben Bilder haben will. Diese Bilder muss ich dann nur noch mit z.b.
<div class="blub"></div> aufrufen. So das ich nicht immer ellenlange tags schreiben muss wie z.b. dies hier.

<a href="home.html" target="iframe">
<img src="blub" alt="" border="0"></a>
<a href="home.html" target="iframe">
<img src="blub" alt="" border="0"></a>
<a href="home.html" target="iframe">
<img src="blub" alt="" border="0"></a>
<a href="home.html" target="iframe">
<img src="blub" alt="" border="0"></a>
<a href="home.html" target="iframe">
<img src="blub" alt="" border="0"></a>

Hoffe das das in CSS überhaupt möglich ist und ihr versteht mich.


@dragonl

war nur ein beispiel mit der bmp weiss auch das die ziemlich groß sind aber danke für den Hinweis.

TheTobi89 hat geschrieben:@dragonl
war nur ein beispiel mit der bmp weiss auch das die ziemlich groß sind aber danke für den Hinweis.

Na dann ist ja alles klar, hatte schon befürchtet das doch

Wenn du ein Bild unbeding per CSS einbinden möchtest:

Code: Alles auswählen

.div_mit_bild{
  background-image:URL(./images/bg_bild.jpg);
  background-repeat:no-repeat;
  background-position:right;
  background-attachment:scroll;
}
/* Quelle: http://www.css4you.de/backgroundproperty.html */

Das nimmt dir aber nur ein Teil der Arbeit ab, wenn überhaupt !
Das <a>-Tag muss z.B. noch immer geschrieben werden. Jetzt ist es nur blöde, das das <a>-Tag keine Breiten- und Höhenangaben versteht und damit nicht die richtige Form annehmen kann die evtl. für das Bild erforderlich wäre. Könnte gelöst werden indem man ein <div> ins <a> setzt was aber nicht valide ist. Außerdem wäre das wieder genau soviel Arbeit als wenn du gleich ein <img> einsetzen würdest.

Naja wie auch immer, die Stylesheets hast du ja jetzt

MfG
Dragonl

[persönlichemeingun]
Das <img>-Tag ist für mich ein Grundlegendes Element einer Website wenn Bilder oder Grafiken dargestellt werden sollen und sollte deshalb auch im Quelltext zu finden sein.
[/persönlichemeingun]

Ok danke dann hat sich das ja jetzt erledigt

THX @ all

hab da nochwas gefunden... das ist so was minimum überhaupt...
es lohnt sich auch nur wenn du bei allen links das gleiche bild verwendest. an sonsten must du auch damit recht viel schreiben...

html:

Code: Alles auswählen

<body>
      <div id="navi">
        <a href="Home.html">Home</a>
        <a href="Products.html">Products</a>
        <a href="Services.html">Services</a>
        <a href="Support.html">Support</a>
        <a href="Order.html">Order</a>
        <a href="News.html">News</a>
      </div>
</body>


CSS:

Code: Alles auswählen

#navi {float: left; width: 600px; height: 50px;}

#navi a {
   display: inline; background: url('pfad/datei1.jpg') black; float: left;
   color: #765; text-decoration: none; height: 50px; width: 100px;
   margin: 0px; padding: 0px; border: 0px;
}
<!------ optionale Spielerei ------>
#navi a:link {color: #765; background:  url('pfad/datei1.jpg') black;}
#navi a:visited {color: #555; background:  url('pfad/datei1.jpg') black;}
#navi a:hover {color: #f00; background:  url('pfad/datei2.jpg') white;}
#navi a:active {color: #ff0; background:  url('pfad/datei1.jpg') black;}


die schrift ist in diesem beispiel noch nicht schön zentriert. das kannst du entweder mit text-align:center; vertikal-align: center;
oder mit dem padding der links machen. zu beachten ist dabei, wenn du padding erhöhst musst du width und height kleiner machen.
wenn du also padding-top und padding-bottom auf 10px stellst musst du width im 20px verringern
(nur bei "#navi a" und nicht bei "#navi")

mit der spielerei am ende kannst du noch n paar schöne effeckte erzeugen... besonders schön ist hierbei der hover effeckt. wenn du wie im beispiel ein anderes bild als standartmäßit definierst hast du einen sehr einfachen swapImage effeckt ganz ohne javascript ^^

mfg H-milch