Beiträge von Dragon

Dragon · 6. April 2010

Neo Aramis wie bekomme ich meine Seite bei bplaced hochgeladen mit Filezilla bei den anderen ftps musste ich die Daten nur hochladen und die Seite wird angezeigt bei, bplace.net aber nicht fehlt mir da noch ne zusätzliche Datei oder ein Befehl in den HTML-Documenten?

Dragon · 5. April 2010

Funktioniert nicht das mit dem float in Inhalt die anderen sachen auch net

Code

#inhalt {
     float: right;
     color: #E1E1E1;
     font-family: Arial sans-serif;
     margin-left: 180px;
     margin-right: 180px;







}

Alles anzeigen

[Blockierte Grafik: http://www.imagebanana.com/img/zljwa158/thumb/63453.png]

Dragon · 5. April 2010

Hallo, mein Problem ist das sich die Überschrift (bzw. der ganze Inhalt) nach unten verschiebt je mehr Navigation ich in der Linken Spalte habe.
Zwischen Startseite und News z.B hin und her wechseln dann sieht man das Problem.

Hier meine Seite: <a class="postlink" href="http://vdragonsworld.de.vu/">http://vdragonsworld.de.vu/</a>

HTML

<!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>VDragons World</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="style.css" type="text/css"  rel="stylesheet"/>
    <link rel="shortcut icon" href="Bilder/favicon.ico" type="image/x-icon" />




</head>




<body>







<div id="wrapper">










<div id="kopf">
      <img src="Bilder/Header.png" border="" height="151" width="1000" alt="VDragons World" />




</div>
















<div id="trennbalken">




</div>













<div id="steuerung">




   <ul>
     <li class="n1"><a href="index.html">Startseite</a></li>
     <li class="n2"><a href="news.html">News</a></li>
     <li class="n3"><a href="artikel.html">Artikel</a></li>
     <li class="n4"><a href="downloads.html">Downloads</a></li>
     <li class="n5"><a href="videos.html">Videos</a></li>
     <li class="n6"><a href="pictures.html">Bilder</a></li>
     <li class="n7"><a href="sonstiges.html">Sonstiges</a></li>
   </ul>




</div>






















<div id="spaltelinks">




        <a href="releaseliste.html"><img src="Bilder/Releases.png" border="0px"alt="Ver&ouml;ffentlichungen" /></a>
        <a href="entstehung.html"><img src="Bilder/Entstehung.png" border="0px"alt="Entstehung" /></a>
</div>










<div id="spalterechts">




</div>










<div id="inhalt">
     <p><h1>Willkommen auf VDragons World</h1></p>
     <h2>--- Hier findet Ihr News, Bilder, Videos und vieles mehr rund um Games ---</h2><br />
     <p>Diese Seite befindet sich noch im Aufbau deshalb w&uuml;rde ich Euch um ein bisschen Geduld bitten.</p>
     <img class="i1" src="Bilder/baustelle.png" border="" height="350" width="400" alt="Im Aufbau" />













</div>







<div id="fuss">
          Copyright by S.Engstler
</div>




























</div>










</body>




</html>

Alles anzeigen

Code

* {
    margin: 0;
    padding: 0;
    font-family: Arial sans-serif;
}







body {
    background-position: center;
    background-image: url(Bilder/space13.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}




li {
    display:inline;
}




h1 {




    font-family: Arial sans-serif;
}
h2 {
    font-size: 18px;
    font-family: Arial sans-serif;
}




/*
#steuerung .n1 a:hover  {
   float: left;
   background-image: url(Bilder/Hover1.png);
   width: 143px;




}
*/




.i1 {
    padding-left: 120px;
}







#steuerung .n1 {




   padding-right: 5.5%;
   margin-left: 3.5%;




}




#steuerung .n2 {
   padding-left: 2.2%;







}




#steuerung .n3 {
   padding-left: 9%;




   }




#steuerung .n4 {
   padding-left: 6.8%;




}




#steuerung .n5 {
   padding-left: 6.7%;




   }




#steuerung .n6 {
   padding-left: 8.8%;




   }




#steuerung .n7 {
   padding-left: 7.8%;




   }




#steuerung a {




    line-height: 48px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: Arial, sans-serif;
}













#wrapper {
    background-image: url(Bilder/BG.png);
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}







#kopf {
   height: 151px;







}




#trennbalken {
     background-image: url(Bilder/TBalken.png);
     width: 1000px;
     height: 7px;







}




