✔ Bereich als Link definieren

Klein0r

Klein0r

Erfahrenes Mitglied
Hallo zusammen,

ich möchte ein ganzes DIV als Link blegen. Soweit auch ganz okay...
Nun folgendes hab ich schon gelesen:
http://www.tutorials.de/forum/css/249032-gesamtes-div-mit-link-belegen.html

Jetz hab ich aber das problem, dass mein DIV, welches der Link werden soll, noch 3 weitere DIVs beinhaltet:

PHP: 
		return '
		<div class="profil_friendbox">
			<a href="profil-'.$this->getNickname().'.'.FILE_EXTENSION.'" class="profil_friendbox">
				<div class="clearfix">
					<div class="profil_friendbox_profilbild">
						<img class="profil_friendbox_profilbild" src="'.$profilimage.'" alt="Profilbild von '.$this->getNickname().'" />
					</div>
					<div class="profil_friendbox_profiltext">
						'.$this->getVorname().' '.$this->getName().'<br />
						'.$this->getPlz().' '.$this->getOrt().'
					</div>
					<div class="profil_friendbox_rechtstext">
						'.$this->getZuletztonline().'
					</div>
				</div>
			</a>
		</div>
		';
So ist das ganze ja nicht valid.

Hier noch die CSS:
CSS: 
div.profil_friendbox {
  border								:		1px #444444 solid;
  padding								:		3px;
}

a.profil_friendbox {
  display								:		block;
}

div.profil_friendbox:hover {
  border								:		1px #d32727 solid;
}

div.profil_friendbox_profilbild {
  float									:		left;
  width									:		40px;
}

img.profil_friendbox_profilbild {
  width									:		40px;
}

div.profil_friendbox_profiltext {
  float									:		left;
  padding-left							:		5px;
}

div.profil_friendbox_rechtstext {
  float									:		right;
  padding-right							:		5px;
  text-align							:		right;
  color									:		#444444;
}

Gibt es dafür eine Lösung?
Weiß gerade echt nich weiter! :(

lg
 
Zuletzt bearbeitet:
Hi,

tausch mal die div-Elemente innerhalb des Links gegen das span-Element aus, das als "Inline-Element" in einem "Inline-Element" enthalten sein darf, und verleih ihnen "Block-Level-Charakteristika", entweder mit display:block oder einer float-Deklaration.

mfg Maik
 
Habe ich das richtig verstanden?

PHP: 
		return '
		<div class="profil_friendbox">
			<div class="clearfix">
				<a href="profil-'.$this->getNickname().'.'.FILE_EXTENSION.'" class="profil_friendbox">
					<span class="profil_friendbox_profilbild">
						<img class="profil_friendbox_profilbild" src="'.$profilimage.'" alt="Profilbild von '.$this->getNickname().'" />
					</span>
					<span class="profil_friendbox_profiltext">
						'.$this->getVorname().' '.$this->getName().'<br />
						'.$this->getPlz().' '.$this->getOrt().'
					</span>
					<span class="profil_friendbox_rechtstext">
						'.$this->getZuletztonline().'
					</span>
				</a>
			</div>
		</div>
		';

CSS: 
div.profil_friendbox {
  border								:		1px #444444 solid;
  padding								:		3px;
}

a.profil_friendbox {
  display								:		block;
  color									:		#ffffff;
}

div.profil_friendbox:hover {
  border								:		1px #d32727 solid;
}

span.profil_friendbox_profilbild {
  float									:		left;
  width									:		40px;
  display								:		block;
}

img.profil_friendbox_profilbild {
  width									:		40px;
}

span.profil_friendbox_profiltext {
  float									:		left;
  padding-left							:		5px;
  display								:		block;
}

span.profil_friendbox_rechtstext {
  float									:		right;
  padding-right							:		5px;
  text-align							:		right;
  color									:		#444444;
  display								:		block;
}

Funktioniert nich so richtig :(
Die Texte in den einzelnen Span-Elementen sind zwar links, aber nich das ganze element. Das liegt aber auch daran, dass die Span-Elemente irgendwie nich das ganze Div füllen!

lg
 
Zuletzt bearbeitet:
Zeig doch bitte mal den vollständigen HTML- u. CSS-Code der Seite, oder nenn den Link zu ihr, damit ich auch den Kontext seh, wo das Element nicht links sitzt.

Übrigens brauchst du display:block nicht anzugeben, wenn float:left deklariert ist, da hiermit das Inline-Element ebenfalls "Block-Level-Charakteristika" besitzt.

mfg Maik
 
Im Anhang habe ich mal nen Screen angehängt wo die Links liegen (roter background + das kleine Bild links).

Weiterhin:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="-1" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="MSThemeCompatible" content="no" />
		
		<link rel="stylesheet" type="text/css" href="nightlife.css" />
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		
		<link rel="search" title="Suche" href="./search.html" />
		<link rel="copyright" title="Urheberrecht" href="./impressum.html" />
		<link rel="top" title="nightlife-portal.de - Index" href="./intro.html" />
		<link rel="start" title="nightlife-portal.de - Index" href="./intro.html" />
		<link rel="up" title="nightlife-portal.de - Profil" href="./profil.html" />
		
		<title>nightlife-portal.de - Profil</title>
		
		<meta name="author" content="Matthias Kleine" />
		<meta name="publisher" content="Matthias Kleine - nightlife-portal.de" />
		<meta name="description" content="Profil - Informationen zu Locations und Events im Kreis Höxter und Umgebung - powered by nightlife-portal.de" />
		<meta name="keywords" content="Profil,Party,Events,Locations,Höxter,Social Community,Feiern,Nightlife" />
		<meta name="robots" content="index, follow" />
		<meta name="generator" content="klein0r CMS" />
		<meta name="language" content="de" />
		<meta name="content-language" content="de" />
		<meta name="revisit-after" content="1 days" />
		
		<meta name="DC.Title" content="nightlife-portal.de - Profil" />
		<meta name="DC.Creator" content="Matthias Kleine" />
		<meta name="DC.Publisher" content="Matthias Kleine - nightlife-portal.de" />
		<meta name="DC.Subject" content="Profil" />
		<meta name="DC.Description" content="Profil - Informationen zu Locations und Events im Kreis Höxter und Umgebung - powered by nightlife-portal.de" />
		<meta name="DC.Date" content="2008-12-07" />
		<meta name="DC.Type" content="Text" />
		<meta name="DC.Format" content="text/html" />
		<meta name="DC.Language" content="de" />
		<meta name="DC.Rights" content="Matthias Kleine - nightlife-portal.de" />
		
		<meta name="geo.region" content="DE-NW" />
		<meta name="geo.placename" content="Hoexter" />
		<meta name="geo.position" content="51.767681;9.363613" />
		<meta name="ICBM" content="51.767681, 9.363613" />
	</head>
	<body>
		
		<div id="design_surround" class="clearfix">
			<div id="design_header_repeat">
				<div id="design_header">
					<div id="design_header_top">
						© nightlife-portal.de &laquo;					</div>
					<div id="design_header_middle">
						
					</div>
					<div id="design_header_bottom">
						Profil					</div>
				</div>
			</div>
			<div id="design_content_container" class="clearfix">
				<div id="design_navigation">
					<div class="navi_box"><a class="navigation" href="profil-klein0r.html">&raquo; Meine Seite (klein0r)</a></div><div class="navi_box"><a class="navigation" href="events.html">&raquo; Events</a></div><div class="navi_box"><a class="navigation" href="locations.html">&raquo; Locations</a></div><div class="navi_box"><a class="navigation" href="benutzerliste.html">&raquo; Benutzerliste</a></div><div class="navi_box"><a class="navigation" href="kontakt.html">&raquo; Kontakt</a></div><div class="navi_box"><a class="navigation" href="team.html">&raquo; Das Team</a></div>					<div id="navi_bottom">
						nightlife-portal.de &laquo;					</div>
				</div>
				<div id="content_container" class="clearfix">
					<div id="design_content">
						<div class="content_b"><h1>&raquo; Benutzerprofil von klein0r</h1></div><div class="content_w"><h2>Daten</h2>
						<table class="details">
							<tr>
								<td class="tableleft">
									Registrierungsdatum
								</td>
								<td class="tableright">
									
								</td>
							</tr>
							<tr>
								<td class="tableleft">
									Zuletzt aktualisiert
								</td>
								<td class="tableright">
									21.02.2009 19:35
								</td>
							</tr>
							<tr>
								<td class="tableleft">
									Zuletzt online
								</td>
								<td class="tableright">
									09.02.2009 20:49
								</td>
							</tr>
						</table>
					<h2>Allgemeines</h2>
					
					<div class="clearfix">
						
						<div class="profil_profilbild">
							<img class="profil_profilbild" src="./img/user/nopicture.jpg" alt="Profilbild von klein0r" />
						</div>
						
						<div class="profil_nebenbild">
							
							<table class="details">
								<tr>
									<td class="tableleft">
										Nickname
									</td>
									<td class="tableright">
										klein0r
									</td>
								</tr>
								<tr>
									<td class="tableleft">
										Richtiger Name
									</td>
									<td class="tableright">
										Matthias Kleine
									</td>
								</tr>
								<tr>
									<td class="tableleft">
										Geschlecht
									</td>
									<td class="tableright">
										männlich
									</td>
								</tr>
								<tr>
									<td class="tableleft">
										Userlevel
									</td>
									<td class="tableright">
										Benutzer
									</td>
								</tr>
								<tr>
									<td class="tableleft">
										Homepage
									</td>
									<td class="tableright">
										http://de.klein0r.de
									</td>
								</tr>
								<tr>
									<td class="tableleft">
										Wohnort
									</td>
									<td class="tableright">
										37671 Höxter
									</td>
								</tr>
								<tr>
									<td class="tableleft">
										Lieblingstrack
									</td>
									<td class="tableright">
										Michal Mind - Show Me Love
									</td>
								</tr>
								<tr>
									<td class="tableleft">
										Credits
									</td>
									<td class="tableright">
										0
									</td>
								</tr>
							</table>
							
						</div>
					</div>
					
					</div><div class="content_w"><h2>Kontaktmöglichkeiten</h2></div><div class="content_w"><h2>Freunde</h2></div><div class="content_w">
		<div class="profil_friendbox">
			<div class="clearfix">
				<a href="profil-Laberbacke.html" class="profil_friendbox">
					<span class="profil_friendbox_profilbild">
						<img class="profil_friendbox_profilbild" src="./img/user/nopicture.jpg" alt="Profilbild von Laberbacke" />
					</span>
					<span class="profil_friendbox_profiltext">
						Hans Müller<br />
						33102 Paderborn
					</span>
					<span class="profil_friendbox_rechtstext">
						22.02.2009 17:24
					</span>
				</a>
			</div>
		</div>
		</div><div class="content_w"><h2>Zuletzt besuchte Events</h2></div><div class="content_w">
		<div class="event_eventbox">
			<a href="event-1.html" class="event_eventbox">
				Kinderkarneval mit DJ Bobo<br />
				25.02.2009
			</a>
		</div>
		</div><div class="content_w"><h2>Kommentare</h2></div><div class="content_e">&laquo; © nightlife-portal.de &raquo;</div>					</div>
					<div id="content_bottom">
						Impressum
					</div>
				</div>
			</div>
			<div id="design_bottom">
				
			</div>
		</div>
		
	</body>
</html>

CSS: 
/* 
##################################################################
# (c) by Matthias Kleine 2009
##################################################################
 */

html {
  height								:		100%;
}

body {
  font-family							:		Verdana;
  font-size								:		xx-small;
  margin								:		0px auto;
  background-color						:		#232323;
  color									:		#FFFFFF;
  text-align							:		center;
  height								:		100%;
}

/* 
------------------------------------------------------------
---- C l e a r f i x - A u t o m a t i s c h e  V e r l ä n g e r u n g
------------------------------------------------------------
 */

.clearfix:after {
  content								:		".";
  display								:		block;
  height								:		0;
  clear									:		both;
  visibility							:		hidden;
}
  
.clearfix {
  display								:		inline-block;
}

* html .clearfix {
  height								:		1%;
}

.clearfix {
  display								:		block;
}

/* 
##################################################################
############## S T A N D A R D W E R T E
##################################################################
 */

table {
  border-collapse						:		collapse;
  border-spacing						:		0px;
}

div {
  text-align							:		left;
  position								:		relative;
}

img {
  border								:		none;
}

h1 {
  font-family							:		Verdana;
  font-size								:		xx-small;
  margin								:		0px;
}

h2 {
  font-family							:		Verdana;
  font-size								:		xx-small;
  font-weight							:		bold;
  border-left							:		1px #d32727 solid;
  padding-left							:		2px;
  border-bottom							:		1px #444444 solid;
}

q {
  quotes								:		"\201E" "\201D";
}

/* 
------------------------------------------------------------
---- Ü b e r s i c h t s t a b e l l e n 
------------------------------------------------------------
 */

table.details {
  border-collapse						:		collapse;
  width									:		100%;
}

td.tableleft {
  font-weight							:		bold;
  width									:		180px;
}

td.tableright {
  text-align							: 		justify;
}

/* 
##################################################################
############## S E I T E N S P E Z I F I S C H E S
##################################################################
 */
 
/* 
------------------------------------------------------------
---- P r o f i l
------------------------------------------------------------
 */

img.profil_profilbild {
  border								:		1px #d32727 solid;
  padding								:		2px;
  width									:		162px;
  height								:		209px;
}

div.profil_profilbild {
  width									:		167px;
  height								:		214px;
  float									:		left;
}

div.profil_nebenbild {
  float									:		left;
  padding-left							:		15px;
}


div.profil_friendbox {
  border								:		1px #444444 solid;
  padding								:		3px;
}

a.profil_friendbox {
  display								:		block;
  color									:		#ffffff;
}

div.profil_friendbox:hover {
  border								:		1px #d32727 solid;
}

span.profil_friendbox_profilbild {
  float									:		left;
  width									:		40px;
  display								:		block;
}

img.profil_friendbox_profilbild {
  width									:		40px;
}

span.profil_friendbox_profiltext {
  float									:		left;
  padding-left							:		5px;
  display								:		block;
}

span.profil_friendbox_rechtstext {
  float									:		right;
  padding-right							:		5px;
  text-align							:		right;
  color									:		#444444;
  display								:		block;
}

/* 
------------------------------------------------------------
---- E v e n t
------------------------------------------------------------
 */

div.event_eventbox {
  border								:		1px #444444 solid;
  padding								:		3px;
}

a.event_eventbox {
  display								:		block;
}

div.event_eventbox:hover {
  border								:		1px #d32727 solid;
}

/* 
##################################################################
############## L I N K S
##################################################################
 */

a:link {
  color                                 :       #d32727;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  text-decoration                       :       none;
}

a:visited {
  color                                 :       #d32727;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  text-decoration                       :       none;
}

a:active {
  color                                 :       #d32727;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  text-decoration                       :       none;
}

a:hover {
  color                                 :       #d32727;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  text-decoration                       :       underline;
}

a:link.navigation {
  color                                 :       #000000;
  font-family                           :       Verdana;
  font-size                             :       x-small;
  text-decoration                       :       none;
  font-weight							:		bold;
}

a:visited.navigation {
  color                                 :       #000000;
  font-family                           :       Verdana;
  font-size                             :       x-small;
  text-decoration                       :       none;
  font-weight							:		bold;
}

a:active.navigation {
  color                                 :       #000000;
  font-family                           :       Verdana;
  font-size                             :       x-small;
  text-decoration                       :       none;
  font-weight							:		bold;
}

a:hover.navigation {
  color                                 :       #640808;
  font-family                           :       Verdana;
  font-size                             :       x-small;
  text-decoration                       :       none;
  font-weight							:		bold;
}

/* 
##################################################################
############## D E S I G N
##################################################################
 */

#design_surround {
  height								:		100%;
  width                                 :       100%;
  margin								:		0px auto;
}

#design_header_repeat {
  background-image                      :       url(img/design/repeat_header.jpg);
  background-position                   :       top center;
  background-repeat                     :       repeat-x;
  height								:		284px;
  width									:		100%;
  margin								:		0px auto;
}

#design_header {
  background-image                      :       url(img/design/header.jpg);
  background-position                   :       top center;
  background-repeat                     :       no-repeat;
  height								:		284px;
  width									:		928px;
  margin								:		0px auto;
}

#design_header_top {
  height								:		17px;
  width									:		928px;
  padding-top							:		10px;
  color									:		#444444;
}

#design_header_middle {
  height								:		200px;
  width									:		928px;
}

#design_header_bottom {
  height								:		37px;
  width									:		848px;
  text-align							:		right;
  padding-right							:		40px;
  padding-top							:		20px;
  font-size								:		small;
  font-weight							:		bold;
  color									:		#444444;
}

#design_content_container {
  width									:		928px;
  margin								:		0px auto;
}

#design_navigation {
  float									:		left;
  width                                 :       302px;
}

#content_container {
  float									:		left;
  width                                 :       626px;
}

#design_content {
  background-image                      :       url(img/design/repeat_content.jpg);
  background-position                   :       top center;
  background-repeat                     :       repeat-y;
  width                                 :       556px;
  padding-left							:		30px;
  padding-right							:		40px;
  text-align							: 		justify;
}

div.navi_box {
  background-image                      :       url(img/design/navi_element.jpg);
  background-position                   :       53px 0px;
  background-repeat                     :       no-repeat;
  width                                 :       232px;
  height								:		19px;
  padding-left							:		70px;
  padding-top							:		10px;
  display                               :       block;
}

div.navi_box:hover {
  background-position					:		40px -29px;
  padding-left							:		60px;
  width                                 :       242px;
}

#navi_bottom {
  background-image                      :       url(img/design/navi_bottom.jpg);
  background-position                   :       53px 0px;
  background-repeat                     :       no-repeat;
  width                                 :       232px;
  height								:		29px;
  padding-left							:		70px;
  padding-top							:		10px;
  display                               :       block;
  color									:		#AAAAAA;
}

#content_bottom {
  background-image                      :       url(img/design/content_bottom.jpg);
  background-position                   :       top center;
  background-repeat                     :       no-repeat;
  width                                 :       576px;
  height								:		67px;
  clear									:		both;
  text-align							:		right;
  padding-top							:		55px;
  padding-right							:		50px;
  color									:		#444444;
}

#design_bottom {
  clear									:		both;
}

/* 
##################################################################
############## C O N T E N T - T Y P E S
##################################################################
 */

div.content_b {
  height                                :       15px;
  padding-top							:		4px;
  padding-left							:		5px;
  border-left							:		1px #d32727 solid;
  border-right							:		1px #d32727 solid;
  font-weight                           :       bold;
  color                                 :       #FFFFFF;
  background-color						:		#444444;
  text-shadow							:		2px 2px 3px #000000;
}

div.content_w {
  padding-left							:		10px;
  padding-right							:		10px;
  padding-top							:		2px;
}

div.content_d {
  height                                :       3px;
  border-bottom							:		1px #444444 solid;
}

div.content_e {
  height                                :       14px;
  padding-top							:		2px;
  padding-left							:		5px;
  border-bottom							:		1px #444444 solid;
  color                                 :       #343434;
  background-color						:		#343434;
}

div.comment {
  text-align							: 		justify;
  margin-top							:		5px;
  margin-bottom							:		5px;
  overflow								: 		auto;
  padding-top							:		5px;
  padding-bottom						:		5px;
  padding-left							:		5px;
  padding-right							:		5px;
  background-color						:		#444444;
}

/* 
##################################################################
############## F E H L E R B E H A N D L U N G
##################################################################
 */

div.php_error {
  text-align							: 		justify;
  color									:		#d32727;
  background-color						:		#000000;
  padding								:		3px;
  border								:		1px #d32727 dashed;
  position								:		fixed;
  left									:		5px;
  top									:		5px;
  width									:		400px;
}

div.status, div.error {
  margin-top							:		5px;
  margin-bottom							:		5px;
  height								:		60px;
  padding-left							:		5px;
  padding-top							:		5px;
  padding-right							:		0px;
  padding-bottom						:		5px;
  background-color						:		#444444;
  background-position                   :       center right;
  background-repeat                     :       no-repeat;
}

div.status {
  background-image                      :       url(img/status/status.jpg);
  border								:		1px #ffffff solid;
}

div.error {
  background-image                      :       url(img/status/error.jpg);
  border								:		1px #d32727 solid;
}

div.information {
  margin-top							:		5px;
  margin-bottom							:		5px;
  color									:		#444444;
  text-align							:		center;
  font-weight							:		bold;
  font-size								:		small;
}

/* 
##################################################################
############## Z U S A T Z
##################################################################
 */

div.crossimage {
  text-align							:		center;
  padding-top							:		3px;
  padding-bottom						:		3px;
}

/* 
##################################################################
############## S T E U E R E L E M E N T E
##################################################################
 */

div.formelement {
  padding-bottom						:		5px;
  padding-top							:		10px;
}

textarea {
  background-color                      :       #444444;
  border                                :       1px #d32727 solid;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  color                                 :       #FFFFFF;
  width                                 :       450px;
  height                                :       150px;
}

select {
  background-color                      :       #666666;
  border                                :       1px #d32727 solid;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  color                                 :       #FFFFFF;
  width                                 :       206px;
}

select.download {
  width                                 :       200px;
}

input {
  background-color                      :       #444444;
  border-bottom                         :       1px #d32727 solid;
  border-top							:		none;
  border-left							:		none;
  border-right							:		none;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  color                                 :       #FFFFFF;
  width                                 :       200px;
}

input.submit {
  background-color                      :       #444444;
  border                                :       1px #d32727 solid;
  font-family                           :       Verdana;
  font-size                             :       xx-small;
  color                                 :       #FFFFFF;
  width                                 :       200px;
}

input.login {
  width                                 :       100px;
  text-align                            :       center;
}

input.register {
  width                                 :       150px;
  text-align                            :       left;
}

input.check {
  width                                 :       15px;
  border                                :       none;
  background-color						:		#444444;
  color									:		#000000;
}

input.file {
  border								:		1px #d32727 ridge;
  width                                 :       207px;
}

Hoffe das reicht dir so um was sagen zu können :(

lg und danke für die Mühe schonmal!
 

Anhänge

  • links_red.jpg
    links_red.jpg
    13,4 KB · Aufrufe: 22
Wenn das der nicht-erwünschte "Haben-Zustand" ist, wie sieht dann der "Sollzustand" aus?

Meines Erachtens wird nämlich das Stylesheet korrekt interpretiert.

mfg Maik
 
Maik hat gesagt.:
Wenn das der nicht-erwünschte "Haben-Zustand" ist, wie sieht dann der "Sollzustand" aus?

mfg Maik
Zum Vergrößern anklicken....

Naja ganz einfach, man soll innerhalb des dünnen grauen Rahmens (der ja vom äußeren DIV kommt) überall hinklicken können und dem enthaltenen Link dabei folgen.

Momentan geht das nur in den Rot angegebenen Bereichen und auf dem Bild!

lg
 
Okay, jetzt ist bei mir der Groschen gefallen :)

Code: 
 <a href="profil-Laberbacke.html" class="profil_friendbox clearfix">


mfg Maik
 
Das war alles, denn du hast die clearfix-Klasse im falschen Element aufgerufen - sprich das umschliesende DIV mit der Klasse kannst du aus dem Markup entfernen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück