Beiträge von Nitamud

Nitamud · 17. November 2014

Was dir evtl. auch weiterhelfen könnte sind die Pseudoelemente :before und :after , wenn es rein um den Rahmen geht.

Werde mich später mit einem Code-Beispiel nochmal melden

So, hoffe ich habe das ganze richtig verstanden:

HTML

<body>




	
	<div class="page-row page-row-expanded">
		<div id="wrapper" class="grid rahmen-top">
			<div class="abstand-top ">
					Header
					Content
			</div>
		</div>
	</div>




	<div class="page-row">
		<div id="footer" class="rahmen-top">
			Footer
			</div>
	</div>

</body>

Alles anzeigen

Hier habe ich nur einen Rahmen um den Inhalt gelegt, dem ich die Pseudoelemente übergebe.

CSS

* {
margin : 0;
padding : 0;
}
html, body {
height : 100%;
}
body {
display : table;
width : 100%;
}
.page-row {
display : table-row;
height : 1px;
}
.page-row-expanded {
height : 100%;
}
.grid {
width : 960px;
position : relative;
margin : 0 auto;
padding-left : 5px;
padding-right : 5px;
}
.rahmen-top {
border-top : 3px solid #000;
}
.abstand-top {
margin-top : 10px;
}
#footer {
line-height : 2em;
}
#wrapper {
height : 100%;
}
#wrapper:before {
content : "";
position : absolute;
left : 0;
top : 0;
bottom : 0;
width : 3px;
background : #000;
z-index : 1;
}
#wrapper:after {
content : "";
position : absolute;
right : 0;
top : 0;
bottom : 0;
width : 3px;
background : #000;
z-index : 1;
}

Alles anzeigen

Oben habe ich nicht viel verändert, nur der Klasse .grid wurde ein Innenabstand mitgegeben, damit sie sich mit dem Rahmen nicht überlappt.
Zudem wurde die jetzt sinnlose Klasse .rahmen einfach rausgenommen. Der Rahmen wird hier durch die von mir neu hinzugefügten Pseudoelemente
:after und :before umgesetzt. Hoffe das hilft dir weiter

mfg Nita

Nitamud · 16. November 2014

Nabend,

hier 2 Links die dir weiterhelfen:

Steuerung

mit Unterpunkten(Pseudoklassen, Feedback)

und für das Dropdown beim hover:

Dropdown-Menü

mfg Nita

Nitamud · 16. November 2014

<!DOCTYPE html> statt DOKTYPE

mfg Nita

Nitamud · 8. November 2014

Hallo zusammen,

ist es möglich das sich bei der AJAX-Einführung Ajax-Einführung ein Fehler eingeschlichen hat?

Man muss im PHP-Code, dass " doch auch maskieren, da man sonst einen Fehler produziert.

PHP

