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

[ishai]

יש לי אתר שאני בונה שאני צריך לשים בתוך ה<nav> שלו <ul> שבתוכו יש תמונה ועליה אני רוצה לשים <h1> שבו יש <a> איך אני עושה את זה?
מעל ה<nav> יש <header> ככה שלכתוב "position: absolute" לא יעזור כל כך כי זה יכול לפגוע ב<header> וכמובן אני רוצה לשמור על רספונסיביות באתר...
מה אני יכול לעשות?

 

[Shia]

שים דוגמת קוד בcodepen.io כי ככה קשה מאוד לעזור.

 

[שירה בירה]

תנסה את הקוד הזה:

<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/

בהצלחה!!

 

[ishai]

שים דוגמת קוד בcodepen.io כי ככה קשה מאוד לעזור.

הנה הקישור:http://codepen.io/hilleltech/pen/pROJxe?editors=1100#0

תנסה את הקוד הזה:

<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/

בהצלחה!!

תודה, כבר ראיתי את זה, זה לא עזר...

 

[Nahum]

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

 

[Shia]

א. התגית center לא תקנית. אל תשתמש בה.

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

כדי לשים טקסט מעל תמונה הייתי מציע לשים את התמונה כתמונת רקע.

 

[Shia]

http://codepen.io/joshcoil/pen/EZeLWa

 

[ishai]

תגובות למה שאמרת:
א. תודה, שיניתי את הקוד והפכתי אותו לcss
ב. את כל מה שלמדתי, למדתי דרך האינטרנט בלי קורס אמיתי. אז ייחסית למי שלמד רק דרך המחשב, המצב שלי מעולה.
תודה על ההערה...

 

[ishai]

איך עכשיו?http://codepen.io/hilleltech/pen/pROJxe?editors=1100

 

[ishai]

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

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

 

[Shia]

תגובות למה שאמרת:
א. תודה, שיניתי את הקוד והפכתי אותו לcss
ב. את כל מה שלמדתי, למדתי דרך האינטרנט בלי קורס אמיתי. אז ייחסית למי שלמד רק דרך המחשב, המצב שלי מעולה.
תודה על ההערה...

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

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

כל הכבוד! עלה והצלח!

 

[Nahum]

יפה מאוד... כל הכבוד לו!
שימשיך ללמוד ולהתפתח, ואנחנו פה אם צריך

 

[הלל Blender]

הכתובת של האתר: ishaiart.comli.com

 

[הלל Blender]

אשמח לחו"ד