Beiträge von djheke

djheke

Du brauchst keine 2 Bilder

Code

.entry-thumbnail img { opacity:.6;}
 .entry-thumbnail:hover img { opacity:1;}

djheke

Keine Ahnung, was Du willst, aber hier mal JQuery >http://www.aakashweb.com/demos/jquery-collapser/
Und hier nochmal mein Vorschlag > http://gipspferd.de/forumhilfe/text-kuerzen.html

djheke

Oder mit dem Input hack

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


#textbox {
 float:left;
 width:50%;
 padding:15px;
 border:1px solid #000;
 box-shadow:0 0 5px #888;
 border-radius:5px;
}


#textbox p { 
 display:inline; /* Optional, wenn Linktext am Text anschließen soll. */
}


#textbox input {
 display:none;
}
#textbox input:checked  ~ p span {
 position:relative;
 left:0;
 top:0;
/*oder
 font-size:1rem;
*/
}
#textbox label {
 text-decoration:underline;
 cursor:pointer;
 color:blue;
 display:inline;
}
#textbox input ~ label:before {
 content:"mehr..";
}
#textbox input:checked ~ label:before {
 content:"weniger";
}
#textbox  p span {
 position:absolute;
 left:-999999rem;
 top:-99999rem;
/*oder
 font-size:0;
*/
}


</style>
</head>
<body>
<div id="textbox">
 <input type="checkbox" name="weiter" id="weiter">  
   <h3>Lorem ipsum</h3>
    <p>
     dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.takimata sanctus est Lorem ipsum dolor sit
       <span>
         dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
       </span>
    </p>
  <label for="weiter">.</label>        
</div>   
</body>
</html>

Alles anzeigen

Wobei es mit Focus-Funktionalität reichen würde.

HTML

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Komplette Zeilen bei unterschiedlicher Schriftgröße</title>
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}


div {
 margin:10px;
 padding:0 5px;
 border:1px solid #000;
 border-radius:5px;
 box-shadow:0 0 5px #000;
 overflow:hidden;
 float:left;
 -width:300px;
 height:4.5em; /*Vorgabehöhe:  1.5em(line-height) x 3 Zeilen = 15em */
 font-size:1em;
 line-height:1.5em;
 position:relative;
}


div:hover {
 height:auto;
}


div:after {
 content:"...";
 display:block;
 position:absolute;
 background:#fff;
 font-weight:bold;
 right:5px;
 bottom:1px;
}


div:hover:after {
 content:none;
}
</style>
</head>


<body id="home">
<div>
<p>
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
</p>
</div>


</body></html>

Alles anzeigen

djheke

Code

html,body {
    height: 100%;
    background-image: url(images/jpgBody.jpg);
    font-family: 'Exo', sans-serif;
}


#index {
 position:relative;
}

Aber kümmere Dich lieber um Grundlagen und nicht um sinnlose Spielereien.

djheke

Upps, übersehen.

#nav-wrapper .menu > li.menu-item-has-children > a:hover:after {
color:#FF91A2;
}

#nav-wrapper .menu li img {
display:inline-block;
vertical-align:middle
}

/* Dropdown **********/
#nav-wrapper .menu .sub-menu,
#nav-wrapper .menu .children {
background-color: #fff;
display: none;
padding: 0;
position: absolute;
margin-top:0;
left: 0;
z-index: 99999;
border-top: 3px solid #FF91A2;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
line-height: 50px;
}

Versuch mal das blau markierte bei dir einzufügen. Sollte funktionieren

djheke

Und wo ist dein HTML?

djheke

Eine von vielen Möglichkeiten

Code

<!DOCTYPE html
<head> 
<title>vertical</title> 
 
<style> 
header img , header nav {
 display:inline-block;
 vertical-align:middle;
}
</style> 


</head> 
<body> 
<header>


 <nav>
  <a href="#"><img src="logo.jpg" height="70"></a><!-- Home -->
  <a href="#">Vegan- Was ist das?</a>
 ....
</nav>
</header>
</body> 
</html>

Alles anzeigen

Wobei Flexbox eleganter wäre.

djheke

Wenn Du kein weiteres JS benötigst, kannst Du auch den Input-Hack nehmen.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}
nav , nav ul {
 background:#000;
 float:left;
 width:100%;
}


nav li {
 position:relative;
}


nav li ul {
 position:absolute;
 top:-99999em;
 left:-9999em;
 background:#444;
}


nav li {
 float:left;
}


nav li li {
 float:none;
}


nav a {
 padding:10px;
 display:inline-block;
 color:#fff;
 text-decoration:none;
}


nav li:hover  {
 background:red;
}


nav input {
 display:none;
}


nav label span {
 display:none;
}


nav label {
 display:inline-block;
 padding:10px;
 background:#0f0;
 text-align:center;
 cursor:pointer;
}


nav label:before {
 content:"+";
 color:#000;
 display:inline-block;
 width:1em;
 font-weight:bold;
}


nav input:checked + label:before {
 content:"-";
}


nav input:checked ~ ul {
 top:auto;
 left:0;
}
</style>
</head>


