Comuse.org
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!
Schweinebacke
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> |
|
Comuse.org
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!
Comuse.org
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>
Schweinebacke
entferne erstmal wieder das <p> </p>
Schweinebacke
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;} |
|
Comuse.org
Danke!
Habe es mal in meine css Datei eingefügt:
Der Rubriktext ist nun allerdings immer noch nicht mittig:
http://comuse.org/
Schweinebacke
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.
Schweinebacke
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;}
|
|
Comuse.org
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.
Schweinebacke
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;} |
|
Comuse.org
genau das meinte ich, danke!
Comuse.org
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!
Schweinebacke
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> |
|
Comuse.org
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/