Suche im Forum:
Suchen


Autor Nachricht
Beitrag14.06.2010 um 11:17 (UTC)    
Titel: Text AUF dem Bild

Hey,

ich bin z.Z. dabei ein neues Design für meine HP zu machen.
Drei-??? hat mir da bereits was nettes gecodet. Allerdings möchte ich ihn ein bischen entlasten und auch selber was probieren.

Erstmal der Link zur Testseite: http://www.testseite-partyhuette.de.tl/home.htm

Nimmt bitte nur den, ansonsten ist die Page gesperrt Wink

Und zwar möchte ich auf dem pinken Bild wo "Latest News" steht drauf schreiben. Also rechts neben den Pfeilen die letzten News auflisten.
Dasselbe für die hellblaue Box mit dem letzten und nächsten Event. Ich habs bis jetzt mit einem Grafikprogramm gemacht, allerdings möchte ich es direkt im CSS Code beschriften.

Wichtig ist nur, dass der Text genau neben den Pfeilen steht bzw. auf den Linien. Könnte die aber in der Höhe ein wenig anpassen, damit es ganz genau wird, falls man die Höhe der einzelnen Zeilen nicht genau einstellen kann.

Wäre nett, wenn mir da jemand weiterhelfen kann.
______________
Beitrag14.06.2010 um 11:55 (UTC)    
Titel:

Du findest in deinem Code (Ich nehme stark an bei "Text über dem Design) die Zeile:
Code:
<div id="my_latest_news"></div>

Dort kannst du den Text einfügen den du anzeigen willst z.B:
Code:
<div id="my_latest_news">
Party am Samstag
Disconight Sonntag
etc.
</div>


Allerdings beinhaltet dein CSS Code noch keine Angaben wie ein Text in der Box dargestellt werden soll:
Code:
#my_latest_news {
background-image:url(http://img.webme.com/pic/d/dietestseitevonmir/party_latest_news.png);
background-position: right center;
background-repeat: no-repeat;
height: 174px;
width: 186px;
margin-right: 10px;
display: inline-block;
background-repeat: no-repeat;
}

Also müssen wir hier ein bisschen nachbessern:
Code:
#my_latest_news {
background-image:url(http://img.webme.com/pic/d/dietestseitevonmir/party_latest_news.png);
background-position: right center;
background-repeat: no-repeat;
height: 194px;
width: 201px;
margin-right: 10px;
display: inline-block;
background-repeat: no-repeat;
font-size: 11px;
color: #fff;
padding-top: 20px;
padding-left: 15px;
}

Mit den letzten beiden Befehlen "padding" (der Innenabstand des Textes) musst du einfach ein bisschen spielen damit es passt (Ich habs jetzt mal Pi mal Daumen berechnet).
Bedenke aber: Für jeden Pixel mehr Abstand musst du die Größe des Fenster entsprechend reduzieren. Du siehst in meinem Code, ich habe padding-top: 20px; angegeben und gleichzeitig height: 194px; (also den Ursprungswert um 20 reduziert).

Zu den Pfeilen:
Ich würde an deiner Stelle die Pfeile einfach seperat als Bilddatei speichern und mit in den Text stellen.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag14.06.2010 um 13:48 (UTC)    
Titel:

Ich werds gleich mal probieren...


Update:

wenn ich den code einsetze:

Zitat:
#my_latest_news {
background-image:url(http://img.webme.com/pic/d/dietestseitevonmir/party_latest_news.png);
background-position: right center;
background-repeat: no-repeat;
height: 194px;
width: 201px;
margin-right: 10px;
display: inline-block;
background-repeat: no-repeat;
font-size: 11px;
color: #fff;
padding-top: 20px;
padding-left: 15px;
}



Dann werde die beiden Boxen (pinke und die dunkle) untereinander angezeigt..
______________


Zuletzt bearbeitet von partyhuette-vreden am 14.06.2010, 15:05, insgesamt einmal bearbeitet
Beitrag14.06.2010 um 14:48 (UTC)    
Titel:

Hups mein Fehler:
Code:
#my_latest_news {
background-image:url(http://img.webme.com/pic/d/dietestseitevonmir/party_latest_news.png);
background-position: right center;
background-repeat: no-repeat;
height: 194px;
width: 186px;
margin-right: 10px;
display: inline-block;
background-repeat: no-repeat;
font-size: 11px;
color: #fff;
padding-top: 20px;
padding-left: 15px;
}

So sollte es gehen, ich hatte vergessen in meinem zweiten Code die Breite zu ändern.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag14.06.2010 um 14:53 (UTC)    
Titel:

Das klappt schonmal ganz gut.

Wie kann ich den Text linksbündig anzeigen? Einfach ganz normaler mit HTML?

Könntest du dasselbe nochmal für die blaue Box machen?
______________


Zuletzt bearbeitet von partyhuette-vreden am 14.06.2010, 15:57, insgesamt einmal bearbeitet
Beitrag14.06.2010 um 17:56 (UTC)    
Titel:

partyhuette-vreden hat Folgendes geschrieben:
Das klappt schonmal ganz gut.

Wie kann ich den Text linksbündig anzeigen? Einfach ganz normaler mit HTML?

Könntest du dasselbe nochmal für die blaue Box machen?


Mit der blauen Box läuft es genau wie mit der roten (mit dem Unterschied das die Blaue "my_latest_events" heißt). Einfach wieder zwischen <div id=""> und </div> den Text eintragen und im CSS Code die Styleanweisungen für den Text reinkopieren.

Warum der Text nicht sofort linksbündig ist kann ich dir grade aus dem Efef nicht sagen, standartmäßig sollte er das sein.

Ich tippe mal drauf, dass das Problem folgende Codezeile ist, da dies der einzige Code ist der mir nicht so ganzläufig ist in dem Codeabschnitt:
Code:
#my_latest_news {
display: inline-block;
}

Lösche die Zeile und schau mal was passiert. Falls das Design dann auseinander fallen sollte füge ihn wieder ein und schreiben noch folgendes dazu:
Code:
text-align: left;

______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag14.06.2010 um 18:11 (UTC)    
Titel:

badweb hat Folgendes geschrieben:
[quote="partyhuette-vreden"
füge ihn wieder ein und schreiben noch folgendes dazu:
Code:
text-align: left;



Mit dem
Code:
text-align: left;
klappts nun.


Allerdings gibt es beim "Text über dem design" keine Div für die "party last event".

Text über dem Design hat Folgendes geschrieben:
<div id="all_container">
<div id="my_header"></div>
<div id="my_nav">
<ul>
<li><a href="/Home.htm">Home</a></li>
<li><a href="/intern.htm">News</a></li>
<li><a href="/Home.htm">Events</a></li>
<li><a href="/Home.htm">Galerie</a></li>
<li><a href="/Home.htm">Intern</a></li>
<li><a href="/Home.htm">Gästebuch</a></li>
<li><a href="/Home.htm">Kontakt</a></li>
</ul>
</div>
<div id="my_welcome"></div>
<div id="my_left">
<div id="my_home_content">
<div id="my_latest_news"><br>Latest News:
<br>
<br>» WM Start 2010
<br>
<br>» Abtrennung des internen Bereichs
<br>
<br>» 2 neue Funktionen auf Partyhuette
<br>
<br>» Kleine Erneuerungen
<br>
<br>» Homepage Probleme
<br>
<br>
<br></div>
<div id="my_home_box"></div>
</div>
<div id="my_content">


Auszug aus dem CSS Code - #my_last_event

Zitat:
#my_last_event {
width: 165px;
height: 194px;
background-image:url(http://img.webme.com/pic/d/dietestseitevonmir/party_last_event.png);
background-repeat: no-repeat;
margin-bottom: 10px;
height: 194px;
width: 186px;
margin-right: 10px;
display: inline-block;
background-repeat: no-repeat;
font-size: 11px;
color: #fff;
padding-top: 20px;
padding-left: 15px;
}



Somit kann ich nicht - wie bei der Box "last news" den Text reinschreiben...
______________


Zuletzt bearbeitet von partyhuette-vreden am 14.06.2010, 19:18, insgesamt 3-mal bearbeitet
Beitrag17.06.2010 um 17:38 (UTC)    
Titel:

Jemand 'ne Lösung für mein beschriebenes Problem?
______________
Beitrag17.06.2010 um 18:05 (UTC)    
Titel:

partyhuette-vreden hat Folgendes geschrieben:
Jemand 'ne Lösung für mein beschriebenes Problem?


Oh, hatte nicht gesehn, dass du deinen Post editiert hast.

Wenn sich <div id="my_latest_events"> nicht bei "Text über dem Design" befindet, muss es sich im Umkehrschluss bei "Text unter dem Design" befinden.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag17.06.2010 um 18:17 (UTC)    
Titel:

Tatsächlich da ist es... hätte auch von allein drauf kommen können.

Habs jetzt erstmal mit Gimp so gemacht. Per Webeingabe ist es aber deutlich angenehmer.

Könntest du mir mal sagen wie ich aus meiner Navi nun noch eine Pulldown Navi mache?

Also, dass bei dem Button "Event" alle Events nach unten hin ausklappen?
Ist es möglich, dass ich dann noch Unter-Unterpunkte hinzufüge?
______________
Beitrag17.06.2010 um 20:12 (UTC)    
Titel:

http://www.homepage-baukasten.de/forum/viewtopic.php?t=101593
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de