• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dickes Problem, andere Foren sind erfolglos.

Status
Für weitere Antworten geschlossen.
Dass sich das Hintergrundbild auch nach unten wiederholt kannst du mit CSS so machen:

Code:
element {
background-image: url ('hier-der-link');
background-repeat: repeat;
}
 
Werbung:
Danke hat geklappt^^
Nur eines Stimmt noch nicht.

Das Design sollte sich aber nicht KOmmplett wiederholen, sondern nur der Letzte Bereich. So wie du es gesagt hast wiederholt sich ja oben der Bannerstreifen auch mit.

Und schon hab ich wieder ein neues Problem!
Hoffetich Nerve ich euch nicht.

Die Navigation will einfach nicht neben den Text.
Jetzt hab ich die Navigation Richtig jetzt ist der Text weit Unten.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    <head>
    <title>Titel</title>
    <link rel="stylesheet" href="design.css" type="text/css" />
    <meta http-equiv="expires" content="0" />
    <meta name="robots" content="all" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Das Portal f&uuml;r Gamer, Webmaster, Computer FReaks     und Mehr." />
    <meta name="author" content="Daniel K." />
    <meta name="keywords" content="Games, Webmaster, Home-Anwender, Computer, Internet" />
    <meta name="generator" content="Webocton - Scriptly" />
    <meta http-equiv="content-language" content="de" />
    <meta http-equiv="cache-control" content="no-cache" />
    </head>


    <body>
      <div id="seite" />

       <div id="kopfbereich">
      <h1>
      Daniel`s Internet Porta
      </h1>
     </div>

  <div id="steuerung">
    <ul>
      <li><a href="index.htm">Home</a> </li>
      <li><a href="impressum.htm">Impressum</a></li>
      <li><a href="Disclaimer.htm">disclaimer</a></li>
      <li><a href="http://www.onlyfree.de/cgi-bin/viscacha/user/8728/book.cgi">Guestebuch
      </a></li>
      </ul>
  </div>

  <div id="inhalt">
     <h1>Willkommen</h1>
     <p>Ich freue mich sie hier, in meinem Internet Portal Willkommen zu hei&szlig;en.</p>
     Hier werden ihnen nicht nur Tipps und Infos vor die F&uuml;&szlig;e geklatscht,
     nein ihnen wird auch Erkl&auml;hrt um was es Dabei geht!
     In diesem Portal finden sie Infos zu verschiedenen Bereichen!
      <ul>
         <li>Games</li>
         <li>Webmaster</li>
         <li>Home-Anwender</li>
         <li>Internet</li>
         <li>Computer</li>
      </ul>

     <p id="abstand"> Na, noch nicht so Richtig &Uuml;berzeugt? <br /></p>
        <p>Sie wollen nicht Wissen wie sie ihren Computer fit halten?</p>
        <p>Wie sie am besten Viren und Trojaner abwehren?</p>
        <p>Oder, vieleicht suchen sie eine bestimmte Abk&uuml;rzung in der Chatsprache?</p>
        <p>Das und vieles mehr k&ouml;nnten sie auf den N&auml;chten Seiten Erfahren!</p>
  </div>

  <p id="fussbereich">
   Copyright 2008-2010 by Daniel Kreiter
  </p>


   </body>

</html>
css

Code:
body {
font : 100.01% Verdana, Arial, Helvetica, sans-serif;

}
* {
margin : 0;
padding : 0;

}
#seite {
width : 990px;
margin : 0 auto;

}
#kopfbereich {
padding : 20px;
}

#inhalt {
margin-right : 500px;
margin-top : 10px;
padding : 10px;
}
ul {
margin-left : 30px;
margin-top : 20px;
}
#abstand {
margin-left : 10px;
margin-top : 10px;
}

#steuerung {
margin-left : 810px;
margin-top : 40px;
padding : 40px;
}
#fussbereich {
clear : both;
padding : 20px;
}
body {
float:left;
background-image: url(Template.png);
background-repeat: repeat;
}
 
Zuletzt bearbeitet von einem Moderator:
Stichwort: float.
Die Navigation muss nach links gefloatet werden, der Inhaltsbereich nach rechts (oder umgekehrt).
 
Werbung:
Mhm ich weiß grad nicht wie ich es aders schreiben soll.
So?
<h1 id="kopfbereich">
<p id="fussbereich">
Ja. So wird aus dem Nichts eine Überschrift und ein Textabsatz. Fast alles ist besser, als ein <div>, das nichts weiter aussagt!

Ausgebesserter, Valider Html COde:
Was ist <p id="seite"></p>? Ein Textabsatz ohne Textinhalt? Da kann was nicht stimmen.

Wozu <div id="steuerung"> um die Navigation? Du gruppierst doch nichts, hast doch nur eine Liste. Warum nicht <ul id="steuerung">?

Die <h1>Willkommen</h1> würde ich in h2 umwandeln. h1, als Überschrift erster Ordnung, ist für mich der Titel der Site, das was Du oben als #kopfbereich ausgezeichnet hast. Dann können weitere Überschriften nur noch untergeordneter Ordnung sein.

Der Text "In diesem Portal finden sie Infos zu verschiedenen Bereichen!" ist nicht ausgezeichnet.

Im <p id="abstand"> Na, noch nicht so Richtig &Uuml;berzeugt? <br /></p> würde ich zum einen die ID anders wählen. Niemals Namen, die sich aufs Layout beziehen, sondern auf den Inhalt. Auch das ist Trennung von Inhalt und Layout. Besonders schlimm ists, wenn man ein Element "links" nennt. Was macht man dann, wenn man das irgendwann mal auf die rechte Seite packen will?
Außerdem ist das <br /> hier drin wohl eher unsinnig.
Die Tipps, die dann da kommen, könnte man auch als Liste auszeichnen, es ist schließlich auch eine Art Auflistung.

Ggruß,
-Efchen
 
Erstmal Danke für die Antworten^^
Hab diese Tage Leider einiges zu tun.
Werde mich mal mit dem Float schlau machen und den Code nach den Tipps
ausbessern, kann allerdings etwas dauern , 1-3 Tage.
Dan melde ich mich wieder und Poste das Ergebniss :>

So.
Ich Denke nun ist es Zeit dieses Projekt woran ich gearbeitet habe zu Löschen und mit meiner Wirklichen Website anzufangen.

Als erstes werde ich mir ein Schönes Design machen und dan Stück für Stück
den Inhalt, Texte und Html css.

Ich hoffe ich kann hier weiterhin Nachfragen.

Mein HTML Code Bisher:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    <head>
    <title>Titel</title>
    <link rel="stylesheet" href="design.css" type="text/css" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="Daniel K." />
    <meta name="keywords" content="Games, Webmaster, Home-Anwender, Computer, Internet" />
    <meta name="generator" content="Webocton - Scriptly" />

</head>


    <body>
      <h1 id="kopfbereich">
      Daniel`s Internet Portal
      </h1>

  <div id="steuerung">
    <ul>
      <li><a href="index.htm">Home</a> </li>
      <li><a href="impressum.htm">Impressum</a></li>
      <li><a href="Disclaimer.htm">disclaimer</a></li>
      <li><a href="http://www.onlyfree.de/cgi-bin/viscacha/user/8728/book.cgi">Guestebuch
      </a></li>
      </ul>
  </div>

  <div id="inhalt">
     <h2>Willkommen</h2>
     <p>Ich freue mich sie hier, in meinem Internet Portal Willkommen zu hei&szlig;en.</p>
     <p>Hier werden ihnen nicht nur Tipps und Infos vor die F&uuml;&szlig;e geklatscht,
     nein ihnen wird auch Erkl&auml;hrt um was es Dabei geht!
     In diesem Portal finden sie Infos zu verschiedenen Bereichen!</p>
      <ul>
         <li>Games</li>
         <li>Webmaster</li>
         <li>Home-Anwender</li>
         <li>Internet</li>
         <li>Computer</li>
      </ul>

     <p id="weiter"> Na, noch nicht so Richtig &Uuml;berzeugt? </p>
     <ul>
        <li>Sie wollen nicht Wissen wie sie ihren Computer fit halten?</li>
        <li>Wie sie am besten Viren und Trojaner abwehren?</li>
        <li>Oder, vieleicht suchen sie eine bestimmte Abk&uuml;rzung in der Chatsprachen</li>
        <li>Das und vieles mehr k&ouml;nnten sie auf den N&auml;chten Seiten Erfahren!</li>
     </ul>
     </div>



   </body>

</html>

Und CSS
Code:
body {
font : 100.01% Verdana, Arial, Helvetica, sans-serif;
}
* {
margin : 0;
padding : 0;
}

#kopfbereich {
padding : 20px;
}
#inhalt {
    float: left;
    width:40%;
    margin-left: 200px;
    margin-right: 5px;
    margin-top: 100px
}
ul {
margin-left : 30px;
margin-top : 20px;
}
#weiter {
margin-left : 10px;
margin-top : 10px;
}
#steuerung {
    float: right;
    width:13%;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 90px
}
body {
background-image: url(Template.png);
background-repeat: repeat;
}
Hi
Ich bins wieder.
sry für 3fach Post aber sonst lest es keiner mehr.
Neue Frage aufgetaucht;
Wie mache ich es das eine Linkliste von Links nach rechts anzeigt und nicht von oben nach unten?
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
"CSS Horizontales Menu" in Google eingeben :-)

Das geht, indem Du die einzelnen Listenelemente entweder floatest oder ihnen die Eigenschaft display:inline verpasst.
 
Sooooo^^
Bis jetzt sind keine Probleme mehr aufgetaucht die Google nicht lösen konnte ;)
Danke, habs jetzt so ziemlich hin bekommen.
In Geschäzt 2 Monaten wird meine Homepage Online gehen. Hier ein kleines Screenhot, wie meine Leistungen bis jetzt sind. Bin zwar noch anfänger aber finde es bis jetzt ganz Toll.
Den Text hab ich rausediert da die Website eigentlich erst beim release gezeigt werden soll.


