Beiträge von djheke

djheke · 25. Januar 2018

Naja, ich weiß es auch nicht. Aber ich empfehle Dir, die Finger von Paypal zu lassen. Da heben sich schon viele mit angeschies....

djheke · 22. Januar 2018

Oder mit float- so als Alternative.

https://jsfiddle.net/1gq0tuqu/9/

djheke · 18. Januar 2018

Zitat von basti1012

also mit prozent bekomme ich es überhaupt nicht hin

HTML

<!DOCTYPE html>
<html lang="de">
<head>


<title>Galerie </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">


* {
margin:0;
padding:0;
list-style:none;
border:none;
outline:none;
box-sizing:border-box;
}


body {
padding:10px;
float:left;
background:#fff;
}


header {
padding:10px;
margin:10px 0;
background:#eee;
}




#gal {
float:left;
height:auto;
overflow:hidden;
border:3px double #aaa;
}
#gal #ausgabe {
width:500%;
float:left;
position:relative;left:0;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}




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




#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:focus ~ #ausgabe {
left:-100%;
}


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


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


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






</style>


</head>
<body>


<header><h1>Webseite</h1></header>
<div id="content">


<div id="gal">
<a tabindex="0" href="#a2"><img src="zebra.jpg" alt="bild2"> </a>
<a tabindex="0" href="#a3"><img src="ente.jpg" alt="bild3"> </a>
<a tabindex="0" href="#a4"><img src="eisbaer.jpg" alt="bild4"> </a>
<a tabindex="0" href="#a5"><img src="brunnen1.jpg" alt="bild5"> </a>


<div id="ausgabe">
<img src="loewe.jpg" alt="bild1">
<img src="zebra.jpg" alt="bild2">
<img src="ente.jpg" alt="bild3">
<img src="eisbaer.jpg" alt="bild4">
<img src="brunnen1.jpg" alt="bild5">
</div>
</div>
</div>


</body>
</html>

Alles anzeigen

djheke · 17. Januar 2018

Du brauchst doch nur die Pixelangaben durch Prozentangaben ersetzen. Dann funktioniert's.

djheke · 14. Januar 2018

Auch wenn es für mobile Geräte nicht so geeignet ist, kannst Du ja einfach noch ein :hover notieren. Wenn ich es richtig verstanden habe.

djheke · 5. Januar 2018

Da fehlen ja auch die <input< Elemente und die dazugehöriegen CSS Angaben. Du solltest dich von diesewer Vorlage verabschieden.

Hier mal eine sehr einfache Vorlage

HTML

<!DOCTYPE HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="meinestyles.css">
<style type="text/css">


#mywrapper { background:#222;}
#mywrapper main * { margin:0; padding:0;}
#mywrapper main , header , footer { width:90%; margin:0px  auto; padding:10px; font-family: 'Poiret One'; line-height:20px;  letter-spacing:1px; box-sizing:border-box;}
#mywrapper main { background: #fff;}
#mywrapper header { background:#0c9;padding:1em ; color:#fff; font-weight:bold;}
#mywrapper section { padding:10px 0; text-align:center;}
#mywrapper article { text-align:center; background:#eee; padding:20px; margin-right:10px;}
#mywrapper article:last-child { margin-right:0;}
#mywrapper article a { color:#FA335F; font-weight:bold;}
#mywrapper .descripe h3 { padding:10px; font-weight:bold; font-size:1.5em;}
#mywrapper h3 { padding:10px; font-weight:bold; font-size:5em;}
#mywrapper p { padding:10px;}
#mywrapper h3 b { display:none;}
#mywrapper footer { padding:10px; background:transparent; text-align:right; color:#aaa;}
#mywrapper footer a { color:#aaa; text-decoration:none; font-family:sans-serif;}
#mywrapper table { margin-top:30px;width:100%; border-collapse:collapse; font-family:arial; border:1px solid #999; background:#fff;}
#mywrapper th,#mywrapper td { text-align:left;padding:5px; border:1px solid #999;}
#mywrapper th { width:30%;}
#mywrapper caption{background:#0c9; color:#fff; padding:5px; text-align:left;}
#mywrapper .gal { margin:50px 0; border-top:2px solid #eee; border-bottom:2px solid #eee;}
#mywrapper .gal ul { list-style:none; display:flex;}
#mywrapper .gal li { margin:10px; background:#eee; display: flex; align-items: center;}
#mywrapper .gal img { width:100%;display:block;}
#mywrapper .gal a { display:block;  padding:22px; outline:none;}
#mywrapper .flex { display:flex;}
#mywrapper .descripe { padding:1em ; text-align:left;}
#mywrapper .info {  background:#FA335F; font-weight:bold; color:#fff; display: flex; align-items: center; font-family:sans serif;}
#mywrapper .col-66 { width:66%;}
#mywrapper .col-33 { width:33%;}
#mywrapper .fa { color:#0c9;}
#mywrapper .weiss { color:#fff;}
#mywrapper .none { display:none;}




