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

Hintergrundgrafik der Auflösung anpassen !?!?

C

cobrastyle

Mitglied
Hallo liebe Community !

Ich habe ine Frage und ich denke das wird viele User Interessieren!

Wenn ich eine Homepage habe zb so wie ich jetzt www.bassimpulse.eu
wie ich es hinbekomme das ich die Hintergrundgrafik bzw die ganze HP
der Auflösung des Users Anpassen kann !

Bei mir ist das die heufigste Frage wenn ich eine HP Gestalte ....

Ich habe das Hintergundbild in den Maßen 1280x1024 Gestaltet !

Könnt ihr mir sagen wie der coda dafür ist .. den soll es ja geben

Danke
 
Werbung:
Also meines Wissens nach gibt es keine Möglichkeit die Auflösung anzupasse.
Wenn ein Hintergrundbild immer passen soll,nimm sogennante Pattern,dass sind kleine Quadrate die ein Muster/eine Farbe auf sich haben und sich immer wieder wiederholen.
Gib einfach mal in Google Pattern ein da wirst du dan viele Seiten finden die kostenlos solche Pattern zu verfügung stellen,oder du machst selbst welche.
LG Ossenturio
 
Werbung:
Ein Ansatz

Ein möglicher Ansatz ist, den Hintergrund als Bild zu definieren, und den Inhalt darüber zu positionieren. Ist aber leicht Kniffelig mit den Pixel (Bild) und Prozent (Browsergröße) Umrechnung.
HTML: 
<html><head>
<title>Bassimpulse</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
</head><body>
<div id="background">
  <img style="width: 100%; min-width: 1000px;" src="images/logo.jpg"/>
  <div id="page">
    <p>Hallo Welt</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
  </div>
</div>
</body></html>
Code: 
body{
  margin:0;
  padding:0;
  min-width:1000px;
}
#background {
  position:relative;
}

#page {
  position:absolute;
  top:0;
  left:20%;
  height:60.5%;
  overflow:auto;
  width:54%;
  margin:0px 0 0 0;
}
p {
 margin:0 0 1em 0;
}
 
stachelbeer schrieb:
Ein möglicher Ansatz ist, den Hintergrund als Bild zu definieren, und den Inhalt darüber zu positionieren. Ist aber leicht Kniffelig mit den Pixel (Bild) und Prozent (Browsergröße) Umrechnung.
HTML: 
<html><head>
<title>Bassimpulse</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
</head><body>
<div id="background">
  <img style="width: 100%; min-width: 1000px;" src="images/logo.jpg"/>
  <div id="page">
    <p>Hallo Welt</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
  </div>
</div>
</body></html>
Code: 
body{
  margin:0;
  padding:0;
  min-width:1000px;
}
#background {
  position:relative;
}
 
#page {
  position:absolute;
  top:0;
  left:20%;
  height:60.5%;
  overflow:auto;
  width:54%;
  margin:0px 0 0 0;
}
p {
 margin:0 0 1em 0;
}
Zum Vergrößern anklicken....


Ok habe deinen code angewand !!

Mal gucken obs geht ! ich habs jz auf 2 pcs versucht und es scheinnt zu klappen ! einmal mit auflösung 1280x1024 und einmal 1024x786

Könnt ihr mal gucken obs bei euch auch passt?

DANKE sowas hab ich schon lange gesucht ^^

Bassimpulse
 
Bei mir(Firefox) ist das Zentrum der Grafik leicht nach links gerutscht. Bildschirmauflösung: 1280*1024.
 
Werbung:
Man passt eine Webseite und auch Bestandteile einer Webseite nicht an Auflösungen sondern an Viewports an. In deinem Fall könnte ein Besucher deine Seite durchaus auch mit kleineren Browserfenstern in "krummen Größen" wie 1234*745 oder 956*300 angucken. Das würde dein Hintergrundbild übrigens dann ziemlich verzerren.
 
Hallo.