#steuerung {




     background-image: url(Bilder/Navio.png);
     width: 1000px;
     height: 48px;
     margin-top: -3px;




}










#spaltelinks {




     padding-top: 10px;
     padding-left: 4px;
     width: 148px;













}




#spaltelinks a  {




    width: 148px;
    height: 18px;




}







#spalterechts {
      width: 165px;
      float: right;




}










.f1 {
    text-align: center;
    table-layout: fixed;
}










.x1 {
    margin-top: 2px;
    margin-bottom: 2px;
}




#b1 {
    margin-bottom: 2px;
}




#inhalt h1 h2 {
    font-family: Arial sans-serif;
}




#inhalt {
     color: #E1E1E1;
     font-family: Arial sans-serif;
     margin-left: 180px;
     margin-right: 180px;




}







#inhalt .p1 {
      color: #B4B4B4;
      font-family: Arial sans-serif;
}




#inhalt .p2 {
      font-size: 12px;
      font-family: Arial sans-serif;
      text-align: left;
      padding-bottom: 2px;
}




#inhalt .p2 a {
      color: #B4B4B4;
      text-decoration: none;
      font-family: Arial sans-serif;




}




#inhalt li {
      font-size: 18px;
      font-family: Arial sans-serif;
}




.d {
    text-decoration: underline;
}




.c1 {
    margin-bottom: -2.5px;
}
#fuss {
      text-align: center;
      font-size: 13px;
      font-family: Arial sans-serif;
      color: #000000;
      background-image: url(Bilder/Fuss.png);
      width: 1000px;
      height: 22px;
      clear: both;
}

Alles anzeigen

Dragon · 3. April 2010

Irgendwie klappt das nicht.

Dragon · 2. April 2010

Wo sollte das clear hin?

Wenn ich es so mache wie im Code unten dann funktioniert es aber die Links verschieben sich dann (Startseite verschiebt sich nach links und der Rest nach rechts aber der Hover effekt funktioniert jetzt da wo er sein soll.
[Blockierte Grafik: http://www.imagebanana.com/img/zolqs4/thumb/32.png]

Code

li {
    display:inline;
}
















#steuerung .n1 a:hover  {
   float: left;
   background-image: url(Bilder/Hover1.png);
   width: 142px;




}

Alles anzeigen

Dragon · 2. April 2010

Wenn ich inline wegmache dann sind meine Links untereinander anstatt nebeneinander.

Ist aber immernoch der Textbereich der sich verändert

Geht das so vielleicht gar nicht mit CSS sondern mit Java oder sonst sowas.

Dragon · 2. April 2010

Zitat

Hi,

versuchs mal damit:

#steuerung li.n1 a:hover
{
background-image: url(Bilder/Hover1.png);
}

Alles anzeigen

Funktioniert leider nicht wird wieder nur der Bereich hinter der Schrift verändert. Hab auch schon die Höhe und Breite der Grafik mit reingeschrieben bleibt aber auch wider nur der Schriftbereich. :cry:

Dragon · 2. April 2010

Hi,
ich weollte einen Hovereffekt erstellen welcher logischerweiße nur auftreten soll wenn ich den Cursor über (siehe Bild) "Startseite", "Artikel", ... bewege.

[Blockierte Grafik: http://www.imagebanana.com/img/fjobfao/thumb/Unbenannt.png]

Die Navigation ist eine Grafik auch die Trennstriche gehören dazu nun hab ich die Grafik zerteilt so das ich nur den Navibereich von "Startseite", "Artikel" ... habe da sich ja nur der Bereich immer ändern soll.

Nur wenn ich das jetzt als "Hover" Befehl einfüge für die einzelnen Links wird nur der Bereich mit der Grafik belegt der die Schrift belegt aber er soll ja die ganze Höhe und Breite des Navigationsbereich des Links verändern und nicht nur der Schriftbereich (Siehe Bild unten).

[Blockierte Grafik: http://www.imagebanana.com/img/e29c406n/thumb/Unbenannt123.png]

HTML

<!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>VDragons World</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="style.css" type="text/css"  rel="stylesheet"/>
</head>




<body>







<div id="wrapper">










<div id="kopf">
      <img src="Bilder/Header.png" border="" height="151" width="1000" alt="VDragons World" />
</div>













<div id="trennbalken">




</div>













<div id="steuerung">




   <ul>
     <li class="n1"><a href="index.html">Startseite</a></li>
     <li class="n2"><a href="news.html">News</a></li>
     <li class="n3"><a href="artikel.html">Artikel</a></li>
     <li class="n4"><a href="downloads.html">Downloads</a></li>
     <li class="n5"><a href="videos.html">Videos</a></li>
     <li class="n6"><a href="bilder.html">Bilder</a></li>
     <li class="n7"><a href="forum.html">Forum</a></li>
   </ul>




</div>






















<div id="spaltelinks">
           Spalterlinks <br />
           dsafasd
</div>










<div id="spalterechts">
           Spaltelrechts
</div>










<div id="inhalt">
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />







</div>







<div id="fuss">
          Fuss
</div>




























</div>




</body>
</html>

Alles anzeigen

Code

* {
    margin: 0;
    padding: 0;
}







body {




    background-image: url(Bilder/space12.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}




li {
    display: inline;










}







.n1 :hover  {
          background-image: url(Bilder/Hover1.png);
}




#steuerung .n1 {




   padding-right: 40px;
   margin-left: 35px;




}




#steuerung .n2 {
   padding-left: 35px;




}




#steuerung .n3 {
   padding-left: 90px;




}




#steuerung .n4 {
   padding-left: 70px;




}




