HTML Text soll an eine Bestimmte Stelle der Hintergrundgrafik...

[rocket81]

Hallo,
Ich arbeite gerade an einer Clanpage und bin (glaube ich) beim letzten "bug" angekommen den ich noch bearbeiten muss...

Ich habe folgende Hintergrundgrafik:

Jetzt soll der anzuzeigende Text (news) aber genau zwischen diesen Blauen linien erscheinen...
Ich habe es bis jetzt nur hinbekommen den text einfach so darzustellen, allerdings sind die überschriften dann mal auf und mal zwischen den linien.
Wie kann ich die Überschriften genau zwischen die lienen binden?
Danke

 

[Mr. Snoot]

Ist das Fließtext oder pro Zeile ein Wort bspw. als Listenaufzählung?

Für ersteres müsstest du mit line-height spielen, bis es passt. Evtl. geht das bei einer Liste auch, ansonsten sollte da padding helfen.

 

[Boron]

Ich kenne mich mit HTML und CSS herzlich wenig aus (kein Bedarf), aber ich denke das ist der falsche Ansatz.
Besser wäre es wohl auf die Linien in der Grafik zu verzichten und diese "dynamisch" nach jeder Textzeile einzufügen (so wie man mit reinem HTML ein <hr> machen würde). Auf der ComputerBase Hauptseite sieht man die flachen hellgrauen Balken zwischen den Artikeln.
Ich habe mir den CSS Code jetzt nicht angeschaut, aber das verstehst du sicher besser als ich .

 

[rocket81]

Also Pro Zeile wird die Überschrift eines Newsbeitrages angezeigt...

Hier könnt ihr gucken wie es momentan aussieht:

http://bitworld-gaming.de

thx

 

[QXARE]

Wie Mr. Snoot schon sagt sollte es mit "padding" klappen. Weil du ja Tabellen verwendest *grausig* kannst du den einzelnen Zeilen eine Höhe "height" verpassen sodass die Abstände immer gleich sind.

 

[rocket81]

thx, habs hinbekommen

 

[Mr. Snoot]

Rechts bei den Wars scheints noch nicht ganz zu stimmen (IE8), aber sieht gut aus

 

[rocket81]

Danke

Bei wars muss ich mich morgen nochmal genau gucken ...

Danke nochmal für eure Hilfe.
Gruß
Felix

 

[PW-toXic]

Die Lesbarkeit der Navbar ist übrigends einmalig
Aber das wird ja vom gut strukturierten HTML code kompensiert.

 

[rocket81]

ok, page ist jetzt fertig
danke für eure Hilfe ... könnts euch gerne mal anschauen :

http://bitworld-gaming.de

 

[Mr. Snoot]

Kannst du die Wars nicht jeweils in eine Zeile schreiben? Platz sollte doch reichen, so ist es etwas eng.

Und generell würde ich eine größere Schriftart wählen. Vor allem bei der Navigation links wäre größerer Text angebracht. Aber auch sonst hast du doch genug Platz die Schrift auf 11 oder 12 Pixel zu erhöhen.

Ich frag mich wirklich, wieso so viele Seiten die Schriftgröße so runterschrauben. Platzmangel könnte man noch als Argument gelten lassen, aber davon bist du (im Moment) ja meilenweit entfernt

 

[rocket81]

achja stimmt, da wollt ich ja noch nach schauen...das muss ich gleich mal probieren...

schriftgröße find ich eig. i.o. so ^^ aber ich frag ma die andern clanmember was die dazu meinen

 

[Eagle-PsyX-]

@Felix
Gutes Design. Würde dir aber noch raten, einen Preload(er) einzubauen für die Buttons. Hab nur durch zufall gemerkt das die schön animiert sind.

<div style="display:none;position:absolute;top:-3000px">
<img src="..." alt=".." />
</div>

und fertig.

Hab ich hier so, oder so ähnlich angewandt, klappt ganz gut: http://live-photo.public-port.de/

PS: Habe gerade für einen Monat einen Laptop hier, weil ich 800km von Zuhause im Ausland bin, und mir fällt auf, dass die Seite leider gar nicht für 1024x768 ausgelegt ist :-( Gerade einige Gamer spielen doch z.B: CSS/CoD auf 800x600 mit niedrigster Einstellung um irgendwas besser tun zu können x-D

 

[volcem]

Ich würde auch die Schriftfarbe ändern, ich persönlich finde das echt schlimm dieses "braun" auf Schwarzen Hintergrund.

Hier würde sich ein leicht silber oder ein schlichtes Weiß besser lesen lassen.

 

[rocket81]

Was für ein "braun"..."grau" vllt...^^

 

[Eagle-PsyX-]

Er meint sicher, "BLAU"
PS: Wie siehts mit einem Preload aus?^^

 

[rocket81]

hmm, ich hab noch nicht danach geguckt
Ich finds so eig. ok...
Is mir den "Aufwand" nich wert

Aber mal was ganz anderes wie bekomme ich es hin, dass keiner mehr durch die verzeichnisse browsen kann?

 

[samotyr]

Ich finde du solltest dir nochmals durch den Kopf gehen lassen, was Boron bereits gesagt hat.

hr-Tags kann man auch mit css formatieren.

hr {
  margin: 0px; 
  padding: 0px; 
  width: 80%; 
  margin-left: 10%;
  border: 0;
  border-bottom: 1px solid #1a4371;
}

Wenn du Gradienteffekte nutzen willst, kann du auch Hintergrundbilder statt festen Farben benutzen. Ergebnis hab ich dir mal als Bild angehängt.

Das Ganze hat den Vorteil, dass du nicht auf Bildern rumschreibst, sondern direkt einen echte Trennung zwischen deinen Einträgen hast. Das ist nebenbei auch der Sinn des hr-Tags.

 

[rocket81]

Ja, da gibts nur ein kleines Problem...ich hab die .psd Dateien von der HIntergrundgrafik nicht und so bekomme ich die blauen striche da nicht weg :/

Also könnte ich entweder ne komplett neue grafik machen, was irgendwie wegfällt weil ich ein totaler ps noob bin ^^ oder ich kann mir die arbeit sparen und es vorerst so lassen

 

[volcem]

1Min Arbeit

Hmmm hier:


<hr> kannste auch per css eine Farbe zuordnen

<hr class="hrcolor">

.hrcolor {
color:#blafarbe;
}