Bei mir ist das Hintergrundbild zu weit links und dein Menü rutscht nach rechts aus dem Bild raus. Sieht ziemlich unschön aus.

Meine Auflösung ist 1152*864. Du solltest wirklich nicht nach Auflösung optimieren.

Gruss
Elroy
 
Werbung:
Elroy schrieb:
Hallo.

Bei mir ist das Hintergrundbild zu weit links und dein Menü rutscht nach rechts aus dem Bild raus. Sieht ziemlich unschön aus.

Meine Auflösung ist 1152*864. Du solltest wirklich nicht nach Auflösung optimieren.

Gruss
Elroy
Zum Vergrößern anklicken....

hm ok aber wie gesagt wie soll ich es sonst machen? wie gros sollte den die hintergrundgrafik sein das sie bei 99% der user richtig angezeigt wird?
 
Das hier ist deine Hintergrundgrafik:
http://www.bassimpulse.eu/images/1280x1024.jpg

Fällt dir echt nichts auf?
Das kannst Du locker anpassen!

Zerschneide die Grafik in 2 Teile: eine für den mittleren Bereich, eine für den Bereich links und rechts davon. Die für den mittleren Bereich (den Contentbereich) setzt Du in ein zentriertes Blockelement als Hintergrund rein. Die für den Bereich links und rechts setzt Du als Hintergrund für den body. Und beide Hintergrundbilder dann mit "background-repeat: repeat-y;" wiederholen lassen.

Das würde dir viel Arbeit ersparen, würde dir viele großere Dateien auf deinem Webspace ersparen und auch noch Traffic sparen weil nicht jeder Besucher dieses riesen Bild laden müsste.

So wie Du es derzeit aufgebaut hast ist es schlicht falsch - und dem Besucher die Auflösungsauswahl unterzuschieben ist unprofessionell und unmodern, oder kennst Du das von anderen Seiten?
 
threadi schrieb:
Das hier ist deine Hintergrundgrafik:
http://www.bassimpulse.eu/images/1280x1024.jpg

Fällt dir echt nichts auf?
Das kannst Du locker anpassen!

Zerschneide die Grafik in 2 Teile: eine für den mittleren Bereich, eine für den Bereich links und rechts davon. Die für den mittleren Bereich (den Contentbereich) setzt Du in ein zentriertes Blockelement als Hintergrund rein. Die für den Bereich links und rechts setzt Du als Hintergrund für den body. Und beide Hintergrundbilder dann mit "background-repeat: repeat-y;" wiederholen lassen.

Das würde dir viel Arbeit ersparen, würde dir viele großere Dateien auf deinem Webspace ersparen und auch noch Traffic sparen weil nicht jeder Besucher dieses riesen Bild laden müsste.

So wie Du es derzeit aufgebaut hast ist es schlicht falsch - und dem Besucher die Auflösungsauswahl unterzuschieben ist unprofessionell und unmodern, oder kennst Du das von anderen Seiten?
Zum Vergrößern anklicken....

Hallo

Ja das stimmt es würde mir viel arbeit ersparen !

Bei mir klappt das allerdings nicht so ganz

ich habe es so gemacht

das graue das in der mitte ist habe ich extra gemacht und es heisst backgroundcenter.png

die beiden aussen die schwarzen heissen backgroundl.jpg

nun ins style.css



HTML: 
body {
background-image:url(backgroundcenter.png);
background-repeat: repeat-y;
background-position: center;

}




  table {
     margin: 1em auto;
     width: 50%;
     border-collapse: collapse;
  }

  td {
     border: 1px solid #000;
     padding: 0.5em;
  }

  
  .img#lr{
  position:right;
  background-repeat: repeat-y;
  }

und in der index.html
HTML: 
<img class="imglr" src="backgroundl.jpg" >


Es klappt aber nicht das graue in der mitte passt es wiederhohlt sich und ist mittig aber die beiden aussen die wiederholen sich nicht !

was mache ich falsch?kannst du mir den style.css code hier posten?also wie das aussehen soll ?

Danke
 
