Was ist neu?
Digital Marketing & Webmaster Forum

Digital Marketing, Internet-Technologien, Metaverse und mehr interessieren Dich? Registriere Dich gleich kostenlos, um Mitglied zu werden! Sobald Du angemeldet bist, kannst Du loslegen, Themen und Beiträge veröffentlichen und mit anderen Mitgliedern in Kontakt treten! Wir wünschen Dir einen anregenden Austausch!

HTML und CSS Hintergrund

RedEffecT

- Premium Member -
Hallo ,

Ich habe eine Frage die mich schon seit laaaaangem stört :confused:

Und zwar baue ich gerade eine Seite wo ich links und rechts einen fixen Hintergrund setzen möchte und der rest der Seite soll einen Hintergrund bis nach unten haben.

Das alles sollte sich nicht verschieben egal welche Bildschirmauflösung man besitzt.

Da ich kein HTML oder CSS Profi bin liegen hier nun meine Grenzen und mehr als das ich 3 Spalten aufgezogen hab ( was auch funktioniert hat ) hab ich nicht geschafft. Problem ist halt sobald ich die Auflösung auf 1024 runterschraube verschiebt sich BG LEFT und BG RIGHT.

Hab hier eine kleine Grafik gemacht damit man das problem etwas sieht da ich nicht sogut in erklären bin :D Link: http://www.abload.de/img/fragetu5s.jpg

Vielleicht könnte mir jemand nen rat oder sogar einen Code geben das wäre echt nett von euch...

Danke erstmals für eure mühen

Lg tom
 

NasT

- Premium Member -
Also ich würde BG1, BG2 und den Platzhalter für die Webseite als ein einzelnes Bild, zentriert hinter die Seite, per CSS als Background setzen.
 

RedEffecT

- Premium Member -
okay jetzt muss ich nur noch wissen wie das funktioniert gg

ich will nur nicht das die seite dann zulange ladet gg

lg tom
 

NasT

- Premium Member -
Ganz grundsätzlich kann man solche Dinge sehr leicht bei Google erfragen ;)
Such dir einfach mal CSS Anfängerkurse.

Du kannst das ganz einfach per CSS machen.
Könnte z.B. so aussehen.

"body {background: #000 url(images/bg.jpg) center top;}"

Einfach mal probieren und im Zweifelsfall Google befragen.
Ist ganz einfach.
 

RedEffecT

- Premium Member -
So einfach das klingt ich habe mich schon tot gesucht in google aber einfach einen hintergrund einfügen ist halt nicht mein problem ...

Ich kann nicht hergehen und in CSS ( einfach ) einen background einfügen das hätte ich auch geschafft :D

Ich möchte einen background über background legen und das geht anscheinend nur mit DIV Boxen und das nächste problem ist einfach ich verwende die Auflösung 1920 x 1080 und möchte das auch für die 1024 user schmackhaft machen ohne scrollen nach rechts...

Sobald ich aber einen 2 background erstelle hat der 700 kb und das ladet mir einfach zu lange für einen hintergrund.

Aber wenn ich eh alles bei google erfahren kann braucht ja keiner mehr ein Forum oder ?


lg tom
 

Nicole

- Premium Member -
Hallo Tom,
jeder hat mal angefangen. Und es ist auch nicht so, dass man nicht helfen möchte. ABER. Ich gehe nun von mir aus und ich habe mir alles, was ich heute an CSS kann einfach selbst beigebracht und Google war mein Lehrer und ist es immer noch.
Es sind wirklich die absoluten Grundlagen, die man sich natürlich erst mal erarbeiten muss.

Zu deinem Problem. Du willst unbedingt eine Grafik als HG haben. Dann wirst du auch damit leben müssen, dass die Seite etwas länger läd.
Ich nutze für solche Dinge den Photoshop, der es mir ermöglicht, eine Grafik für Web zu optimieren und sie soweit, wie möglich zu komprimieren.
Ich würde es wohl etwa so lösen:
Angefangen beim Body, da hinein kommt der gesamt HG
Dann kommt ein Div Kontainer (alles), der genau die Größe hat, die ich haben will, ich nutze derzeit generell 1050 Pixel breite und höhe = auto
Damit habe ich die Möglichkeit, in diesem Kontainer wiederum einen HG zu legen, dem ich sogar die genaue Position angeben kann.
Und dann kommt der Kontainer Mother, worin dann die Website liegt.

body
div ID= alles
...div ID = mother /div
/div

