Online-Zeit©
 168  1408  6.515  0
close× Call Us +49 (1805) 01 29 59
close×
  • Foren Themen: 3725
  • Foren Beiträge: 26383
  • Unbeantwortete Beiträge: 249
  • PHP-Fusion v7.02.07 - DE
  • PHP 8.2.27
  • Datum 07.05.2025 - Zeit Uhr

Thread Author: boss159
Thread ID: 999
Thread Info
Es gibt 7 Beiträge zu diesem Thema, und es wurde 2515 mal angesehen.
PHPFusion-SupportClub » Allgemein » HTML, CSS
 Thema drucken
CSS Problem
boss159
Top  #1 Beitrag drucken
Geschrieben am 18.04.2009 00000004 17:01
Moin Moin
Habe mich mal an CSS versucht und bekomme keinen Hintergrund mehr rein woran kann das liegen ?

Code



<html>

<head>

<title>Layout 1</title>

<style type="text/css">

  body {

    color: black; background-color: white;

    font-size: 100.01%;

    font-family: Helvetica,Arial,sans-serif;

    margin: 0; padding: 1em 0;

    text-align: center;

  }



  div#Seite {

    text-align: left;

    margin: 0 auto;

    width: 760px;

    padding: 0;

    background: #ffffe0 url(hintergrund.gif) repeat-y;

    border: 2px ridge silver;

  }



  h1 {

    font-size: 1.5em;

    margin: 0; padding: 0.3em;

    text-align: center;

    background: red url(logo.gif) no-repeat 100% 45%;

    border-bottom: 1px solid silver;

  }



  ul#Navigation {

    font-size: 0.83em;

    float: left; width: 200px;

    margin: 0 0 1.2em; padding: 0;

  }

  ul#Navigation li {

    list-style: none;

    margin: 0; padding: 0.5em;

  }

  ul#Navigation a {

    display: block;

    padding: 0.2em;

    font-weight: bold;

  }

  ul#Navigation a:link {

    color: black; background-color: gray;

  }

  ul#Navigation a:visited {

    color: #666; background-color: gray;

  }

  ul#Navigation a:hover {

    color: black; background-color: gray;

  }

  ul#Navigation a:active {

    color: white; background-color: gray;

  }



  div#Inhalt {

    margin: 0 0 1em 220px;

    padding: 0 1em;

  }

  * html div#Inhalt {

    height: 1em;

    margin-bottom: 0;

  }

  div#Inhalt h2 {

    font-size: 1.2em;

    margin: 0.2em 0;

    color: navy;

  }

  div#Inhalt p {

    font-size: 1em;

    margin: 1em 0;

  }



  p#Fusszeile {

    clear: both;

    font-size: 0.83em;

    margin: 0; padding: 0.1em;

    text-align: center;

    background-color: red;

    border-top: 1px solid silver;

  }

</style>

</head>

<body>



<div id="Seite1">

  <h1>CSS-1</h1>



  <ul id="Navigation">

    <li><a href="index.htm">Test</a></li>

    <li><a href="index.htm">Test</a></li>

    <li><a href="index.htm">Test</a></li>

    <li><a href="index.htm">Test</a></li>

  </ul>



  <div id="Inhalt">

    <h2>inhalt</h2>

    <p>test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test</p>

    <p>test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test</p>

    <p>test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test

       test test test test test test test test test test test test test test test test test</p>

  </div>



  <p id="Fusszeile">test</p>

</div>



</body>

</html>
 
Website
SC-Ad-Bot
Advertisement
 
Gr@n@dE
Top  #2 Beitrag drucken
Geschrieben am 18.04.2009 00000004 19:16
Stimmt der Pfad den zu den Bildern den?
Gruß Ralf
__________________________________
KEIN Support per Mail, ICQ oder PN !
 
Website
boss159
Top  #3 Beitrag drucken
Geschrieben am 18.04.2009 00000004 19:25
Moin Moin

Der Pfad zum Hintergrundbild ja
habe das bilder auf dem Desctop
hat auch super funktzioniert bis ich die farben und den text unten verendert habe ( im Menü )

Ps : die grösse stimt auch nicht mehr es soll 760px haben aber es geht über den ganzen bildschierm
Bearbeitet von boss159 am 18.04.2009 00000004 19:28
 
