Beiträge von Collectors-box

es hat mir aber als Anfängerin geholfen

kein Ding. Danke nochmals für die Hilfe.

Danke für den tollen Support. Für mich als Anfängerin ist das wirklich super. Schön das es so hilfsbereite Menschen gibt. Wenn du möchtest kann ich deine Webseite dann unter Partner auf unserer Verlinken

Zitat von Sempervivum

Hier kannst du eine Demo sehen:

http://ulrichbangert.de/div/we…s-box/collectors-box.html

Dort siehst Du auch, dass es kein Problem ist, einen formatfüllenden Verlauf mit einer Hintergrundgrafik zu erzeugen.

Habs jetzt !!!! Danke Danke für den klasse Tipp

Ich werde es jetzt mal Testen ob ich das hinbekomme Hatte die Tage leider keine Zeit. Das mit dem Verlauf der Hintergrundgrafik gefällt mir besser als eine einheitliche Farbe

Zitat von Sempervivum

Also mir erschließt sich ja nicht wirklich, was es bringen soll, so etwas einfaches mit :before bzw. : after zu machen. Erschwert unnötig das Verständnis und die Lesbarkeit. Probiere lieber den Weg, den ich beschrieben habe, so ist es wesentlich einfacher.

Muss ich dann nicht für jede seite extra in der css etwas erstellen?

Zitat von djheke

Hier mal ein einfaches Beispiel. Allerdings basiert es noch auf Floats. Flexbox wär natürlich viel besser.

Den Quelltext kannst du dir ja mal in Ruhe ansehen.

schau mal das ist meine style.css also ich weiss nicht genau wo ich das rein geben muss....ich kenne mich mit css wenig aus da ich eher im designmodus arbeite. wobei ich diese css datei mit hilfe eines turoials gemacht habe

Zitat

body {

background-color:#14110f;

margin:0px auto;

min-width:960px;

}

#header {

width:100%;

height:241px;

background:url(header_bg.png) repeat-x;

margin:0px auto;

text-align:center;

}

#menue_bg{

width:100%;

height:33px;

background:url(menue_bg.png);

}

#menue {

width:960px;

margin:0px auto;

text-align:center;

}

#menue a {

text-decoration:none;

}

.menue_button {

float:left;

width:160px;

heigt:33px;

background:url(menue_hover.png) no-repeat;

background-position: 0px 0px;

}

.menue_button p {

font-size:16px;

font-family:arial;

color:#666;

margin: 0px;

margin-top:8px;

}

.menue_button:hover {

background-position:0px -33px;

}

#webseite {

width:960px;

margin:0px auto;

text-align:center;

}

#infobox {

width:960px;

height:224px;

background:url(bg_infobox.png) repeat-x;

}

#info_left {

float:left;

width:475.5px;

height:224px;

}

##info_right {

float:left;

width:475.5px;

height:224px;

}

#info_middle {

float:left;

width:9px;

height:224px;

background:url(infoboxline.png)no-repeat;

}

#info_left_text {

float:left;

width:244.5px;

height:224px;

text-align:left;

}

#info_left_text h1 {

font-size:14px;

font-family:Verdana, Geneva, sans-serif;

font-weight:bold;

color:#000;

margin:0px;

margin-top:8px;

margin-left:10px;

}

#info_left_text p {

font-size:14px;

font-family:Vedana, Verdana, Geneva, sans-serif;

color:#000;

margin:0px;

margin-top:8px;

margin-left:10px;

}

#info_right_text {

float:left;

width:244.5px;

height:224px;

text-align:left;

margin-left:10px;

color: #000;

}

#info_right_text h1 {

font-size:14px;

font-family:Verdana, Geneva, sans-serif;

font-weight:bold;

color:#000;

margin:0px;

margin-top:8px;

margin-left:10px;

text-align: center;

}

#info_right_text p {

font-size:14px;

font-family:Vedana, Verdana, Geneva, sans-serif;

color:#000;

margin:0px;

margin-top:8px;

margin-right:10px;

text-align: center;

font-weight: bold;

}

#info_left_bild {

float:right;

width:176px;

height:224px;

background:url(grafik1.png) no-repeat;

}

#info_right_bild {

float:right;

width:176px;

height:224px;

background:url(grafik2.png) no-repeat;

}

#trennbalken {

width:960px;

height:14px;

background:url(bg_index_line.png) repeat-x;

clear:both;

}

#main {

float:left;

width:960px;

background:url(index_bg.png) repeat;

clear:both;

margin:0px;

}

#main_text {

width:720px;

float:left;

text-align:left;

font-size: 14px;

}

#main_text h1 {

font-size:20px;

font-family:Verdana, Geneva, sans-serif;

font-weight:bold;

color:#000;

margin:0px;

margin-top:15px;

margin-left:8px;

}

#main_text p {

font-size:16px;

font-family:Verdana, Geneva, sans-serif;

color:#100;

margin:0px;

margin-top:8px;

margin-left:8px;

margin-right:15px;

}

#main_text p.withe {

color:#e5d3ce;

}

#main_trenner {

float:left;

width:9px;

height:537px;

background:url(index_line.png) no-repeat;

}

#banner_right {

float:left;

width:219px;

height:700px;

background:url(banner_left.png) no-repeat;

}

#footer {

width:960px;

height:31px;

background:url(footline.png) repeat-x;

clear:both;

}

#footer_info {

float:left;

width:960px;

height:30px;

text-align: center;

}

#footer p{

color:#100;

font-family:Verdana, Geneva, sans-serif;

font-size:9.8px;

margin-left:110px;

}

Alles anzeigen

Zitat von Sempervivum

Das wird wesentlich einfacher, wenn Du keine Hintergrundgrafik verwendest, sondern einfach ein img-Tag:

Code

<div id="banner_right"><img src="banner_right_contact.jpg"></div>

so auf contact.html und entspr. auf impressum.hml:

Code

<div id="banner_right"><img src="banner_right_impressum.jpg"></div>

usw.

#banner_right {

float:left;

width:219px;

height:700px;

background:url(banner_left.png) no-repeat;

}

das steht in meiner css

ich verstehe nur Bahnhof

Also das mit der Grafik als div verstehe ich noch aber wo und wie trage ich das in das css rein ?

Und was sind Nachfahrselektoren Ich bin ein Neuling und das wird auch nur eine private Seite

...... ja das werde ich tun.....

nachdem ich ein css neuling bin .... ich habe keine ahnung wie ich das machen soll

Die grafik ist eine vom design geschnittene grafik.... wie soll das funktionieren ? es st eine allgemeine grafik im css

Ich habe jetzt eine einfache Hintergrundfarbe genommen. Jetzt hätte ich da noch eine Frage ,

Wenn man auf die Startseite kommt, hat man im Mainbereich eine Grafik auf der rechten Seite. Wie kann ich das einstellen / coden das auf jeder anderen Seite die geöffnet wird ( zb kontakt, news ect ) eine andere Grafik in der selben Größße erscheint ? LG und danke für den tollen support

Zitat von maulepan2

Da ist kein Pixel Abstand. Der untere dunkle Pixel ist Teil des Bildes.

Du solltest aber die Verwendung dieser Grafik so oder so noch einmal überdenken. Sie stört den Lesefluss bei längeren Texten.

wenn ich das mache dann muss ich ja alle grafiken im main bereich ändern ??

wie meinst du das ? In der Mitte die Grafik ? Ja das kann ich ausbessern.

Eine Frage habe ich noch

Und zwar jetzt habe ich ja den Hintergund wiederholt, aber jetzt habe ich jeweils einen Pixel Abstand zum nächsten bild, wie kann ich das machen das man das in einem durch gehend hat

Hier der Link : http://www.collectors-box.com/impressum.html

Klasse, danke vielmals

Ich habs , ich habe statt Repeat , Repeat - x ..... danke für den Tipp.

Kannst du mir wegen dem Speichern noch einen Tipp geben bezüglich der umlaute?

Was meinst du mit einem Fehler beim Speichern ? ich speichere es mit Dreamweaver ab ....

Das design ist so gesliced worden das in der Mitte wo der text ist sich das Bild nach unten wiederholt.

Daher verstehe ich nicht wo genau ich das einfügen muss.

Hallo, ich bin neu hier und hoffe ihr könnt mir helfen.

Ich habe mittels eines Tutorials eine Webseite gestaltet, nun die steht schon mal. Jetzt fehlen nur noch die Texte.

Jetzt hab ich mal probiert das impressum zu schreiben und was passiert : es zerreisst mir das design.

in dem tutorial sagte man das man im css folgendes stehen sollte :

Zitat

#main {

float:left;

width:960px;

background:url(index_bg.png) repeat-x;

clear:both;

margin:0px;

}

Alles anzeigen

so das habe ich auch gemacht. Jetzt stehe ich aber an, denn es passiert genau nichts. kann mir jemand weiterhelfen damit dieser Fehler nicht megr kommt? Also dass das Bild im Main nach unten wiederholt wird. Zudem werden die Umlaute nicht gezeigt...ist mir rätselhaft...

lg CollectorsBox

hier der Link : http://www.collectors-box.com/impressum.html