Beiträge von explanator

explanator

Da du ja neugierig bist, zeige ich dir mal wie deine Seite aussehen könnte.

http://mhdsl.bplaced.net/kus/willkommen.html

explanator

Zitat von Tobse

Ich zumindest habe schon ewig keine mehr gesehen. Und mir fällt spontan auch kein Use-Case ein, der nicht auch mit CSS2/3 realisierbar wäre.

Das soll dem Browser mitteilen, dass deine Seite UTF8-Codiert ist. Wenn sie das tatsächlich ist, stellt er auch Sonderzeichen korrekt dar. Wenn aber dein Encoding ANSI oder UNICODE ist, kommt größtenteils murks dabei raus. Das ist wie wenn du versuchst bei einem Schwaben einen berliner Dialekt festzustellen.

Ansi ist keine Zeichencodierung sondern das Normierungsinstitut: American National Standards Institute
siehe dazu ->http://de.wikipedia.org/wiki/Ansiund

UNICODE bildet nicht nur UTF-8 ab siehe dzau -> http://de.wikipedia.org/wiki/Unicode

- - - Aktualisiert - - -

@TiBo007 Wenn dein Design für dich in Ordnung ist, sag einfach Bescheid. Ich habe hier schon die komplette Vorlage inklusive deines Wunsches Vorliegen.

explanator

Nicht ganz, aber um die Feinheiten kümmern wir uns morgen, da hast du nicht alles ganz richtig übernommen im unteren Teil mit dem Div content.

Verwende nie ein anderes Programm als einen Texteditor für Webseiten, Schreibprogramme, wie OpenOffice eigenen sich nicht dafür.

explanator

Wo ist die CSS-Datei?

explanator

Ok wenn du das als Vorlage haben willst hast du recht, aber für die Willkommensseite brauchst du das dann wieder, da muss ja noch die Hoveränderung dran.
Mach es erst mal so damit man ein Ergebnis sieht.

Die CSS-Datei bitte komplett ersetzen durch diese hier:

Code

body {
    margin: 0;
    background-color: white;
    min-width: 1115px;
}
#header {
    height: 130px;
    background: rgb(181,234,19);
    width: 100%;
    moz-border-radius: 50px;
    border-radius: 50px;
    khtml-border-radius: 50px;
}
#header-links {
    height: 130px;
    float: left;
    margin-left: 50px;
}
#header-rechts {
    float: right;
    height: 130px;
    margin-right: 50px;
}
#main {
    padding: 20px 10px;
}
#aside {
    float: right;
    width: 200px;
}
#infobox {
    background-color: #b5ea13;
    padding: 5px;
    text-align: center;
    border: 3px double black;
    margin-bottom: 5px;
}
#infobox > a {
    text-align: center;
}
#content {
    background-color: white;
    width: 720px;
    margin: 0px auto;
    padding: 2%;
}
#navi {
    float: left;
    width: 180px;
}
#navi li ul {
    display: none;
    margin-top: 2px;
}
#navi li a:hover {
    color: black;
    background: white;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_2.png);
}
#navi li:hover ul {
    display: block;
    color: black;
    background: none;
}
#navi ul li a {
    font: normal 12px Arial;
    color: black;
    background: white;
    display: block;
    padding: 5px 0;
    line-height: 30px;
    padding-left: 20px;
    text-decoration: none;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_1.png);
    margin-top: 10px;
}
#navi ul {
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    list-style-type: none;
}
#navi ul li a:visited {
    color: black;
}
#navi ul li a:hover {
    color: black;
    background: white;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_2.png);
}
.headernavi {
    font: bold 13px Verdana;
    color: black;
    background: white;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_1.png);
    margin: 0;
    text-transform: uppercase;
    padding: 5px 0 5px 10px;
    line-height: 30px;

Alles anzeigen

explanator

'So wir sind bald durch.

Als nächstes bitte alles löschen vom letzten schliessenden div der navi bis zum Ende.

HTML

<li><a href="">Interessante Links</a></li>     
</ul> 
</div>


<-- ab hier alles nach unten löschen  -->

und dann das hier einfügen:

HTML

<div id="aside">
            <h3>News:</h3>
            <div id="infobox">
                <p>Wir sind offiziell eine Kooperation mit dem Portal "degupedia.de" eingegangen. Alle weiteres Informationen gibt es dann in der Januar-Ausgabe! Schaut gerne schonmal im Forum vorbei, ihr findet den Link in der Navigation.
                </p>
                <p>Nimm an unserem <a href="https://www.facebook.com/groups/147206222001603/?fref=ts">Facebook-Gewinnspiel</a> teil und gewinne einen Gutschein im Wert von 15,-€ für 'die-nager-kueche.com'
                </p>          
            </div>
            <div id="infobox">
                <p>
                    <a href="https://www.facebook.com/groups/147206222001603/" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Facebook_icon.svg" alt="Facebook" width="100" height="100"></a>
                </p>
            </div>
        </div>

        <div id="content">
            <img alt="Regal" src="http://file1.npage.de/010182/58/bilder/regaljanuar.png">
        </div>

    </div>
  </body>
</html>

Alles anzeigen

explanator

Da hast du was übersehen ul h3 ausserhalb etc.

explanator

Die kommt schon wieder, das liegt an den konfusen Einstellungen im CSS.
Erstmal das HTML in Ordnung bringen.

Ab div main bitte das komplette Navi austauschen, hier kommt die korrekte Version:

HTML

<div id="main">


<div id="navi">
    <h3 class="headernavi">Navigation</h3>  
    <ul>          
        <li><a href="">Home</a></li>            
        <li><a href="">Die Ausgaben</a></li>               
        <li><a href="">Über das Magazin</a></li>              
        <li><a href="#">Chefredakteure</a>            
            <ul>                    
                <li><a href="l">Poldi</a></li>                    
                <li><a href="">Teo</a></li>                    
                <li><a href="">Smarty</a></li>                    
                <li><a href="">Marsi</a></li>                
            </ul>                
        </li>            
        <li><a href="" target="_blank">Nagerspiele</a></li>    
        <li><a href="">Klein und Smart TV</a></li>  
        <li><a href="">Ideen</a></li>   
        <li><a href="" target="_blank">Forum</a></li>   
        <li><a href="">Interessante Links</a></li>
    </ul>
</div>

Alles anzeigen

explanator

Ob du einen Fussbereich brauchst, weiss ich nicht, liegt an dir.

Der Mainbereich beginnt also unterhalb des Headers und den fügen wir jetzt ein.

Du hast

HTML

<div id="hauptfenster"></div>
<div id="header">


<div id="header-links">


    <img src="http://file1.npage.de/008939/32/bilder/maus-logo.png" border="0"></div>


  <div id="header-rechts">


    <img src="http://file1.npage.de/008939/32/bilder/logo2.png" border="0"></div>




 <div id="navi">

Alles anzeigen

Daraus wird:

HTML

<div id="header">
    <div id="header-links">
        <img src="http://file1.npage.de/008939/32/bilder/maus-logo.png" border="0">
    </div>
    <div id="header-rechts">
        <img src="http://file1.npage.de/008939/32/bilder/logo2.png" border="0">
    </div>
</div>


<div id="main">


    <div id="navi">

Alles anzeigen

und da wir ein div zusätzlich geöffnet haben, müssen wir das auch wieder schliessen. Dazu fügst du am Ende vor dem body ein schliessendes div ein.
So dass das dann so aussieht:

HTML

</div>
</body> 
</html>

somit haben wir jetzt den Block Main erstellt.

explanator

Den Doctype, erste Zeile bitte auch noch ändern in !doctype html mehr nicht in spitzen Klammern. Der Editor verschluckt das hier, deshalb war der nie zu sehen.

Nächster Schritt. Aufteilung der Seite in Sektoren oder Blöcke, ganz wie man will.
Man erkennt ja schon das du einen Kopfbereich hasst und einen unteren Teil, nennen wir ihn mal Hauptteil.
Einen Fussbereich hat deine Seite nicht.

Das heisst wir haben 2 divs.
header und main
header ist ja schon vorhanden und kann bleiben.
div main werden erstellen.

explanator

Ja, das war die falsche CSS-Datei, ist alles kein Problem.

Dein Head muss so aussehen:

HTML

<html lang="de"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Klein und Smart</title> 
        <meta name="description" content="Das Archiv"> 
        <link rel="stylesheet" href="http://file1.npage.de/008939/32/html/style2.css" type="text/css"> 
    </head>

Unter meta name="description" hasst du bei content Das Archiv stehen, da muss die Beschreibung der Seite rein max. 255 Zeichen, also kein Roman, sondern eine für Aussenstehende sofort erkennbare Beschreibung, was ihn auf der Seite erwartet.

explanator

Die erste rote Zeile ist der Doctype, unter Wikipedia kannst du nachlesen was es damit auf sich hat.

Du kannst aber nicht den Doctype ändern ohne weitere Änderungen vorzunehmen. Es ist wichtig die Seite fehlerfrei zu haben, weil du dir die Arbeit erleichterst, wenn du einen weiteren Fehler einbaust. Du kannst dann nämlich am Schluss nicht mehr sagen was denn da die falsche Darstellung verursacht hat.
Da deine Seite am Anfang steht kannst du noch viele Dinge richtig machen und daraus auch etwas lernen, dein Code ist nämlich miserabel wie du gleich sehen wirst.
Das wir an deinem Problem erst mal nicht weiter machen, liegt nicht daran, dass dich jemand ärgern will, sondern dass du erkennen sollst das du den falschen Ansatz gewählt hast um ans Ziel zu kommen(hover = vergrösserung und klick weiter auf andere Seite).