Werbung:
Du hast das Bild nicht als Hintergrundbild per CSS definiert sondern als einzelnes Bild - das kann natürlich nicht als Hintergrundbild wiederholt werden.
 
threadi schrieb:
Du hast das Bild nicht als Hintergrundbild per CSS definiert sondern als einzelnes Bild - das kann natürlich nicht als Hintergrundbild wiederholt werden.
Zum Vergrößern anklicken....

hmm das heisst?

HTML: 
<img src="blablabla" style= repeat="repeat-y" align="center">
und
HTML: 
  <img src="blablabla" style= repeat="repeat-y" align="left">
sry ich bin anfänger im HTML und ich mache grade meine erste page ^^ deswegen könntest du mir helfen bei diesem code? lerne gerne dazu :)
 
Werbung:
threadi schrieb:
Ein Hintergrundbild wird mit CSS gesetzt, nicht mit HTML:
SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder
Zum Vergrößern anklicken....

ahh ok schon klar ... sry hab mich verlesen dachte du hast geschreiben das ich es NICHT in Css setzen soll ^^

naja werde dennoch nicht schlau wie das genau aussehen soll..

etwa so?

HTML: 
body{
background-images: url(hintergrundcenter.png)
background-repeat: repeat-y;
background-position: center;
}

und

HTML: 
subimage{
background-image: url(hintergrundl.jpg)
background-repeat: repeat-y;
background-position: left;

und

HTML: 
subimage{
background-image: url(hintergrundl2.jpg)
background-repeat: repeat-y;
background-position: right;

und im index.html

HTML: 
<img class="subimage" src="hintergrundl.jpg">
<img class="subimage" src="hintergrundl2.jpg">
 
Dein CSS-Code ist schonmal richtig, zumindest die Eigenschaften selbst. Aber der Rest nicht. BITTE LIES DOCH NOCHMAL MEINEN BEITRAG OBEN DURCH. ;ugl
 
Werbung:
Vermutlich wirst Du doch für den zentrierten Content-Bereich ein Blockelement bereits verwenden. Minibeispiel:

Code: 
...<body>
<div id="wrapper">
zentriert Inhalt
</div>
</body>
</html>
 
threadi schrieb:
Vermutlich wirst Du doch für den zentrierten Content-Bereich ein Blockelement bereits verwenden. Minibeispiel:

Code: 
...<body>
<div id="wrapper">
zentriert Inhalt
</div>
</body>
</html>
Zum Vergrößern anklicken....



Ich habe es nach dieser Anleitung hier gemacht dennoch klappt es nicht !

schau auf bassimpulse.eu

Jetzt siehts so aus ! problem ist daran das die bilder nicht alles ausfüllen am rand ist es mir egal (währe dennoch gut wenn es ausgefülllt wir ist aber keine notwendigkeit ) aber OBEN ist auch noch was frei das allerdings sollte ausgefüllt werden !!

Ausschnitte CSS und Index.html

Style.css

HTML: 
body{
background-color:black;

}




* { /* Mit dem Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

/* DIV-Boxen */

div#wrapper {
width: 1100px;
margin: 0 auto; 
border: 1px solid #b8b8b8; 

}

div#leftCol {
float: left; 
width: 250px;
background: #e2e2e2;

}

div#rightCol {
float: right; 
width: 250px; 
background: #e2e2e2;

}

div#centerCol {
margin: 0 200px; 
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

div#wrapper {
width: 1100px;
margin: 0 auto;
border: 1px solid #b8b8b8;
background: url(backgroundcenter.png) repeat-y;
}

div#leftCol {
float: left;
width: 250px;

}

div#rightCol {
float: right;
width: 250px;
}


Index.html
HTML: 
<div id="wrapper" class="clearfix">
     <div id="leftCol"><img src="backgroundl.jpg"></div>
     <div id="rightCol" ><img src="backgroundl.jpg" "></div>
     <div id="centerCol"></div>
</div>

was muss ich ändern das die seite oben ausgefüllt wird??
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben