Beiträge von djheke

djheke · 19. März 2018

ich kenne nur veraltete Methoden, die funktioniren. Geht heute bestimmt besser.

djheke · 19. März 2018

https://jsfiddle.net/zu3uw1hy/1/

djheke · 18. März 2018

Wende doch dein :hover nur auf tbody an.

tbody tr:hover{

background:blue;

}

Was meinst Du mit Scrollbalken verschieben? Soll er ausgeblendet werden?

djheke · 17. März 2018

Wenn Du die erste Spalte fixed haben möchtest, dann nimm doch JS.

Odeer mit CSS. Hier mal ein Beispiel.

HTML

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tabelle mit fixem Header aber tricky </title>
<style type="text/css">


/* Funktioniert im IE erst ab 10. alle IE's kleiner 10 bekommen die Tabelle ohne Scrollbalken, aber mit komplettem Inhalt, präsentiert.
Getestet im FF20 , Opera12.15 ;Arora? ; Chrome?;
*/


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


html,body , table{
height:100%;
}


div  { height:100%;}


/* Dieser Div wird nur benötigt, wenn die Tabelle etwas dynamisch sein soll. Bei festen Spalten ist kein Div notwendig. */
div#tabelle {


width:100%;
min-width:280px;
position:relative;
padding:2px;
border:1px solid #000;


}


/* Scrollbalken im thead verstecken */
div#tabelle:before {
content:"";
display:block;
position:absolute;
top:2px;right:2px;
width:20px;
height:200px;
background:#0c9;
}


div#tabelle table {
display:block;
table-layout:fixed;
width:100%; /* Breitenangabe benötigt der Safari */
border-collapse:collapse;
background:#fff;
border:none;
}


div#tabelle td , div#tabelle th {
max-width:30px; /* Damit sich die Zellen beim Text-Zoom nicht verschieben*/
padding:10px;
vertical-align:top;
text-align:left;
word-wrap:break-word;
border-right:1px solid #000;
border-bottom:1px solid #000;
}


div#tabelle tr {
height:1em; /* Für IE ab 8 Sonst ist td und th so hoch wie tbody.*/
}


div#tabelle thead {
display:block;
overflow-y:scroll; /* Tricky, aber so sind die Spalten von thead und tbody immer übereinander. Der Grund ist die unterschiedliche Darstellung der Scrollbars */
background:#0c9;


}




div#tabelle thead th {
background:#0c9;
border-bottom:1px solid #000;;
}




div#tabelle tbody {
background:#fff;
display:block;
height:calc( 100% - 2.5em );
overflow-y:visible;
overflow-x:hidden;
position:relative;
z-index:99;                /* Damit sich tbody über den absolut positionierten Balken legt */
}




div#tabelle thead th:nth-child(3) , div#tabelle tbody td:nth-child(3)
{
width:30%;
}
div#tabelle thead th:nth-child(2) , div#tabelle tbody td:nth-child(2) {
width:70%;
}
div#tabelle thead th:nth-child(4) , div#tabelle tbody th:nth-child(4) {
-max-width:140px;min-width:140px;text-align:right;width:140px;
}
div#tabelle thead th:nth-child(1) , div#tabelle tbody td:nth-child(1)
{
-max-width:60px;min-width:60px;text-align:right;width:60px;
}


div#tabelle tbody th:nth-child(4) {
background:rgba(30,50,60,.4);
}






div#tabelle tbody td:nth-child(2) {
background:rgba(30,150,160,.4);
}
div#tabelle tbody td:nth-child(3) {
background:rgba(180,20,60,.4);
}


div#tabelle tr:nth-child(odd) {
background:#fff;
}


div#tabelle tr:nth-child(even) {
background:#eee;
}


</style>


</head>


<body>






<div id="tabelle">
<table>


<thead>
<tr>
<th>ID</th>
<th>Ferienorte</th>
<th>Hotel</th>
<th>Preise in €uro</th>
</tr>
</thead>


