Beiträge von rudi83

rudi83

danke für deine hilfe ich werde mich gleich mal daran setzen

rudi83

danke für deine antwort ich werde es gleich mal probieren thx

rudi83

hallo

ich habe eine webseite erstellt jedoch habe ich ein paar fragen hier einmal der code

html code:

HTML

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="description" content="">    <meta name="keywords" content="">    <meta name="author" content="rudi" />    <meta name="publisher" content="lostchild" />    <meta name="copyright" content="lostchild" />    <meta http-equiv="content-language" content="de" />    <meta name="robots" content="INDEX, FOLLOW" />    <link href="styles/apokalypse.css" type="text/css" rel="stylesheet">    <link href="images/redes8.png" type="image/x-icon" rel="shortcut icon">         <title>Apokalypse</title>        <!--[if lt IE 9]>    <script src="bower_components/html5shiv/dist/html5shiv.js"></script><![endif]--></head><body>   <div id="links"></div>      <div id="background"> <img id="back" src="images/zombie.jpg" alt="Startseite"  title="Zombie"  />      <div id="seitenformat">       <div id="header" align="center"><img id="headerbild" src="images/header.jpg" alt="Startseite"  title="Apokalypse" /></div>      <div id="nav">      <ul>      <li><a href="index.html"><span></span>Startseite</a></li>      <li><a href="kontakt.html"><span></span>Kontakt</a></li>      <li><a href="information.html"><span></span>Informationen</a></li>       <li><a href="apokalypse.html"><span></span>Apokalypse</a>       <ul>      <li class="zombie"><a href="zombie.html">Zombieapokalypse</a></li>      <li class="strom"><a href="strom.html">Stromkatastrophe</a></li>      <li class="fallout"><a href="fallout.html">Atomkatastrophe</a></li>      <li class="alien"><a href="alien.html">Angriffskatastrophe</a></li>      </ul>    </li></ul></div>         <div id="inhaltmitte">    <div id="inhalt">  <h1 id="h">Apokalypse</h1>     <blockquote><p>Apokalypsen sind immer schrecklich und bedeuten schwere Zeiten f&uuml;r die Menschen.     Es gibt verschiedene Arten der Apokalypsen wie zb: eine Apokalypse durch einen Fallout,      eine Naturkatastrophe,einen Elektrizit&auml;tsausfall,einen Angriff durch Aliens     oder eine der beliebtesten Apokalypsenszenarios ist die <span class="span"> Zombie Apokalypse</span>.</p>     <img src="images/apokalypse.jpg" border="2" height="150" width="350" alt="apokalypse" />     <p>Bei jeder Art von Apokalypse muss man vorbereitet sein und sich mit bestimmten Gagdets und     Ausr&uuml;stungsgegenst&auml;nden eindecken.Hier werdet Ihr erfahren welche Hilfsmittel es gibt     und wie man Sie benutzt oder herstellt und wie man in so einer Zeit &uuml;berleben kann.Also macht euch bereit ...</p>   </blockquote>     </br>         <p id="liste">Was darf ich nicht sein:</p>         <ul style="disc" >         <li class="punkte">&auml;ngstlich</li>         <li class="punkte">langsam</li>         <li class="punkte">laut</li>         <li class="punkte">noch ein punkt</li>         <li class="punkte">und noch ein punkt</li>         </ul>             <img id="sign" src="images/redes4.png" align="right"  alt="vorsicht zombie" />      </div>    </div>   <div id="fusszeile">Wir helfen dir zu &Uuml;berleben</div>  </div></body></html>

hier der css code:

Code

#headerbild{
       width: 1190px;
       height: 105px;
       border-radius:6px;
       margin: 0 auto;






}
#back{
    float: right;
    width: 346px;
    height: 1100px ;


}
#header{
    background-image: url(image/bg_list.gif) ;
    border-radius:5px;
    height: 110px;


}
#links{
    background-color: #000000;
    color: #FFFFFF;
   float: left;
    width: 346px;
    height: 1100px;


}




#background{
     height: auto;
      background-color: #4A4A4A;


}


#seitenformat{
    width: 1200px;
    margin: 0 auto;
}


#nav{
    width: 170px;
     float: left;


}


#nav ul{
    list-style: none;


}




#nav li{


    width: 150px;
    text-align: left;
    font-family: fantasy;
    font-size: small;
    font-style: italic;
    background-image: url(image/bg_menu.gif);
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-bottom: 8px;
    margin-left: -40px;
    border-left: 25px orange solid;
    border-radius:8px;


}


   /*Span-Elemente*/
#nav span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#nav a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
  /* Links Submenu */
#nav ul ul li a {
color:#476EA8; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#nav ul ul li a:hover {
color:#153363; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background: #F0F4FA; /*Hintergrundfarbe */
}
 #nav ul ul li {
width:170px; /* Breite */
background:#DCE1E8; /*Hintergrundfarbe*/
border:1px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
}
/*Verhalten der Unterlisten bei Hover */
#nav ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#nav ul ul {
 margin-left:-20px;
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:1px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
 /* Links Hoverzustand */
#nav a:hover {
    background: RGBA(255,255,255,0.05); /* Hintergrundfarbe */
    color:#153363; /* Schrifrfarbe */
    font-style: italic;  /* Kursiv */
}
#nav a {
    color:#476EA8; /* Schriftfarbe */
    display:block; /* Block-Anzeige, jedes Element neue Zeile */
    text-decoration:none; /*keine Unterstreichung*/
    transition:1s; /* Fliessende Bewegung */
    -moz-transition:1s;
    -webkit-transition:1s;
    -o-transition:1s;
    font-family:Playfair Display; /* Schriftart */
    font-weight: bold; /* Fett */
    font-size:16px; /* Schriftgrösse */
    padding-left:10px; /* Abstand links */
}
  #nav ul li {
    position:relative; /*relative Positionierung der
                        Listenpunkte, damit Unterpunkte
                        absolut positioniert werden können.*/
}








#inhaltmitte{
        color: #FF0000;
        margin-bottom: 20px;
      text-align: center;




}


#h{
    color: #FF0000;


}




#inhalt{
    margin-top: 20px;
    text-align: center;


    width: 850px;
    height: 100%;
    margin-left: 200px;
    padding-top: 0px;
    color: #FFFFFF;
    font-style: italic;
    font-family: monospace;
    background-color: #575757;
    border-radius:8px;
    border: 2px #0D97DC solid;


}




.span{
    color: #FF0000;
}


#liste{
    color: #CCCCCC;
    font-size: large;
    font-family: Verdana;
    font-style: italic;
}


#punkte{
    text-align: center;
      margin: 0 auto;
}


#sign{
   height: 100px;
   width: 100px;
   margin-top: -120px;
   margin-right: 50px;
}




#fusszeile{
    z-index: 1;
    text-align: center;
    color: #FF0000;
    background-color: #000000;
    border-radius:5px;
}

Alles anzeigen

hier ein link zu meiner seite:
http://www.rudi83.lima-city.de/

wie ihr seht habe ich auf der liinken seite einen schwarzen balken bzw hintergrund....den ich mit der kennzeichnungs id : links erstellt habe
und rechts davon habe ich ein bild mit den zombiehänden mit der kennzeichnungs id back

das problem ist das ich bei beiden eine height erstellt habe ich es aber lieber mit height 100% benutzen würde.
das leider aber nicht geht weil es keinen inhalt hat.

das in der mitte mit dem blauen border hat die kennzeichnungs id inhalt und das ist auf height 100%
und das dahinter ist mit kennzeichnungs id inhaltmitte

ich weiß mein code ist ein bisschen unübersichtlich aber bitte trotzdem um hilfe das ist meine erste seite.

rudi83

hallo

kennt sich jemand mit dem free software webocton aus???

ich habe das problem das ich eine schriftart hinzufügen will jedoch weiß ich nicht wie
ich habe es schon ganz normal auf windows installiert jedoch wird es nicht im programm angezeigt.

verzweifle schon ....wäre toll wenn sich jemand auskennen würde....thx

rudi83

Zitat von resteverwerter
das schnellste wäre:
Code
#nav ul ul {margin-left:-20px;}
im CSS-Code

Besser wäre es, Du würdest die ganze #nav ul normalisieren:
Code
#nav ul, #nav li {padding:0; margin:0;}
und dann alle Abstände selber festlegen.

danke für deine antwort die erste möglichkeit hat gleich super gefunkt danke jetzt passt das submenü gut hinein....

doch eins noch:

ich will den inhalt also das wo die zeilen über apokalypse steht weiter unten haben und die überschrift soll oben bleiben.#
ich hab das probiert über css mit h1 text-align:center usw doch es geht nicht.

und dann hab ich noch probiert oben beim header ein border-image für alle seiten zu erstellen mit
border-left-image: url (...dieUrl)

doch er tut es nicht.

dann hab ich einfach das bild so gross wie den ganzen header gemacht aber das ist ja auch nicht die lösung.

achso ja beim submenü habt ihr bemerkt das über dem ersten menüpunkt so ein komischer strich ist???weiß
jemand warum und wieso und wie ich den wegbekomme???

aber danke für eure tolle hilfe

rudi83

Danke für die antwort aber das hilft mir leider nicht

hier ein link zu der seite:
http://rudi83.lima-city.de/

und beim menüpunkt apokalypse sieht man dann das problem

rudi83

hallo

ich habe ein menü erstellt das aufklappt.jedoch wird das menü das aufklappt ist zu weit weg und ich schaffe es nicht weiter nach links zu schieben..
und nebenbei bei dem menü was aufklappt ist ein weisser strich der mich stört den bekomm ich auch nicht weg......bitte helft mir hier der code:
also beim letzten menüpunkt also apokalypse dort öffnet sich das zweite untermenü

html code:

HTML

<!DOCTYPE html>
<html>


<head>




    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">


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


         <title>Apokalypse</title>
        <!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->




</head>


<body>


      <div id="background">
      <div id="seitenformat">
       <div id="header" align="center"><img id="headerbild" src="images/header.jpg" alt="Startseite"  title="Apokalypse" /></div>




      <div id="nav">
      <ul>
      <li><a href="index.html"><span></span>Startseite</a></li>
      <li><a href="kontakt.html"><span></span>Kontakt</a></li>
      <li><a href="information.html"><span></span>Informationen</li>
       <li><a href="apokalypse.html"><span></span>Apokalypse</a>
       <ul>




      <li class="zombie"><a href="zombie.html">Zombieapokalypse</a></li>
      <li class="strom"><a href="strom.html">Stromkatastrophe</a></li>
      <li class="fallout"><a href="fallout.html">Atomkatastrophe</a></li>
      <li class="alien"><a href="alien.html">Angriffskatastrophe</a></li>
      </ul>
       </ul>
      </li>


      </div>


   </div>
  </div>


</body>
</html>

Alles anzeigen

css code:

Code

#headerbild{
       width: 1190px;
       height: 105px;
       border-radius:6px;
       margin-top: 5px;






}
#header{
    background-image: url(image/bg_list.gif) ;
    border-radius:5px;
    height: 110px;


}




#background{
    background-image: url(../images/zombie.jpg);
    border-radius:8px;




}


#seitenformat{
    width: 1200px;
    margin: 0 auto;


}


#nav{
    width: 170px;




}


#nav ul{
    list-style: none;
}




#nav li{


    width: 150px;
    text-align: left;
    font-family: fantasy;
    font-size: small;
    font-style: italic;
    background-image: url(image/bg_menu.gif);
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-bottom: 8px;
    margin-left: -40px;
    border-left: 25px orange solid;
    border-radius:8px;


}


   /*Span-Elemente*/
#nav span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#nav a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
  /* Links Submenu */
#nav ul ul li a {
color:#476EA8; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#nav ul ul li a:hover {
color:#153363; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background: #F0F4FA; /*Hintergrundfarbe */
}
 #nav ul ul li {
width:170px; /* Breite */
background:#DCE1E8; /*Hintergrundfarbe*/
border:1px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
}
/*Verhalten der Unterlisten bei Hover */
#nav ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#nav ul ul {
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:1px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
 /* Links Hoverzustand */
#nav a:hover {
    background: RGBA(255,255,255,0.05); /* Hintergrundfarbe */
    color:#fff; /* Schrifrfarbe */
    font-style: italic;  /* Kursiv */
}
#nav a {
    color:#f9f9f9; /* Schriftfarbe */
    display:block; /* Block-Anzeige, jedes Element neue Zeile */
    text-decoration:none; /*keine Unterstreichung*/
    transition:1s; /* Fliessende Bewegung */
    -moz-transition:1s;
    -webkit-transition:1s;
    -o-transition:1s;
    font-family:Playfair Display; /* Schriftart */
    font-weight: bold; /* Fett */
    font-size:16px; /* Schriftgrösse */
    padding-left:10px; /* Abstand links */
}
  #nav ul li {
    position:relative; /*relative Positionierung der
                        Listenpunkte, damit Unterpunkte
                        absolut positioniert werden können.*/
}

Alles anzeigen

bitte ich verzweifle.

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

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

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

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

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.

Beiträge von rudi83

bitte um hilfe habe problem mit positionierung

frage an erfahrene webdesigner

frage an erfahrene webdesigner

webocton frage schriftart

bitte um hilfe habe problem mit positionierung

bitte um hilfe habe problem mit positionierung

bitte um hilfe habe problem mit positionierung

erstellen einer seite als dokument

erstellen einer seite als dokument

erstellen einer seite als dokument

erstellen einer seite als dokument

erstellen einer seite als dokument