<body>
<nav>
<ul>
  <li><a href="index.html">Home</a>
  <li><a href="index.htm">Wanderwege</a><input type="checkbox" id="sub"><label for="sub"><span>+</span></label>
    <ul>
      <li><a href="wanderweg1.html">Wanderweg 1</a></li>
      <li><a href="wanderweg1.html">Wanderweg 2</a></li>
      <li><a href="wanderweg1.html">Wanderweg 3</a></li>
    </ul>
  </li>
  <li><a href="about.html">Über uns</a></li>
</ul> 
</nav>
</body>
</html>

Alles anzeigen

djheke

So gehtt's auch

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Valiedieren</title>
<meta charset="utf-8">
<style>
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
}
body {
 background:#000;
}


main {
 margin:0 auto;
 width:80%;
 overflow:hidden;
}


header {
 padding:20px;
 background:#dda;
}


section {
 width:100%;
 float:left;
 background:#fda;
 border-right:5px solid #000;
}


article {
 border-top:5px solid #000;
 border-right:5px solid #000;
 float:left;
 height:200px;
 width:25%;
 background:#0f0;
}


article:nth-of-type(2) {
 width:50%;background:#ada;
}
article:nth-of-type(4),
article:nth-of-type(5) {
 height:400px;
 width:25%;
 background:#fda;
}
article:nth-of-type(5) {
 height:400px;
 width:50%;
 background:#fdf;
}
article:nth-of-type(10) {
 width:50%;
 background:#f33;
}


article:nth-of-type(3) {
 background:#4da;
 color:#fff;
}
article:nth-of-type(6) {
 background:#09c;
 color:#fff;
}
article:nth-of-type(8) {
 background:#99c;
 color:#fff;
}
article:nth-of-type(9) {
 background:#00f;
 color:#fff;
}
section p , article p {
 padding:5px;
}
</style>
</head>
<body>
<header>
<h1>Mc K doubleV</h1>
</header>
<main>
<section>
 <p>Sehr viel blabla bla.</p>
 <p>Sehr viel blabla bla.</p>
 <p>Sehr viel blabla bla.</p>
</section>




<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>


<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>


<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>


</main>
</body>
</html>

Alles anzeigen

djheke

Code

* {     margin: auto;
    text-shadow: 1px 1px 1px #4d4d4d;
     box-sizing:border-box;
}

djheke

Mit E:checked kannst du das umsetzen. Das E steht für Element.

djheke

Versuch mal dein Script im Body aufzurufen.

Code

<body onload="glow();">

djheke

Beispiel

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Input</title> 
</head>
<style>
form {
 padding:0 10px;
 width:50%;
 border:1px solid #000;
 box-sizing:border-box;
}
p {
 display:flex;
}
label {
 margin-right:10px;
 padding:10px 10px 10px 0;
 flex-basis:15%;
 text-align:right;
 border:1px solid #000;
}
input {
 flex-basis:85%;
 border:1px solid #000;
}
</style> 
<body> 
<form action="#" method="#"> 
<p><label for="vname">Vorname</label><input type="text" name="vname" id="vname"></p>
<p><label for="name">Name</label><input type="text" name="name" id="name"></p> 
<p><label for="str">Straße</label><input type="text" name="str" id="str"></p> 
</form> 
</body> 
</html>

Alles anzeigen

djheke

Zitat von modem-kind

PC XT Z 80 512 KB 4.77 MHz.HD 10MB
5000,- Mark

5000 DDR Mark oder wat?:)

djheke

Hallo,
die Pixelwerte sind natürlich nur Beispielhaft und Padding legt den Innenabstand fest. Wenn nicht jede zweite Zeile angesprochen werden, ist (even) nicht geeignet. Dafür eignet sich aber der sog. Attributselektor td[colspan].

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attributselektor</title>
<style>


table {
 width:50%;
 margin:30px auto;
 border-collapse:collapse;
}


table td {
 border:1px solid #000;
 padding:5px;
 background:#eee;
}


table td[colspan]  {
 padding:20px; /* Gesamtabstand nach oben und unten 40 Pixel */
 border:none;
 background:transparent;
}


</style> 
</head>
<body>


<table>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr><td colspan="5"></td></tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr><td colspan="5"></td></tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr><td colspan="5"></td></tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

Eine elegantere Lösung wäre diese.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attributselektor</title>
<style>


table {
 width:50%;
 margin:30px auto;
 border-collapse:collapse;
}


table td {
 border:1px solid #000;
 padding:5px;
 background:#eee;
}


table th[colspan]  {
 padding:20px 0px 0px 0px;
 border:none;
 background:transparent;


}


table td , table th {
 text-align:center;
}


table th b {
 margin-left:-1px;
 padding:5px;
 display:block;
 background:#09c;
 color:#fff;
 border:1px solid #000;
 border-bottom:none;
}


table img {
 width:100px;
}
</style> 
</head>
<body>


<table>
<tr>
<th colspan="5"><b>Jeanshosen</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<th colspan="5"><b>Jeansjacken</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<th colspan="5"><b>Sportschuhe</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<th colspan="5"><b>Accessoires</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>
</table>


</body>
</html>

Alles anzeigen

djheke

Habe mal mein Beispiel etwas geändert und bissel bunt gemacht(Highlighter).

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pyramide</title>
<style>


body {
 counter-reset: span;    
 width:100%; 
 margin:0;
 padding:0; 
}


span:before {
 counter-increment: span;                 
 content:counter(span); 
 padding:7px;
 margin:-5px 10px -5px 0;
 text-align:right;
 display:inline-block;
 min-width:2.5em;
 border-right:1px solid #555;
 color:#fff;
 
}


pre {
 background:#333;
 color:#fff;
 margin:20px;
 padding:5px 2.5em 5px 0;
 max-width:100%;
 overflow:auto;
}


.reset {
 counter-reset: span;
}




.tag {
 color:springgreen;
}


.attr {
 color:deeppink;
}


.value {
 color:aqua;
}
</style> 
</head>
<body>
<pre>
<code>
<span>&lt;<b class="tag">div <b class="attr">id</b>=<b class="value">"menu"</b></b>&gt;</span>
<span>    &lt;<b class="tag">ul</b>&gt;</span>
<span>      &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"topmenu"</b></b>&gt;</span>
<span>        &lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Menü 1&lt;/<b class="tag">a</b>&gt;</span>
<span>        &lt;<b class="tag">ul</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 1.1&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 1.2&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>        &lt;/<b class="tag">ul</b>&gt;</span>
<span>      &lt;/<b class="tag">li</b>&gt;</span>
<span>      &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"topmenu"</b></b>&gt;</span>
<span>        &lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Menü 2&lt;/<b class="tag">a</b>&gt;</span>
<span>        &lt;<b class="tag">ul</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 2.1&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 2.2&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>        &lt;/<b class="tag">ul</b>&gt;</span>
<span>      &lt;/<b class="tag">li</b>&gt;</span>
<span>      &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"topmenu"</b></b>&gt;</span>
<span>        &lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Menü 3&lt;/<b class="tag">a</b>&gt;</span>
<span>        &lt;<b class="tag">ul</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 3.1&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 3.2&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>        &lt;/<b class="tag">ul</b>&gt;</span>
<span>      &lt;/<b class="tag">li</b>&gt;</span>
<span>    &lt;/<b class="tag">ul</b>&gt;</span>
<span>  &lt;/<b class="tag">div</b>&gt;</span>
</code>
</pre>
</body>
</html>

Alles anzeigen

djheke

Na, gibt doch einfach jedes <td> ein Padding.

Code

table td {
 padding:5px;
}

und für die Colspans

Code

table tr:nth-child(even) td {
 padding:10px 5px;
}

djheke

Du bist einfach nicht gewillt, HTML/CSS zu lernen. Warum dies Buttons und A-Elemente? Nimm doch für den Anfang mein Beispiel. Einfach speichern.

djheke

Zu spät

Code

<!DOCTYPE html
<head> 
<title>Increment</title> 

<style> 
* {
 margin:0;
 padding:0;
  box-sizing:border-box; 
}
body {
 counter-reset: span;    
 width:100%; 
 margin:0;
 padding:0; 

}




span:before {
 counter-increment: span;                 
 content:counter(span); 
 padding:7px;
 margin:-5px 10px -5px 0;
 text-align:right;
 display:inline-block;
 min-width:2.5em;
 border-right:1px solid #555;
 color:#000;
 
}


pre {
 background:#eee;
 margin:20px;
 padding:5px 2.5em 5px 0;
 max-width:100%;
 overflow:auto;
}






.reset {
 counter-reset: span;
}


</style> 


</head> 
<body> 
<pre>
<span></span><b>Zeile</b>
<span></span><b>Zeile</b>
<span></span><b>Zeile</b>
<span></span><b>Zeile</b>
</pre>
</body> 
</html>

Alles anzeigen

djheke

Er hat seine 1920 x 1080 Pixel voll ausgenutzt.:)

Hier mal eine Flexbox-Variante.(Geändert)
http://gipspferd.de/forumhilfe/klassenfahrt/index.html

Beiträge von djheke

WOrdpress News Ansicht mittels CSS ändern

Texte in einem Div kürzen ab der 3. Zeile mit "..."

Texte in einem Div kürzen ab der 3. Zeile mit "..."

erbitte hilfe oder ratschläge

Menü Bar Text zentrieren

Menü Bar Text zentrieren

Menü Bar Text zentrieren

Ausklappbares Menü das sich bei Klick auf Oberpunkt öffnet mit javascript

Margin und Padding. Verschiebungsprobleme.

Margin und Padding. Verschiebungsprobleme.

Switch Button, Scrollen für Anfänger

JavaScript: getElementsByClassName funktioniert nicht

Inputfelder einheitlich machen

<title> ändern, wenn man den Tab wechselt

CSS: alle Colspan-Zeilen immer mit bestimmter Höhe?

Zeilennummerierung ohne Javascript

CSS: alle Colspan-Zeilen immer mit bestimmter Höhe?

Problem beim Platzieren von CSS Elementen

Zeilennummerierung ohne Javascript

Problem beim Platzieren von CSS Elementen