Beiträge von djheke

djheke · 10. Februar 2017

Ich würde immer die Toplevels verlinken.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hover</title>
<style type="text/css">
 nav li:hover > a { background:#aaa;}
</style>

</head>
<body>
<nav>
   <ul>
      <li><a href="#">Level 1 1</a>
        <ul>
            <li><a href="#">Level 2 1</a></li>
            <li><a href="#">Level 2 2</a></li>
            <li><a href="#">Level 2 3</a></li>
        </ul>
      </li>
      <li><a href="#">Level 1 2</a>
        <ul>
            <li><a href="#">Level 2 1</a></li>
            <li><a href="#">Level 2 2</a></li>
            <li><a href="#">Level 2 3</a></li>
        </ul>
      </li>
   </ul>
</nav>




</body>
</html>

Alles anzeigen

djheke · 10. Februar 2017

Ja, denn PHP hat ja nichts mit HTML/CSS gemeinsam.

djheke · 9. Februar 2017

Dann auch hier geantwortet.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal zentrierte Navigation bei unbekanner Größe</title>
<style type="text/css">
* {
 list-style:none;
 text-decoration:none;
 margin:0;
 padding:0;
}




nav {
 text-align:center;
 box-shadow: 0 0 10px #000;
 background: #7C2D48;
 min-width:640px;
}




nav li {
 display:inline-block;
 color:#fff;
 margin-left:-4px; /* Die nicht benötigten Außenabstände(ca. 4px) von -display:inline-block- korrigieren */
}




nav a {
 display:block;
 padding:10px;
 color:#fff;
 background: #7C2D48;
 border-right:1px solid #ffa323;
}




nav li:last-child a {
 border:none;
}
nav a:hover {
 background:#7C6D48;




}
</style>

</head>
<body>




<nav> 
   <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="beratungsumfang.html">Beratungsumfang</a></li>
      <li><a href="ablauf.html">Prozesse</a></li>
      <li><a href="impressum.html">Impressum</a></li>
   </ul>
 </nav>




</body>
</html>

Alles anzeigen

djheke · 9. Februar 2017

Versuch es mal so

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal zentrierte Navigation bei unbekanner Größe</title>
<style type="text/css">
* {
 list-style:none;
 text-decoration:none;
 margin:0;
 padding:0;
}




nav {
 text-align:center;
 box-shadow: 0 0 10px #000;
 background: #7C2D48;
}




nav ul {
 display:inline-block;
 background:#ffa323;
}
nav li {
 display:inline-block;
 color:#fff;
 margin-left:-3px; /* Die nicht benötigten Außenabstände(ca. 4px uner Windows) von -display:inline-block- korrigieren */
}




nav a {
 display:block;
 padding:10px;
 color:#fff;
 background: #7C2D48;
}




nav a:hover {
 background:#6D273F
}
</style>

</head>
<body>




<nav> 
   <ul id="navi">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Anbieterkennzeichnung</a></li>
    <li><a href="#">Block</a></li>
   </ul>
</nav>




</body>
</html>

Alles anzeigen

djheke · 9. Februar 2017

So vielleicht?

HTML

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




figure {
 width:300px;
 position:relative;
 overflow:hidden;
 text-align:center;
 background:#09c;
}




figure h3 {
 font-size:1rem;
 padding:10px;
 background:rgba(255,255,255,.6);
}




figure p {
 padding:5px;
}




figure a {
 position:absolute;
 top:calc( 100% - 2.4rem );
 left:0;
 right:0;
 bottom:0;
 background:rgba(0,0,0,.5);
 color:#fff;
 text-decoration:none;
 transition:top 1s;
}
figure:hover a , a:focus {
 top:0;
}
</style> 
</head>
<body>




<figure>
 <img src="http://lorempixel.com/300/200" alt="">
  <figcaption>
   <a href="#hallo">
    <h3>Geometer 6</h3>
     <p>Grenzänderung<br />Parzellierung<br />Liegenschaftskataster<br />Grenzpunktrekonstruktion</p>
   </a>
  </figcaption>
</figure>




</body>
</html>

Alles anzeigen

djheke · 27. Januar 2017

Mit dieser Methode gehen aber auch Inhalte verloren, wenn das Browserfenster verkleinert wird. Dann lieber mit Flexbox.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zentrieren mit Flexbox</title>
<style>
body, html {
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;
}




div {
 padding:10px;
 background:#eee;
}
</style> 
</head>
<body>
<div>Vertically and horizontally centered box</div>
</body>
</html>

Alles anzeigen

djheke · 25. Januar 2017

Ich vermute mal, dass Du deine Tabelle zentrieren möchtest. Dazu musst du die Tabelle eine feste Breite in Pixel oder Prozent geben und mit margin zenreieren.

CSS

table {
 width:80%;
 margin:10px auto;
]

Der erste Wert gilt für oben und unten, der zweite Wert für links und rechts.

djheke · 22. Januar 2017

Nein, auch hier wird Dir keiner Deine Hausaufgaben machen.
http://www.forum-hilfe.de/threads/58148-Kniffel-Schreiben

djheke · 17. Januar 2017

Wenn Du das mod_rewrite eingebunden hast, sollte in der .htaccess folgende Anweisung funktionieren.

Apache Configuration

RewriteEngine on
RewriteRule ^(.*).html$ $1.php

@edit: Die Dateien auf dem Server müssen die Endung .php haben, aber in deiner Navigationsliste muss die Erweiterung auf .html enden

HTML

<ul>
<li><a href="deinedomain/index.html">Home</a></li>
.....
...
</ul>

djheke · 17. Januar 2017

Zitat von Huhu

Bist du dir da absolute sicher? Oder relative?

Willst Du uns veräppeln?

Hier mal ein Beispiel mit ;focus

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slider</title>
<style>
.gal {
 margin:auto;
 width: 400px;
 overflow:hidden;
 text-align:center;
}




.gal div {
 width: 2000px;
 position: relative;
 left:0;
 -webkit-transition:left 2s;
 transition:left 2s;
}




.gal img {
 float: left;
 width:400px;
 height:200px;
}




.gal a {
 display:inline-block;
 position:relative;
 top:190px;
 background:#000;
 color:#000;
 border-radius:50%;
 width:10px;
 height:10px;
 z-index:99;
}




.gal b {
 display:none;
}




.gal a:focus {
 background:#fff;
}
.gal a:nth-child(1):focus ~ div { left:     0px; }
.gal a:nth-child(2):focus ~ div { left:  -400px; }
.gal a:nth-child(3):focus ~ div { left:  -800px; }
.gal a:nth-child(4):focus ~ div { left: -1200px; }
.gal a:nth-child(5):focus ~ div { left: -1600px; }







</style> 
</head>
<body>




<div class="gal">
<a href="#"><b>1</b></a>
<a href="#"><b>2</b></a>
<a href="#"><b>3</b></a>
<a href="#"><b>4</b></a>
<a href="#"><b>5</b></a>







<div>
<img src="bild.jpg" alt="bild1">
<img src="bild.jpg" alt="bild2">
<img src="bild.jpg" alt="bild3">
<img src="bild.jpg" alt="bild4">
<img src="bild.jpg" alt="bild5">
</div>




</div>




</body>
</html>

Alles anzeigen

djheke · 12. Januar 2017

Ich verstehe nur Bahnhof. Was meinst Du mit Hover-Nummer?

djheke · 12. Januar 2017

Ich war mal so frei und habe es etwas aufgeräumt.

HTML

<!doctype html>
<html>
<head>
<title>navi</title>
<meta charset="UTF-8">
<style>
#informationen {
 border: 3px solid #00007F;
 background:#00007F;
}
.abschnitt {
	float: left;
	width: 9%;
	height: 6em;
	text-align:center;
}
.zwei {
	width: 76%;
	height: 6em;
	text-top:auto;
	padding:0;
}
.drei {
	/*margin-left:5px;*/
	width: 15%;
	height: 6em;
	text-align:left;
}
.clear {
	clear: both;
}
h1 {
	color:white;
	background-color: #00007F;
	text-align: Center;
	font-size:300%;
	}




