Beiträge von resteverwerter

resteverwerter

Du hast recht und ich habe für die älteren Browser html5siv eingebaut:

Code

<!--[if lte IE 8]>         
   <link rel="stylesheet" media="screen, projection" href="/site/css/ie.css"/>          
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]-->

Was mir bei den html-Problemen am meisten auffällt ist aber, dass überproportional viele Anfänger Tabellen-Layout, Frames oder wie hier IE-6 fixe im css haben, weil sie irgendwoher alten Code kopiert haben.
Ich glaube, dass man mit einer neuen Struktur vielleicht einige Probleme / Unübersichtlichkeiten von vorneherein beseitigen könnte.

LG Matthias

resteverwerter

in Teil 5. deiner css hast Du in Zeile 238:

.topmenu ul{ display:none; }

Dadurch wird die der Klasse .topmenu nachgelagerte Liste nicht angezeigt.

In Zeile 268 hast du
.topmenu:hover ul {
display:block;
z-index:2000;
}

Sobald die Maus über das Menü schwebt wird das Untermenü angezeigt und schwebt im Layout.

Lies mal : http://www.html.de/threads/dropdo…t-inhalt.23133/

und versuche deine Unterliste absolut zu positionieren.

LG Matthias Scharwies

PS:
1. Ich würde im Jahr 2013 nichts mehr für den IE6 entwerfen (Zeile 260 im css)
2. Eine id=logo" darfst Du nur einmal vergeben, sonst musst Du eine klasse verwenden.
3. Ich würde den Listen die Klasse .submenu geben und die Listenelemente ohne Klasse schreiben.
In der css würde das dann so aussehen:

.topmenu ul.submenu li {
}
wenn du die Listenelemente definieren willst.

und:
html5 ist halt der neue, aktuelle Standard

resteverwerter

Gib der

#navigation ul ul li.submenu
oder besser

#navigation ul ul.submenu

einen z-index:99; der das Menu obrhalb der normalen Seite schweben lässt.

LG Matthias

PS: Deine SeitenStruktur wird übersichtlicher, wenn du html5-Elemente verwendest:

resteverwerter

Vielen Dank,

Problem 1 -gelöst
main ist nicht hoch genug - overflow:hidden funktioniert.
Weiß irgendjemand warum das so ist?

Problem 2: - gelöst
float für p - keine Ahnung, warum. Auch die width ist überflüssig, da dies ja durch section definiert ist. -> lösch ich raus!

Das klingt jetzt wohl komisch, aber irgendwie ist meine Homepage und das css (wie ein Krebsgeschwür) organisch in alle Richtungen gewachsen. Gerade am Anfang (d.h. auf älteren Seiten) gab es eine Vielzahl von div-Boxen, die ich heute in den normalen Fließtext einbauen würde. Jetzt will ich da endlich mal Stück für Stück wieder Struktur reinbringen und Du hast mir da sehr geholfen.

Das html-markup dieser Seite war für mich nur ein Beispiel der Darstellungsprobleme. Anders als OnePage-Webseiten muss ich irgendwie immer unter dem rollenden Rad arbeiten. Im offline-Modus hatte meine Beispielseite funktioniert und online dann die zu kurzen main-Container.

Nochmals vielen Dank Matthias

resteverwerter

Hallo Forumsfreunde,
jetzt habe ich ein "Anfänger"problem, dass ich aber nicht lösen kann.

Ich habe versucht mein CMS auf html5-Elemente umzustellen.
Im Versuch und bei den meisten Seiten ging's gut:
http://www.jsr-hersbruck.de/site/fam/index.html

In der Praxis hat main bei manchen Seiten nicht die ausreichende Höhe der Elemente innerhalb, so dass Text verschluckt wird. Des weiteren sortiert sich der Footer nicht unter main, sondern hängt sich rechts an.
http://www.jsr-hersbruck.de/site/fam/index_verschoben.html

Mit einem clear:left; könnte ich den Footer links positionieren, main würde den Text dann als overflow zeigen, hätte aber trotzdem keinen Hintergund im überstehenden Abschnitt.

Vielen Dank im Voraus

Nachtrag:
eine besonders schlimme Seite:
http://www.jsr-hersbruck.de/site/was/index.html
Die Überschriften h3 sind nichtan ihren passenden Stellen, sondern direkt untereinander. Wie kannso etwas passieren?

resteverwerter

Warum nicht Container mit jeweils festgelegter (Maximalbreite)?

HTML:

HTML

<body>
    <article>
       Text und Notizen
    </article>


    <aside>
        4 Bilder mit links
    </aside>
</body>

CSS (kann man auch mit <style> ...</style> in den head packen)

Code

body{
max-width:1000px;
margin: o auto;
}


article {
width:70%;
float:left;
}


aside{
width:30%;
float:right;
}

Alles anzeigen

Die Texte und Bilder kannst du dann ebenfalls im css stylen.

LG Matthias

resteverwerter

Das Seitenlayout wird im Jahre 2013 nicht mehr mit Tabellen gestaltet (eben weil es diese ganzen Probleme der Positionierung und fehlenden Änderungsmöglichkeiten gab!).

Wenn Du einen semantisch klar strukturierten Seitenaufbau hast, kannst du ihn viel leicht und flexibler gestalten.

LG Matthias

resteverwerter

Das mit den background-colors ist schon besser, geht aber hier mit den Hintergrundbildern, die sowieso von der html-Struktur abweichen, aber eher nicht.

LG Matthias

resteverwerter

Fehlersuche:
Gib mal
div{border: 1px solid red}
in die style.css ein. Dann siehst Du, dass dein div '="right" zu schmal ist.

So wird das Bild ganz dargestellt:
#right {
background-image: url(http://www.nesrin.at/images/right_bg.jpg);
float: left;
width: 618px;
padding-top:150px;
padding-right: 25px;
background-repeat: no-repeat;
}

Neues Problem:
Deine Seite ist länger als die Hintergrundbilder
(Du verwendest ein Design von 2006; Das sind Generationen im Internet, von der steigenden Nutzung durch mobile Endgeräte (Smartphone, Tablets wie Ipad) einmal abgesehen. Google mal "responsive design"!).

Durch:
#right {
background: #e9e3e3 url(http://www.nesrin.at/images/right_bg.jpg) no-repeat;
float: left;
width: 618px;
padding-top:150px;
padding-right: 25px;
}
... legst du eine Farbe unter dein Hintergrundbild, das die überstehende Fläche des Divs trotzdem grau (#e9e3e3) erscheinen lässt.

Neues Problem:
Der linke untere Rand deines Designs gehört nicht zu #right!
Du müsstest jetzt auch das Hintergundbild left_bg.jpg ändern. Am besten 10.000px hoch (Naja jedenfalls mehr als Du je verwenden willst - durch overflow:hidden kannst Du überstehende Teile "verschwinden" lassen.

LG Matthias

PS:
Das Hintergrundbild von body ist ja komplett weiß. Warum nicht:
body {
background:white;
font-size: 62.5%;
font-family: Georgia, "Times New Roman", Times, serif;
}

resteverwerter

außer dass Du bei #content denKommentar /*height: 100%;nicht geschlossen hast, seh ich keinen Fehler.
Der footer ist doch immer unten am Seitenende dran, auch wenn der Seiteninhalt theoretisch länger wäre.

PS: Habe dein Problem gefunden. Beim Scrollen nach unten wandert der footer nach oben.
Eine mögliche Lösung findest Du hier:
http://www.cssstickyfooter.com/de/verwendung.html

LG Matthias

resteverwerter

Du hast in Deinem div-Container keinen Platz mehr für ein Bild, da Du dem <div id="right"> ein padding-right:90px gegeben hast und und 4x149 Bildbreite + 3x 2px Rand mehr als 590px Breite sind.
So passt es:

#right {
background-image: url(http://www.nesrin.at/images/right_bg.jpg);
float: left;
width: 608px;
padding-top:150px;
padding-right: 0px;
background-repeat: no-repeat;
}

Jetzt passt aber Dein Hintergundbild nicht mehr. Dass musst du mit einem Bildbearbeitungsprogramm an die neue Größe anpassen.

LG Matthias

PS: Die Bilder der Lightbox-Show sind alle unterschiedlich groß. Die fließenden Übergänge zum nächsten Bild sindjaganz nett, aber ich muss dauernd meine Maus verschieben um auf "next"zu klicken.

resteverwerter

Hallo,

Respekt, dass du selber ein Layout und eine Seite entworfen hast.

Trotzdem glaube ich, dass eine Schule eher ein CMS wie Joomla gebrauchen kann. Ein Aspekt ist sicherlich das Erstellen und Bearbeiten von Seiten im WYSIWYG-Modus ohne in den html-Code einzutauchen. Ein gutes CMS liefert Dir aber auch noch eine integrierte Suchfunktion, Kontaktformulare, Terminplaner, Gästebuch und, was am wichtigsten ist, eine automatische Erstellung eines Navigationsmenüs bei neuen Seiten. Dieses Menüs müsstest Du sonst immer von Hand ändern, was bei mehreren Verzeichnisebenen schon mal unübersichtlich werden kann.

Wir, eine Realschule in Bayern, verwenden für unsere Seite http://www.jsr-hersbruck.de/ das kostenlose PG-CMS . Es verwendet keine mySQL-Datenbanken, sondern xml-Dateien, die sich zusammen mit den php-Skripten selbst entzippen, wodurch das System sofort einsatzbereit ist. Für die WYSIWYG-Eingabe wird der TinyMCE-Editor verwendet.

Dein Layout könnte man übernehmen, bzw. anpassen, da das CMS in der Basis-Version noch mit Hintergrundbildern arbeitet, um IE6 und IE7 zu berücksichtigen. Auch den Aufbau der startseitekann man (relativ) einfach selbst bestimmen / verändern

Wenn Du Interesse hast, kannst du mir ja eine PN schicken.

Mit freundlichen Grüßen Matthias Scharwies

resteverwerter

Rein theoretisch kannst Du es mit css alleine machen, aber dann müsstest Du sicherstellen, dass alle Nutzer den neuesten (webkit)-Browser verwenden:

http://lea.verou.me/2011/09/pure-c…ion-with-steps/

ansonsten könntest du es in JavaScript realisieren:

http://www.hashbangcode.com/blog/typewriter-script-323.html

http://www.permadi.com/tutorial/jsTypewriter/

LG Matthias

resteverwerter

du kannst unwichtigen Text unten im html-Dokument haben und dann absolut positionieren - dann musst Du aber aufpassen,dass das Layout noch passt.

In dem von mir verwendeten CMS http://www.jsr-hersbruck.de/ ist die Navigation am Ende der Seite und wird dann in den dafür freigehaltenen Balken dargestellt.
erwünschte Konsequenz: gleich nach dem <body>-tag kommt dann <h1>.

LG matthias Scharwies

resteverwerter

hier ein Internet-link zu den inline-Elementen <i> und <b>:

http://www.mediaevent.de/xhtml/em.html

Ich verwende hfg. die css Klasse <span class="fett"> die ich in der css dann mit .fett {font-weight:bold;} definiert habe.

Wo ist die css-Datei?
Bandit hat Dir schon gesagt: schau, dass du einen Ordner css hast (in den später bestimmt mehr css-Dateien kommen) und überprüf die Groß-Kleinschreibung der css.Datei.
PS: nivo oder nivio?

Zum Thema Namen.
Alle html-Dateien, Klassen, id's, bildnamen und Bildendungen (.jpg statt .JPG) werden bei mir immer klein geschrieben. Striche zwischen Begriffen schreibe ich immer so name_2 statt name-2, damit ich mir immer auf der sicheren Seite bin. Manche Browser können so kleine Schreibfehler ausgleichen, andere geben dann eine 404-Fehlermeldung.

LG Matthias Scharwies

resteverwerter

Versuch und Irrtum ist gerade bei html und css noch möglich, wenn man die einzelnen Fachbegriffe noch nicht so darauf hat.

Ich würde in der suche "div nebeneinader anzeigen" suchen.

Die Lösung:

Wenn Du einen Text mit mehreren Absätzen <p> hast, sollen die <p> ja untereinander dargestellt werden. So ist das auch mit deinen <div class="box_1"> und so weiter.
Damit sie nebeneinanderstehen, gibst Du ihnen im css die Eigenschaft float:left;.

eine Anmerkung:
Wenn sie nebeneinander stehen sollen, wäre es ideal wenn sie die gleiche Breite und Höhe haben. Du kannst sie im html-Code mit <div class="box"> und im css mit

div.box { /* (oder nur: .box) */
position:relative;
float:left;
width: 250px;
background:white; /* oder irgendeine hellere Farbe, da es jetzt nicht grad gut lesbar ist. */
.....
}

gemeinsam stylen. Das wäre eleganter und übersichtlicher.

LG Matthias

resteverwerter

Hallo midnight,
explanator hat schon recht, es ist total schwierig durch Deinen Code durchzublicken, da html, css (Stil + Forrmatierung) und JavaScript (Interaktivität) wirld durcheinander gewürfelt waren.

Ich habe Deinen Code einfach mal sortiert:

Code

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Ein Klappauf-Mechanismus">
    <meta name="author" content="J&uuml;rgen Asendorf">
    <title>Hey, wenns dir nicht gefällt, mach neu. </title>




<script>
    function BlurLinks(){
        lnks=document.getElementsByTagName('a');

        for(i=0;i<lnks.length;i++){
            lnks[i].onfocus=new Function("if(this.blur)this.blur()");
            }
    }


    onload=BlurLinks;


    function toggleNode(node)
          {
            var nodeArray = node.childNodes;
            for(i=0; i < nodeArray.length; i++)
            {
              node = nodeArray[i];
              if (node.tagName && node.tagName.toLowerCase() == 'div')
                node.style.display = (node.style.display == 'block') ? 'none' : 'block';
            }
      }
</script>


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




<style>
body{
    background-color: #000000;
}
div.box_1{
    position:relative;
    border:0px solid green;
    width:258px;  


    text-align:center; 
}
div.box_2{
    position:relative;
    border:0px solid green;
    width:204px;  
    height:61px;
    text-align:center; 
}
div.versteckt {
    postion:relative;
    display: none;
    border:1px #815630;
}


p{
    color:#815630;
}


</style>


</head>
<body>


<div class="box_1">
    <p onclick="toggleNode(this.parentNode); return  false;">
        Tag 24<img border="0" src="stern.gif" width="7" height="5" align="top">
    </p>
    <div class="versteckt">
    <p>
            <a href="http://images.fringo.de/userfiles/i/G/H/I/H/dmudpALqMG18Rz2r4rbUd0.jpg">
                <img src="http://www.rauchfrei.x-pressive.com/footer1377371490_5530.png" alt="Rauchfrei-Ticker by X-PRESSIVE.COM" border="0" />
            </a>

            Fick dich, Tabak. Ich (b)rauch dich nicht.
        </p>
    </div>
</div>


<div class="box_2"> 
    <p onclick="toggleNode(this.parentNode); return  false;">
    Tag 28
    </p>
    <div class="versteckt">
        <p>
            So langsam wird's was mit der Homepage. :)
        </p>
    </div>
</div>


</body>
</html>

Alles anzeigen

1. Die erste Zeile muss <!doctype html> lauten

2. Den Stil findest Du im (um unwichtige Einträge gekürzten) <head>
Besser wäre eine eigene css-Datei, die Du mit format.css ja wohl schon hast.

3. Im <body> steht nur noch der reine Inhalt, in wenige html-Tags semantisch (nach der Bedeutung) sortiert.
Die Tabelle habe ich gelöscht, da sie hier wirklich keine Funktion hatte.

Dadurch dass <div class="box_1"> (im css, bzw. style div.box_1) eine feste Höhe hatte, verschob sich auf der zweite div nicht nach unten. Wenn Du die feste Höhe rausnimmst, ist es so wie du wolltest.

LG Matthias

resteverwerter

kein Problem,
die css-Formatierung

margin: 0px auto;

gilt nur für das betroffene Element.

Alle anderen fangen wieder links oben an, außer du formatierst sie anders.

LG Matthias Scharwies

resteverwerter

Hallo,

das geht am einfachsten, wenn du deine Seite in ein <div>-Element setzt, das dann mittig positionert wird.

html:
<div id="seite">
....
</div>

css:
#seite { position: relative; padding: 0; margin: 10px auto 0 auto;
}

Das Hauptmenü würd ich nicht in einzelne <div>s packen, sondern als
<ul id="hauptnavi">
<li><a href="...">1.Menüpunkt</a></li>
....
</ul>

Das Interface-Bild würd ich dieser Liste als Hintergrund unterlegen:
css:
padding:...px ...px 0 ...px; background:transparent url(../images/interface.jpg) no-repeat; background-position: ...px ...px;
Mit Padding (innenpolster und background-position kannst du es dann ganz elegant anpassen.

LG Matthias Scharwies

resteverwerter

Hallo,

Ich habe mit "hot potatoes" ein Quiz geschrieben, das die Bundesländer und ihre Flaggen gegenüberstellt. Allerdings wäre es aus Layout-gründen besser, wenn die Bilder nebeneinander stehen würden.

Ich glaube, dass diese Funktion verantwortlich ist:

for (var i=0; i<F.length; i++){
document.write('<div id="F' + i + '" class="CardStyle"></div>');
}
.. obwohl document.write ja wohl keinen Zeilenumbruch macht.

Die ganze Datei steht unter http://www.jsr-hersbruck.de/test/quiz.htm

Ich wäre froh, wenn jemand die Lösung findet (oder funktioniert dann das ganze drag und drop des Javascripts nicht mehr?)

Vielen Dank im Voraus!

Beiträge von resteverwerter

Navigation mit Dropdown bei Mouseover ver-/entstellt die ganze Website

Navigation mit Dropdown bei Mouseover ver-/entstellt die ganze Website

Navigation mit Dropdown bei Mouseover ver-/entstellt die ganze Website

Elemente floaten nicht richtig. <main> zu kurz für Inhalt

Elemente floaten nicht richtig. <main> zu kurz für Inhalt

2 Tabellen Nebeneinander

2 Tabellen Nebeneinander

Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

Problem mit sticky footer (footer wandert nach oben)

Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

HTML Editor

Kleinere Textanimationen mit HTML realisieren

Div-Container nur im Quelltext verschieben

PC-Browser findet CSS nicht?

Text bei Klick aufklappen

Text bei Klick aufklappen

Seitenelemente mittig mit CSS positionieren

Seitenelemente mittig mit CSS positionieren

Bilder in Java-script-Schleife nebeneinander darstellen