Beiträge von djheke

djheke

CROSSPOSTING
https://www.html.de/threads/html-z…ein-java.57770/

djheke

Zeig doch mal Deien Code HTML/CSS. Mit Bilder können wir nichts anfangen.

djheke

Mit Flexbox. Oder die alte Float-Methode anwenden. Google hilft weiter.

djheke

Ist hier schn beantwortet worden.
https://www.html.de/threads/verwen…n-in-css.57609/

djheke

Da spricht der Kenner. Aber, danke für den Hinweis.

djheke

Versuch mal so.

vorlage.txt

HTML

<!DOCTYPE HTML>


<html>
<head>
<title>[ORT]</title>
<meta charset="UTF-8">
</head>


<body>
<h1>[ORT]</h1>
</body>
</html>

Alles anzeigen

generator.php

PHP

<?php


$vorlage = file_get_contents('vorlage.txt');


$datei="liste.csv";
$lesen= file_get_contents($datei);
$ort=explode("\n",$lesen);


foreach($ort as $liste){
 $str=str_replace("[ORT]",$liste,$vorlage);
file_put_contents($liste.".html",$str);
}


?>

Alles anzeigen

djheke

Mit einem Inputelement und :checked geht es.
Beispiel:

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

djheke

Zitat von Arne Drews

Der Link ist nicht geheim, ich ahbe den nur entfernt, weil ich anfänglich von Eigenwerbung ausgegangen bin.
html a mano: Poste den Link zu Deiner Seite bitte nochmal.

UPPS

djheke

Also, wenn Dein Link so geheimnisvoll ist, können wir nicht Helfen. Möglicherweise ist der Pfad falsch. Und das Alt-Attreibut hat in einem Link nichts verloren.

djheke

Solltest Du schon genug Geld mit 'Zanox-Affiliate' verdient haben, dann lass Dein Projekt von einer Web-Agentut neu Erstellen/Gestalten. Alles andere wäre unnötige Arbeit.

djheke

Ein Link zu Deiner Seite wäre viel interessanter, als hier nur zu Spekulieren.

djheke

Das liegt an Deinen absolut Positionierten Elemente. Die sollten nach Möglichkeit nicht verwendet werden.
Google mal nach Flexbox.

djheke

Hier noch etwas vereinfacht

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Button</title>
<style>
* {
 padding: 0; 
 margin: 0; 
}


body{
    background:url(Nerd_Wars.gif) no-repeat right top #000;
    background-size: 100%;
}


.inline-list {
    width: 550px;
    margin:37% auto 0 auto;
}


.inline-list li {
    display: inline-block;
    width: 105px;
}


.inline-list li:hover { 
    transform:scale(0.97)
 }


</style>
</head>


<body>


<ul class="inline-list">            
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>            
</ul>

</body>
</html>

Alles anzeigen

djheke

So vielleicht?!

Code

.right { 
 padding:0;
 margin:0;
 text-align:right;
}

Code

<p class="right"><a href="http://google.com">Google</a></p>

djheke

Versuch mal das hier.

Code

.inline-list {
 margin:0;
 padding:0;
 list-style:none;
 display:flex;
 box-sizing:border-box;
}


.inline-list li {
 flex-basis:20%;
 padding:10px;
 margin:2px;
 border:1px solid #000;
}


.inline-list img {
 width:100%;
 max-height:100px;
}




.inline-list li:hover {
 transform:scale(0.9)
}

Alles anzeigen

djheke

Meinst Du soo?!

HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Test</title>
<style>


#container {
 display:flex;
}


fieldset:nth-of-type(1),
fieldset:nth-of-type(2) {
 flex-basis:50%;
}


textarea { width: 100%;}


div {
 display:flex;
}


div select:nth-of-type(1) {
 flex-basis:80%;
}
div select:nth-of-type(2) {
 flex-basis:20%;
}


@media screen and (max-width: 680px) {  
 #container { flex-direction:column;}
}
</style>
</head>


<body>
<div id="container">


    <fieldset><legend>Eingabe</legend>
        <textarea id="input" rows="6">Das ist ein Text, der sehr lang sein kann.</textarea><br>
    </fieldset>


    <fieldset><legend>Einstellungen</legend>
         <div>
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
         </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
        <div>
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
         </div>
         <div>
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
         </div>
    </fieldset>


</div><!--/container-->
</body>
</html>

Alles anzeigen

djheke

Es gibt doch genug Galerie Scripte im Netz.
https://www.drweb.de/magazin/script…prasentationen/

djheke

Mit Nachfahr Slektoren

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nav</title>
<style>
.kat  .kat_nav,
.kat1 .kat_nav1,
.kat2 .kat_nav2 {
 background:#ddd;
}
</style>
</head>
<body>
<nav class="kat kat1">
<ul>
  <li><a href="#">home</a></li>
  <li><a class="kat_nav" href="kat.html">Kategorie</a>
   <ul>
    <li><a class="kat_nav1" href="kat1.html">Kategorie 1.1</a></li>
    <li><a class="kat_nav2" href="kat2.html">Kategorie 1.2</a></li>
   </ul>