http://img391.imageshack.us/img391/3638/screenshot001kopiefx0.jpg


 
Darf/Soll man da jetzt Kritik zu abgeben? (Dann wärs das falsche Forum, aber ich denke sowieso eher nicht).

Ansonsten herzlichen Glückwunsch zur ersten Homepage oder sowas, ist bestimmt ein tolles Gefühl (ich mein das ernst..)
 
Werbung:
Wollte einfach nur mal rausposaunen das meine erste Selbergeschriebe HP nun bald (in grob 2 Monaten) erscheinen wird und das ich fleißg dran arbeite und dazu Lerne.

Wenn die Website Online ist stell ich sie in das Richtige Forum für Kritik^^

Soo
Meine Homepage ist Fleißig in Arbeit. Zur probe habe ich das jetzt Schonmal auf Funpic Hochgeladen.
Vor vorne Weg:
Sie ist noch nicht fertig, bitte keine Kritik ausüben oder Rechtschreibfehler usw.
Allein vollgendes Problem beschäftigt mich seit einiger Zeit.

In internet Explorer 7 Wird alles Wunderbar Angezeigt. Im Firefox allerdings wird der Text UNTER der Navigation angezeigt anstatt daneben.
Bis auf einzelne Scripts von Anbietern für Newsletter ist der Komplette Code Valid.
Hier die CSS Datei:
Code:
body {
font-family :  Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
color:black;
}

body {
background-image: url(gedanke_und_erinnerung.png);
background-repeat: no-repeat;
}

body {  color:black; }
a:link { color:black; }
a:visited { color:#FF9900; }
a:active { color:blue; }




#navi {
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
 }

 #navi ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }

 #navi li {
   float:left;                 /* Anordnung links   */
   margin-left:15px;               /* Außenabstand oben */
   width:90px;                      /* Breite des Links  */

   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:290px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
 }


#steuerung {
  border-width: 10px;
  border-style: ridge;
  border-color: Yellow;
    float: left;
        clear:both;
    margin-left: 30px;
    margin-top: 10px;
    margin-right: 30px;

}

#inhalt {
   float: right;
        clear:both;
    margin-left: 0px;
    margin-right: 60px;
    margin-top: 0px

}
Und alles andere steht im Quellentext:

Daniel K Internet Portal
 
Zuletzt bearbeitet von einem Moderator:
Warum hast du in deiner CSS-Datei drei bodys?
Kannst du doch alles in einem schreiben ;-)
 
Ups gar nicht gemerkt :O
Habs geändert.

Zu meiner Frage, ich selber denke das ich mit den floats was falsch gemacht habe die haben mir einige Probleme Bereitet, vill. könnte das ja sein^^

Öhm... Push
Nur zur erinnerung die Frage ist auf der Vorletzten Seite.
Vieleicht sieht das nur niemand im moment xD
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Hurrrican, auch für dich gilt, dass Mehrfachpostings und pushen hier nicht erwünscht sind.

Bitte daran halten.
Danke.
 
Hurrican schrieb:
In internet Explorer 7 Wird alles Wunderbar Angezeigt.

Tatsächlich? ;)

IE 7 (eigentlich 8 Beta, aber 7 wird emuliert)




Ein kleiner Verbesserungsvorschlag:
In CSS kannst du vieles zusammenfassen, wie zum Beispiel:

Code:
body {
font-family :  Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
color:black;
}

[COLOR=Red]body {
  font:15px Verdana, Arial, Helvetica, sans-serif;
  color:black;
}[/COLOR]
Code:
body {
background-image: url(gedanke_und_erinnerung.png);
background-repeat: no-repeat;
}

[COLOR=Red]body {
  background:url(gedanke_und_erinnerung.png) no-repeat;
}[/COLOR]
Code:
#navi {
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
 }

[COLOR=Red]#navi {
  margin:10px 15px 10px 20px;
  text-align:left;
}[/COLOR]
Code:
#navi li {
   float:left;                 /* Anordnung links   */
   margin-left:15px;               /* Außenabstand oben */
   width:90px;                      /* Breite des Links  */
   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:290px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
 }

[COLOR=Red]#navi li {
  width:90px;
  float:left;
  margin:290px 0px 0px 15px;
  padding:8px;
  border-top:1px black solid;
  border-bottom:1px red solid;
  border-left:25px orange solid;
  border-right:2px blue solid;
  background:silver;
}[/COLOR]
Code:
#steuerung {
  border-width: 10px;
  border-style: ridge;
  border-color: Yellow;
    float: left;
        clear:both;
    margin-left: 30px;
    margin-top: 10px;
    margin-right: 30px;
}

[COLOR=Red]#steuerung {
  float:left; /* kein clear:both;! */
  margin:10px 30px 0px 30px;
  border:10px ridge yellow;
}[/COLOR]
Code:
#inhalt {
   float: right;
        clear:both;
    margin-left: 0px;
    margin-right: 60px;
    margin-top: 0px
}

[COLOR=Red]#inhalt {
  float:left; /* kein float:right; und clear:both;! */
  margin-right:60px;
}[/COLOR]
Die Kommentare dienen der Behebung deines Problems. ;) Bin mir aber nicht 100%-ig sicher, ob es klappt (meine Navigation klappt zumindest so...). Natürlich kannst du diese "Abkürzungen" als Anfänger noch nicht wissen, aber schau mal in SelfHTML nach, dort steht oft "margin (allgemein)", "padding (allgemein)", "font (allgemein)", "background (allgemein)" und so weiter. :)
 
Habs so abgeändert, nun hängt die Navigation oben im Style Links.
Wie kann ich diese jetzt an die Richtige Stelle bringen?
Wenn ich bei #navi die Daten ändere schiebt sich deer text weit von der Navi weg...
 
Werbung:
Habs so abgeändert, nun hängt die Navigation oben im Style Links.
Wie kann ich diese jetzt an die Richtige Stelle bringen?
Wenn ich bei #navi die Daten ändere schiebt sich deer text weit von der Navi weg...
Bei größeren oder kleineren Viewports macht deine Website Probleme. Das liegt daran, dass du ein Bild (http://istudio.is.funpic.de/gedanke_und_erinnerung.png) als Layout & Design verwendest. Dadurch entstehen auch andere Probleme (vor allem beim Positionieren) und insgesamt wird es für dich schwieriger, den Überblick zu behalten.
 
ja aber wie sollte ich es dan besser machen? Ich Blicke da nicht ganz durch....
Wie sollte ich das Design anders machen? Ich bin ja Froh das es angezeigt wird ;O
 
Keine ahnung was die anderen haben aber egal :D.
Ich war (bin immer noch) bei oyla.

Ist eig nicht schlecht da aber mann ist begrenzt.

Für dein Endless design ist eine Sache von 1 sec. xD

Oyla hat ne support seite auch wenn das wenige wissen dort findest du in Schritten wie du deine Hp erstellst.

Hab so auch HTML gelernt was besserers giebts net.

Aber egal kommen wa zu deiner sache Endless design ::arrow:Oyla - Homepagehilfe

Und bei den 2en findest du die lösung auch hier ;-)
 
Werbung:
Na ja, besonders brauchbar ist der Oyla-Code nun wirklich nicht. Er erfüllt knapp seinen Zweck, das wars dann aber auch. :roll:
Ich rate davon ab. (Höchstens zum Einstieg ist er eventuell beschränkt brauchbar.)
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben