|
|||
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. |
Sponsored Links |
|
|||
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> |
Sponsored Links |
|
|||
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. |
|
|||
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.
|
|
|||
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" |
|
|||
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> |
|
|||
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; } |
|
|||
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} |
Sponsored Links |
|
|||
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 ...... |
Sponsored Links |
Stichwörter |
container, div, link |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div container on click vergrössern | keira | CSS | 3 | 14.09.2017 21:59 |
Img im div Container an größe anpassen... | Lilienfan | CSS | 2 | 24.12.2011 00:13 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
div container verschachteln | blau | CSS | 2 | 05.12.2006 20:44 |
2 div container, 2. orientiert sich am 1. | kemai | CSS | 9 | 21.06.2005 15:28 |