YourWBB


yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Bild am Ende » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag 7.009 Views | | Thema zu Favoriten hinzufügen
Seiten (2): [1] 2 nächste »
Neues Thema erstellen Antwort erstellen

Zum Ende der Seite springen Bild am Ende
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

 Bild am Ende Antworten Zitieren Editieren Melden       UP

Hallo,

dort wo Startseite/Home steht, wird ein kleines Bild ständig wiederholt, so dass es eben diesen blauben Hintergrund gibt.

Das habe ich folgendermaßen gemacht:
#rubrik { margin-top:10px; margin-right:170px; background-image: url(./images/rubrik.png); background-repeat: repeat-x;}

--> www.comuse.org

Nun habe ich ein abgerundetes Bild erstellt und möchte dieses ganz am Ende einfügen. Also dass das Ende der Rubrik abgerundet ist.

Nur wie kann ich es mit css so machen, das es funktioniert?

Danke für die Hilfe!

Dieser Beitrag wurde 3 mal editiert, zum letzten Mal von Comuse.org: 05.08.07 14:25.

05.08.07 14:24 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

Einfach ein div in div und im Inneren ein neues Hindergrundbild mit keiner Wiederholung und Position rechts.

CSS:

code:
1:
2:
#rubrikLink { width:100%; height:43px; background-image: url(./images/ende.png); background-repeat: no-repeat; background-position: right;}


HTML:

code:
1:
<div id="rubrik"><div id="rubrikLink">Startseite/Home</div></div>


Dateianhang:
png ende.png (1,04 KB, 146 mal heruntergeladen)
05.08.07 15:50 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

hi, danke, es klappt perfekt.
Ich werde es selber am Ende noch etwas orange machen.

Habe noch eine Frage: Wie bekomme ich das "Startseite/Home" genau in die Mitte .. jetzt ist es ja eher oben ...

Danke!
05.08.07 16:05 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

In der Art
05.08.07 16:14 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

hi, danke!

Das zeigt nur alles keine Wirkung: Als letzes habe ich dies probiert:
<p style="margin-top:25%; margin-bottom:25%;">Startseite/Home</p>
05.08.07 16:26 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

muss es aber:

code:
1:
2:
3:
#rubrik { margin-top:10px;  margin-right:170px; text-align:center; height:43px; background-image: url(./images/rubrik.png); background-repeat: repeat-x;}
#rubrikLink { width:100%; height:43px; background-image: url(./images/ende.png); background-repeat: no-repeat; background-position: right;}
05.08.07 16:36 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

hi, jetzt sieht es so aus:
www.comuse.org
05.08.07 16:40 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

entferne erstmal wieder das <p> </p>
05.08.07 17:10 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

ok, jetzt sieht es wieder normal aus:
http://comuse.org/
05.08.07 17:16 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

Wenn es noch in die vertikale Ausrichtung muss dann so:

code:
1:
#rubrik { margin-top:10px;  margin-right:170px; text-align:center; vertical-align:middle; height:43px; background-image: url(./images/rubrik.png); background-repeat: repeat-x;}
05.08.07 17:28 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

Danke!

Habe es mal in meine css Datei eingefügt:
Der Rubriktext ist nun allerdings immer noch nicht mittig:
http://comuse.org/
05.08.07 17:35 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

Jetzt weiss ich was du möchtest.

code:
1:
2:
3:
#rubrik { margin-top:16px; margin-right:170px; text-align:center; height:43px; background-image: url(./images/rubrik.png); background-repeat: repeat-x;}
#rubrikLink { font-size: 16px; margin-left:170px; height:43px; background-image: url(./images/ende.png); background-repeat: no-repeat; background-position: right;}


Da du die #rubrik 170pix von rechts einrückst, musst du um wieder in die Mitte zu kommen, die #rubrikLink von links um 170pix einrücken.
05.08.07 18:13 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

hi, nein, das meine ich auch nicht Augenzwinkern
Ich meine es so:
www.comuse.org/screen0.png
05.08.07 18:41 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

Da #rubrik 170pix und #inhalt 190pix von recht sitzt, ergibt sich eine Differenz von 20pix.

Und genau um die muss dann der Link dann nach recht verschonen werden.

Und zwar mit margin-left:-20px;

code:
1:
2:
#rubrikLink { font-size: 16px; margin-left:-20px; height:43px; background-image: url(./images/ende.png); background-repeat: no-repeat; background-position: right;}
05.08.07 19:18 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

Augenzwinkern danke, das war auch schonmal hilfreich, aber ich rede von dem Abstand zu oben und unten.
Also der Text "Startseite/Home" muss etwas nach unten, das er genau in der Mitte ist.
05.08.07 19:24 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

In dem Fall musst du „Startseite/Home“ nochmals einem Bereich zuweisen. Du kannst da <p> nehmen. Den kann man dann mit dem Innenabstand auf die Position bringen.

code:
1:
<div id="rubrik"><div id="rubrikLink"><p id="verweis">Startseite/Home</p></div></div>


code:
1:
#verweis {padding-top:10px;}

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von Schweinebacke: 05.08.07 20:16.

05.08.07 20:14 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

genau das meinte ich, danke! smile
06.08.07 12:58 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

Hallo,
wenn ich meine Seite mit dem Firefox-Browser aufrufen möchte, dann sieht alles ideal aus:
http://87.230.90.76/

Wenn ich aber nun den Internet Explorer 6 benutze, dann sieht man die Abrundung der Rubrik garnicht mehr. (Das Feld, wo "Startseite/Home" drin steht).

Was kann man da machen?

Den CSS Code findet man hier:
http://87.230.90.76/comuse.css

Vielen Dank!
09.02.08 22:40 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

Ich habe gerade kein IE 6 zum Testen. Das kann ich erst morgen wieder machen.

Ich gehe davon aus, dass er im div-#rubrik das div-#rubrikLink mit margin-left:-20px; nicht unterstützt.

Müsste so besser sein.

#rubrik als Gesamtbereich in dem zwei Bereiche sind. Erste das runde Bild, zweite der Link.

code:
1:
2:
3:
4:
5:
#rubrik { margin-top:10px; margin-left:170px; text-align:center; height:43px; background-image: url(./images/rubrik.png); background-repeat: repeat-x;}
#rubrikende  { height:43px; background-image: url(./images/ende.png); background-repeat: no-repeat; background-position: left;}
#rubrikLink { font-size: 16px; height:43px;}

<div id="rubrik"><div id="rubrikende"></div><div id="rubrikLink"><p id="mitte">Startseite/Home</p></div></div>
10.02.08 21:07 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Comuse.org
Mitglied


Dabei seit: 16.07.07
Beiträge: 51

Themenstarter Thema begonnen von Comuse.org
Antworten Zitieren Editieren Melden       UP

hi,
die Abrundung ist nun auch im IE6 zu sehen, danke!

Es gibt allerdings noch ein Problem:
Die Überschrift "Startseite/Home" ist nicht mehr in der "Box" drin, sondern schon im Inhaltsfeld.
http://87.230.90.76/
10.02.08 21:59 Comuse.org ist offline E-Mail Finden Als Freund hinzufügen
Seiten (2): [1] 2 nächste » Baumstruktur | Brettstruktur
Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Bild am Ende