Wenn es nur Schmuckgrafiken sind, würde ich es mit Nachfahrselektoren umsetzen.
Design verschiebt sich bei mehr Text
-
-
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 -
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
-
1. HTML so ändern, wie ich geschrieben habe. Bildadressen durch deine eigenen ersetzen.
2. CSS so ergänzen:
Code
Alles anzeigen#banner_right { float:left; width:219px; height:700px; /* background:url(banner_left.png) no-repeat; */ } #banner_right img { width: 100%; height: auto; }D. h. das Bild wird nicht durch CSS sondern durch HTML eingebunden.
-
-
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
ZitatAlles anzeigenbody {
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;
} -
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.
-
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?
-
Nein, Du brauchst nur nur eine einheitliche CSS-Datei für alle Seiten. Das Bild wird ja im HTML eingebunden, wie ich oben geschrieben habe:
ZitatDas wird wesentlich einfacher, wenn Du keine Hintergrundgrafik verwendest, sondern einfach ein img-Tag:
Code
so auf contact.html und entspr. auf impressum.hml:
Code
usw.
-
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.
-
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 -
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
-
Freut mich zu lesen. Einen einfachen Farbverlauf kannst Du auch ohne Grafik mit CSS erzeugen:
-
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
-
Danke für das Angebot, aber meine eigene Webseite ist leider nicht mehr so gut vorzeigbar. Weil die Besucher fehlten, habe ich sie kaum noch gepflegt und meine Fotos lieber bei Facebook gepostet.
-
Grafiken, die NICHT zum Inhalt gehören, werden mit background-image eingebunden. Das IMG-Element ist hier sachlich falsch und auch nicht einfacher zu handhaben.
Aber ist wohl egal.
-
Grafiken, die NICHT zum Inhalt gehören, werden mit background-image eingebunden. Das IMG-Element ist hier sachlich falsch und auch nicht einfacher zu handhaben.
Aber ist wohl egal.
Ja.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!