#steuerung .n5 {
   padding-left: 70px;




}




#steuerung .n6 {
   padding-left: 85px;




}




#steuerung .n7 {
   padding-left: 90px;




}




#steuerung a {




    line-height: 48px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: Arial, sans-serif;
}













#wrapper {
    background-image: url(Bilder/BG.png);
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}







#kopf {
   height: 151px;







}




#trennbalken {
     background-image: url(Bilder/TBalken.png);
     width: 1000px;
     height: 7px;







}




#steuerung {




     background-image: url(Bilder/Navio.png);
     width: 1000px;
     height: 48px;
     margin-top: -3px;




}










#spaltelinks {
     width: 165px;
     float: left;







}













#spalterechts {
      width: 165px;
      float: right;




}










#inhalt {




     margin-left: 180px;
     margin-right: 180px;




}







#fuss {
      background-image: url(Bilder/Fuss.png);
      width: 1000px;
      height: 22px;
      clear: both;
}

Alles anzeigen

So sieht es aus wenn ich denn "Hover" Befehl auf die Steuerung anwende.
[Blockierte Grafik: http://www.imagebanana.com/img/uhnxfi3z/thumb/Unbenannt1234.png]

So soll das aussehen, nur einzeln für die Links
(Bsp. Cursor über "Startseite")

[Blockierte Grafik: http://www.imagebanana.com/img/mns4sxx6/thumb/5.png]

Hoffentlich ist es verständlich

Dragon · 31. März 2010

Thx hat funktioniert
Hast du ICQ oder so falls ich noch mehr fragen habe?

Dragon · 31. März 2010

Funktioniert leider nicht habe ich auch schon versucht.
Er zentriert mir dann den Text in die mitte der Navigation nach rechts der Text soll aber nach unten in die mitte der Navigation

Dragon · 31. März 2010

Ich würde gerne wissen wie ich in der Navigation z.B den Link Startseite mittig von meiner Navi Grafik bekomme (margin-top,padding-top funzt nicht)

[Blockierte Grafik: http://www.imagebanana.com/img/7fd4c2xv/thumb/Unbenannt1.png]

HTML

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




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="style.css" type="text/css"  rel="stylesheet"/>
</head>




<body>







<div id="wrapper">










<div id="kopf">
      <img src="Bilder/Header.png" border="" height="151" width="1000" alt="VDragons World" />
</div>













<div id="trennbalken">




</div>













<div id="steuerung">




   <ul>
     <li class="n1"><a href="index.html">Startseite</a></li>
     <li><a href="news.html">News</a></li>
     <li><a href="artikel.html">Artikel</a></li>
     <li><a href="downloads.html">Downloads</a></li>
     <li><a href="videos.html">Videos</a></li>
     <li><a href="bilder.html">Bilder</a></li>
     <li><a href="forum.html">Forum</a></li>
   </ul>




</div>






















<div id="spaltelinks">
           Spalterlinks <br />
           dsafasd
</div>










<div id="spalterechts">
           Spaltelrechts
</div>










<div id="inhalt">
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />
         Inhalt<br />







</div>







<div id="fuss">
          Fuss
</div>




























</div>




</body>
</html>

Alles anzeigen

Code

* {
    margin: 0;
    padding: 0;
}







body {
    text-align: center;
    background-image: url(Bilder/space12.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}




li {
    display: inline;







}




#steuerung .n1 {




   padding-right: 40px;
   margin-left: 40px;




}




.n2 {




}




.n3 {




}




.n4 {




}




.n5 {




}




.n6 {




}




.n7 {




}




#steuerung a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: Arial sans-serif;
}













#wrapper {
    background-image: url(Bilder/BG.png);
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}







#kopf {
   height: 151px;







}




