Beiträge von djheke

djheke · 15. Juni 2017

Guck mal, ob Dir das reicht.

djheke · 14. Juni 2017

Du solltest Dir erstmal ein vernüntiges HTML Gerüst bauen und mit CSS Gestalten. Wenn alles funktioniert, kannst Du JQuery nutzen.

djheke · 11. Juni 2017

Und wo ist dein <input type="checkbox">? Wobei eine Navi anders erstellt wird.

djheke · 1. Juni 2017

Wo willst du noch fragen?

Crossposting

djheke · 1. Juni 2017

Du solltest auf absolute Positionierungen verzichten, die bereiten nur Schwierigkeiten.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Erste Seite</title>
<link rel="stylesheet" href="style.css">
<style>
#kopfzeile {
 display:flex;
 background:#09c;
} 

#kopfzeile a {
 margin:auto;
 padding:10px;
 color:#fff;
 text-decoration:none;
 font-weight:bold;
}

#kopfzeile a:first-child { margin-left:0;}
#kopfzeile a:last-child { margin-right:0;}

</style>

</head>
<body>

<nav id="kopfzeile">
<a href="#">Startseite </a>
<a href="#">Lebenslauf</a>
<a href="#">Gästebuch</a>
<a href="#">Impressum</a>
</nav>

</body>
</html>

Alles anzeigen

djheke · 30. März 2017

Wer kommerzielle Webseiten betreibt, sollte sich eine Web-Agentur suchen. Ist einfach besser.

djheke · 30. März 2017

Na, hier werden nur die Fokus und Active Pseudoelemente verwendet. Voraussetzung sind aber keine ausgeblendeten Elemente. Denn 2 Elemente können nicht gleichzeitig den Fokus erhalten. Hier der wichtigste Teil.

Code

h3:focus ~ nav ul  , nav:active ul {
 left:auto;
 top:auto;
}




nav ul ul {
 padding-left:10px;
 position:relative;
}

Alles anzeigen

Togglefunktion zum öffnen und schließen der gesamten Navigation.

Code

h3:focus:before   {
 content:"Navigation -";
 display: block;
 position:absolute;
 top:0;
 left:0;
 right:0;
 background:#a33;
 color:#fff;
 cursor:pointer;
 padding: 10px;  
}

Alles anzeigen

djheke · 30. März 2017

Das äußerste der Gefühle, was geht, ist das hier: https://jsfiddle.net/e5ctebgs/

djheke · 29. März 2017

Jetzt habe ich auch Lust bekommen etwas zu probieren. Melde mich dann wieder.

djheke · 28. März 2017

Ohne JS wird's wohl nichts werden. Übrigens wird die Navi in der History immer im geöffneten Zustand gespeichert.Kannst Du ja mal ausprobieren.

djheke · 19. März 2017

Wenn die Erlaubnis vorhanden ist, kannst Du die relavanten Reviews mit PHP auslesen und in Deiner Seite ausgeben. Ist eigentlich sehr einfach.

djheke · 13. März 2017

Hier mal mit Flexbox

HTML

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<style>
 
* {
 margin:0;
 padding:0;
}




.container {
  display:flex;
  flex-direction: column;
  margin: 5px;
  width:420px;
  min-height:650px;
  border: 1px solid blue;
  text-align:center;
}




header,footer {
 padding:10px;
 flex:none;
}




header h2 {
 text-align:center;
 color:blue;
}
 
main {
 flex:auto;
 background:#eee;
}




footer div {
 display:flex;
}




footer button , footer input {
  margin:1px;
  flex:1;
  background: #00AFFF;
  color: white;
  text-align: center;
  cursor: pointer;
  height:40px;
  border: 1px solid #000;
}
 
footer button:hover {
    background-color: red;
}




footer input {
 height:auto;
 padding: 5px;
 margin:20px;
}




footer p {
  margin-top:10px;
  padding:5px;
  background-color: #ddd;
  border:1px solid #0090E0;
}
</style>
</head>
<body>
 
<div class="container">
<header> 
<h2>Arbeitsspeicher Übung 3</h2>
</header>
 
<main>
hier kann etwas rein
</main>