</ul>
</nav>
</nav>
</body>
</html>

Alles anzeigen

Hier bleibt Kategorie und Kategorie 1.1 hervorgehoben.

Code

<nav class="kat kat2">

Für Kategorie 1.2

Code

<nav class="kat">

Für Kategorie

djheke

Hier mal ein Float-Layout.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Float-Layout</title>
<style>


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


body {
 padding-top:180px;
}


main:before {
 content:"";
 display:block;
 background:url(bg.jpg) no-repeat 0 0 ;
 background-size:cover;
 width:100%;
 height:200px;
 overflow:hidden;
}


header {
 position:fixed;
 left: 0;
 top: 0;
 right:0;
 min-height: 180px;
 background-color: #fff;
}
 
 
#logo {
 width:144px;
 height:159px;
 padding:10px;
 float: left;
}
 
nav {
 text-align:center;
 padding-top:75px;
}
 
nav a {
 font-size: 1.5rem;
 padding:0 20px;
 color:#a33;
 text-shadow: 1px 1px 0px #E37588;
}
 
nav a:hover {
 text-shadow:1px  1px 0px #000;
 color: #7D7D7D;
}


 
main {
 text-align: center;
}
 
section {
 float:left;
 width:50%;
 padding:20px;
}
 
h1 {
 font-size: 60px;
 color: #5A5A5A;
 text-shadow: 1px  1px 0px #fff;
}
 
h3, p {
 padding:10px;
}
footer {
 clear:both;
 background-color: #f3f3f3;
 padding: 20px;
}
 
@media all and (max-width: 800px) {
  section { float:none; width:100%; }
  nav { padding-top:0;}
  nav a { display:block;}

}


</style>
</head>
<body>
<header>
<img id="logo" src="rblogo.png" alt="logo">
<nav>
<a href="#">Startseite</a>
<a href="#">Leistungen</a>
<a href="#">Entw&uuml;rfe</a>
<a href="#">Referenzen</a>
<a href="#">Kontakt</a>
<a href="#">Impressum</a>
</nav>
</header>
 
<main> 
<h1>Sie wollen eine neue Homepage?</h1>
<p>Wir sind für Sie da und setzen Ihr W&uuml;nsche gerne um!</p>
<section>
  <h3>Webdesign aus der Oberpfalz</h3>
  <p>Wir bieten Ihnen gut strukturierte, &uuml;bersichtliche und suchmaschinenfreundliche<br /> Webseiten an.
  Die Designs erstelle und gestalte ich individuell für jeden<br />einzelnen Auftrag.
  Somit ist die jede Seite  auf Ihren Auftraggeber zugeschnitten. <br />
  </p>
  <h3>Entw&uuml;rfe</h3>
  <p>
      Meine erstellten Designs sind keine Fertigvorlagen, sondern f&uuml;r jedes <br />
      meiner Projekte individuell erstellt worden. Sollten Sie schon ein Logo <br />
      haben, wird  dies natürlich bei der Farbauswahl des Designs  <br />
      mit ber&uuml;cksichtigt.
  </p>
</section>
 
<section>
     <h3>Design und Programmierung</h3>
     <p>
     Da ich gut mit einem Programmierer zusammenarbeite,<br  />
     sparen Sie sich den Weg daf&uuml;r und erhalten so <br />
     eine komplette designte und programmierte Website, <br />
     so gut wie aus einer Hand.
     </p>
</section>
</main>
 
<footer>
    <p>&copy; 2017 Rebecca Bauer</p>
</footer>
</body>
</html>

Alles anzeigen

- - - Aktualisiert - - -

djheke

Eintrag entfernt.

Beiträge von djheke

zufällige Auswahl (PHP) in Bilderanzeige (CSS) integrieren - KEIN Java - HTML basiere

Erste Seite korrekt Darstellen -> warum funktioniert das nicht?

bitte um beispiel

Verwendung von Sternchen in CSS

Massen HTML-Daten verarbeiten - Stapelverarbeitung / Batch / Platzhalter / Datenzusam

Massen HTML-Daten verarbeiten - Stapelverarbeitung / Batch / Platzhalter / Datenzusam

Box durch Klick erst anzeigen lassen.

Hyperlink

Hyperlink

Bestehende Webseite für mobile Geräte optimieren.

Bestehende Webseite für mobile Geräte optimieren.

Seite verschiebt sich

Hover Effekt bei Boxen nicht unabhängig

Brauche dringend eure Hilfe

Hover Effekt bei Boxen nicht unabhängig

Linke DIV-Breite abhängig von rechte DIV-Breite gestalten

Bildergalerie erstellen

Brauche Hilfe bei Menü-Formatierung

Unerkärlicher weißer rand

Aktionen auf Button