Css & Tabelle, Bilder mit Abbbildungsbezeichnung

Computer: Software & Programmierung HTML & CSS
1

Hallo Zusammen.

Ich habe einige Fragen zu css und die Handhabung von Bildern/Graphiken (img). (bin noch recht neu „frisch“ was css und html angeht)

  1. Ich habe für die Seitennavigation einen „top“-Querverweis angesetzt. Über styles.css erfolt die Formatierung. Allerdings wird die Schriftgröße und Texthöhe nicht entprechend umgesetzt. Woran kann es liegen? Alle anderen formatierungen nimmt er an, d.h. der Zugriff passt eigentlich (habe ich über align=left/right/center getestet).
    Gibt es eine Möglichkeit mit ccs die Internetseite für „sämtliche“ Browser zu optimeren?

  2. Außerdem habe ich eine print.css in der ich die Seitennavigationshilfen (top, zurück) sowei Fotos vom Druck ausnehme. Das klappt auch soweit! Allerdings ragen die Graphiken, die im Druck erhalten bleiben sollen tielweise über den Seiten-/Blattrand hinaus. Gibt es eine Möglchkeit, die Graphiken beim Druck auf die Seitengröße anpassen zu lassen (die Größe der Bilder ist aktuell auf den frame für den Bildschirm ausgelegt)

  3. Wie kann ich das Bild/Foto mit der Abbildungsbezeichnung (class „Abb“ -definiert) fest miteinander verknüpfen, damit die Abbildungsbezeichnung immer unter dem Bild/Foto steht, auch wenn das Browserfenster verändert wird? (bislang „haut“ dann der eigentlich rechtstehende Text dazwischen?)

Ich hoffe meine Probleme sind klar geworden und es wäre schön, wenn mir jemand weiterhelfen könnte.

Danke im Vorraus, Novice

2

hi

  1. Ich habe für die Seitennavigation einen „top“-Querverweis
    angesetzt. Über styles.css erfolt die Formatierung. Allerdings
    wird die Schriftgröße und Texthöhe nicht entprechend
    umgesetzt. Woran kann es liegen?

Bitte den zugehörigen Code posten oder zumindest die einzelnen
Schnipsel - sonst kann man da gar nix sagen

Gibt es eine Möglichkeit mit ccs die Internetseite für
„sämtliche“ Browser zu optimeren?

*gg - 70% aller posts im Internet beziehen sie denk ich darauf in welchem Browser was funktioniert oder nicht funktionert.
–> Nein - absolut nicht - sofern du dich nicht auf aller einfachste Elemente beschränkt, die wirklich jeder Browser versteht.

  1. Außerdem habe ich eine print.css in der ich die
    Seitennavigationshilfen (top, zurück) sowei Fotos vom Druck
    ausnehme. Das klappt auch soweit! Allerdings ragen die
    Graphiken, die im Druck erhalten bleiben sollen tielweise über
    den Seiten-/Blattrand hinaus. Gibt es eine Möglchkeit, die
    Graphiken beim Druck auf die Seitengröße anpassen zu lassen
    (die Größe der Bilder ist aktuell auf den frame für den
    Bildschirm ausgelegt)

Muss ich passen - weiss ich nicht!

  1. Wie kann ich das Bild/Foto mit der Abbildungsbezeichnung
    (class „Abb“ -definiert) fest miteinander verknüpfen, damit
    die Abbildungsbezeichnung immer unter dem Bild/Foto steht,
    auch wenn das Browserfenster verändert wird? (bislang „haut“
    dann der eigentlich rechtstehende Text dazwischen?)

Bitte tu deinen code hier posten!

Ich hoffe meine Probleme sind klar geworden und es wäre schön,
wenn mir jemand weiterhelfen könnte.

Danke im Vorraus, Novice

3

Abend,

Gibt es eine Möglichkeit mit ccs die Internetseite für
„sämtliche“ Browser zu optimeren?

Eigentlich ja! Google mal nach Browser hacks und für IE nach Conditional Comments.

Gibt es eine Möglchkeit, die
Graphiken beim Druck auf die Seitengröße anpassen zu lassen
(die Größe der Bilder ist aktuell auf den frame für den
Bildschirm ausgelegt)

Bin mir nicht ganz sicher, aber ich glaube es müsste klappen, wenn du deinem Bild eine Breite von 100% (evtl. mit max-width) beim Media:stuck_out_tongue:rint zuweist.

  1. Wie kann ich das Bild/Foto mit der Abbildungsbezeichnung
    (class „Abb“ -definiert) fest miteinander verknüpfen, damit
    die Abbildungsbezeichnung immer unter dem Bild/Foto steht,
    auch wenn das Browserfenster verändert wird? (bislang „haut“
    dann der eigentlich rechtstehende Text dazwischen?)

Pack die Beschreibung mit dem Bild in einen DIV-Container mit auto-Breite und zentierter Ausrichtung.

LG Daniel

4

CODES zu meinem Problem

Hallo Zusammen, hier noch die COdes(Abschnitte)

  1. „top“-Querverweis nehmen Schriftgröße nicht an bei:

X (2.2 Gesetzliche Grundlagen) 2.2 Gesetzliche Grundlagen

In diesem Kapitel werden folgende gesetzlichen Grundlagen behandelt:
2.2.1 Allgemeines
2.2.2 Rechtliche Rahmenbedingungen
2.2.3 Finanzierung

2.2.1 Allgemeines

2.2.2 Allgemeines Rechtliche Rahmenbedingungen

test bl bla bla
mehr

top

2.2.3 Finanzierung

test bl bla bla
test bl bla bla
top

mit Styles:
body {background: #EDF2FF;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
color: #4D65A0}
h1,h2 {margin:0}
h2 {border-top:2px solid #4D65A0; padding-top:10px}
p {margin-top:12px; margin-bottom:12px;
font-size:11pt;
line-height:1.35;
color: #4D65A0;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
}
p.top {font-size: 8pt;
line-height:0.75;
text-align:right;
color: #4D65A0;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
}
p.info {font-style: italic;color: #4D65A0}
p.abb {margin-top:0; margin-bottom:12px;
font-size:11pt;
line-height:1.35;
color: #4D65A0;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
}
p.foto {margin-top:0; margin-bottom:12px;
font-size:11pt;
line-height:1.35;
color: #4D65A0;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
}
p.mehr {margin-top:12px; margin-bottom:12px;
font-size:11pt;
line-height:1.35;
color: #4D65A0;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
}
p.noprint{margin-top:12px; margin-bottom:12px;
font-size:11pt;
line-height:1.35;
color: #4D65A0;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
}

zu 3. Abbildung und Bezeichnung :Wie kann ich das Bild/Foto mit der Abbildungsbezeichnung (class „Abb“ -definiert) fest miteinander verknüpfen, damit die Abbildungsbezeichnung immer unter dem Bild/Foto steht,auch wenn das Browserfenster verändert wird? (bislang „haut“
dann der eigentlich rechtstehende Text dazwischen?)

X(1.2 Entwicklung) 1.2 Entwicklung

Einleitungstext

text neben dem Bild „Landschafttypen“
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blala bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blala bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Abbildung 1.2.1: Landschaftstypen

Ich hoffe meine Probleme sind klar geworden und es wäre schön,
wenn mir jemand weiterhelfen könnte.

Danke im Vorraus, Novice

5

daneschön, damit vieles gleich leichter!

punkt1: funktioniert bei mir prima, sowohl die textgrösse als auch die Zeilenhöhe werden wunderbar verändert. Getestet in FF 2.0.0.13 und IE 7
Und nur damit wir vom gleichen reden: du hast Texthöhe geschrieben aber die line-height gemeint oder? Und die line-height ist die Grösse des Zeilenabstandes, aber das nur zur Vollständigkeit.

Verändert hab ich den style:stuck_out_tongue:.top{}

zu Punkt 3:

da stimme ich meinem Vorredner in jedem Fall zu: Alles in ein Div packen und die Abbildung zentrieren.

so z.B.:

Abbildung 1.2.1: Landschaftstypen

styles:

#images{
float:left;}

p.abb {margin-top:0; margin-bottom:12px;
font-size:11pt;
line-height:1.35;
color: #4D65A0;
font-family: „Sans Serif“, „Trebuchet MS“, Arial, Helvetica, san-serif;
clear:left;
text-align:center;}

das float:left im -Tag ist damit nicht mehr nötig.

lg
aya

6

ein letzte mal…? CODES zu meinem Problem
@aya: Super, das hat gut geklappt.

Eine Frage habe ich aber noch. Wenn ich mehrere Bilder auf einer Seite habe, muss ich dann anstelle der id=„image“ eine Class=„image“ verwenden? ids dürfen doch nur einmal pro seite auftreten, oder?

danke,
lg novice

7

anpassung der Abbildungsbezeichnung an Bildbreite?
Nachdem euer Tipp mit dem Einschluss gut geklappt hat, habe ich noch einen Frage zur CSS.

Einige Abbildungsbezeichnungen sind sehr lang. Daher wollte ich für einen fließenden Text die Breite für die Abbildungsbezeichnungen begrenzen. Durch

#images{
float:left;
width:400px; }

in der styles.css konnte ich dies auch. (also lag ich wolhl prinzipiell nicht falsch). Allerdings sind nicht alle Bilder einheitlich 400px breit.
Gibt es ein Form für die css, um die Breite der Abbildungsbezeichnungen entsprechend der Bildbreite anzupassen?

Vielleicht sowas wie:

#images{
float:left;
width:=img widht}…??

Danke euch, novice

8

hi
im Grunde ist es egal, solange du die ID nur für die Formate brauchst, willst du die Images irgendwie anders ansprechen z.B. via Javascript und hierbei eine Differenzierung brauchen solltest du es dir überlegen ob du nicht class nimmst. Wenn es nur um Formatierung geht ist es egal.

Zu deiner anderen Frage: Das die Images mit den Abbildungs-Bezeichnern mit verändert werden: nun das ist klar.
Die Images werden mit #images formatiert die Abbildungen aber mit p.abb -> dort die width auf 400 geben :wink:

lg
aya

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]