<?php
$passwort = $_GET['q'];
$sicherheitszahl = 0;
$sicherheitszahl = strlen($passwort);
if (preg_match("/[a-z]+/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if (preg_match("/[A-Z]+/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if (preg_match("/[0-9]+/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if (preg_match("/[.,;:-_ #'+*~!"§$%&\/\(\)\[\]\{\}\\=?<>\|]+/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if ($sicherheitszahl <= 18 ) {
    echo 'unsicher ('.$sicherheitszahl.' Punkte)';
}
elseif ($sicherheitszahl <= 25) {
    echo 'sicher ('.$sicherheitszahl.' Punkte)';
}
elseif ($sicherheitszahl > 25) {
    echo 'sehr sicher ('.$sicherheitszahl.' Punkte)';
}
?>

Alles anzeigen

Funktionieren würde es bei mir so:

if (preg_match("/[.,;:-_ #'+*~!\"§$%&\/\[\]\{\}\\=?<>\|]+/", $passwort)) {
$sicherheitszahl = $sicherheitszahl + 5;
}

mfg Nita

Nitamud · 27. Oktober 2014

Zitat von fb_trainer

Werde mir mal die Alternativen vornehmen.
Aber falls doch noch jemand einen Tipp hat, wäre ich dankbar.

Scriptly nutzt für seine Vorschaue den IE , der mit diesen Elementen nicht umgehen kann.
Alternativ die seite einfach mal im Internet(Chrome, Firefox) aufrufen und testen.

Wenn du es unbedingt mit der Scriptly-Vorschau testen willst geht das so:

HTML

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

Alternativ kannst du die Objekte auch selbst mit JavaScript erstellen.

In der Css dann noch :

CSS

header, nav, footer, aside, section, article {
    display: block;
}

alle genutzen HTML 5 Objekte richtig zuweisen, dann dürfte es klappen

mfg NIta

Nitamud · 25. Oktober 2014

Zitat von wolf

Height 100%;

Oder du nutzt css flexbox

Mit height 100% habe ich es schon probiert, hat aber leider nicht geklappt...

Auf Flexbox würde ich lieber verzichten , da es ja knapp 15% der genutzten Browser (noch) nicht
anzeigen können.

Hier einmal die Quellcodes(vereinfacht ohne Inhalt):

HTML

<!DOCTYPE html>
<html>




<head>
    <title>Titel</title>




    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">




    <link href="style.css" type="text/css" rel="stylesheet">
</head>




<body>




<header>
<p id="logotext">
<strong></strong></p>
<p><a href="kontakte.html"></a>
<a href="impressum.html"></a></p></header>




<div id="wrapper">




<nav id="vertikal">
<ul><li><a href="index.html"></a></li>
<li><a href="ueber_diese_website.html"></a></li>
<li><a href="einzelteile.html"></a></li></ul></nav>







<nav id="horiziontal">
<ul>
    <li><a href="index.html"></a></li>
    <li><a href="ueber_diese_website.html"></a>
        <ul>
            <li><a href="einzelteile.html"></a></li>
            <li><a href="design_verwenden.html"></a></li>
        </ul>
    </li>
</ul></nav>




<aside><p><b>Bildersammlung:</b>




  <img src="" alt=" " title=""
   width="180" height="200" />




<img src=""  height="200" width="180"
alt="" />




<img src=""  height="200" width="180"
alt="" /></p></aside>










<section><p></p></section>




<footer><p>........</p></footer>




</div>













</body>
</html>

Alles anzeigen

CSS

* {
    margin: 0;
    padding: 0;
}




body {
    text-align: center;
    background-color: #FF0000;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}




header, nav, footer, aside, section {
    display: block;
}




#wrapper {




    width: 1000px;
    margin: 0 auto;
    text-align: left;







}




header {




    background-color: #FFDE88;
    height: 150px;
    width: 1000px;
    margin: 0 auto;
}




header p {




    text-align: right;
    padding-right: 16px;
}




header a {
    color: white;




}




#logotext {
    padding-top: 40px;
    font-size: 20pt;
    color: white;
}




#vertikal {




    background-color: rgba(135,113,89, 0.3);
    height: 20px;




}




#vertikal ul {
    list-style-type: none;
}




#vertikal li {
    display: inline;
}




#vertikal a {
    display: block;
    width: 230px;
    float: left;
    text-align: center;
    line-height: 20px;
    color: white;
    text-decoration: none;
    background-color: #B4B4B4;
}




#vertikal a:hover {
    background-color: #777777;
}




#horiziontal {




    width: 220px;
    float: left;
    background-color: rgba(138,125,89, 0.8);
    height: 100%;







}




#horiziontal ul {
    padding-left: 2em;
    padding-top: 20px;
    list-style-type: none;
}




#horiziontal ul ul {
    list-style-type: square;
}




#horiziontal li {
    padding-bottom: 0.5em;
}




aside {




    width: 230px;
    float: right;
    background-color: rgba(138,110,90, 0.5);
}




aside p {
    margin-top: 20px;
    margin-left: 10px;
}




aside img {




    border:1px solid silver;
}




section {




    margin-left: 215px;
    margin-right: 195px;
    background-color: rgba(138,120,89, 0.7);
    height: 100%;
}




section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    margin-left: 8px;
    color: #dd9661;
}




section h2 {
    color: #dd9661;
    padding-top: 1em;
    padding-bottom: 0.6em;
    font-size: 14pt;
    margin-left: 8px;
}




section p {
    margin-left: 5px;
    padding-bottom: 1em;
    margin-left: 10px;
}




section ul  {
    padding-left: 3em;
    margin-left: 5px;
}




section li {
    padding-bottom: 0.5em;
    margin-left: 5px;
}




footer {




    background-color: #717070;
    color: white;
    text-align: center;
    clear: both;
}

Alles anzeigen

mfg Nita

Nitamud · 25. Oktober 2014

Zitat von wolf

Wofür brauchst du eine grafik? :o

Die Befehle der Transparenz rgab(x,y,z, transparenz) oder auch opacity funktionieren doch meines Wissens im IE noch nicht...

oder gibt es da auch eine Möglichkeit, deinen Weg im IE anzuzeigen?

Nächstes Problem:

Wie definiere ich die Höhe dieser Bereich so, dass sie den ganzen Bereich zwischen header und footer ausnutzen?

Bei mir nutzen sie momentan nur den Bereich den sie benötigen

[Blockierte Grafik: http://www.fotos-hochladen.net/uploads/bereichs4gjwt7m5a.png]

mfg Nita

Nitamud · 24. Oktober 2014

So ich habe heute gleich noch eine Frage. Es geht um die sogenannten" faux columns“ , also die Hintergrundgrafiken für ein
Layout mit mehreren Spalten. Und zwar würde ich gerne wissen , wie man solche halbdurchsichtige Grafiken, wie sie
auch bei einer der Beispielwebsites im Seminar genutzt wird, erstellen kann.

Falls dies zu aufwändig ist und sich zeitlich nicht lohnt würde ich gerne wissen ob man die irgendwo vorgefertigt bekommen
kann oder sich einfacher selbst helfen kann

mfg Nita

Nitamud · 24. Oktober 2014

Danke sehr!

Nitamud · 24. Oktober 2014

Hallo,

habe gerade einen Quellcode auf seine Validierung geprüft und bin auf folgendes gestoßen...

HTML

<nav id="horiziontal">
<ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="ueber_diese_website.html">über diese Website</a></li>
    <ul>
        <li><a href="ersteller.html">Ersteller</a></li>

    </ul>
</ul></nav>

Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Wie schreibt man denn sowas in HTML 5?

mfg Nita

Nitamud · 23. Oktober 2014

Zitat von flo96

das Problem besteht nicht, da skype bei diesem Laptop nicht installiert ist... mittlerweile funktioniert es ja auch

Könnte eventuell auch daran liegen, wenn du es über eine Vorschau eines Editors öffnest.
Dies schauen dann direkt in die htdocs, und müssen erst konfiguriert werden damit sie den Ordner von selbst verwenden......

Nitamud · 23. Oktober 2014

Zitat von Anthony89

Hallo zusammen,

Ich weiß nicht, ob ich dafür ein neues Thema aufmachen muss: Wie kann ich die Navigationsleiste inkl. Linie beim Scrollen fixieren?

Das dürfte über:

CSS

position:fixed;

umsetzbar sein. HAst du die Website schon irgendwo online, wo man sich das mit dem
drüberfahren anschauen kann, bin da gerade nicht ganz mitgekommen

mfg Nita

Nitamud · 22. Oktober 2014

Soweit ich weiß nein,

hier einmal eine Liste der Typen:

[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/htmlformulare7bndl4zxc0.png]

mfg Nita

Nitamud · 21. Oktober 2014

Zitat von Skeptar

Nun wäre es nett wenn Du nochmal drüber schauen könntest und mir sagen könntest ob man das so lassen kann

Lassen könnte man es durchaus so, auch wenn mich der Abstand zwischen dem Bild und der Leiste stören würde.

Habe dir oben per Edit noch einen Link im Seminar gepostet, kannst du dir ja mal anschauen...

(sticky-footer)

Edit: Auf der Seite schaut es jetzt gut aus, würde es erstmal so lassen.
Den weißen Abstand gibt es wohl nur beim Screen....

mfg Nita

Nitamud · 21. Oktober 2014

Zitat von Skeptar

So habe das nächste Problem.
I
Wie mache ich das den so das ich die <section></section> auch vor dem Bild sehe? Ich habe den z-index davon zum testen auf 1 geändert und vom Bild auf 2 aber das Bild überdeckt trotzdem alles.

Es ist zwar super super super nett das Du mir immer solche riesen Beispiele bastelst nur das Problem es verwirrt mich viel zu sehr :s

Ich hoffe ich nerve dich nicht allzu sehr und du kannst mir nochmal helfen

Alles anzeigen

Hier mal ein Link zum z-index:

http://de.selfhtml.org/css/eig…ositionierung.htm#z_index

Zitat

Erläuterung:

Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.

Je höher die Zahl umso weiter rückt es in den Vordergrund

Das mit dem Verschwinden der Navigationsleiste verstehe ich gerade nicht ganz, kannst du mir da mal einen Screnn/Quellcode dazu besorgen?

Edit: Habs mir mal angeschaut und den Fehler gefunden...

Wenn du willst das die Fuß/Kopfzeile(Footer/Header) immer angezeigt wird musst du in diesem Fall einen stick - header basteln.
Gibt im Seminar eine schöne Anleitung zum sticky-footer , den kannst du dann einfach auf den header umlegen

http://www.html-seminar.de/sti…fussleiste-ganz-unten.htm

mfg NIta

Nitamud · 21. Oktober 2014

Zitat von flo96

Ok hab jetzt eines gemacht, hab einen Ordner namens "neu" erstellt und die Dateien neu reingefügt... es funktioniert, nur kann er index.php nicht auslesen...

Hast du den Ordner im Verzeichnis htdocs erstellt?

Also in diesem Pfad?

[Blockierte Grafik: http://www.fotos-hochladen.net/uploads/localhostqd8mn0jpie.png]

Wenn dein Ordner hier drinnen ist müsste es klappen

Edit: Ist dein XAMPP überhaupt eingeschalten?

[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/xamppkmf8iqo7u0.png]

musst hier Apache und wenn benötigt MySQL aktivieren

mfg Nita

Nitamud · 21. Oktober 2014

[quote='Skeptar','index.php?page=Thread&postID=33660#post33660'

Das Problem ist: Das Bild wird nicht komplett angezeigt. Ich habe ein <div id="bg"></div> erstellt und dem einen Background-Image gegeben, dies wird jedoch nur so weit angezeigt wie Text drin steht.

In diesem <div id="bg"></div> ist jedoch nicht die Navigationsleiste (<div id="nav"></div>). Muss die Navigationsleiste auch dort rein?[/quote]

Nein die Hintergrundfarbe vom Navigationsbereich habe ich bei meinem Quode durch einen eigenen div geregelt...

HTML

<div id="hg_nav">




<div id="navi">




<ul>




    <li><a href=""></a>Link 1</li>
    <li><a href=""></a>Link 2</li>
    <li><a href=""></a>Link 3</li>
    <li><a href=""></a>Link 4</li>
    <li><a href=""></a>Link 5</li>







</ul>
<!-- Navigationsleiste Ende -->
</div>
<!-- Ende Hintergrund Naviagationsleiste -->
</div>




<div>
<img id="hintergrund" src="Bilder/seifenstuecke-hell.jpg" alt="" title=""  />
<!-- src dann einfach anpassen -->
</div>




<div id="scrollbereich">




    <div id="inhalt">




        <h1>Hintergrund unter Navigationsleiste anzeigen</h1>




        <p>




        Eine Variante, um ein Bild unter den Navigationsleiste aufzuspannen.
        <br />
        Jetzt die Fenstergröße im Browser varrieren!










        </p>
    </div>
    <!-- Inhalt -->
</div>
<!-- Scrollbereich -->




</body>

Alles anzeigen

CSS

html, body
{




overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;







}




body {




font-family: sans-serif;




}




#hg_nav {
    width:100%;
    background-color: #808080;
}




#navi li {
    display: inline;
    text-align:center;
    padding: 10px 20px 10px 20px;
    margin: 10px 20px 10px 20px;
}




#hintergrund {
  /*position:absolute; */
  width:100%;
  height:100%;
  z-index:1;
}










#scrollbereich {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:auto;
  z-index:2;
}




#inhalt {
  padding:20px 100px 30px 200px;
  z-index:2;
}

Alles anzeigen

So klappts mit dem Bild

mfg Nita

Nitamud · 20. Oktober 2014

Hab mir mal die Mühe gemacht und das mit dem Hintergrundbild gelöst:

HTML

<head>
    <title>Test Steurung horiziontal</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
    <link href="074Steurung1.css" type="text/css" rel="stylesheet">
</head>




<body>







<div id="hg_nav">




<div id="navi">




<ul>




    <li><a href=""></a>Link 1</li>
    <li><a href=""></a>Link 2</li>
    <li><a href=""></a>Link 3</li>
    <li><a href=""></a>Link 4</li>
    <li><a href=""></a>Link 5</li>







</ul>







</div>
</div>
<div id="hintergrund">
<!-- Hier kommt das Hintergrundsbild -->
</div>




</body>
</html>

Alles anzeigen

CSS

html, body
{




overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;







}




body {




font-family: sans-serif;




}




#hg_nav {
    width:100%;
    background-color: #808080;
}




#navi li {
    display: inline;
    text-align:center;
    padding: 10px 20px 10px 20px;
    margin: 10px 20px 10px 20px;
}




#hintergrund {
  /*position:absolute; */
  width:100%;
  height:100%;
  /*background-color: #000000; wird durchs Bild ersetzt, ist nur aus Testzwecken so*/ 
  z-index:1;
}










#scrollbereich {
  /*position:absolute;*/
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:auto;
  z-index:2;
}




#inhalt {
  padding:20px 100px 30px 200px;
  z-index:2;
}

Alles anzeigen

mfg Nita

Nitamud · 19. Oktober 2014

Zitat von Skeptar

ich würde gerne das das Bild erst unter der Navigationsleiste anfängt, weil momentan fängt das ganz oben an.
Wie kann ich das ändern? Weil mit Margin-TOp klappt das nicht :

Der Fehler liegt in deiner Css-Datei :

CSS

[body{
    background-image: url('bg.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position:center;
    background-color: black;
}

Wenn du für den gesamten Body einen Hintergrund definierst , wirst du diesen mit margin auch nicht von einem Element im Body - Bereich wegbewegen können..

Hier schlage ich dir auch wieder einen <div> unter der Navigationsleiste vor der den Hintergrund regelt und in dem die anderen Elemente dann eingebettet werden.

HTML

<nav>
        <a class="nav_margin"></a>
        <a href="#">Home</a>
        <a href="#">Shop</a>
        <a href="#">&Uuml;ber mich</a>
        <a href="#">Impressum</a>
    </nav>
 <div id="hg">




    <article>
        sdfghjk
    </article>
 
</div>

Alles anzeigen

Und dem dann einfach in der Css-Datei die Informationen übergeben.

mfg Nita

Nitamud · 18. Oktober 2014

Wäre fein etwas genauer zu wissen wo du da steckenbleibtst,

Zitat

das bekomme ich nicht hin

ist eine etwas vage Beschreibung eines Fehler....

Du musst im Grunde nur rund um die Steuerung einen Div/Span basteln der nur den Hintergrund beeinflusst:

HTML

<div id="hg">




<nav>




<ul>




    <li><a href=""></a>Link 1</li>
    <li><a href=""></a>Link 2</li>
    <li><a href=""></a>Link 3</li>
    <li><a href=""></a>Link 4</li>
    <li><a href=""></a>Link 5</li>







</ul>







</nav>




</div>

Alles anzeigen

mfg Nita

Beiträge von Nitamud

Rahmen um responsive Design mit variablen Sticky Footer

CSS Navigationsleiste

Stylesheet einbinden - Problem

HTML Seminar- Ajax Beispiel - Fehler?

Scriptly bringt bei HTML5 Fehler

halbdurchsichtige "faux columns“ erzeugen/bekommen

halbdurchsichtige "faux columns“ erzeugen/bekommen

halbdurchsichtige "faux columns“ erzeugen/bekommen

HTML 5 , Valide Gestaltung einer verschachtelten Liste..

HTML 5 , Valide Gestaltung einer verschachtelten Liste..

XAMPP - PHP-Dateien im localhost öffnen

Horizontale Navigation mit Dropdown-Menü

<input type="" />

Menü

Menü

XAMPP - PHP-Dateien im localhost öffnen

Menü

Menü

Menü

Menü