<footer>
<div>
<button  id="btn0" onclick="giveNumber(0)">0</button>
<button  id="btn1" onclick="giveNumber(1)">1</button>
<button  id="btn2" onclick="giveNumber(2)">2</button>
<button  id="btn3" onclick="giveNumber(3)">3</button>
<button  id="btn4" onclick="giveNumber(4)">4</button>
<button  id="btn5" onclick="giveNumber(5)">5</button>
<button  id="btn6" onclick="giveNumber(6)">6</button>
<button  id="btn7" onclick="giveNumber(7)">7</button>
<button  id="btn8" onclick="giveNumber(8)">8</button>
<button  id="btn9" onclick="giveNumber(9)">9</button>
</div>




<div>
<input type="button" value="Start mit Level 1">
<input type="button" value="Nächstes Level">
</div>




<p id="LevelLabel">Level</p>
<p id="TimeLabel">Zeit</p>
</footer>




</body>
</html>

Alles anzeigen

djheke · 11. März 2017

Du weißt aber schon, dass das PHP ist. Und probierst Du die angebotenen Beispiel auch aus? Ich verstehe Deinen Einwand nicht.

djheke · 11. März 2017

Hier mal eine geänderte CSS Version, die ausreichen sollte

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;
 box-sizing:border-box;
}
div {
 margin:10px;
 padding:1em;
 border:1px solid #000;
 border-radius:5px;
 box-shadow:0 0 5px #000;
 width:30%;
 float:left;
 position:relative;
}




div p {
 overflow:hidden;
 float:left;
 max-height:4.5em; /*Vorgabehöhe:  1.5em(line-height) x 3 Zeilen = 4.5em */
 min-height:4.5em; 
 font-size:1em;
 line-height:1.5em;
}




div:hover p , div:focus p {
 max-height:none;
 height:auto;
}




div:after {
 content:"";
 position:absolute;
 width:5em;
 height:1.5em;
 background-image: linear-gradient(to right, transparent 0%, #fff 70%);
 font-weight:bold;
 right:5px;
 bottom:1em;
}




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




<body>
<div tabindex="0">
<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>




<div tabindex="0">
<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.
</p>
</div>
<div tabindex="0">
<p>
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean.
</p>
</div>
</body></html>

Alles anzeigen

Nun wird immer nach 3 Zeilen ausgeblendet.

djheke · 10. März 2017

Na dann nimm Javascript.

djheke · 10. März 2017

http://www.forum-hilfe.de/thre…BCrzen-ab-der-3-Zeile-mit

djheke · 10. März 2017

Da kann Dir keiner eine passende Antwort geben. Wen Du gewerblicher Verkäufer bist , könnte es sich lohnen.

djheke · 8. März 2017

https://www.html.de/threads/po…buttons-und-texten.57121/

djheke · 19. Februar 2017

Alsi im FF und Chrome ist alle i.O. Und Windows habe ich nicht!

djheke · 10. Februar 2017

Ich würde PHP nehmen. Es geht aber auch mit CSS. Mit JS kenn ich mich nicht aus.
Hier mal ein Beispiel mit CSS(Zum abgewöhnen)
http://www.gipspferd.de/CSS-An…ntextbezogen-anzeigen#wie

Beiträge von djheke

"Accordeon"-Box mit statischem Inhalt

Wird nicht richtig angezeigt je nach Browser

"Accordeon"-Box mit statischem Inhalt

Brauche dringend eure Hilfe

Positionierung von Element

hover bei Touch-Devices

CSS-Menü ohne javascrip

CSS-Menü ohne javascrip

CSS-Menü ohne javascrip

CSS-Menü ohne javascrip

Inhalt einer externen Webseite in eigener Homepage darstellen?

Button gruppe positionieren

Texte kürzen ab der 3. Zeile mit "..."

Texte kürzen ab der 3. Zeile mit "..."

Texte kürzen ab der 3. Zeile mit "..."

Texte kürzen ab der 3. Zeile mit "..."

HTML Template für eBay

Positionierung eines Buttons und eines Textes.

[GELÖST] div-Höhe dynamisch vergrößern

Navigaitonspunkt Hintergund verändern