איך לשים טקסט בתוך תמונה?

  • פותח הנושא ishai
  • פורסם בתאריך
  • הוסף לסימניות
  • #1
יש לי אתר שאני בונה שאני צריך לשים בתוך ה<nav> שלו <ul> שבתוכו יש תמונה ועליה אני רוצה לשים <h1> שבו יש <a> איך אני עושה את זה?
מעל ה<nav> יש <header> ככה שלכתוב "position: absolute" לא יעזור כל כך כי זה יכול לפגוע ב<header> וכמובן אני רוצה לשמור על רספונסיביות באתר...
מה אני יכול לעשות?:confused:
 
  • הוסף לסימניות
  • #2
שים דוגמת קוד בcodepen.io כי ככה קשה מאוד לעזור.
 
  • הוסף לסימניות
  • #3
תנסה את הקוד הזה:
קוד:
<div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
קוד:
.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

הabsolute - מתייחס רק אל הdiv שמעליו עם position: relative;

מקור:
https://css-tricks.com/text-blocks-over-image/

בהצלחה!!
 
  • הוסף לסימניות
  • #4
נכתב ע"י Shia;2429565:
שים דוגמת קוד בcodepen.io כי ככה קשה מאוד לעזור.
הנה הקישור:http://codepen.io/hilleltech/pen/pROJxe?editors=1100#0
נכתב ע"י שירה בירה;2429594:
תנסה את הקוד הזה:
קוד:
<div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
קוד:
.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

הabsolute - מתייחס רק אל הdiv שמעליו עם position: relative;

מקור:
https://css-tricks.com/text-blocks-over-image/

בהצלחה!!

תודה, כבר ראיתי את זה, זה לא עזר...
 
  • הוסף לסימניות
  • #5
הקוד שלך לא תקני: בתוך UL אתה אמור לשים LI. זאת אומרת שצריך להיות לך UL אחד עבור כל התפריט, כשכל פריט בתפריט הוא LI.
This user does not have permission to use the HTML BB code.
תתקן את זה ונמשיך הלאה...
 
  • הוסף לסימניות
  • #6
א. התגית center לא תקנית. אל תשתמש בה.

ב. ניכר שאתה לא יודע css, אתה פשוט צריך ללמוד css.

כדי לשים טקסט מעל תמונה הייתי מציע לשים את התמונה כתמונת רקע.
 
  • הוסף לסימניות
  • #8
תגובות למה שאמרת:
א. תודה, שיניתי את הקוד והפכתי אותו לcss
ב. את כל מה שלמדתי, למדתי דרך האינטרנט בלי קורס אמיתי. אז ייחסית למי שלמד רק דרך המחשב, המצב שלי מעולה.
תודה על ההערה...:)
 
  • הוסף לסימניות
  • #10
רק לשם ההבהרה (וגם קצת יותר הערכה..):
זה היה אחי הקטן, בן 13 כרגע, שלומד תכנות באופן עצמאי בינתיים...

הוא הסתדר בסוף, תודה :).
 
  • הוסף לסימניות
  • #11
נכתב ע"י ishai;2431498:
תגובות למה שאמרת:
א. תודה, שיניתי את הקוד והפכתי אותו לcss
ב. את כל מה שלמדתי, למדתי דרך האינטרנט בלי קורס אמיתי. אז ייחסית למי שלמד רק דרך המחשב, המצב שלי מעולה.
תודה על ההערה...:)

נכתב ע"י ishai;2431681:
רק לשם ההבהרה (וגם קצת יותר הערכה..):
זה היה אחי הקטן, בן 13 כרגע, שלומד תכנות באופן עצמאי בינתיים...

הוא הסתדר בסוף, תודה :).

כל הכבוד! עלה והצלח!
 
  • הוסף לסימניות
  • #12
יפה מאוד... כל הכבוד לו!
שימשיך ללמוד ולהתפתח, ואנחנו פה אם צריך :)
 

פרוגבוט

תוכן שיווקי
פרסומת

פוסטים חדשים שאולי לא קראת....

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!

לוח מודעות

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק כה

אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
נקרא  2  פעמים
למעלה