#menu { 
 width: 91%; 
 padding-left: 9% ; 
 background: #00007F; 
 float: left; 
}




#menu ul { 
 margin:0;
 padding:0;
 background: #00007F; 
 float: left; 
 list-style-type: none; 
}




#menu li { 
 float:left;
 position: relative; 
} 




#menu li li {
 white-space: nowrap;
 float:none;
}
#menu a { 
 padding:5px 15px;
 position: relative; 
 text-decoration: none; 
 display: block; 
 text-align: center; 
 color: white; 
} 




#menu a:hover { 
 color: white; 
 background: #a33; 
}




#menu ul ul { 
 position: absolute; 
 display: none; 
}




#menu ul li:hover ul { 
 display: block; 
}




#menu ul li:hover ul ul { 
 display: none; 
}




#menu ul ul li:hover ul { 
 display: block; 
 position: absolute; 
 top:0; 
 left:100%; 
}




.arrow {
 font-weight:bold;
}
.arrow:after {
 content:" ";
 position:absolute;
 top:12px;
 right:-0px;
 width:0;
 height:0;
 border:5px solid #fff;
 border-bottom:none;
 border-color:#fff transparent transparent transparent;
}
</style>
</head>
<body>
<header>
<div id="informationen">
<div class="abschnitt"><img src="#" width="104" height="90" alt="Bild"></div>
<div class="abschnitt zwei"><h1>Willkommen </i></h1></div>
<div class="abschnitt drei"><img src="#" width="104" height="90" alt="bild"></div>
<div class="clear"></div>
</div>




