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

bgcolor in drei bereiche unterschiedlicher farbe gliedern?

J

jolly

Neues Mitglied
Hallo,
ich bin gerade auf euer forum gestoßen nachdem ich bei meiner ersten homepage ziemlich am verzeifeln bin.

mein problem kurzgefasst: ich habe mein layout zentriert, jedoch hängt das fertige layout in der mitte des Bildschirms lose herum. es ist dreifärbig, quasi wie die Deutschlandflagge und ich hätte gerne diese 3 streifen bis an den Seitenrand fortgesetzt.. nun hab ich mir gedacht ob das nicht mit einer dreiteilung des ganzen hintergrunds möglich ist. und wenn ja wie?

ich würd mich freuen wenn ihr mir helfen könntet. ich hab im internet nichts dazu gefunden. (vielleicht weil es nicht geht und man es anders machen muss?!)

mfg Jolly
 
Willkommen im Forum,

leider verstehe ich nicht genau, was du meinst. Du möchtest drei farbige Balken übereinander legen, sodass die gesamte Breite und Höhe des Viewport ausgefüllt ist?
 
Codebeispiel, genauere Erläuterung, Screenshot oder Link zur Seite bitte, weil nicht ganz klar ist, wie du es meinst. ;)
Sollen sich die Streifen horizontal oder vertikal wiederholen?
 
Guten Abend.

wie schon von kruschel..pel erwähnt, ohne vorschau auf deine Seite ist nicht viel zu machen. Aber hier mal ein "vorschlag"

Code: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head>

	<title>testseite</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
* { margin:0; padding:0; }
html { height:100.5%; font: 100.01%/1.4em arial, sans-serif; color: #000; background:#fff; }
body { font-size:1em; width:auto; height:auto; }

body,#content,#bg { height:10em; }

body { background:#ccc; }
#content { background:#666; }
#bg { background:#000; }

.c33l  { width:33%; float:left; }
</style>
	
</head><body>

	<div id="bg" class="c33l"></div>

	<div id="content" class="c33l">
		<!--
		content goes here
		-->
	</div>

</body></html>


Btw. Farbe = Design / Style = CSS = CSS-Unterforum.

Gruß
Loon3y
 
danke

Danke mermshaus :)
& danke für die schnellen antworten.
& @ kruschimappel, die streifen sollten horizontal sein.
danke loon3y, ich nehme an das würde auch horizontal funktionieren??

ohne Bilddarstellungis es e kaum erklärbar. also ich hab mal einen screenshot von der homepage gemacht und im anhang platziert.

ich würde gerne die dunkelgrauen Seitenflächen bis zu den Seitenrändern haben, sodass die weiße rechtecksfläche zentriert in der Mitte des Bildschirmes zu sehen ist und die dunkelgrauen SEienränder nahtlos an den Seitenrand anschließen.

hab aber das ganze layout so kompliziert mit tabellen und so gestaltet dass ich mich selbst nicht mehr auskenn und dachte es würde vielleicht statt einem eintönigen Hintergrund eine möglichkeit geben den Hintergrund so dreigeteilt anzupassen (Hellgrau, Dunkelgrau, Hellgrau (horizontal)), dass es mit dem Layout übereinstimmt. (siehe Anhang)

mit dem codebsp tu ich mir schwer. das layout besteht aus so vielen tabellen. kenn mich selbst kaum mehr aus.

ich wäre echt unglaublich dankbar wenn ihr mir weiterhelfen könntet. ich versuch das problem schon seit einer woche zu beheben.

mit freundlichen Grüßen, jolly

PS: homepage.jpg (original) -> homepage1.jpg (in paint bearbeitete Veranschaulichung meiner Erklärung ;) )
 

Anhänge

  • Homepage.jpg
    Homepage.jpg
    79,8 KB · Aufrufe: 9
  • Homepage1.jpg
    Homepage1.jpg
    78,9 KB · Aufrufe: 7
Für solch langen HTML Code empfiehlt sich die Foren internen HTML tags zu benutzen. Der zweite link in meiner Signatur wird dir weiter helfen. Bitte bearbeite deinen Post doch nochmal und mache mit den HTML tags deinen Code besser lesbar :) danke
 
In deinem Quellcode sind viele viele Fehler enthalten. Du verwendest keinen Doctype, deshalb geht z.B. der IE in den Quirks-Modus. Du verwendest <table> zum Auszeichnen deines Inhaltes. Sind das wirklich alles tabellarische Daten?. Du verwendest Inlinestyleangaben sowie Attribute, die eigentlich CSS-Bestandteil sein sollten.

Es wäre ratsam, wenn du dir vorher die Grundlagen von HTML aneignest.