#trennbalken {
     background-image: url(Bilder/TBalken.png);
     width: 1000px;
     height: 7px;







}




#steuerung {
     background-image: url(Bilder/Navio.png);
     width: 1000px;
     height: 48px;
     margin-top: -3px;
}










#spaltelinks {
     width: 165px;
     float: left;







}













#spalterechts {
      width: 165px;
      float: right;




}










#inhalt {




     margin-left: 180px;
     margin-right: 180px;




}







#fuss {
      background-image: url(Bilder/Fuss.png);
      width: 1000px;
      height: 22px;
      clear: both;
}

Alles anzeigen

Dragon · 31. März 2010

Zitat

Hallo,

ist ganz einfach:

Code:
clear: both;

im #fuss angeben.

Alles anzeigen

Funktioniert
Danke

Dragon · 31. März 2010

Nächste Problem

Wie bekomme ich meinen Inhalt Mittig zwischen die Spalten ( Code von oben verwenden)

[Blockierte Grafik: http://www.imagebanana.com/img/ghd6vos/thumb/1234.png]

Der Schwarze Bereich ist der Fussbereich.

So hab das auch hinbekommen ( musste im HTML den Inhalts div nur verschieben und der Inhalt sitzt jetzt wunderbar zwischen den spalten nun ist aber der Fuss (im Bild der Schwarzebereich) noch nicht unter den 2 Spalten sondern rechts neben der linken und unter der rechten.
Das komische ist im IE wird richtig angezeigt, aber im Firefox hab ich eben das Problem.
bitte um Hilfe diesmal ab ich keine Lösung gefunden.

Dragon · 31. März 2010

Habs hinbekommen

Einfach die Höhe auch noch in CSS eingeben.

Code

#kopf {
   height: 151px;







}

Kann mir noch jemand sagen ob man das so machen kann oder ob das so lieber nicht machen sollte auch wenns funzt.

Dragon · 30. März 2010

Hallo,
wie bekomme ich den Abstand zwischen Header und Trennbalken weg/verringert? (Pfeil rechts im Bild)

[Blockierte Grafik: http://www.imagebanana.com/img/c0tr1j3a/thumb/123.png]

P.S
Der Header ist in Html da es zum Inhalt gehört (Logo)

Danke

HTML

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




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="style.css" type="text/css"  rel="stylesheet"/>
</head>




<body>
















<div id="kopf">
      <img src="Bilder/Header.png" border="0" height="151" width="1000" alt="" />
</div>




<div id="trennbalken">




</div>







<div id="wrapper">







<div id="steuerung">
         Steuerung
</div>










<div id="inhalt">
         Inhalt
</div>










<div id="spaltelinks">
           Spalterlinks
</div>










<div id="spalterechts">
           Spaltelrechts
</div>










<div id="fuss">
          Fuss
</div>






















</div>




</body>
</html>

Alles anzeigen

Code

* {
    margin: 0;
    padding: 0;
}







body {
    text-align: center;
}







#wrapper {
    background-color: #590505;
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}







#kopf {




}




#trennbalken {
     background-image: url(Bilder/TBalken.png);
     width: 1000px;
     height: 7px;




}




#steuerung {
     background-image: url(Bilder/Navio.png);
     width: 1000px;
     height: 48px;
}










#inhalt {
     background-color: #008000 ;
     margin-left: 170px;
     margin-right: 170px;
}










#spaltelinks {
     background-color:  #FF0000;
     width: 165px;
     float: left;
}













#spalterechts {
      background-color:  #0000FF;
      width: 165px;
      float: right;
}










#fuss {
      background-color:  #000000;
      width: 1000px;
}

Alles anzeigen

Beiträge von Dragon

Überschrift verschiebt sich

Überschrift verschiebt sich

Überschrift verschiebt sich

Hover Effekt

Hover Effekt

Hover Effekt

Hover Effekt

Hover Effekt

Navigationstext mittig stellen

Navigationstext mittig stellen

Navigationstext mittig stellen

Abstand entfernen

Abstand entfernen

Abstand entfernen

Abstand entfernen