XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   div container verlinken (http://xhtmlforum.de/showthread.php?t=73490)

sabrina79 09.05.2018 13:08

div container verlinken
 
Liste der Anhänge anzeigen (Anzahl: 3)
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.

cloned 09.05.2018 14:25

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>


sabrina79 09.05.2018 14:43

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.

cloned 09.05.2018 14:53

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.

sabrina79 09.05.2018 14:55

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"
:cry:

sabrina79 09.05.2018 14:57

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>


sabrina79 09.05.2018 15:07

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;
}


sabrina79 09.05.2018 15:08

wo und was müsste ich hier im CSS einfügen?

cloned 09.05.2018 15:14

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}


sabrina79 09.05.2018 15:23

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 ......
:D


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:19 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023