Border um Border?

CL90 · 12.07.2010, 11:45

ich hab ein kleines problem.
und zwar hab ich in einem Link element, ein bild. das einen doppelten rahmen erhalten soll. einmal weiß 1.px und einmal grau 1.px. die rahmen sollen direkt um das bild sein.

dabei gibts aber probleme, denn ich darf kein <div> element verwenden. das sagt mir der validator. <p> elemente darf ich scheinbar auchnicht verwenden.
gibt es denn überhaupt noch elemente mit denen ich innerhalb eines link elements eine zweite border ziehen kann? die erste border erstelle ich mit dem <img>.

oder kann man border quasi um 1px nach außen schieben?. weil die erste border ist weiß wie der hintergrund. (quasi transparent).

mfg Chris

Manko10 · 12.07.2010, 12:59

Also wenn du nur einen 3D-Effekt haben willst, dann nimm einfach den Rahmentyp inset oder outset oder für einen doppelten Rahmen double.
Wenn es unbedingt zwei unterschiedliche Rahmen sein müssen, dann setze den einem beim IMG selbst, den anderen bei einem umgebenden Element, z.B. einem DIV. Per padding des DIVs oder margin des IMGs kannst du dann den Abstand der beiden ahmen bestimmen.

Zitat:

dabei gibts aber probleme, denn ich darf kein <div> element verwenden. das sagt mir der validator. <p> elemente darf ich scheinbar auchnicht verwenden.

Das ist Quatsch. Wenn das wirklich so sein sollte, dann liegt es an irgendetwas anderem, aber DIV-Elemente sind im BODY überall erlaubt, nur nicht innerhalb von Inline-Elementen (nie Blocklevel-Elemente innerhalb von Inlinelevel-Elementen notieren!). Wahrscheinlich hast du irgendein umgebendes SPAN oder so.

Dark Guardian · 12.07.2010, 13:01

Zitat:

Zitat von CL90

ich hab ein kleines problem.
und zwar hab ich in einem Link element, ein bild. das einen doppelten rahmen erhalten soll. einmal weiß 1.px und einmal grau 1.px. die rahmen sollen direkt um das bild sein.

dabei gibts aber probleme, denn ich darf kein <div> element verwenden. das sagt mir der validator. <p> elemente darf ich scheinbar auchnicht verwenden.
gibt es denn überhaupt noch elemente mit denen ich innerhalb eines link elements eine zweite border ziehen kann? die erste border erstelle ich mit dem <img>.

oder kann man border quasi um 1px nach außen schieben?. weil die erste border ist weiß wie der hintergrund. (quasi transparent).

mfg Chris

Zieh dir mal folgendes rein:

SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
SELFHTML: HTML/XHTML / Referenz /HTML-Elementreferenz

Beim zweitem Link gezielt die Unterschiede zwischen Inline- und Block-Elemente und was in wem stehen darf (a ist ein inline Element und darf somit keine Blockelemente enthalten zu denen div und p gehören).

Edit:

Zitat:

Das ist Quatsch. Wenn das wirklich so sein sollte, dann liegt es an irgendetwas anderem, aber DIV-Elemente sind im BODY überall erlaubt, nur nicht innerhalb von Inline-Elementen (nie Blocklevel-Elemente innerhalb von Inlinelevel-Elementen notieren!). Wahrscheinlich hast du irgendein umgebendes SPAN oder so.

Wenn ich ihn richtig verstandne habe wird sein <img> von einem <a> umgeben.

Manko10 · 12.07.2010, 13:02

Ah ja, das A-Elemente glatt vergessen. Also wohl kein SPAN, wie ich vermutete, aber dafür ein anderes Inlineelement.

ByStones · 12.07.2010, 13:02

Zwei Rahmen geht nicht, aber du kannst ein bisschen Schummeln:

Code:

<img style="background: #fff;padding:1px;border:1px solid gray;" src="..." />

Dark Guardian · 12.07.2010, 13:06

Zitat:

Zitat von ByStones

Zwei Rahmen geht nicht, aber du kannst ein bisschen Schummeln:

Code:

<img style="background: #fff;padding:1px;border:1px solid gray;" src="..." />

Dann doch lieber eine 1px Border und eine 1px Outline ...

ByStones · 12.07.2010, 13:09

Zitat:

Zitat von Dark Guardian

Dann doch lieber eine 1px Border und eine 1px Outline ...

Cool, outline kannte ich bis jetzt noch garnicht... Man lernt immer was dazu

CL90 · 12.07.2010, 13:09

der aufbau sieht so aus:

PHP-Code:

  <a>

      <div>

             <div>

                     <div> //border 2

                            <img/> // border 1

                     </div>

             </div>

             <div>

                     <span>....</span>

             </div>

     </div>

</a>

ich glaube man kann insgesammt ein div rausnehmen.
die elemente werden durch .classes beschrieben haben aber auch style zugaben, weil die bilder dynamisch sind. z.b. variert der margin vom border2div

ByStones · 12.07.2010, 13:12

Du kannst alle div's rausnehmen, da in einem a-Tag (inline) kein div(block) vorkommen darf.
Wenn du die display-Eigenschaft der div's angepasst hast ist es natürlich möglich.

Manko10 · 12.07.2010, 13:13

Die DIVs sind da allesamt falsch. Das A-Element darf keine Block-Elemente enthalten, wie hier schon mehrmals geschrieben wurde. Bitte lies auch, was die Leute dir antworten.
Aber unabhängig davon, sieht das sehr nach Divsuppe oderr Divitis aus. Viel zu viele unnötige Elemente.

Zitat:

Wenn du die display-Eigenschaft der div's angepasst hast ist es natürlich möglich.

Nein, die Struktur hat mit der Formatierung nichts zu tun.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Table row border	aha_01	HTML, Usability und Barrierefreiheit	6	31.03.2010 16:18
Border um Bild mit Hyperlink nur im FF (IE6,IE7,IE8,Opera,Safari geht)	da.eXecutoR	PHP Tipps 2009	2	12.08.2009 16:29
CSS border probleme mit IE	evader	HTML, Usability und Barrierefreiheit	6	29.04.2009 19:43
Border bei fieldset	litterauspirna	HTML, Usability und Barrierefreiheit	4	25.01.2009 10:33
CSS DIV Border Problem bei IE (wo auch sonst)	FearMyInnerSelf	HTML, Usability und Barrierefreiheit	3	18.07.2008 07:14
div hintergrund wird nur angezeigt wenn border definiert	noskule	HTML, Usability und Barrierefreiheit	0	21.12.2006 15:51
Problem mit border --> unsichtbar machen	kode	HTML, Usability und Barrierefreiheit	3	26.01.2006 20:32
<tr> und border		HTML, Usability und Barrierefreiheit	9	14.11.2005 19:24
Bild als Border		HTML, Usability und Barrierefreiheit	1	18.09.2005 09:53
IE falsche darstellung von border eigenschaften		HTML, Usability und Barrierefreiheit	1	20.06.2005 11:50
Bild als border	Dragon26mFR	HTML, Usability und Barrierefreiheit	6	06.06.2005 16:33
[Erledigt] image border abstand		HTML, Usability und Barrierefreiheit	1	22.05.2005 17:00
[IE] Border abgehackt	Buhmann	HTML, Usability und Barrierefreiheit	10	14.05.2005 19:54
[Erledigt] Border Frage		HTML, Usability und Barrierefreiheit	2	31.08.2004 20:52

12.07.2010, 11:45
CL90 Benutzer Registriert seit: 22.03.2010 Beiträge: 46 PHP-Kenntnisse: Anfänger	Border um Border? ich hab ein kleines problem. und zwar hab ich in einem Link element, ein bild. das einen doppelten rahmen erhalten soll. einmal weiß 1.px und einmal grau 1.px. die rahmen sollen direkt um das bild sein. dabei gibts aber probleme, denn ich darf kein <div> element verwenden. das sagt mir der validator. <p> elemente darf ich scheinbar auchnicht verwenden. gibt es denn überhaupt noch elemente mit denen ich innerhalb eines link elements eine zweite border ziehen kann? die erste border erstelle ich mit dem <img>. oder kann man border quasi um 1px nach außen schieben?. weil die erste border ist weiß wie der hintergrund. (quasi transparent). mfg Chris


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

12.07.2010, 13:02
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Ah ja, das A-Elemente glatt vergessen. Also wohl kein SPAN, wie ich vermutete, aber dafür ein anderes Inlineelement. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

12.07.2010, 13:02
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Zwei Rahmen geht nicht, aber du kannst ein bisschen Schummeln: Code: <img style="background: #fff;padding:1px;border:1px solid gray;" src="..." /> __________________ Signatur: PHP-Code: `$s = '0048656c6c6f20576f726c64'; while($i=substr($s=substr($s,2),0,2))echo"&#x00$i;";`

12.07.2010, 13:09
CL90 Benutzer Registriert seit: 22.03.2010 Beiträge: 46 PHP-Kenntnisse: Anfänger	der aufbau sieht so aus: PHP-Code: `<a> <div> <div> <div> //border 2 <img/> // border 1 </div> </div> <div> <span>....</span> </div> </div> </a>` ich glaube man kann insgesammt ein div rausnehmen. die elemente werden durch .classes beschrieben haben aber auch style zugaben, weil die bilder dynamisch sind. z.b. variert der margin vom border2div

12.07.2010, 13:12
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Du kannst alle div's rausnehmen, da in einem a-Tag (inline) kein div(block) vorkommen darf. Wenn du die display-Eigenschaft der div's angepasst hast ist es natürlich möglich. __________________ Signatur: PHP-Code: `$s = '0048656c6c6f20576f726c64'; while($i=substr($s=substr($s,2),0,2))echo"&#x00$i;";`