Beiträge von resteverwerter

.galerie div {
    [B]width:30%;[/B]
    margin:1.2em 0 0 2%;
    float:left;
    padding:0;
    color:white;
    [B]height:50px;[/B]

genau! Und wenn du box-sizing verwendest, musst du nicht 2% + 30% +2% +30% +2% +30% rechnen, damit du wirklich unter 100% kommst, sondern kannst einfach 1/3 nehmen:

.galerie div {
    [B]width:33.3%;
    -moz-box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
    box-sizing:border-box;[/B]
    margin:1.2em 0 0 2%;
    float:left;
    padding:0;
    color:white;
    [B]height:50px;


[/B]

Am besten ganz am Anfang:

*,.*{
  -moz-box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
  box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
}

Das gilt dann für alle Elemente und Klassen.

LG Matthias

zur Galerie:

deine Bilder, (bzw. die divs drumrum) sind unterschiedlich hoch, so dass Bild 4 nicht unter 3 liegt, sondern nach rechts weiterläuft. Gib den Divs mal eine feste Höhe

zu Breitenangaben:
>Das mit den "70em" versteh ich nicht ganz. Tut mir leid

>Das mit den font-size:62,5%; mach ich ja damit 1em 10px sind um einfacher mit ems zu arbeiten. <h1> sind bei mir trotzdem noch größer als ein <p>

Probier die Angabe max-width:70em; einfach mal aus und veränder' dann das Browserfenster, so dass du siehst, was bei 500px, 700px, 900px, 1200px Breite passiert.
http://wiki.selfhtml.org/wiki/CSS/Werte….C3.9Feinheiten

Vergiss das mit den 10px; meist ist Text im Internet größer. Ich habe auf meiner Seite body {font-size:100%} und p {font-size:80%;}
Mach Breitenangaben immer in Prozent oder lass sie weg, dann ist das Element so groß wie das Elternelement.
Mach Höhenangaben (nur wenn du sie wirklich brauchst) in px - Vorsicht, sonst hast du dann Text, der überläuft.

Falls du mit dem Boxmodell Probleme kriegst, kannst du auch Box-sizing verwenden.
http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing

zu den doppelten Tags, das macht wirklich KEINER!

Solange Du eine Beispielseite ausprobierst, darfst du alles machen , was Du willst. trotzdem sind einige Sachen praktischer (auch wenn man es erst später merkt.

1. Textgröße

body {
    font-size:62.5%;
    background-color:#1a1c1d;
    background-image:url(bg.jpg);
    font-family:serif, sans-serif, monospace;

}

Tipp: Lass Font-size hier bei 100%!
Du musst ja mehrere Sachen einstellen, z.B:
h1{ font-size:200%}
p {font-size:100%}

2.Breitenangaben
Ich lasse den body immer mit

body {
max-width:70em;
margin: 0 auto;
}

Bei großen Bildschirmen ist er 70em (Breite eines 'M') breit in der Mitte zentriert, bei mobilen Geräten aber genau so breit wie der Viewport, ohne dass du nach rechts scrollen musst.

Hier sind ein paar Design-Beispiele:
http://wiki.selfhtml.org/wiki/CSS/Templates/Template15
http://www.jsr-hersbruck.de/site/subdomains/index.html

3. HTML5 statt DIV-Suppe
Du verwendest wahnsinnig viele Divs, Eigentlich können alle Browser außer dem IE 8 (noch 5% Nutzer) HTML5. Für den IE8 kannst du eine html5-shiv einbinden (Ist in den Design-Beispielen im Head eingebunden).

Schau mal in diese Artikelserie:
http://blog.selfhtml.org/c/html/html5-serie/

Diese Elemente sind viel übersichtlicher

nav statt div id="nav"

Ich sehe grade:

<header>[COLOR=#000080]  <div id=[COLOR=#0000FF]"header"[/COLOR]>[/COLOR]   [COLOR=#000080]</div>[/COLOR][COLOR=#000080]</header>[/COLOR]

[/COLOR]

Das ist doppelt gemoppelt!

lukasn

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

<!--[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

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

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:

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

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

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?

Warum nicht Container mit jeweils festgelegter (Maximalbreite)?

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)

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


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


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

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

LG Matthias

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

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

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;
}

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

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.

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

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

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

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

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

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:

<!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>

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