<tbody>
<tr>
<td>1</td>
<td>Olhos de start</td>
<td>RIU Guarana</td>
<th>ab 340 €</th>




</tr>
<tr>
<td>2</td>
<td>Albufeira</td>
<td>Alisios</td>
<th>ab 374 €</th>
</tr>
<tr>
<td>3</td>
<td>Portimao</td>
<td>Tivoli Marina</td>
<th>ab 279 €</th>
</tr>
<tr>
<td>4</td>
<td>Praia da Falesia</td>
<td>Porto Bay Falésia</td>
<th>ab 154 €</th>
</tr>
<tr>
<td>5</td>
<td>Praia da Luz</td>
<td>Luzmar Villas</td>
<th>ab 399 €</th>
</tr>


<tr>
<td>6</td>
<td>Olhos de Água </td>
<td>RIU Guarana</td>
<th>ab 340 €</th>
</tr>
<tr>
<td>7</td>
<td>Albufeira</td>
<td>Alisios</td>
<th>ab 374 €</th>
</tr>
<tr>
<td>8</td>
<td>Portimao</td>
<td>Tivoli Marina</td>
<th>ab 279 €</th>
</tr>
<tr>
<td>9</td>
<td>Praia da Falesia</td>
<td>Porto Bay Falésia</td>
<th>ab 154 €</th>
</tr>
<tr>
<td>10</td>
<td>Praia da Luz</td>
<td>Luzmar Villas</td>
<th>ab 399 €</th>
</tr>


<tr>
<td>11</td>
<td>Olhos de Água </td>
<td>RIU Guarana</td>
<th>ab 340 €</th>
</tr>
<tr>
<td>12</td>
<td>Albufeira</td>
<td>Alisios</td>
<th>ab 374 €</th>
</tr>
<tr>
<td>13</td>
<td>Portimao</td>
<td>Tivoli Marina</td>
<th>ab 279 €</th>
</tr>
<tr>
<td>14</td>
<td>Praia da Falesia</td>
<td>Porto Bay Falésia</td>
<th>ab 154 €</th>
</tr>
<tr>
<td>15</td>
<td>Praia da Luz</td>
<td>Luzmar Villas</td>
<th>ab 399 €</th>
</tr>


<tr>
<td>1</td>
<td>Olhos de start</td>
<td>RIU Guarana</td>
<th>ab 340 €</th>




</tr>
<tr>
<td>2</td>
<td>Albufeira</td>
<td>Alisios</td>
<th>ab 374 €</th>
</tr>
<tr>
<td>3</td>
<td>Portimao</td>
<td>Tivoli Marina</td>
<th>ab 279 €</th>
</tr>
<tr>
<td>4</td>
<td>Praia da Falesia</td>
<td>Porto Bay Falésia</td>
<th>ab 154 €</th>
</tr>
<tr>
<td>5</td>
<td>Praia da Luz</td>
<td>Luzmar Villas</td>
<th>ab 399 €</th>
</tr>


<tr>
<td>6</td>
<td>Olhos de Água </td>
<td>RIU Guarana</td>
<th>ab 340 €</th>
</tr>
<tr>
<td>7</td>
<td>Albufeira</td>
<td>Alisios</td>
<th>ab 374 €</th>
</tr>
<tr>
<td>8</td>
<td>Portimao</td>
<td>Tivoli Marina</td>
<th>ab 279 €</th>
</tr>
<tr>
<td>9</td>
<td>Praia da Falesia</td>
<td>Porto Bay Falésia</td>
<th>ab 154 €</th>
</tr>
<tr>
<td>10</td>
<td>Praia da Luz</td>
<td>Luzmar Villas</td>
<th>ab 399 €</th>
</tr>