Website
Kevin
Top  #4 Beitrag drucken
Geschrieben am 10.06.2009 00000006 15:04
Hallo alle zusammen !

Weiss nich ob das hier hin gehört aber ich versuche es einfach.

Ich habe die folgende Seite erstellt:

http://carstensen.kilu.de/test.html

Die Seite ist schon relativ gut soweit. LEider muss man noch scrollen und die Seite ist nicht so mittig also das sie genau mittig ist.

Ich bin ein relativ neuer der gerade CSS lernt und daher wird wohl der ein oder andere Verbesserungs Vorschlag kommen.

DIe CSS ist hier zu finden

http://carstensen.kilu.de/style.css

Hier eine Skize wie es aussehen sollte... Praktisch das rumherum noch weiss is und die Seite mittig is und nich scrollbar sein muss zu mindest die wo wenig Text wäre.

http://carstensen.kilu.de/hh_hp(1).jpg

Es wäre Klasse wenn mir jemand dabei helfen kann das man am Rand noch ein wenig mehr weises sieht und auch nicht scrollen muss.

DIe blauen umrandungen sollten auch weg.

EDIT: Ja kein Problem hier der Screen
http://carstensen.kilu.de/screen.jpg

Hier mal der css Code

Code

body {

  background-color: #FFFFF;

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: center

  }

body {

  margin-top: 200px;

  margin-right: 380px;

  margin-bottom: 10px;

  margin-left: 380px;

}

h1 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 210px;

  left: 10px;

}

h2 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 290px;

  left: 10px;

}

h3 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 370px;

  left: 10px;

}

h4 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 490px;

  left: 10px;

}

h5 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 570px;

  left: 10px;

}

h6 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 100px;

  left: 280px;

}

h7 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 130px;

  left: 10px;

}

h8 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 40px;

  left: 390px;

}

h9 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 280px;

  left: 250px;

}

h10 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 670px;

  left: 10px;

}

h11 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 750px;

  left: 10px;

}

h12 {

  color: #FFFFFF;

  background-color: #FFFFFF;

  border-width: thick;

  border-style: dotted;

  border-color: white;

  position:absolute;

  top: 740px;

  left: 310px;

}


Hier der HTML Code

Code

<html>

  <head>

    <title>Helfer-Helfen Die Homepage gegen Armut in Deutschland - Home</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

  </head>

  <body>

    <h1><a href="index2.html"><img src="anmeldung.JPG" alt="Anmelden" /></a></h1>

    <h2><a href="index2.html"><img src="fotos.JPG" alt="Zu den Fotos" /></a></h2>

    <h3><a href="index2.html"><img src="unser-logo.JPG" alt="Zu den Fotos" /></a></h3>

    <h4><a href="index2.html"><img src="gaestebuch.JPG" alt="Zum Gästebuch" /></a></h4>

    <h5><a href="index2.html"><img src="impressum.JPG" alt="Zum Impressum" /></a></h5>

    <h6><a href="index2.html"><img src="zahlen.JPG" alt="Zu den Zahlen und Fakten" /></a></h6>

    <h7><a href="index2.html"><img src="tun-wir.JPG" alt="Das tun Wir !" /></a></h7>

    <h8><a href="index2.html"><img src="wir.JPG" alt="Das sind Wir !" /></a></h8>

    <h9><a href="index2.html"><img src="helfer-helfen-armut.JPG" alt="" /></a></h9>

    <h10><a href="index2.html"><img src="chat.JPG" alt="Zum Chat" /></a></h10>

    <h11><a href="index2.html"><img src="kontakte.JPG" alt="Zum Kontaktformular" /></a></h11>

    <h12><a href="index2.html"><img src="zur-aktion.JPG" alt="Zur aktuellen Aktion" /></a></h12>



<br><center>Du befindest dich auf der Helfer-Helfen Seite. Die Homepage gegen Armut in Deutschland.<br>Demnächst mehr.</p>

</body>

</html>



Also beim IE sieht das ganz anders aus da ist das total verschoben. Ich möchte Praktisch das die Seite in die Mitte eingezogen wird und dann an den Seiten es weiß ist. Hoffe ihr wisst was ich meine.

Und das blaue um die Buttons soll weg.

Villeicht kann mir jemand die CSS so umbauen damit das so ist wie ich das haben möchte. Darüber würde ich mich sehr freuen. ODER sagen was ich ändern muss und wo es hin soll.

ICH HOFFE JEMAND KANN MIR SO HELFEN WIE ICH ES GERNE HÄTTE


EDIT: Datalus ich wollte das die gesamte Seite mittig ist. Und an den Rand noch viel weiß ist also das die Seite eingezogen wird.

Das Problem mit dem Scrollen hat sich erledigt meine Auflösung war verstellt. ABER nun soll die gesamte Seite mittig sein und mit dem center im HTML Code klappt das nicht. Alles soll Mittig die Buttons usw.

Mit dem Code baue ich doch nur ein Bild ein oder ?

Freu mich auf eure Hilfe

LG Kevin
Bearbeitet von Kevin am 11.06.2009 00000006 14:43
 
Website
Blubba
Top  #5 Beitrag drucken
Geschrieben am 10.06.2009 00000006 15:07
Da ich keine blauen umrandungen sehe denk ich mal du meinst die Bilder. das geht mit border='0'.

Edit: Ein Scrollbalken hab ich auch nirgends. Kannst du mal ein Screen machen bei dir?

grüße
Chrissi
Bearbeitet von Blubba am 10.06.2009 00000006 15:09
 
Website
jan
Top  #6 Beitrag drucken
Geschrieben am 10.06.2009 00000006 19:53
also frage welche Auflösung benutzt du ?? Kevin
bei mir ist nähmlich auch nichts zum Scrollen :S

Code

<html>

  <head>

    <title>Helfer-Helfen Die Homepage gegen Armut in Deutschland - Home</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

  </head>

  <center><body>

    <h1><a href="index2.html"><img src="anmeldung.JPG" alt="Anmelden" /></a></h1>

    <h2><a href="index2.html"><img src="fotos.JPG" alt="Zu den Fotos" /></a></h2>

    <h3><a href="index2.html"><img src="unser-logo.JPG" alt="Zu den Fotos" /></a></h3>

    <h4><a href="index2.html"><img src="gaestebuch.JPG" alt="Zum Gästebuch" /></a></h4>

    <h5><a href="index2.html"><img src="impressum.JPG" alt="Zum Impressum" /></a></h5>

    <h6><a href="index2.html"><img src="zahlen.JPG" alt="Zu den Zahlen und Fakten" /></a></h6>

    <h7><a href="index2.html"><img src="tun-wir.JPG" alt="Das tun Wir !" /></a></h7>

    <h8><a href="index2.html"><img src="wir.JPG" alt="Das sind Wir !" /></a></h8>

    <h9><a href="index2.html"><img src="helfer-helfen-armut.JPG" alt="" /></a></h9>

    <h10><a href="index2.html"><img src="chat.JPG" alt="Zum Chat" /></a></h10>

    <h11><a href="index2.html"><img src="kontakte.JPG" alt="Zum Kontaktformular" /></a></h11>

    <h12><a href="index2.html"><img src="zur-aktion.JPG" alt="Zur aktuellen Aktion" /></a></h12>



<br><center>Du befindest dich auf der Helfer-Helfen Seite. Die Homepage gegen Armut in Deutschland.<br>Demnächst mehr.</p>

</body></center>

</html>


versuch mal denn Html code damit könnte es schon Mittig sein bin mir aber nicht sicher *stress*

LG Jan

edit : kann es sein das du am Laptop Arbeitest??
Bearbeitet von jan am 10.06.2009 00000006 19:54
 
Website
Datalus
Top  #7 Beitrag drucken
Geschrieben am 10.06.2009 00000006 19:54
füge unter body { folgendes ein:

body {

background : url('der pfad zu deinem bild/bildname.jpg') fixed;

Dieser Code zeigt dir dann ein HG Bild auf deiner hp an.

LG Micha
Bearbeitet von Datalus am 10.06.2009 00000006 19:54
.: Computer sind die intelligentesten Idioten, die es gibt :.
 
Website
Springe ins Forum:
PHPFusion DE NSS