Beiträge von birkenfrank

birkenfrank

Willst du jetzt wieder Buchstabenwüste? Du hast doch den Link und die Seiten sind aktuell.

birkenfrank

Hmmm, ich habe die Fehler, die du angegeben hast, korrigiert. Der Validator schmeißt doch viel mehr Fehler raus als du angegeben hast? Nach der Korrektur stehen dort immer noch etliche Fehler, mit denen ich (als „html-Embryo“) leider nichts anfangen kann.

Z.B. das hier: Wenn ich mir das anschaue, dann gibt es doch ein schließendes </p>???

<p><div style="text-align:left;"><i>»Nicht mehr Tier und noch nicht Engel«   <a href="https://de.wikipedia.org/wiki/Blaise_Pascal" target="_blank" rel="noopener">Blaise Pascal</a></i></div></p>

Ich gebe zu, ich habe wenig Ahnung und hoffe daher auf Hilfe aus diesem Forum.

birkenfrank

Ich weiß nicht, wie ich das anders posten soll? Daher hier der Link: http://www.denkmodelle.de/test/ Es geht dort um den Link zu Blaise Pascal in der Wikipedia als Beispiel.

birkenfrank

Aha! Wäre schon nett, zu erfahren, was da kaputt ist. Im Gegensatz zu einem kranken Körperteil kann man ja hier alles einfach ersetzen.

birkenfrank

Hallo Forum,

ich habe eine Webside geschrieben, bei der im IE11 die Links und das Script easyComment zwischen <main> und </main> nicht funktionieren. Die Links außerhalb davon (z.B. in der Navileiste) funktionieren. Hat jemand eine Idee, wo der Fehler liegen könnte?

Hier der Code:[INDENT]

HTML

<!DOCTYPE html><html lang="de"><head>  <title>Holismus</title>  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link type="text/css" rel="stylesheet" media="screen" href="design.css"></head><body>    <div id="aside">        <header>                </header>        <div id="steuerung">                 <nav>                <ul>                    <li><a href="index.php" title="Test 1">Auftakt</a></li>                    <li><a href="appell.php" title="Test 2">Appell</a></li>                </ul>            </nav>           <br>         </div>    </div>    <main id="main">        <div class="tabset">            <!-- Tab 1 -->            <input type="radio" name="tabset" id="tab1" aria-controls="tab1" checked>            <label for="tab1">              Auftakt            </label>                        <!-- Tab 2 -->            <input type="radio" name="tabset" id="tab2" aria-controls="tab2">            <label for="tab2">              Leser-Kommentare            </label>                        <div class="tab-panels">                <section id="tab1" class="tab-panel">                  <div style="text-align:left;"><i>»Nicht mehr Tier und noch nicht Engel« &nbsp; <a href="https://de.wikipedia.org/wiki/Blaise_Pascal" target="_blank" rel="noopener">Blaise Pascal</a></i></div></p>


<div><p span style="padding-top:10px;">Lorem ipsum<p>                      </div>                </section>                                <section id="tab2" class="tab-panel">


<!-- easyComment Content Div --><div id="easyComment_Content"></div>                                </section>            </div>        </div>    </main><footer>
        <!-- easyComment --><script type="text/javascript">    // CONFIGURATION VARIABLES    var easyComment_ContentID = 'Auftakt';        // CORE     var easyComment_Domain = 'http://www.denkmodelle.de/easyComment/';        /* * * DON'T EDIT BELOW THIS LINE * * */    (function() {        var EC = document.createElement('script');        EC.type = 'text/javascript';        EC.async = true;        EC.src = easyComment_Domain + 'plugin/embed.js';        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(EC);    })();</script>     </footer></body></html>

[/INDENT]
Und der zugehörige CSS-Code:

Code

* {    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




html {
    height: 100%;
    overflow: hidden;
}




body {
    background: #f6f6f6;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 13px;
}




/* typo */




p {
    margin-bottom: 18px;
}








b, strong {
    font-weight: bold;
    clear: both;
}




i {
    font-style: italic;
    clear: both;
}






/* Linkformatierungen: */




a {
    color: #1746b1;
    text-decoration: none;
}




a:hover, a:active {
    text-decoration: underline;
}






a:visited {
    color: #0d0183;
    text-decoration: none;
}




/* Listen */




nav ul {
    list-style: none;
}




/* Seitenaufteilung: */


#aside {
    width: 180px;
    float: left;
    height: calc(100vh - 77px);
    padding: 10px 0 0 0;
}




#main {
    position: relative;
    float: left;
    width: calc(100% - 180px);
    padding-top: 13px;
}




footer {
    overflow: hidden;
    text-align: right;
    padding: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}




#aside header {
    text-align: center;
    margin-bottom: 20px;
}




#aside #steuerung {
    padding-left: 22px;
    font-size: 13px;
}




/* tab-functionlity */




.tabset > input[type='radio'] {
  position: absolute;
  left: -200vw;
}




.tabset .tab-panel {
  display: none;
}




.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}




/* tab-styling */




.tabset {
    height: 100%;
}




.tab-panels {
    height: calc(100% - 110px);
    width: calc(100% - 200px);
    overflow-y: scroll;
    background: #fff;
    position: fixed;
    z-index: -1;
    border: solid 1px #acd7fb;
}




.tabset > label {
  position: relative;
  display: inline-block;
  padding: 10px 15px 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  background: #edf4fb;
  border: 1px solid #acd7fb;
  margin-bottom: -1px;
}




.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}




.tabset > input:checked + label {
  border-color: #acd7fb;
  border-bottom: 1px solid #fff;
  background: #fff;
  z-index: 10;
}




.tab-panel {
  padding: 30px;
}




/* Kommentarfunktion */




#cssxecx_c_write { 
margin:5px; 
border:none; 
background:#F4F4F4; 
padding:5px; 
} 
.cssxecx_d_row { 
padding:2px; 
} 
.cssxecx_input { 
padding:3px; 
width:200px; 
font-family:verdana, arial, helvetica, sans-serif; 
font-size:13px; 
border:#666666 1px solid; 
} 
#cssxecx_comm { 
padding:3px; 
width:400px; 
font-family:verdana, arial, helvetica, sans-serif; 
font-size:13px; 
height:120px; 
border:#666666 1px solid; 
background:#FFFFFF; 
} 
#cssxecx_submit { 
padding:3px; 
width:300px; 
font-family:verdana, arial, helvetica, sans-serif; 
font-size:13px; 
} 
#cssxecx_c_h2 { 
margin:0; 
} 
#comment_cssxecx_alert { 
background:#FF9FA2 url(http://img.webme.com/pic/n/nndesign/alert.png) no-repeat; 
background-position:10px center; 
border:#990000 1px solid; 
margin:5px; 
color:#660000; 
height:64px; 
padding:5px 5px 5px 75px; 




} 
#comment_cssxecx_loadingalert { 
background:#FFF7D5; 
border:#FFCC00 1px solid; 
color:#EC8D00; 
padding:5px; 
} 
.cssxecx_eintrag { 
margin:5px; 
background:#edf4fb; 
padding:5px; 
} 
.cssxecx_c_t { 
border-bottom:1px solid #CCCCCC; 
padding:2px; 
margin:2px; 
margin-bottom:5px; 
} 
.cssxecx_namet { 
color:#333333; 
font-weight:bold; 
font-size:14px; 
font-style:italic; 
} 
.cssxecx_time { 
color:#666666; 
font-size:10px; 
} 
.cssxecx_txt { 
padding:8px; 
}

Alles anzeigen

Keine Ahnung???

birkenfrank

Prima, herzlichen Dank!
Das sieht super aus und ich werde es in Kürze „am lebenden Objekt“ einsetzen.

birkenfrank

Nun gut, das ist mir so im Groben schon klar. Es ist manchmal schwierig, so etwas verständlich rüberzubringen, sorry

Also konkret (wenn du noch Lust hast):

<img Lupe><img Bild> auf der html-Seite hintereinanderweg? Mit zwei src?
'position: absolute;' vermutlich im CSS bei figure? Einfach unten dran z.B. unter cursor: -moz-zoom-in;?
Oder brauche ich ein zweites figure-Element für die Lupe? Könnte man da nicht im CSS die Lupe als content: img-src=lupe.png mit reinschreiben?
Du schreibst: „Bei hover über das figure-Element musst du dann für das Lupenbild auf 'display: none;' setzen.“ Das hört sich für mich tatsächlich so an, als ob es ein extra figure-Element für die Lupe gäbe?
Wohin kommt das 'z-index: 99;'?

Du siehst, das meinte ich mit „CSS-Embryo“

birkenfrank

Hört sich gut an :-D, ist aber für mich CSS-Embryo in der beschriebenen Form leider zu hoch :-(.

Ich weiß nicht, was ins CSS und was ins html muss und ich bin überfordert, wie die Dinge, die du beschrieben hast, genau eingefügt werden. Wie gesagt, ich beschäftige mich erst seit einer Woche überhaupt mit CSS und html5 und habe die umgesetzten Dinge nicht selbst geschrieben, sondern abgekupfert. Keine Ahnung, wann ein # oder ein . wichtig sind? Keine Ahnung, wie die position genau angegeben wird usw.?

Sorry, aber so ist das nunmal. Ich bin da auch nicht wirklich der engagierte Bastler – die Inhalte der Homepage sind mir weitaus wichtiger. Wäre halt ein nettes „nice-to-have“.

birkenfrank

Dank dir! Ich habe das umgesetzt – obwohl es nicht das ist, was ich suche. Ich möchte eine statische Lupe über den Bildern sehen, die beim überfahren mit der Maus verschwindet.

Gruß
birkenfrank

birkenfrank

Hallo Forum,

ich bin erstens hier ganz neu und zweitens blutiger CSS-Anfänger. Ich vermute, dass mein Problem für viele von euch eine Kleinigkeit ist. Daher dachte ich mir: Frag mal nach, bevor du Stunden frustrierender Versuche investierst...

Ziel:
Ich möchte alle Bilder meiner Homepage durch Auflegen des Mauszeigers vergrößern lassen. Das ist schonmal erfolgreich gelungen. Damit der Nutzer auf diese Möglichkeit aufmerksam wird, möchte ich zudem ein kleines jpg-Symbol einer Lupe (mit statischer Größe, unabhängig von den unterschiedlich großen Bildern daraunter) unten rechts am Bildrand jeden Bildes einblenden. Beim hovern soll es natürlich verschwinden.

Ich habe im CSS bisher folgenden Code:

[INDENT]figure {
width: 280px;
padding: 4px;
margin-left:20px;
overflow: hidden;
float: right;
border: 1px solid #acd7fb;
border-radius: 5px;
background-color: #f6f6f6;
-webkit-transition: all 0.25s ease-in; /* für Safari 5.1, Android 2.3 bis 4.3 */
transition: all 0.25s ease-in;
}

figure:hover {
-webkit-transform: scale(2); /* für Safari, Android */
-ms-transform: scale(2); /* für IE9 */
transform: scale(2);
-webkit-transform-origin: right center; /* für Safari, Android */
-ms-transform-origin: right center; /* für IE9 */
transform-origin: right center;
}

figure img {
width: 100%;
border-radius: 3px 3px 0 0;
}

figure figcaption {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
padding: 2px 2px 2px 2px;
background-color: #f6f6f6;
border-radius: 0 0 3px 3px;
}[/INDENT]

Die Sache mit der Lupe fehlt da noch völlig. Ich vermute, ich brauche dazu die Funktionen before, content, z-index und opacity, oder?

Wie gesagt, der obige Code ist mühsam gebastelt, denn ich weiß nicht wirklich, was ich da tue.
Daher wäre es supernett, wenn mir jemand das für Blöde erklärt – oder mit einfach die Script-Schnipsel zur Verfügung stellt.

Herzliche Grüße aus Wuppertal
birkenfrank

Beiträge von birkenfrank

Links funktionieren nicht im IE11

Links funktionieren nicht im IE11

Links funktionieren nicht im IE11

Links funktionieren nicht im IE11

Links funktionieren nicht im IE11

Lupensymbol über allen Bildern vor dem hovern

Lupensymbol über allen Bildern vor dem hovern

Lupensymbol über allen Bildern vor dem hovern

Lupensymbol über allen Bildern vor dem hovern

Lupensymbol über allen Bildern vor dem hovern