zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder zusammensetzen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.09.2010, 21:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 14
Todeshügel befindet sich auf einem aufstrebenden Ast
Standard Bilder zusammensetzen

Hi,

ich hab gerade neu mit CSS angefangen und habe ein Problem. Ich habe schon viel gegoogelt aber die Lösungen funktonierten nie bei mir.

Also ich möchte mir im Endeffeckt mir Bilder "zusammensetzen".
Dafür habe ich bisher eine Tabelle genutzt und in jeder Zelle einen Bildteil untergebracht, wobei manche davon eine a href Verlinkung haben.
Vorher hatte ich alles noch nur in html und da hat es funktioniert aber seid ich auf CSS umgestiegen bin klappt es nicht. Die Bilder werden dank des CSS Rahmen bei Bildern mit Verlinkungen "auseinander gerissen".

Aussehen soll es ungefähr so:

1 1 1 1
1 2 2 1
1 2 2 1
1 1 1 1

1 - Normale Bilder
2 - Bilder mit Verlinkungen

Versucht habe ich es schon mit verschieden Methoden wie z.b. display: block, paddings, floats und anderen die ich leider nicht mehr weis wie die heißen.

Könnt ihr mir helfen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.09.2010, 21:17
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Da es sich anscheinend um Deko-Bilder handelt, mache eines draus und lasse es als bg-Bild kommen. Die Links legst Du dann darüber. Für eine Grafik-Navi siehe FAQ 15.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.09.2010, 21:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 14
Todeshügel befindet sich auf einem aufstrebenden Ast
Standard

Aber die Bilder mit den Verlinkungen sollen sich später automatisch aus einer verbunden MySQL Datenbank ergeben, d.h. das die Bilder wechseln.
Mit Zitat antworten
  #4 (permalink)  
Alt 12.09.2010, 21:57
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dann poste Dein Design, mit Hinweis, was wo gewechselt wird - andernfalls sind keine konkreten Tipps möglich.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 12.09.2010, 22:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 14
Todeshügel befindet sich auf einem aufstrebenden Ast
Standard

ja noch wechseln die nicht.. das soll später dazu kommen wenn ich weiter mit meiner seite bin..
hier ist mal ein ausschnitt von dem letzten versuch den ich gemacht hab.
Zitat:
<table cellspacing="0px" cellpadding="0px" border="0">
<tr>
<td><img {display: block;} src="Bilder/f1.bmp">
<td><img {display: block;} src="Bilder/f2.bmp">
<td><img {display: block;} src="Bilder/f2.bmp">
<td><img {display: block;} src="Bilder/f3.bmp">
<tr>
<td><img {display: block;} src="Bilder/f8.bmp">
<td><a href="intern.php"><img {display: block;} src="Bilder/h.bmp" border=0></a>
<td><a href="intern.php"><img {display: block;} src="Bilder/k.bmp" border=0></a>
<td><img {display: block;} src="Bilder/f4.bmp">
</tr>
</table>
Das ist jetzt nur ein Ausschnitt vom Code. Der erste tr-Bereich ist einer der unveränderlichen, der zweite der mit teilweise Verlinkungen.
Mit Zitat antworten
  #6 (permalink)  
Alt 12.09.2010, 22:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Nicht den Code, sondern das Design. Ohne die Bilder zu sehen, kann man nix sagen. Und nicht als zip, sondern als Link.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 12.09.2010, 22:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 14
Todeshügel befindet sich auf einem aufstrebenden Ast
Standard

so.. Hat ein wenig gedauert da ich das bisher nur offline hatte und ich wegen des SQL erstmal alles rauschmeißen musste.
Die Bilder sind nur vorläufig und werden später noch geändert.

Link

Die Links von den Bildern funktionieren nicht weil ich nur das nötigste dafür abgeändert habe damit es angeguckt werden kann, aber die Situation ist ja gleich.
Mit Zitat antworten
  #8 (permalink)  
Alt 12.09.2010, 22:57
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wenn sie immer alle dieselbe Höhe haben, können sie ohne umgebendes Element links floaten (d.h. im HTML alle img direkt aneinander).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 12.09.2010, 23:08
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Todeshügel Beitrag anzeigen
Dafür habe ich bisher eine Tabelle genutzt
Machst du doch immer noch, und das auch noch falsch. Keine einzige Tabellenzelle ist geschlossen. Und die "Inline-Styles" für die Bilder sind auch falsch.

So ist besser:

HTML-Code:
<ul class="bilder">
   <li><img src="Bilder/town/f1.bmp"></li>
   <li><img src="Bilder/town/f2.bmp"></li>
   <li><img src="Bilder/town/f2.bmp"></li>
   <li><img src="Bilder/town/f2.bmp"></li>
   <li><img src="Bilder/town/f3.bmp"></li>

   <li><img src="Bilder/town/f8.bmp"></li>
   <li><a href="intern.php"><img src="Bilder/town/h.bmp"></a></li>
   <li><a href=""><img src="Bilder/town/l.bmp"></a></li>
   <li><a href="intern.php"><img src="Bilder/town/k.bmp"></a></li>
   <li><img src="Bilder/town/f4.bmp" ></li>

   <li><img src="Bilder/town/f8.bmp" ></li>
   <li><a href=""><img  src="Bilder/town/l.bmp"></a></li>
   <li><a href="intern.php"><img  src="Bilder/town/s.bmp"></a></li>
   <li><a href=""><img src="Bilder/town/l.bmp"></a></li>
   <li><img src="Bilder/town/f4.bmp" ></li>

   <li><img src="Bilder/town/f8.bmp"></li>
   <li><a href=""><img src="Bilder/town/l.bmp"></a></li>
   <li><a href=""><img src="Bilder/town/l.bmp"></a></li>
   <li><a href="intern.php"><img src="Bilder/town/w.bmp"></a></li>
   <li><img src="Bilder/town/f4.bmp"></li>

   <li><img src="Bilder/town/f7.bmp"></li>
   <li><img src="Bilder/town/f6.bmp"></li>
   <li><img src="Bilder/town/f6.bmp"></li>
   <li><img src="Bilder/town/f6.bmp"></li>
   <li><img src="Bilder/town/f5.bmp"></li>
</ul>
Zitat:
ul.bilder {
list-style: none;
width: 600px;
}
ul.bilder li {
margin: 0;
padding: 10px;
float: left;
width: 100px;
height: 100px;
}
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.09.2010, 23:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 14
Todeshügel befindet sich auf einem aufstrebenden Ast
Standard

So hab es jetzt nochmal ohne Tabelle gemacht. Der Ränder effeckt ist großteils weg. Jedoch bleibt zwischen den Zeilen noch Platz welcher weg muss.
Link

Und zudem tritt an anderer komischer Effeckt auf.
Am Ende jeder Zeile muss ich 5-6 <br>'s setzen damit es in die nächste Zeile rutscht weil ansonsten das Bild so auf halber Höhe der letzten reihe festhängt. Das ist doch nicht normal?

Naja falsch nicht, unschön ja.. man muss einzelne Zellen nicht schließen allerding ist das keine schöne/saubere Programmierung.. ich weis
Ist das li nicht für Auflistungen?

Geändert von Todeshügel (12.09.2010 um 23:34 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Schattenrahmen um Bilder (Typo3) micronix CSS 2 20.08.2012 21:01
Bilder übereinander auswählen Felix1984 CSS 0 20.03.2010 00:30
bilder in div container unten anordnen diegaby CSS 12 17.11.2008 15:08
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 09:57
bilder layouten innerhalb eines textparagraphen earworms CSS 3 21.06.2006 01:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:24 Uhr.