erstellen einer seite als dokument

rudi83

hallo

ich bin noch etwas neu im html und css universum jedoch auch nicht unwissend.
deshalb benötige ich eure hilfe.
ich würde gerne eine seite für meinen vater erstellen zum 50.
ich will eine seite erstellen die sobald man sie öffnet es aussieht als würde sich eine
dokumentrolle öffnen (ausrollen,wie die rollen im mittelalter).
Die länge der rolle ändert sich je nach anzeige der themen die ich dort stehen habe usw.

und links davon soll das navigationsmenü für alle anderen seitenlinks sein.
das ich schon erstellt habe.
jedoch weiss ich da auch nicht wie ich es dann fix auf der seite lassen kann damit
wenn man bei der dokumentrolle runterscrollt das navi immer zusehen ist und mit scrollt.

und rechts davon soll noch eine sektion sein wo ich die neuesten videos und beiträge sind.
damit habe ich schon angefangen.

ich würde mich sehr über eure hilfe und vorschläge freuen.

Helpstar24

Hallo rudi83,

hast du schon ein Grundgerüst?

Animationen könntest du gut mit CSS3 oder mit jquery hinkriegen.
Auch das sanfte Erscheinen eines Bildes, wie auch das Runterklappen
einer Ebene ist mit jquery realisierbar.

Alternativ könntest du auch mit Gif Animationen arbeiten.
Das ließe sich mit einem Bildbearbeitungsprogramm gut hinkriegen.

Wobei auch eine Flashanimation sinnvoll wäre Dafür benötigst du eben
Adobe Flash oder Swish.

rudi83

hallo

danke für deine rasche antwort

was meinst du mit grundgerüst???
wie die seite aussehen soll????
also wie gesagt hab ich einen teil meiner navigationsliste erstellt kopf und fusszeile..und genau in der mitte sollte beim öffnen der
seite das dokument ausgerollt werden und das navi links davon sein nicht darin sondern draussen und kopf und fusszeile oben und unten.
also zurzeit arbeite ich nur mit html und css und css3.

also ich würde schon alles lieber mit css machen da ich mich noch nciht
mit den anderen befasst habe.aber wird natürlich noch kommen.

wenn ich zb jquery benutze oder ein anderes kann ich es dann auch anklicken und posts einfügen usw???
ich hoffe du kannst dir vorstellen wie ich es meine mit der dokumentenrolle.

gute nacht thx

Helpstar24

Wir benötigen doch erst mal dein HTML / CSS Grundgerüst.
Hast du schon mal Etwas geschrieben?

Poste doch hier deinen Code.

rudi83

ok

aber es ist wirklich noch nicht viel was ich gemacht hab.bin ja noch am anfang...bitte

index.html

HTML

<!DOCTYPE html>
<html>


<head>
    <title>Alles Gute</title>


    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">




    <link href="styles/style.css" type="text/css" rel="stylesheet">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>


<body>


<div id="seitenbereich">


<div id="kopfzeile">  Wir Erinnern Uns</div>






<div id="nav">
<li class="navi"><a href=index.html>Startseite</a></li>
<li class="navi"><a href=ueber.mich.html>&Uuml;ber mich</a></li>
<li class="navi"><a href=musik.html>Musik</a></li>


</div>


 <div id="inhalt">Hier kommt der Inhalt hin also die dokumentenrolle</div>








 <div id="fusszeile">Alles Gute wünscht dir deine Familie </div>




</div>






</body>
</html>

Alles anzeigen

style.css

Code

#seitenbereich{
    margin: 0 auto;
    width: 1200px;
    background-color: #DFDFDF;
}


#kopfzeile{
    background-color: #808080;
    background-position: center;
    border-color: #FF0000;
    border-radius: 5px;
    text-align: center;
    font-style: italic;
    color: #FFFFFF;
}


#nav li{
  list-style: none;


}


#nav{
   width: 150px;
   background-color: #DFDFDF;
   margin-top: 10px;               /* Außenabstand oben   */
   margin-bottom: 10px;            /* Außenabstand unten  */
   margin-left: 0px;              /* Außenabstand links  */
   margin-right: 15px;             /* Außenabstand rechts */
}


.navi{


   text-align: left;
   font-style: italic ;
   float: left;
   margin-left:15px;               /* Außenabstand oben */
   width:90px;
   background-color: silver;       /* Hintergrundfarbe   */
   border-top: 1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left: 25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom: 1px red solid;   /* Rahmenfarbe unten  */
   border-right: 2px blue solid;   /* Rahmenfarbe unten  */
   margin-top: 10px;               /* Außenabstand oben  */
   padding-top: 8px;
   padding-bottom: 8px;            /* Innenabstand unten */
   padding-left: 8px;
   padding-right: 8px;
   border-radius: 20px;
   box-shadow: -5px -5px 5px green,
               10px 10px 10px red;
}


#inhalt{
    text-align: center;
    height: 800px;
    border-radius:5px;
}


#fusszeile{
    background-color: #2FB99A;
    background-position: center;
    text-align: center;


    border-color: #2F4A9A;
    border-radius:8px;
    font:  italic;
    color: #FFFF00;
}

Alles anzeigen

natürlich kommen beim navi noch viel mehr links dazu usw...aber eins stört mich noch sehr das der INHALT unter der navi weitergeht aber das kann ich sicher mit width wegmachen oder......

rudi83

hey helpstar

ich hab mir grad deine seite angeschaut und ich finde es cool wie du alles erklären willst und mit bilder.würde mich freuen wenn du weitermachen würdest. thx

Helpstar24

Zitat von rudi83

hey helpstar

ich hab mir grad deine seite angeschaut und ich finde es cool wie du alles erklären willst und mit bilder.würde mich freuen wenn du weitermachen würdest. thx

Nett von dir.

Bezieht sich das "weitermachen" noch auf die Seite http://www.helpstar24.de ?(Homepage selbst erstellen - Anleitung)
Wir machen da auf jeden Fall weiter. Wir haben schon 3 weitere Themen fertig und lassen diese noch prüfen.

Ich gucke mir das heute noch mal an. Und berichte. Bin auch beruflich unterwegs Daher nicht immer answesned.
Du bist aber auch in der Lage zu programmieren? Also du kannst schon HTML CSS? Richtig?

Weil diese Animationen sind eigentlich recht easy hinzukriegen ; - )

Helpstar24

Hallo @rudi83 ,

ich habe mir das Ganze angeschaut. Du möchtest eine alte Schriftrolle (wie noch aus dem Mittelalter) quasie runter aufrollen lassen. Und dann erscheint Text und Video? Richtig?

Ich würde dir Folgendes raten.

Diese Rolle besteht aus 2 Div Ebenen

HTML

<div id="rolle">
<p>Dein Text</p>
 <div id="rolle_boden"></div>
</div>

id="rolle" soll von der Höhe her dynamisch erstellt werden. D.h., egal wie viel Text eingebaut wird, die Rolle passt sich dementsprechend an.
In dem Fall einfach in der CSS Datei das Height: weglassen.

id="rolle_boden" besteht aus einer gif Animation. Alternativ auch ein Bild. Diese Ebene befindet sich ganz unten.

Damit die Rolle auch beim Scrollen zu sehen ist, kannst du es mit position:fixed fixieren.

Animationen wie "fallen lassen" kriegt man ganz einfach mit jquery oder mit CSS3 hin Ist super einfach:
http://www.w3schools.com/cssref/tryit.a…ycss3_animation

rudi83

hi danke für deine antwort

ja ich meine die seite helpstar ....nur eine frage dazu welches background image hast du benutzt es ist nur ein dünner
streifen oder??? und den hast du dann re
und ja ich denke schon das ich in der lage bin zu programmieren...;)

ich hätte nocn ne kleine frage ich bin grad noch bei dem kontaktformular und hab probleme mit dem code

Code

<input type="number" name="Day"  value="1" min="1" max="31" size="1" maxlength="3" >

er zeigt das feld schon an und in dem feld steht auch die 1 und man kann dann per button von 1 bis 31 wählen
jedoch will ich die grösse dieser box verändern die ist jetzt einfach zu gross doch das size bringt nichts........

und man kann natürlich auch noch per hand eintippen und deshalb habe ich das maxlength gemacht...
das man nicht mehr als 3 zahlen eintippen kann. jedoch funktioniert das nicht. er nimmmt es nicht an oder so...

es wäre toll wenn in dem eingabefeld ,noch bevor überhaupt jemand was eingegeben hat das wort DAY steht.
ich dachte das ich einfach das value ändere doch das funkt nicht.

EDIT: also das mit dem Day hab ich schon herausgefunden man muss nur placeholder="Day" hinzufügen und
den value wegnemmen.super wieder was gelernt.

EDIT2: funktioniert überall ausser beim jahr......ich meine es steht schon jahr dann im feld doch kann man dann
wieder kein jahr auswählen es kommt nur die 1.ich dachte mir es braucht sicher die value weil es ja so eine grosse
zahl ist.doch es bringt nichts es geht nur das value allein oder nur das placeholder also das wort jahr....verzweifle.....

Tags