Inhalt schreiben -> mit HTML auszeichnen -> ein Design mit einem Grafikprogramm entwerfen -> Design mit Hilfe von CSS einbinden -> fertig.


Gruß
Loon3y
 
mach doch einfach drei absolut positionierte balken... die haben alle die angabe width:100%; und sind von der höhe her angepasst!
Dann gibst du den drei balken einfach nur noch die positionen heißt top:0px; bottom:0px;. denn gibst du ihnen noch die höhe und die position (z-index)!

Das alles legst du an die oberste position im Body deines html codes!

FERTIG ^^
 
Flemli200 schrieb:
mach doch einfach drei absolut positionierte balken... die haben alle die angabe width:100%; und sind von der höhe her angepasst!
Dann gibst du den drei balken einfach nur noch die positionen heißt top:0px; bottom:0px;. denn gibst du ihnen noch die höhe und die position (z-index)!

Das alles legst du an die oberste position im Body deines html codes!

FERTIG ^^
Zum Vergrößern anklicken....

danke Flemli, aber leider legt sich der ganze Balken über mein ganzes layout drüber, obwohl ichs ganz oben positioniere. liegts am code?

<body bgcolor="#e2e2e2">

<div id="bgtop">&nbsp;</div>
<div id="balken">&nbsp;</div>
<div id="wrap">

#balken{
position:absolute;
top:227px;
width:100%;
height:375px;
background:#b9b9b9;
}


mfg jolly

PS: im firefox und IE wird der Balken in unterschiedlicher höhe angezeigt, liese sich das auch verhindern?

oder wäre es vielleicht sinnvoller das ganze layout als hintergrundbild zu verwenden?
 
Loon3y schrieb:
In deinem Quellcode sind viele viele Fehler enthalten. Du verwendest keinen Doctype, deshalb geht z.B. der IE in den Quirks-Modus. Du verwendest <table> zum Auszeichnen deines Inhaltes.
Zum Vergrößern anklicken....
ja, die Fehler sind mir bewusst, aber ich weiß nicht wie ich sie zu vermeiden habe. -> html grundkurs ich weiß ;)

Loon3y schrieb:
Sind das wirklich alles tabellarische Daten?[/I]. Du verwendest Inlinestyleangaben sowie Attribute, die eigentlich CSS-Bestandteil sein sollten.
Zum Vergrößern anklicken....

ich hab auch ein paar css scripte in der Seite drinnen, nur wollte ich den code ein wenig übersichtlicher machen und hab alles was nicht zum layout gehört hat rausgelöscht.

Loon3y schrieb:
Inhalt schreiben -> mit HTML auszeichnen -> ein Design mit einem Grafikprogramm entwerfen -> Design mit Hilfe von CSS einbinden -> fertig.
Zum Vergrößern anklicken....

hätt ich vieleicht von anfang an so machen sollen. jetzt sitz ich schon zu lange an der seite, dass ich die restlichen Änderungen noch mit html oder so schaffen will.. (steckt ja bis jetzt eine woche arbeit schon dahinter)

mfg
 
gib deinen codes mal den z-index!!
wenn du sie mit absolut oder iwie anders mit position auszeichnest, kannst du diesen verwenden!
Er gibt an in welcher lage der Website der Background liegen soll...

Dabei läuft es so, das desto höher die Zahl im z-index wird, desto "höher" liegt die ebene.

also... schreib mal in alle css abschnitte, die nichts mit dem background zu tun haben, aber trotzdem absolut positioniert sind oder sonst iwie eine "ebene" bilden:

z-index: 2;
Zum Vergrößern anklicken....

Und dann schreibst du zu dem css abschnitt in dem du deinen background definierst:

z-index: 1;
Zum Vergrößern anklicken....

Dann sollte sich dein problem lösen ^^
 
Flemli200 schrieb:
gib deinen codes mal den z-index!!
wenn du sie mit absolut oder iwie anders mit position auszeichnest, kannst du diesen verwenden!
Er gibt an in welcher lage der Website der Background liegen soll...

Dabei läuft es so, das desto höher die Zahl im z-index wird, desto "höher" liegt die ebene.

also... schreib mal in alle css abschnitte, die nichts mit dem background zu tun haben, aber trotzdem absolut positioniert sind oder sonst iwie eine "ebene" bilden:



Und dann schreibst du zu dem css abschnitt in dem du deinen background definierst:



Dann sollte sich dein problem lösen ^^
Zum Vergrößern anklicken....

Hey, danke für die antwort, war bis jetzt nicht zu hause und konnte nicht vorher an der seite "weiterbasteln"..
ich hab leider die seite mit html code geschrieben.. geht das trotzdem?

lg jolly
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben