zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden div container verlinken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.05.2018, 12:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard div container verlinken

Hallo ihr lieben,
bin ziemlicher Neuling und komme bei einem Problem nicht weiter.

Habe 4 div Container nebeneinander, von denen alle ein Bild sowie text (der ebenfalls verlinkt ist) beinhalten.
Der Hintergrund der einzelnen container ist dunkelgrau.
Momentan ist es so, dass man nur der Text ( eine Headline ) verlinkt ist.

Möchte es aber gerne so haben, dass der gesamte Container, also der graue Hintergrund ein link ist.

Habe schon verschiedene Varianten ausprobiert, <a href um jeden einzelnen container, <a href innerhalb jedes einzelnen containers, und auch im CSS "display:Block" eingefügt.

Kann mir vielleicht jemand dabei helfen? Scheint nicht so einfach zu sein! Habe mich schon überall umgesehen, aber ich bekomme es einfach nicht hin.

Vielen Dank schonmal.
Angehängte Grafiken
Dateityp: jpg 4 spalter.jpg (69,5 KB, 4x aufgerufen)
Dateityp: jpg CSS.jpg (18,9 KB, 5x aufgerufen)
Dateityp: jpg HTML.jpg (67,7 KB, 4x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.05.2018, 13:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.980
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

du musst das a href innerhalb deines containers haben so wie ich das sehe. display block darf dann nicht fehlen. Da du das schon ausprobiert hast -> Was war daran unzufriedenstellend? Wo genau hast du display:block angewandt? (Hinweis: Es muss auf das a-Element angewandt werden).

Code:
<a href="">
<p> Alles hier ist verlinkt!</a>
<img src="https://xhtmlforum.de/.." alt="auch ich bin teil des Links>
<h3> Sogar ich bin Teil des Links </h3>
</a>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.05.2018, 13:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

die Bilder wurden nicht mehr angezeigt und die einzelnen Container waren nicht mehr nebeneinander in Reihe sondern untereinander und die Texte verschoben.

display:block habe ich wie auf CSS Screenshot angehängt, bei den Spaltendefinitionen .col_1_4 eingefügt.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.05.2018, 13:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.980
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Dann has du display:block auf das falsche Element angewandt. Um dir besser helfen zu können ist es wirklich hilfreich dass du deinen Code, welchen du probiert hast (und mit dem du nicht zufrieden warst) hier postest (KEIN! Screenshot). Dann kann man von dort aus weiterarbeiten.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.05.2018, 13:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

habe den Code wie du ihn vorgegeben hast ergänzt, und das Layout sieht gut aus.
Allerdings ist der link nicht über die komplette graue Fläche aktiv ( wie ich es eigentlich gerne hätte), sondern nur auf dem Bild und der Headline "web"
Mit Zitat antworten
  #6 (permalink)  
Alt 09.05.2018, 13:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
<!DOCTYPE html>
<html lang="de">
 
<head>
<meta charset="utf-8">
<title>S.design-Webseite | OfG-Studium Webdesign</title>
<link rel="stylesheet" href="styles/styles.css">


	<!-- Webfonts-Einbindung -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
 
</head>


<body>
 
	<!-- Header -->
<div id="header">
<div class="wrapper">
		<a href="index.html"><img src="images/logo-s.design.png" height="89" width="208" alt="Logo s.design"></a>

		<ul id="navigation">
		<li><a href="home.html">home |</a></li>
		<li><a href="referenzen.html">referenzen |</a></li>
		<li><a href="kontakt.html">kontakt |</a></li>
		<li><a href="leistungen.html">leistungen |</a></li>
		<li><a href="news.html">news</a></li>
	
		</ul>
</div>
</div>


	<!-- Teaser --> 
<div id="teaser"> 
<div class="wrapper"> 
 
	<div class="col_1_2">
<h1>Wir haben was Sie suchen ...</h1>
<h2>Sie sind auf der Suche nach einer Agentur,<br>die Ihren Ideen ein Aussehen gibt?<br>Wir bei S.design lieben was wir tun!</h2>
<a href="projekte.html" class="button big">Projekte</a>
</div> 

 
	<div class="col_1_2"> 
<img src="images/teaser.png" width="460" height="279" alt="Teaser Referenzprojekt">
	</div>
</div> 
</div>

 
	<!-- Content -->
<div id="content">
<div class="wrapper">


	<!-- Vierspalter: Teaser klein -->


  	<div class="col_1_4">
<a href="web.html">
<img src="images/teaser-web.jpg" width="200" height="200" alt="Teaser Webdesign">
<h3><a href="web.html" class="web">web</a></h3>
<p>Weniger als 5 Sekunden Zeit zu überzeugen!</p>
/a> 
	</div>

   	<div class="col_1_4">
<a href="corporate.html">
<img src="images/teaser-corporate.jpg" width="200" height="200" alt="Teaser Corporate Design">
<h3><a href="corporate.html" class="corporate">corporate</a></h3>
<p>individuelle Geschäftsausstattungen</p> 
/a> 
	</div>

	<div class="col_1_4">
<a href="concept.html">
<img src="images/teaser-concept.jpg" width="200" height="200" alt="Teaser Concept">
<h3><a href="concept.html" class="concept">concept</a></h3>
<p>Visualisierung</p> 
/a> 
	</div>

	<div class="col_1_4">
<a href="print.html">
<img src="images/teaser-print.jpg" width="200" height="200" alt="Teaser Print">
<h3><a href="print.html" class="print">print</a></h3>
<p>high end print-solutions - color management</p> 
/a> 
	</div>

</div>


	<!-- Trennlinie -->        
<hr>

<h4>corporate <span class="design">design</span></h4>
	
	
	<!-- Zweispalter -->		
<div class="wrapper">

	<div class="col_1_2">
<p class="corporatedesign"> Die wichtigste und  beständigste Entscheidung eines Unternehmers ist die des Erscheinungsbildes für die eigene Firma. Dabei geht es nicht nur darum, dass ein Corporate Design gefällt, sondern</p> 
	</div>
         
   	<div class="col_1_2">
<p class="corporatedesign"> zunehmend darum ob es zum Unternehmen oder zum Produkt passt. Es ist sehr wichtig, dass 
Ihr Logo die Werte Ihres Unternehmens wortlos widerspiegelt & ohne Erklärung verständlich ist.</p> 
	</div>
</div>

<div class="button2background">
<a href="getintouch.html" class="button2">get in touch</a> 
</div>



	<!-- Zweispalter: Teaser gross -->

<div class="wrapper">
 	<div class="teaser_gross1">
<img src="images/teaser-gross1.jpg" width="620" height="245" alt="Teaser Cross the line" class="alignleft">

<h5>360 Grad - <br> Wir denken Crossmedia ! </h5>
<p class="teasertext1"> „Crossmedia ist die kreative & inhaltliche Vernetzung mehrerer Medienkanäle und Werbeträger, 
mit dem Ziel, einen maximalen werblichen Erfolg zu realisieren.“</p> 

<a href="mehr.html" class="buttonmehr1">mehr...</a>
	</div>
</div>


<div class="wrapper">
	<div class="teaser_gross2">
<img src="images/teaser-gross2.jpg" width="600" height="238" alt="Teaser inspire" class="alignright">

<h6>Fantasie ist wichtiger als Wissen - denn Wissen ist begrenzt! </h6>
<p class="teasertext2"> Der einzige Weg um großartige Arbeit zu leisten, ist ... das zu lieben was du tust!</p> 

<a href="mehr.html" class="buttonmehr2">mehr...</a>
	</div>
</div>

</div>

 
	<!-- Footer -->
<div id="footer">
   	<div class="wrapper">
	<div class="socialmedia">
<a href="kontakt" class="kontakt"><img src="images/kontakt.png" alt="Kontakt" /></a>
<a href="facebook" class="facebook"><img src="images/facebook.png" alt="facebook" /></a>
<a href="instagram" class="instagram"><img src="images/instagram.png" alt="instagram" /></a>
<a href="twitter" class="twitter"><img src="images/twitter.png" alt="twitter" /></a>
<a href="youtube" class="youtube"><img src="images/youtube.png" alt="youtube" /></a>
<a href="standort" class="standort"><img src="images/standort.png" alt="standort" /></a>
	</div>
	</div>
</div>
 
</body>
</html>
Mit Zitat antworten
  #7 (permalink)  
Alt 09.05.2018, 14:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard hier noch die CSS Datei

Code:
@charset "utf-8";
 /*
* CSS-Design
* S.design-Webseite
* Online-Schule für Gestaltung: Webdesign-Kurs
*/
 
 
/* Reset * * * * * * * * */
*{
        margin: 0;
        padding: 0;
}
 
body{
font: 400 15px/24px'Droid Sans', Helvetica, Arial, sans-serif; 
color: #2c2522; 
}
 

/* Layout * * * * * * * * */
 
.wrapper{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
 
#header{
background: #e20072;
padding: 35px 0px;
}

#teaser{
padding: 80px 0 30px;
}

#content{
padding: 80px 0 50px;
}
 
#footer{
background: #2c2522;
}


/* Spalten * * * * * * * * */
 
.col_1, .col_1_2, .col_1_3, .col_1_4{ 
float: left;
margin: 20px 10px;	
}
 
.col_1{
width:940px;
}
.col_1_2{
width:460px;
}
 .col_1_3{
width:300px;
}
.col_1_4{
display: block;
width:200px;
height:370px;
background:#2c2522;
padding:10px;
}


/* Navigation * * * * * * * */ 

ul#navigation{ 
float: right;
margin: 40px 10px 0px 0; 
}

ul#navigation li{ 
display: inline;
list-style: none;  
}

ul#navigation li a{
color: #fff; 
text-decoration: none; 
text-transform: uppercase;
font-size: 18px; 
font-weight: 700; 
font-family: 'Droid Sans', Helvetica, Arial, sans-serif; 
}

ul#navigation li a:hover{     
color: #000; 
}


/* Headlines * * * * * * * * */

h1, h2, h3, h4, h5, h6 {    
font-family: 'Droid Serif', Georgia, serif; 
font-style: italic; 
font-weight: 400; 
margin: 0 0 10px 0; 
}

#teaser h1{ 
color: #e20072;    
font-size: 34px;    
line-height: 60px; 
margin: 20px 0; 
} 
 
#teaser h2{
color: #2c2522; 
margin-bottom: 30px; 
font: 19px/28px 'Droid Sans', Helvetica, Arial, sans-serif; 
}

h3{ 
font-family: 'Droid Sans', Helvetica, Arial, sans-serif;  
font-weight: 700; 
font-style: normal;    
font-size: 18px;     
line-height: 28px; 
text-transform: uppercase;
background:#e20072;
color: #fff; 
margin: 30px 0px 30px 0px;
text-align:center;
}

h4{ 
font-family: 'Droid Sans', Helvetica, Arial, sans-serif;  
font-weight: 700; 
font-style: normal;    
font-size: 28px;     
line-height: 28px; 
text-transform: uppercase;
padding: 90px 0px 0px 0px;
color: #2c2522; 
text-align:center;
}

h5{ 
font-size: 22px;     
line-height: 28px; 
color: #e20072; 
margin: 0px;
text-align:right;
float: right;
}

h6{ 
font-size: 22px;     
line-height: 28px; 
color: #e20072; 
margin:100px 0px 10px 0px;
text-align:left;
float: left;
width: 350px;
}



/* buttons * * * * * * * * */

.button{ 
background: #e20072; 
padding: 4px 10px;
color: #fff; 
text-decoration: none;    
font-size: 16px; 
border-radius: 6px;
}
.big{ 
font-size: 19px; 
}
.button:hover{    
background: #000;   
color: #fff; 
}

.button2{
background:#fff;
padding: 6px 15px;
color:#e20072;
text-decoration: none;
font-weight: 700; 
font-size: 16px; 
text-transform: uppercase;
border: solid 1px #e20072;
border-radius: 8px;
}

.button2:hover{    
background: #e20072;   
color: #fff; 
}

.button2background{
background: #fff;
width: 960px;
height: 80px;
margin: auto;
text-align: center;
margin-bottom: 50px;
}

.buttonmehr1{ 
background: #e20072; 
padding: 4px 10px;
color: #fff; 
text-decoration: none;    
font-size: 16px; 
border-radius: 6px;
float: right;
}
.buttonmehr1:hover{    
background: #000;   
color: #fff; 
}

.buttonmehr2{ 
background: #e20072; 
padding: 4px 10px;
color: #fff; 
text-decoration: none;    
font-size: 16px; 
border-radius: 6px;
float: left;
margin-bottom: 80px;
} 
.buttonmehr2:hover{    
background: #000;   
color: #fff; 
}

.web{
text-decoration: none;    
color: #fff; 
}
.corporate{
text-decoration: none;    
color: #fff; 
}
.concept{
text-decoration: none;    
color: #fff; 
}
.print{
text-decoration: none;    
color: #fff; 
}
a:hover{
color: #000; 
}



/* texts * * * * * * * * */

p{
font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
font-size:16px;
line-height:24px;
color:#fff;
text-align:center;
}

.corporatedesign{
font-size:20px;
line-height:32px;
color:#2c2522;
text-align:left;
padding: 0px 0px 15px 0px;
}

.design{
font-weight: 400;
}

.teasertext1{
float: right;
width: 300px;
margin: 10px 0px 10px 0px;
font-size:18px;
line-height:28px;
color:#2c2522;
text-align:right;
}

.teasertext2{
width: 330px;
margin: 10px 0px 10px 0px;
font-size:18px;
line-height:28px;
color:#2c2522;
text-align:left;
}



/* separation line * * * * * * * * */

hr{ 
background: #e20072;   
border: 0;    
height: 2px;
width: 750px; 
margin: 100px auto 0px auto; 
}



/* pictures * * * * * * * * */

.alignleft{ 
float: left;
}

.alignright{ 
float: right;
margin: 70px 0px 0px 0px;
}

.socialmedia{
padding: 20px 0px;
text-align: center;
}

.kontakt{
margin: 0 120px;
}

.standort{
margin: 0 120px;
}
Mit Zitat antworten
  #8 (permalink)  
Alt 09.05.2018, 14:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

wo und was müsste ich hier im CSS einfügen?
Mit Zitat antworten
  #9 (permalink)  
Alt 09.05.2018, 14:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.980
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Am Besten ist es, du gibst den Links eine eigene Klasse damit du sie gezielt ansprechen kannst:
Code:
<a href="corporate.html" class="link-teaser"> ..... </a>


CSS: 

.link-teaser {display:block}
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.05.2018, 14:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Hab ich so abgeändert.
Layout passt, aber leider ist immernoch nur das Bild und die Headline als link aktiv. Aber nicht der graue Kasten.

Denke ich werde es erstmal so lassen.

Falls jemandem noch was einfällt ......
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
container, div, link

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre 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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div container on click vergrössern keira CSS 3 14.09.2017 20:59
Img im div Container an größe anpassen... Lilienfan CSS 2 23.12.2011 23:13
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48
div container verschachteln blau CSS 2 05.12.2006 19:44
2 div container, 2. orientiert sich am 1. kemai CSS 9 21.06.2005 14:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:25 Uhr.