@media (max-width: 800px) {
#mywrapper main , #mywrapper header,#mywrapper footer,section{ width:100%;}
#mywrapper .flex , #mywrapper .info , #mywrapper .col-66 , #mywrapper .col-33 , .gal ul , .gal li { width:100%; flex-direction: column; margin:5px 0;border:none;box-sizing:border-box;}
}
</style>
<title></title>


</head>
<body>
<div id="mywrapper">
<header><h1>Willkommen auf meiner Technik Auktion</h1></header>
<main>
<section class="flex">
<article class="descripe col-66 ">


<h3>ARTIKELBESCHREIBUNG</h3>
<p>
Hallo ich biete hier ein <b>HP Pavilion</b>. Das Notebook geht nicht, dass <b>Display ist gebrochen.</b> Da wir keine Ersatzteile für das Gerät haben, verkaufen wir es als defekt! DVD/RW Laufwerk, RAM sind dabei, Netzteil und HDD fehlt. Gewährleistung, Reparatur und Umtausch defekten Geräten leider nicht möglich.
</p>






</article>


<article class="col-33 info">


<div>
<h3 class="fa fa-5x fa-info-circle weiss"><b>Info</b></h3>
<p>Gerät ist defekt und dient der Ersatzteilgewinnung</p>
</div>


</article>
</section>


<table>
<caption>Techniche Daten</caption>
<tr><th>Hersteller</th><td>HP</td></tr>
<tr><th>Modell</th><td>Pavilion</td></tr>
<tr><th>Prozessor</th><td>Celeron 1GHz</td></tr>
<tr><th>Arbeitsspeicher</th><td>4 GB DDR3</td></tr>
<tr><th>Festplatte</th><td>nicht vorhanden</td></tr>
<tr><th>Netzteil</th><td>nicht vorhanden</td></tr>
</table>


<section class="gal">
<ul>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
</ul>


<ul>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
</ul>
</section>


<section class="flex">
<article class="col-33">
<h3 class="fa fa-5x fa-info-circle"><b>Info</b></h3>
<p>
Wegen der Gesetzesbestimmungen erfolgt die Auktion unter Ausschluss jeglicher Gewährleistung, Garantie und Rücknahme. Da es sich um Privatverkauf handelt. Ich hoffe potenzielle Käufer sind damit einverstanden.
</p>
</article>


<article class="col-33">
<h3 class="fa fa-5x fa-truck"><b>Versand</b></h3>
<p>Schnelle Bearbeitung Ihrer Bestellung. Täglicher Versand außer Sonntags und Feiertags Top Kundenservice.</p>
</article>


<article class="col-33">
<h3 class="fa fa-5x fa-euro "><b>Zahlung</b></h3>
<p style="text-align:left;margin-right:10px;">Ich akzeptiere folgende Zahlungsarten:</p>
<p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-bank"></i>Banküberweisung.</p>
<p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-paypal"></i>Paypal.</p>
</article>
</section>


<section class="flex">
<article class="col-33">
<h3 class="fa fa-5x fa-question-circle"><b>Frage</b></h3>
<p>Wenn Sie Fragen zum Artikel haben, können Sie mir gerne eine <a style="display:block;" href="#pfadzurnachricht">Nachricht</a> zukommen lassen.</p>
</article>


<article class="col-33">
<h3 class="fa fa-5x fa-eye"><b>Meine Artikel</b></h3>
<p>Hier gibt es noch <a style="display:block;" href="#pfadzuweiterenartikel">weitere Artikel</a> von mir.</p>
</article>


<article class="col-33">
<h3 class="fa fa-5x fa-star"><b>Meine Bewertungen</b></h3>
<p>Hie finden Sie meine aktuellen <a style="display:block;" href="#pfadzudeinenbewertungen">Bewertungen</a> von anderen Käufern.</p>
</article>


</section>


</main>
<footer>
Weitere Vorlagen auf <a href="http://www.gipspferd.de">gipspferd.de</a>
</footer>
</div>
</body>
</html>

Alles anzeigen

Brauchst Dir aber nur den relevanten Teil kopieren.

djheke · 22. November 2017

Versuch mal ein max-width:1300px; oder größer zu notieren.

Code

img {

display: block;

width: 100%;
max-width: 1300px; /* Oder eine andere Größe */


height: auto;

border: 1px dotted orange;




}

Alles anzeigen

djheke · 18. November 2017

keine Ahnung welche Farbe du filtern möchtest, aber Alternativfarben lassen sich doch mit bachround notieren.

background:(url) no-repeat 0 0 #000;

Oder habe ich was falsch verstanden.

djheke · 16. November 2017

Grafiken, die NICHT zum Inhalt gehören, werden mit background-image eingebunden. Das IMG-Element ist hier sachlich falsch und auch nicht einfacher zu handhaben.

Aber ist wohl egal.

djheke · 15. November 2017

Crossposting

djheke · 7. November 2017

Hier mal ein einfaches Beispiel. Allerdings basiert es noch auf Floats. Flexbox wär natürlich viel besser.

Den Quelltext kannst du dir ja mal in Ruhe ansehen.

djheke · 7. November 2017

Wenn es nur Schmuckgrafiken sind, würde ich es mit Nachfahrselektoren umsetzen.

djheke · 17. Oktober 2017

Vielleicht reicht ja schon :focus und :active.

djheke · 5. September 2017

Besser wäre es ohne position:absolute. Aber wenn's funktioniert, ist es ok.

djheke · 21. August 2017

Ich glaube, er meunt sowas hier. https://css-tricks.com/triangle-breadcrumbs/

djheke · 17. August 2017

Ja, bestimmt liegt es an den Pfaden. Bei mir geht's.

djheke · 16. August 2017

Zur Not, würde es auch so gehen, wenn Du Änderungen am HTML vornehmen kannst/möchtest, aber keine am CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>table</title>

<style>

table {
 border-collapse:collapse;
 width:100%;
 min-width:300px;
 border-bottom:1px solid;
}

th , td {
 border:1px solid #000;
 border-bottom:none;
 padding:10px;
 text-align:right;
}

thead {
 background:#eee;
}

@media screen and (max-width: 420px) { 

td:before {
 content:attr(data-th);
 font-weight:bold;
 background:rgba(240,240,240,.4);
 text-align:left;
 float:left;
 width:200px;
 padding:10px;
 margin:-10px 0 0 -10px;
 border-right:1px solid #000;
}


thead {
 display:none;
}

tbody td {
 text-align:right;
 display:block;
 padding:10px;
 text-align:right;
} 


tr:nth-child(odd) {
 background:#ddd;
}
}


</style>
</head>


<body>

    <table>
        <thead>
        <tr>
            <th>Größe in cm</th>
            <th>Art. Nr. stabil an</th>
            <th>Preis € inkl. MwSt</th>
            <th>Art. Nr. verstellbar</th>
            <th>Preis € inkl. MwSt</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td data-th="Größe in cm">80/190</td>
            <td data-th="Art. Nr. stabil">36052</td>
            <td data-th="Preis € inkl. MwSt">208,-</td>
            <td data-th="Art. Nr. verstellbar">36073</td>
            <td data-th="Preis € inkl. MwSt">358,-</td>
        </tr>
        <tr>
            <td data-th="Größe in cm">80/190</td>
            <td data-th="Art. Nr. stabil">36052</td>
            <td data-th="Preis € inkl. MwSt">208,-</td>
            <td data-th="Art. Nr. verstellbar">36073</td>
            <td data-th="Preis € inkl. MwSt">358,-</td>
        </tr>
        <tr>
        <td data-th="Größe in cm">80/190</td>
            <td data-th="Art. Nr. stabil">36052</td>
            <td data-th="Preis € inkl. MwSt">208,-</td>
            <td data-th="Art. Nr. verstellbar">36073</td>
            <td data-th="Preis € inkl. MwSt">358,-</td>
        </tr>
        <tr>
            <td data-th="Größe in cm">80/190</td>
            <td data-th="Art. Nr. stabil">36052</td>
            <td data-th="Preis € inkl. MwSt">208,-</td>
            <td data-th="Art. Nr. verstellbar">36073</td>
            <td data-th="Preis € inkl. MwSt">358,-</td>
        </tr>
        <tr>
             <td data-th="Größe in cm">80/190</td>
            <td data-th="Art. Nr. stabil">36052</td>
            <td data-th="Preis € inkl. MwSt">208,-</td>
            <td data-th="Art. Nr. verstellbar">36073</td>
            <td data-th="Preis € inkl. MwSt">358,-</td>
        </tr>
        </tbody>
    </table>
    

</body>
</html>

Alles anzeigen

Wobei es mit PHP vielleicht einfacher wäre.

djheke · 15. August 2017

Hier mal ein CSS Beispiel. Ist aber wohl nicht gerne gesehen.

[code]

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>table</title>

<style>

table { border-collapse:collapse; width:100%; min-width:300px; border-bottom:1px solid;
}

th , td { border:1px solid #000; border-bottom:none; padding:10px; text-align:right;
}

thead { background:#eee;
}

@media screen and (max-width: 420px) { 
td:before { content:""; font-weight:bold; background:rgba(240,240,240,.4); text-align:left; float:left; width:200px; padding:10px; margin:-10px 0 0 -10px; border-right:1px solid #000;
}
 td:nth-of-type(1):before { content: "Größe in cm"; } td:nth-of-type(2):before { content: "Art. Nr. stabil"; } td:nth-of-type(3):before { content: "Preis € inkl. MwSt"; } td:nth-of-type(4):before { content: "Art. Nr. verstellbar"; } td:nth-of-type(5):before { content: "Preis € inkl. MwSt?"; }

thead { display:none;
}

tbody td { text-align:right; display:block; padding:10px; text-align:right;
} 

tr:nth-child(odd) { background:#ddd;
}
}

/*
@media screen and (max-width: 420px) { 
td:before { content:""; font-weight:bold; background:none; text-align:center; display:block; float:none; width:auto; margin-bottom:10px; border-right:none; color:#09c;
}

 td:nth-of-type(1):before { content: "Größe in cm"; } td:nth-of-type(2):before { content: "Art. Nr. stabil"; } td:nth-of-type(3):before { content: "Preis € inkl. MwSt"; } td:nth-of-type(4):before { content: "Art. Nr. verstellbar"; } td:nth-of-type(5):before { content: "Preis € inkl. MwSt?"; }

thead { display:none;
}

tbody td { text-align:right; display:block; padding-right:0; text-align:center; } 
tr:nth-child(odd) { background:#eee; }
}
*/
</style>
</head>


<body>

    <table>
        <thead>
        <tr>
            <th>Größe in cm</th>
            <th>Art. Nr. stabil</th>
            <th>Preis € inkl. MwSt</th>
            <th>Art. Nr. verstellbar</th>
            <th>Preis € inkl. MwSt</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>80/190</td>
            <td>36052</td>
            <td>208,-</td>
            <td>36073</td>
            <td>358,-</td>
        </tr>
        <tr>
          <td>80/200</td>
          <td>36053</td>
          <td>208,-</td>
          <td>36074</td>
          <td>358,-</td>
        </tr>
        <tr>
          <td>80/210</td>
          <td>36054</td>
          <td>228,-</td>
          <td>36075</td>
          <td>395,-</td>
        </tr>
        <tr>
          <td>80/220</td>
          <td>36055</td>
          <td>228,-</td>
          <td>36076</td>
          <td>395,-</td>
        </tr>
        <tr>
          <td>90/190</td>
          <td>36060</td>
          <td>208,-</td>
          <td>36080</td>
          <td>358,-</td>
        </tr>
        </tbody>
    </table>
    

</body>
</html>

[/code]

Alles anzeigen

djheke · 3. Juli 2017

Dann solltest Du dir die Forenregeln durchlesen. Stichwort Crossposting.

djheke · 3. Juli 2017

In welche Foren willst Du diese Frage noch stellen?

http://www.forum-hilfe.de/thre…dung-von-Sternchen-in-CSS

https://www.html.de/threads/ve…n-sternchen-in-css.57609/

Beiträge von djheke

Paypal-Buttons vs API

Leerraum in table für eine Uhr Anzeige

Galerie an andere Position verschieben

Galerie an andere Position verschieben

CSS :focus bei Auswahl geht verloren

Überschrift Button funktioniert nicht

Wachstum des <img> unterbinden

Hintergrundbild mit alternative Farbe

Design verschiebt sich bei mehr Text

Linkfehler in Responsive Webdesign

Design verschiebt sich bei mehr Text

Design verschiebt sich bei mehr Text

Kleines Bild per Klick/Mouseover groß und an einer bestimmten Position anzeigen

Wie kann ich einen Text über CSS verschwinden lassen, wenn ich mit der Maus drüber fahre.

CSS lösung für mit Pfeilen gespaltenen Fortschritt / Status einer Bestellung

CSS Einbindung in HTML funktioniert nicht!

Responsive Tabelle - Problem mit Hintergrund beim horizontalem Scrollen

Responsive Tabelle - Problem mit Hintergrund beim horizontalem Scrollen

Verwendung vom Sternchen in CSS

Verwendung vom Sternchen in CSS