Nicole
 

blackmexx

- Premium Member -
Hi Tom, wie oben schon erwähnt, nehme das BG Images als Ganzes in den Hintergrund und leg denn Inhalt darüber. Um das Problem der immer gleichen Auflösung zu umgehen, muss man zwangsläufig auf Tabellen zurückgreifen.


HTML:
<div id="bg">
<div class="bg">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="bgimg"><img alt="background" src="images/hintergrund-1024.jpg" /></td>
</tr>
</table>
</div>
</div>

<div id="warpper">
<div id="page">
Der Ihnalt der Seite
</div>
</div>

Der warpper div ist dann quasi dein neuer Body
Das dazugehörige CSS

HTML:
html, body, #bg,#bg table,#bg td{
background:#222;
overflow:hidden;
margin:0 auto;
height:100%;
width:100%;
}
div.bg{
position:absolute;
height:200%;
width:200%;
top:-50%;
left:-50%;
}
#bg td{
vertical-align:middle;
text-align:center;
}
td.bgimg img{
min-height:50%;
min-width:50%;
margin:0 auto;
display:block;
}
#warpper{
background:none;
position:absolute;
font-size:62.5%;
overflow:auto;
height:100%;
width:100%;
top:0%;
left:0%;
}

#page{
margin:0px -404px;
position:relative;
width:808px;
z-index:100;
left:50%;
}
 

RedEffecT

- Premium Member -
hey

Danke für eure Hilfen aber ich glaube ich hab schon gefunden was ich wollte gg

Ich muss dazu sagen ich hatte Dreamweaver mit Div Boxen gelernt , baue meine Payseiten aber jetzt mit Frontpage und mit Tabellen ( weil es einfach schneller geht )

deswegen vergisst man so manches wieder in Dreamweaver hehe...

also ich denke meinen Code den ich brauche ist :


CSS:

Code:
}
.td_left_main {
    background-image: url("main/td_left_main.jpg");
    background-position: right top;
    background-repeat: no-repeat;
}
.td_right_main {
    background-image: url("main/td_right_main.jpg");
    background-position: left top;
    background-repeat: no-repeat;
}
.td_name {
    background-image: url("panel/td_name.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    color: #FF007A;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    height: 29px;
    width: 234px;

kann das stimmen ? xD

lg tom
 

Steve

- Premium Member -
Um das Problem der immer gleichen Auflösung zu umgehen, muss man zwangsläufig auf Tabellen zurückgreifen.

:eek::stupid:

Drei DIV-Container - der erste mittig positioniert mit fester Breite, der zweite mit seinem rechten Rand am linken Rand des ersten positioniert und der dritte mit seinem linken Rand am rechten Rand des ersten.

Oder aber man arbeitet (wenn man nicht mit gezielter Positionierung arbeuten will) mit gefloateten DIV-Containern.

Wesentlich flexibler als Tabellen, kleiner Code und deutlich moderner.
 

RedEffecT

- Premium Member -
hm

So ich muss jetzt mal was loswerden :p


Wenn man im Forum eine frage hat schicken sie einen gleich auf selfhtml um das ganze zu erlernen das man 1x im Jahr braucht und nachher sowieso wieder vergisst.

blos kein Wissen weitergeben .... nach dem Motto " lern es doch selbst "

Es mag sein das sich die Leute alles selbst beigebracht haben mit google und google finde ich auch wirklich top aber wenn man genau hinschaut sind die meisten antworten die man sucht wiederum in nem anderen Forum zu finden.

Das ist so wie wenn man zum Tischer geht und sagt : Entschuldigung ich hätte gern einen Tisch aber ich weiß nicht ob Eiche oder Buche besser ist und der sagt dann darauf... was das wissen Sie nicht gehen sie mal zur Baumschule erfinden Holz neu und dann dürfen sie sich wieder mit uns artikulieren :D

Ich bin auch nicht angefressen oder sonst was ich muss sowieso die ganze Zeit lachen denn in der Zeit wo ich diesen Beitrag schreibe hätte ich schon CSS Matura machen können :p

Also nicht so ernst nehmen ich sehe das alles mit humor hehe

viele liebe grüße
 

Steve

- Premium Member -
nach dem Motto " lern es doch selbst "

Wie ich dir in der Pn schon geschrieben habe, ist das der einzig sinnvolle Weg, den man gehen kann, wenn man Geld verdienen will.

Also hier auch nochmal: du hast für einen Klacks HTML/CSS, der normalerweise nicht mehr als 5 Minuten in Anspruch nehmen sollte, jetzt schon mehrere Stunden investiert. Und das nur, weil du offensichtlich nicht in der Lage bist, dir mit Hilfe von selfhtml & Co. (btw. die Seiten sind wirklich idiotensicher gemacht!) zumindest die Basics (und solch eine Konstrukt IST Basic) anzueignen.

Schlimmer noch: du versuchst andere die Arbeit machen zu lassen, die bei dir etwas Denkgrütze bedürfen würden.

Mal als gut gemeinter Rat: Wer immer nur auf Lösungen von anderen baut, wird ewig hinter anderen herlaufen.

In dem Biz kann das ganz schnell den Ruin bedeuten.

Denk mal drüber nach...
 

Nicole

- Premium Member -
blos kein Wissen weitergeben .... nach dem Motto " lern es doch selbst "

viele liebe grüße

Dazu sag ich erst mal nur: Falsche Erwartungshaltung.

Ich gehe, wie gesagt von mir aus und ich setze den Maßstab auch genau bei mir an.
Und wenn ich blondes Camgirl schaffe, mir Grundkenntnisse anzueignen, ohne eine Forengemeinde damit zu belästigen, dann erwarte ich das auch von jedem Anderen. Ich erwarte, dass er sich mit dem Thema erst beschäftigt.


AHHRGGG wie kann man von Dreamweaver auf Frontpage switchen?

Im Übrigen hab ich durch Dreamweaver das meiste über CSS gelernt.

Nicole
 

RedEffecT

- Premium Member -
Also sei mir nicht böse Nicole aber für was ist ein Forum und eine Ruprik CSS da? Sicher nicht das ich über andere dinge disukutiere die ich auch in einem Chat erledigen könnte. Aber tut mir leid das ich die Chatgemeinde so sehr mit meinen Fragen nerve.

Warum ich von Dreamweaver auf Frontpage geswitcht bin ? Ganz einfach weil man 5x schneller Payseiten mit Tabellen baut als das man 5 Stunden an Div Boxen und Klassen dran hängt.

Ich hab da gute Erfahrungen insbesondere im Bezug auf die google indexierung gemacht.

Aber mal das liebe google zu fragen : Ein Internetforum (lat. forum, Marktplatz), auch Diskussionsforum, ist ein virtueller Platz zum Austausch und Archivierung von Gedanken, Meinungen und Erfahrungen.

Da ihr eure Erfahrungen nicht preis geben möchtet hättet ihr auch nicht auf meine frage antworten brauchen wenn es euch soooo nervt ...aber bitte...

schreib eh schon nix mehr ich mach jetzt Karriere mit google ;)
 

Nicole

- Premium Member -
Das ist so wie wenn man zum Tischer geht und sagt : Entschuldigung ich hätte gern einen Tisch aber ich weiß nicht ob Eiche oder Buche besser ist und der sagt dann darauf... was das wissen Sie nicht gehen sie mal zur Baumschule erfinden Holz neu und dann dürfen sie sich wieder mit uns artikulieren :D

Der Tischler wird ihn nicht wegschicken, denn wenn er ihn gut berät dann verdient er Geld. Das ist hier der feine Unterschied.
 

Steve

- Premium Member -
Ganz einfach weil man 5x schneller Payseiten mit Tabellen baut als das man 5 Stunden an Div Boxen und Klassen dran hängt.

Wenn man richtig mit DW umgehen könnte, würde man merken, dass man gar keinen Quellcode zu sehen bekommen braucht.

Aber da sind wir wieder: man muss sich mit dem beschäftigen, womit man geld verdienen will.

Machs doch ganz einfach: schnapp dir den Photoshop, designe deine Seite rein als Grafik, lege Splices fest und speichere das Konstrukt als HTML. Das müsste dir doch liegen - da macht dann auch ein Profi deine Arbeit :)
 

RedEffecT

- Premium Member -
ich weiß eh das ihr alle Geldgeil denkt deswegen gebt ihr auch nichts preis...

Wissen = macht
macht = geld
und Forum is für Leute gemacht die ihre macht präsentieren können.
Hat einer eine frage ist er gleich der dumme. Hab das System eh schon verstanden...
 

Steve

- Premium Member -
Junge ... ich hab dir doch die Lösung auf dem Silbertablet präsentiert. Setz das doch erstmal um.

Und dann stell konkrete Fragen zu (d)einem Poblem.
 
Oben