<tr>
<td>11</td>
<td>Olhos de Água </td>
<td>RIU Guarana</td>
<th>ab 340 €</th>
</tr>
<tr>
<td>12</td>
<td>Albufeira</td>
<td>Alisios</td>
<th>ab 374 €</th>
</tr>
<tr>
<td>13</td>
<td>Portimao</td>
<td>Tivoli Marina</td>
<th>ab 279 €</th>
</tr>
<tr>
<td>14</td>
<td>Praia da Falesia</td>
<td>Porto Bay Falésia</td>
<th>ab 154 €</th>
</tr>
<tr>
<td>15</td>
<td>Praia da Luz</td>
<td>Luzmar Villas</td>
<th>ab 399 €</th>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

Alles anzeigen

djheke · 17. März 2018

Code

<td colspan="2">Seitenzähler</td>

Und das display:inline-block muss weg.

djheke · 16. März 2018

Dein www funktioniert nicht. Vielleicht doch eine falsche Einstellung?

djheke · 15. März 2018

Ich vermute mal, dass die Weiterleitung falsch ist. Denn wenn ich gleichzeitug.eu eingebe wird auf die IP weitergeleitet.

Oder Du hast im Backendbereich Deines Webspaces eine falsche Einstellung vorgenommen.

Hättest also Deine IP-Adresse garnicht verstecken müssen.

djheke · 3. März 2018

So sollte es auch klappen.

Code

body {
counter-reset: td;}


td:before {
counter-increment: td;
content:counter(td);}

djheke · 24. Februar 2018

https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Grafiken#mehrere_Bildquellen_mit_srcset

djheke · 22. Februar 2018

Ich kann mich nur wiederholen, Bilder die der Gestaltung dienen, werden als Hintergrundgrafiken eingebunden.

djheke · 22. Februar 2018

Na dann gib doch #wrapper { background:red;}

djheke · 21. Februar 2018

Hier mal ein paar Anwendungsbeispiele.

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid/implizite_Erzeugung_von_Rastern#Anwendungsbeispiele

djheke · 21. Februar 2018

Und warum ist/war Deine Navigation links?

djheke · 21. Februar 2018

Niklas96, du solltest die Grundlagen in HTML5 und CSS3 lernen. Einfach Code kopieren und einfügen macht keinen Sinn.

djheke · 20. Februar 2018

Mit welchen CSS-Mitteln hast Du denn Deine Seite erstellt? Mit Float , Grid oder Flexbox

djheke · 15. Februar 2018

Zitat von basti1012

Die Frage ist eigentlich nur wie und ob man mit Css den Inhalt eines Containers auslesen kann,so das er max höhe erreicht hat sich dann auf das doppelte aus dehnt.

Sorry, dass habe ich nicht gelesen. Habe aber mal mit floats gespielt. Ist nicht optimal, aber es geht so.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>


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


#gal {
float: right;
height: auto;
overflow: hidden;
width:100%;
border:5px solid gray;
}


#border {
width:50%;
float:right;
border:10px solid #fff;
border-top:none;
border-right:0;
margin-left:10px;
}


#gal #ausgabe {
width: 500%;
float: left;
position: relative;
left: 0px;
-webkit-transition: 1s;
transition: 1s;
}


#gal a {
position: relative;
float: left;
width: 20%;
}


#gal img {
float: left;
width: 100%;
}


#ausgabe img {
width: 20%;
float: left;
}


#gal a img {
padding: 0 0 1px 1px;
}


#gal a:focus:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 1px;
bottom: 1px;
background: rgba(255, 255, 255, .3);
}




#gal a + a:focus ~ #ausgabe {
left: -100%;
}


#gal a + a + a:focus ~ #ausgabe {
left: -200%;
}


#gal a + a + a + a:focus ~ #ausgabe {
left: -300%
}


#gal a + a + a + a +a:focus ~ #ausgabe {
left: -400%
}


.container {
margin:20px;
}


article {
float:left;
}


h3, p {
margin-top:10px;
}
.lu {
margin-top:10px;
padding:10px;
background:#ddd;
}


.lu + p {
background:#ddd;
margin-top:0px;
padding:10px;
}


.color {
background:#ddd;
padding:10px;
}


</style>
</head>
<body>
<section class="container">


<h1>Artikelname</h1>
<article>


<div id="border">
<div id="gal">
<a tabindex="0" href="#a2"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild1"> </a>
<a tabindex="0" href="#a2"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild2"> </a>
<a tabindex="0" href="#a3"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild3"> </a>
<a tabindex="0" href="#a4"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild4"> </a>
<a tabindex="0" href="#a5"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild5"> </a>


<div id="ausgabe">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild1">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild2">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild3">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild4">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild5">
</div>
</div>
</div>
<div class="color">
<h3>Happy Birthday - Schriftzug aus Folienballons 40 cm</h3>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<h3>Technische Daten:</h3>
<p>
13 Teiliges Set Größe: ca. 40 cm (pro Ballon) Farbe: siehe Bild mehrere Haltevorrichtungen an jedem Buchstaben Material: Folie Integriertes Automatikschließventil (nur Aufblasen - kein Knoten notwendig) Wiederverwendbar durch leichtes Ablassen der Luft ( mit einem Strohhalm) Anlass: Hochzeit, Geburtstag, Party, Silvester, Geschenk, uvm.  Befüllbar nur mit Luft (die Ballons fliegen nicht mit Helium)
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
</div>


<h3 class="lu">Lieferumfang</h3>
<p>
je nach Auswahl: 1x 13 teiliges Happy Birthday-Folienballon Set
Das Auffüllen ist ganz einfach:
Suchen Sie die silber-glänzende Stelle vom Ballon. Durchstechen Sie diese mit einem Strohalm oder einem Auffüllaufsatz  Füllen Sie den Ballon auf und ziehen den Aufsatz heraus und der Verschluss verschließt sich wieder automatisch. ACHTUNG: nicht für Kinder unter 3 Jahren geeignet!
</p>
</article>


</section>
</body>
</html>

Alles anzeigen

djheke · 14. Februar 2018

Ja, es geht mit CSS. Werde aber keine Antwort darauf geben, Denn der Fragesteller soll sich mal so langsam alleine Gedanken machen.

Gruß Henry

djheke · 14. Februar 2018

Und wenn Du die Würfel mit CSS noch animieren kannst, bist der Held.

djheke · 13. Februar 2018

Dafür, dass Du Gewerbetreibender bist, solltest Du dir eine vernünftige Vorlage käuflich erwerben. Ist einfacher. Außerdem finde ich dein Verhalten sehr frech. Aber was soll es. Du könntest Basti ja ein Obolus zukommen lassen.

Gruß

Henry

djheke · 25. Januar 2018

Wenn es sich nicht geändert hat, könnte fogendes passieren.

Bsp. Ebay: Käufer wickelt die Zahlung über Paypal ab. Sowie der Geldeingang bestätigt wird und die Ware unterwegs ist, meldet der Käufer eine unberechtigte Abbuchung auf seinem Konto an. Das Geld wird sofort von Paypal zurücküberwiesen. Fazit: Geld und Ware weg. Ist mein Kollegen mit einem Macbook Pro passiert. Du kannst aber mal Googeln, da findest Du bestimmt eine Menge.

Beiträge von djheke

Wie lautet der css-code, um ein Bild zu zentrieren?

tabellen layout

tabellen layout

tabellen layout

tabellen layout

Titel und Favicon

Titel und Favicon

Tabelle erstellen

Media Query und Entweder-oder-Bild

Boxen erstellen

Boxen erstellen

Flexbox vs Grid

Seitenleiste verschieben

Seitenleiste verschieben

Seitenleiste verschieben

Zwei kleine Korrekturen an dem Script

Zwei kleine Korrekturen an dem Script

Tutorial zu Erstellen von Würfeln in einer Webseite mit Flexbox

Zwei kleine Korrekturen an dem Script

Paypal-Buttons vs API