php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 30.09.2011, 09:16  
Erfahrener Benutzer
 
Registriert seit: 08.08.2009
Beiträge: 195
PHP-Kenntnisse:
Fortgeschritten
da.eXecutoR befindet sich auf einem aufstrebenden Ast
Standard Problem mit Link auf DIV Container

Hello people!

Ich hab ein ziemlich nerviges Problem, und zwar habe ich verschiedene Link Blöcke erstellt bestehend aus DIV Elementen. Damit die ganze Box anklickbar ist, habe ich ein a Tag mit position:absolute und der gleichen grösse wie das DIV Element definiert.

Im Firefox etc. funktioniert dies makellos, im IE8 hingegen nur wenn der Cursor nicht über einem enthaltenen element liegt, wie z.Bsp. dem img oder h1 oder <p>.

Hier der CSS Code:

Code:
.sxDirectLinkBox {
	position:relative;
	cursor:pointer;
	float:left;
	width: 365px;
	margin-right: 10px;
	margin-top: 10px;
	color:#666;
	z-index: 1;
}

.sxDirectLinkBox:hover {
	background-color:#FFDBA4;
	z-index: 1;
}

.sxDirectLinkBox .iconBox {
	position: relative;
	float: left;
	width:60px;
	padding: 5px;
	padding-top: 10px;
	height: 70px;
	z-index: 1;
}

.sxDirectLinkBox .linkText{
	position:relative;
	float: right;
	width: 295px;
	z-index: 1;
}

.sxDirectLinkBox .linkText H1 {
	font-size: 16px;
	z-index: 1;
}

.sxDirectLinkBox .more {
	position:relative;
	float: right;
	clear:both;
	text-align: right;
	padding: 5px;
}

.sxDirectLinkBox a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 365px;
	height: 111px;
	display: block;
	z-index: 1000;
}

HTML Code:

Code:
<div class="sxDirectLinkBox">
<a href="zielurl.html" title="Hier lang!"></a>
<div class="iconBox"><img src="images/test.png" border="0" alt="test" title="test" width="60" height="60" /></div>
<div class="linkText">
<h1>Link Name</h1>
<p>Hier der Text zum Link</p>
</div>
<div class="more">mehr...</div>
</div>
Hat mir da jemand einen Tipp? Dass der IE den z-index zwischen relative und absolute positionierten Elementen relativiert habe ich mittlerweise auch herausgefunden.

Grüsse

eXe
__________________
It's not a bug. It's a feature!
da.eXecutoR ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 02.10.2011, 15:38  
Erfahrener Benutzer
 
Registriert seit: 08.08.2009
Beiträge: 195
PHP-Kenntnisse:
Fortgeschritten
da.eXecutoR befindet sich auf einem aufstrebenden Ast
Standard

Keiner ne Idee dazu? Ich will wirklich nicht mouse over image switch machen
__________________
It's not a bug. It's a feature!
da.eXecutoR ist offline   Mit Zitat antworten
Alt 02.10.2011, 17:03  
Erfahrener Benutzer
 
Registriert seit: 08.08.2009
Beiträge: 195
PHP-Kenntnisse:
Fortgeschritten
da.eXecutoR befindet sich auf einem aufstrebenden Ast
Standard

Hier mal noch ein Bilddazu damit man sichs vorstellen kann:



Geht man mit der Maus drüber erscheint die orange Box, rot markiert sind die Bereiche wo im IE8 der Hyperlink nicht anklickbar ist. FF etc. machen keine Probleme.
__________________
It's not a bug. It's a feature!

Geändert von da.eXecutoR (02.10.2011 um 17:06 Uhr).
da.eXecutoR ist offline   Mit Zitat antworten
Alt 02.10.2011, 17:11  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Zitat:
<div class="sxDirectLinkBox">
<a href="zielurl.html" title="Hier lang!"></a>
<div class="iconBox"><img src="images/test.png" border="0" alt="test" title="test" width="60" height="60" /></div>
<div class="linkText">
<h1>Link Name</h1>
<p>Hier der Text zum Link</p>
</div>
<div class="more">mehr...</div>
</div>
Warum machst Du es nicht einfach strukturell korrekt, so dass es auch ohne CSS funktioniert? Und sparst Dir den ganze Foo?

HTML-Code:
<div class="sxDirectLinkBox">

<div class="iconBox"><a href="zielurl.html" title="Hier lang!"><img src="images/test.png" border="0" alt="test" title="test" width="60" height="60" /></a></div>
<div class="linkText">
<h1><a href="zielurl.html" title="Hier lang!">Link Name</a></h1>
<p><a href="zielurl.html" title="Hier lang!">Hier der Text zum Link</a></p>
</div>
<div class="more"><a href="zielurl.html" title="Hier lang!">mehr...</a></div>
</div> 
Die ganze Divitis sollte man auch noch einmal näher beleuchten.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 03.10.2011, 18:49  
Erfahrener Benutzer
 
Registriert seit: 28.06.2009
Beiträge: 108
PHP-Kenntnisse:
Fortgeschritten
eisenhans befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von da.eXecutoR Beitrag anzeigen
Keiner ne Idee dazu? Ich will wirklich nicht mouse over image switch machen
Soweit ich weiß, kennt das <div> auch ein onclick() Event ...
__________________
Webstammtisch Oldenburg
eisenhans ist offline   Mit Zitat antworten
Alt 05.10.2011, 18:53  
Erfahrener Benutzer
 
Registriert seit: 08.08.2009
Beiträge: 195
PHP-Kenntnisse:
Fortgeschritten
da.eXecutoR befindet sich auf einem aufstrebenden Ast
Standard

Weil ich nicht will dass der hover effekt erscheint, ich aber mit der Maus dann trotzdem nur auf dem Bilder oder auf mehr... klicken kann.
__________________
It's not a bug. It's a feature!
da.eXecutoR ist offline   Mit Zitat antworten
Alt 05.10.2011, 19:05  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Zitat:
Zitat von da.eXecutoR Beitrag anzeigen
Weil ich nicht will dass der hover effekt erscheint, ich aber mit der Maus dann trotzdem nur auf dem Bilder oder auf mehr... klicken kann.
Geht das auch in verständlich?
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 25.10.2011, 14:53  
Moderator¹
 
Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse:
Fortgeschritten
ChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von nikosch Beitrag anzeigen
Die ganze Divitis sollte man auch noch einmal näher beleuchten.
Die Linkitis in deinem Vorschlag aber auch

M.E. bessere Lösungen:
- HTML5 verwenden - da sind als Inhalt von A auch Überschriften, Absätze etc. erlaubt. Aber Vorsicht: Was ältere Browser mit einem pre-HTML5-Parser daraus machen, sollte man sich genauer anschauen. Ggf. kann man dort mit JavaScript nachhelfen.
- Auf Überschriften und Absätze innerhalb des Links verzichten, stattdessen Strong/Span/etc. verwenden. Formatierung kann ja unabhängig davon erfolgen.
__________________
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
ChrisB ist offline   Mit Zitat antworten
Alt 25.10.2011, 15:27  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Mit Tipp 1 gehe ich noch halbwegs mit, aber 2 widerspricht wohl jeglicher Seitensemantik. Ich würde vermutlich Bild (Icon) und mehr…-Link direkt verlinken und den Rest mit Javascript ergänzen.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 25.10.2011, 15:32  
Moderator¹
 
Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse:
Fortgeschritten
ChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von nikosch Beitrag anzeigen
Mit Tipp 1 gehe ich noch halbwegs mit, aber 2 widerspricht wohl jeglicher Seitensemantik.
Wieso?
Das im Bild gezeigte ist im wesentlichen eine simple Navigation, nur optisch etwas aufgebohrt. Ich bezweifle, dass Überschriften und Textabsätze an dieser Stelle so einen hohen "semantischen" Mehrwert bieten würden.
__________________
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
ChrisB ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine 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 an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[Erledigt] Link wird falsch angezeigt jotpunktbee PHP Einsteiger 9 14.08.2011 14:31
[Erledigt] link problem in der datenbank (mit und ohne http://) darkman Datenbanken 7 09.05.2011 13:24
[Erledigt] gesamte Spalte in Array abspeichern Kotbatzen PHP Tipps 2009 23 05.09.2009 00:01
Statt submit Link Problem Webby PHP Tipps 2009 3 01.03.2009 18:24
[Erledigt] Link Problem in Blätterfunktion t-stude PHP Tipps 2009 10 27.02.2009 03:57
[Erledigt] Problem mit Wortfinder und CodeParser litterauspirna PHP Tipps 2009 27 19.02.2009 16:55
[Erledigt] Problem mit strpos in einem Wortfinder litterauspirna PHP Tipps 2009 2 16.02.2009 13:40
Problem mit Container max-dhom HTML, Usability und Barrierefreiheit 3 20.09.2006 11:10
Problem mit PHPSESSID Jacks Rache PHP Tipps 2006 7 19.03.2006 17:00
Suche Tipps für Persormance-Steigerung (Geld für Nützliches) Beitragsarchiv 18 16.08.2005 10:57
Link Problem HTML, Usability und Barrierefreiheit 6 08.01.2005 16:26
Problem mit link test022 PHP Tipps 2004-2 8 13.12.2004 13:51
Problem mit Link Style HTML, Usability und Barrierefreiheit 8 05.08.2004 17:59
[Erledigt] Link Problem HTML, Usability und Barrierefreiheit 5 27.07.2004 09:52
Problem mit Link automatisch öffnen PHP Tipps 2004 1 04.07.2004 21:00

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
div container verlinken, link zu <div class, links in div container not working, link auf div-container, container position relative links, div class= auf link, \it\'s not a bug it\'s a feature\, php container verlinkt, container php, auf div container verlinken, div container verlinken funktioniert nicht

Alle Zeitangaben in WEZ +2. Es ist jetzt 07:36 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum