Bereich als Link definieren @ tutorials.de: Tutorials, Forum & Hilfe

Klein0r · 23.02.09 13:06

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/24...k-belegen.html

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

PHP-Code:


        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:

Code 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

Maik · 23.02.09 13:08

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

Klein0r · 23.02.09 13:32

Habe ich das richtig verstanden?

PHP-Code:


        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>

        ';

Code 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

Maik · 23.02.09 13:38

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

Klein0r · 23.02.09 13:48

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

Weiterhin:

HTML-Code:

<!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>

Code 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!

Maik · 23.02.09 13:54

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

Klein0r · 23.02.09 13:57

Zitat von Maik

Wenn das der nicht-erwünschte "Haben-Zustand" ist, wie sieht dann der "Sollzustand" aus?

mfg Maik

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

Maik · 23.02.09 14:00

Okay, jetzt ist bei mir der Groschen gefallen

Code :

1	<a href="profil-Laberbacke.html" class="profil_friendbox [B]clearfix[/B]">

mfg Maik

Klein0r · 23.02.09 14:05

Oh Gott!
Das war alles?

Vielen Dank, funktioniert

Gruß
Matthias

Maik · 23.02.09 14:08

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

Klein0r · 23.02.09 14:14

Zitat von Maik

sprich das umschliesende DIV mit der Klasse kannst du aus dem Markup entfernen.

Jap - ist mir dann auch aufgefallen und ich habs direkt entfernt

Gut das es Leute wie dich gibt die wirklich Ahnung von CSS haben

lg

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Komplettes DIV als Link definieren

[TYPO3 V4.2.1] Zwei Spalten im Content-Bereich definieren und ansteuern?

Anker in HTML-Link definieren

Link soll Variablenwert definieren.

Bereich definieren

E-Mail:

Abonnieren Abbestellen