Fangen wir an.

Dein Head sieht so aus ohne Javascript:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <link rel="stylesheet" type="text/css" href="http://file1.npage.de/008939/32/html/style2.css"/> 
        <title>Klein und Smart
        </title> 
        <title>Klein und Smart
        </title> 
        <meta http-equiv="content-language" content="de" /> 
        <meta name="keywords" content="kleinundsmart archiv" /> 
        <meta name="description" content="Das Archiv" /> 
        <meta name="robots" content="index, follow" /> 
        <meta name="author" content="Tobias Born" /> 
        <meta name="copyright" content="Tobias Born" />  
        <link rel="stylesheet" href="/main.css" type="text/css" />  
        <base href="http://kleinundsmart-archiv.npage.de/" />  
    </head>

Alles anzeigen

Du hast da 2 mal den Titel drin, 2 CSS-Dateien und einige Meta-Angaben, die uninteressant sind.

Jetzt machst du erst mal das hier daraus:

HTML

<html lang="de">
  <head>
  <meta charset="UTF-8">
  <title>Klein und Smart</title>
  <meta name="description" content="Das Archiv">
  <link rel="stylesheet" href="/main.css" type="text/css">
  </head>

Mehr brauchst du nicht. Javascript stammt von dir? Wenn ja kommt das später rein.
Du brauchst auch nur eine CSS-Datei, kann sein das die 2. vom Seitenanbieter stammt, der da Werbung platzieren will, aber das weisst du besser.
Wenn das so ist solltest du den Anbieter wechseln. bplaced.net ist da sehr gut, nutze ich selber und ist Werbefrei.

Wenn du soweit bist lade es hoch und wir schauen es uns an.

explanator

Gastl Warum bringst du nicht lieber die Lösung?
Anscheinend hälst du dich da ja auch sehr bedeckt, oder kennst du die womöglich auch nicht?

explanator

Also so in etwa:

HTML

<!DOCTYPE HTML>
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <title>test</title>

  <style>
  * {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
  }
  html, body{
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  header {
    height: 50px;
  }
  button {
    height: 50px;
    width: 100px;
    font-size: 1.6em;
  }
  section {
    background: url("http://lorempixel.com/1800/1200/sports/") no-repeat center center fixed; 
    background-size: cover;
    height: 90%;
    height: calc(100% - 50px);
  }
  </style>

  </head>

  <body>
      <header>
          <button>blubb
          </button>
      </header>
      <section>
      </section>
  </body>
</html>

Alles anzeigen

explanator

Und wo genau hakt es jetzt bei der Umsetzung?

explanator

Zitat von TiBo007

Ist jetzt aber auch egal, es geht nur um den oben genannten Code.
Kann mir da bitte jemand helfen

Nein es ist keineswegs egal. 'Wenn du Hilfe willst, musst du auch mitarbeiten sonst können wir hier schliessen.

explanator

Im Gegensatz zur ersten Version sind das schon mal sehr gute Verbesserungen. Ob man so eine Seite nun braucht oder nicht - naja - wenn man danach geht, müsste man wohl 80% aus dem Netz nehmen.

Jetzt kannst du beigehen und an den Abständen vom Text zu den Rändern arbeiten, da sieht vieles noch zu gedrunken aus.

Die Karten rechts mit den Sprüchen brauchen zum Beispiel einen Abstand zum Text oben und unten.

explanator

Jetzt fehlt der Doctype, der Head und der Rest vom Code.

explanator

Die Fehler beziehen sich nur auf deinen Code.
Schau dir mal im Firefox deine Seite an und klicke mit der rechten Maustaste in ein freies Feld und wähle Quelltext ansehen aus.
Alles was du dann rot siehst sind schlimme Fehler.

- - - Aktualisiert - - -

Zitat von Gastl

diese verschworene Gemeinde

Ich bin Teil davon und schwöre, dass ich nichts Gemeines hab.

explanator

Warum holst du die keine xbox360?
Mit Spiel liegst du da bei schlappen 250 Euro und hast weniger Kopfschmerzen.

https://www.amazon.de/Rockstar-Games…o/dp/B0071L2QNA

Beiträge von explanator

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Website, welche nicht über den sichtbaren Bereich herausragt

Website, welche nicht über den sichtbaren Bereich herausragt

Hover Effekt in Bild "Area"

Meine Webseite ist fertig- bitte um Bewertung

Hover Effekt in Bild "Area"

Hover Effekt in Bild "Area"

Gamer Laptop - Empfehlungen?