<div id="menu">
<ul>
   <li><a href="#">Startseite</a></li> 
   <li><a class="arrow" href="news.html">News</a>
      <ul>
         <li><a href="#">Wir suchen Spieler</a></li>
 	 <li><a href="#">Wir suchen Trainer</a></li>
	 <li><a href="#">Hinweise </a></li>
      </ul>
   </li>




   <li><a class="arrow" href="verein.html">Verein</a>
      <ul>
         <li><a href="#">Anfahrt</a></li>
         <li><a href="#">Anmeldung Verein</a></li>
         <li><a href="#">Test</a></li>
         <li><a href="#">Infos</a></li>
         <li><a href="#">Antrag</a></li>
      </ul>
   </li>




   <li><a class="arrow" href="manschaften.html">Mannschaften</a>
      <ul>
         <li><a href="#">A-Junioren</a></li>
	 <li><a href="#">B-Junioren</a></li>
	 <li><a href="#">C-Junioren</a></li>
	 <li><a href="#">D-Junioren</a></li>
         <li><a class="arrow" href="#">E-Junioren</a>
            <ul>
               <li><a href="#">E1-Junioren</a></li>
               <li><a href="#">E2-Junioren</a></li>               
            </ul>
         </li>
         <li><a href="#">F-Junioren</a></li>
         <li><a href="#">Minis</a></li>
      </ul>
   </li>
   <li><a href="#">Jugendvorstand</a></li>
   <li><a href="#">Trainingsplan</a></li>
   <li><a href="#">Jugendsatzung</a></li>




   <li><a class="arrow" href="kontakt.html">Kontakt</a>					
      <ul>
         <li><a href="#">Kontakt</a></li>
     	 <li><a href="#">Impressum</a></li>
	 <li><a href="#">Datenschutz</a></li>
      </ul>
   </li>
</ul>
</div>
<div style="clear: both;"> </div>
</header>
</body>
</html>

Alles anzeigen

djheke · 9. Januar 2017

Crossposting

djheke · 9. Januar 2017

Hier mal ein Beispiel

HTML

<!DOCTYPE html>
<html>
<head>
<style>
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
}
ul , li {
 margin:0;
 padding:0;
 list-style:none;
}
 
ul {
 margin:30px auto;
 position:relative;
 background:url(bild1.jpg) no-repeat 0 0 ;
 width:1000px;
 height:200px;
}




ul ul {
 width:auto;
 margin-top:200px;
 background:#333;




}




li {
 width:200px;
 height:200px;
 float:left;
 border-right:1px solid #fff;
}




li li {
 float:none;
 height:auto;
 width:auto;
 background:#333;
}




li ul {
 display:none;
}




li:hover {
 background:rgba(50,50,50,.5);
}
li:hover ul {
 display:block;
 position:absolute;
 left:0;
 width:100%;
 height:auto;




}




ul ul li a {
 display:block;
 padding:10px;
 color:#fff;
 text-decoration:none;
}
ul ul li a:hover {
 background:yellow;
 color:black;
}




span {
 display:none;
}







</style>
</head>
<body>
<ul>
 <li id="b1"><a href="#"><span>b1</span></a>
  <ul>
   <li><a href="#">link1</a></li>
   <li><a href="#">link2</a></li>
   <li><a href="#">link3</a></li>
   <li><a href="#">link4</a></li>
  </ul>
 </li>
 <li id="b2"><a href="#"><span>b2</span></a>
  <ul>
   <li><a href="#">link5</a></li>
   <li><a href="#">link6</a></li>
   <li><a href="#">link7</a></li>
   <li><a href="#">link8</a></li>
  </ul>
 </li>
 <li id="b3"><a href="#"><span>b3</span></a>
  <ul>
   <li><a href="#">link9</a></li>
   <li><a href="#">link10</a></li>
   <li><a href="#">link11</a></li>
   <li><a href="#">link12</a></li>
  </ul>
 </li>
 <li id="b4"><a href="#"><span>b4</span></a>
  <ul>
   <li><a href="#">link13</a></li>
   <li><a href="#">link14</a></li>
   <li><a href="#">link15</a></li>
   <li><a href="#">link16</a></li>
  </ul>
 </li>
 <li id="b5"><a href="#"><span>b5</span></a>
  <ul>
   <li><a href="#">link17</a></li>
   <li><a href="#">link18</a></li>
   <li><a href="#">link19</a></li>
   <li><a href="#">link20</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

Alles anzeigen

djheke · 9. Januar 2017

Zitat von Dori

Es soll sich wie ein ganz normales DropDown verhalten: Erscheinen beim hover auf der area, bleiben wenn auf der area UND/ODER auf dem Menü selbst verweilt wird und verschwinden, wenn das Menü oder die jew. area verlassen werden. Also wie hier am Beispiel vom Text-Links: http://www.w3schools.com/cssref/tryit.as?_hover_dropdown

Na dann setze es doch so um. Dafür brauchst du kein JavaScript noch <area>.

djheke · 21. Dezember 2016

Du öffnest die bootstrap.min.css Datei und änderst im Deklarationsblock

Code

.jumbotron {
	padding-top:30px;
	padding-bottom:30px;
	margin-bottom:30px;
	color:inherit;
	background-color:#eee;
}

die Farbwerte bei background-color:

djheke · 13. Dezember 2016

Habe mal kleine Änderungen vorgenommen. So sollte es überall funktionieren.

Code

body {
 margin:0;
 padding:0;
 background:url(ba.jpg) no-repeat;
 background-size: cover;
}




header {
 padding:10px; /* Mit normalewr Schriftgröße egibt sich eine Höhe von ca 40px*/
 background: hsla(360,0%,96%,0.6);
}




       
#container {
 background: hsla(360,0%,96%,0.6);
 width: 70%;
 margin: 20px auto 4px auto; 
 webkit-border-radius: 40px;
 border-radius: 40px;
}

Alles anzeigen

djheke · 11. Dezember 2016

Ich habe so langsam das Gefühl, dass es eine kleine Bildergalerie werden soll. Wenn dem so ist, dann hättest du es gleich schreiben können. Und ja, viel Glück beim Probieren.

djheke · 10. Dezember 2016

Dann versuch es mal so

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">




#nav a {
 padding-left: 3px;
 width: 125px;
 height: 35px;
 line-height: 35px;
 color:black;
 display: block;
}




#container{
 float: left;
 width: 400px;
 height:400px;
 background: blue;
}




#link1:hover { background:green; }
#link2:hover { background:red; }
#link3:hover { background:magenta; }




#nav #link1:hover ~ #container {
 background:#ada;
}
#nav #link2:hover ~ #container {
 background:#ad0;
}
#nav #link3:hover ~ #container {
 background:#a3a;
}
</style>
</head>




<body>




<div id="nav">
 <a id="link1" href="#Seite1">Bild 1</a>
 <a id="link2" href="#Seite2">Bild 2</a>
 <a id="link3" href="#Seite3">Bild 3</a>
 <div id="container"></div>
</div>




</body>
</html>

Alles anzeigen

djheke · 9. Dezember 2016

Guck mal hier, vielleicht hilft es dir weiter.
http://www.gipspferd.de/CSS-Anleitungen/Grafische-Navigation-erstellen#tuts

Beiträge von djheke

Navigaitonspunkt Hintergund verändern

Was muss ich beachten um HTML5/CSS3 als PHP zu speichern im Gegensatz zu HTML4/CSS ?!

Navigation anpassen

NAvigation in der Mitte zentrieren

Link über Bild mit Overlay einsetzen

Tabelle richtig positionieren anhand von Tabellen Mitte

Tabelle richtig positionieren anhand von Tabellen Mitte

Alle HTML Elemente mit der CSS Klasse "dice" ermitteln

Header und Footer per php aber browserleiste ist dann auch php

Wieso funktioniert das 4te Bild meines Sliders nicht?

Teile eines IMG mit hover versehen, welches jew. ein DropDown-Menü anzeigt

Menü richtig positionieren.

Dropdown erstellen mit Code ID

Teile eines IMG mit hover versehen, welches jew. ein DropDown-Menü anzeigt

Teile eines IMG mit hover versehen, welches jew. ein DropDown-Menü anzeigt

Bootstrap: Farbe Container wird nicht gefunden

TOP funzt nicht

Blider mit Links verknüpfen

Blider mit Links verknüpfen

Blider mit Links verknüpfen