רוטר - שאלה בסיסית על מיקום תמונות\טקסטים בדףHTML

יומן פעילות	לוח שנה	מבזקי חדשות	תקנון	RSS	כותרות	כותרות לפי תגובה	ניקוי קוקיז	IP	להורדת אפליקציה
eBay	AliExpress	GearBest	Amazon	Booking	Kiwi	SkyScanner	Trip Advisor

"שאלה בסיסית על מיקום תמונות\טקסטים בדףHTML"

גירסת הדפסה

קבוצות דיון בניית אתרים נושא #15576	מנהל סגן המנהל מפקח Winner צל"ש מומחה

אשכול מספר 15576

HeaveN
חבר מתאריך 10.6.05
1974 הודעות

18:24 03.02.10

שאלה בסיסית על מיקום תמונות\טקסטים בדףHTML

כתבתי מיקום לטקסט שזה CLICK HERE, עכשיו מצד אחד אני ממקם אותו בתוכנה Dreamweaver במקום שאני רוצה שיהיה ורואה אותו במקום שאני רוצה.
אני שומר את הקובץ, ונכנס לקובץ דרך Firefox ורואה את הטקסט CLICK HERE קצת במקום אחר, ולא בדיוק במקום ששמתי אותו.
מה הבעיה אצלי מה אני לא עושה נכון? תראו תמונות
זאת תמונה ראשונה מהקובץ HTML עצמו
http://rotter.name/User_files/nor/4b69a2b03e7cce98.jpg
וזאת תמונה שניה מקובץ עיצוב style.css
http://rotter.name/User_files/nor/4b69a2de3ee773c0.jpg
וזאת התמונה מהתוצאה הסופית כשאני נכנס לדפדפן לראות מה יצא תראו איפה הטקסט " CLICK HERE
http://rotter.name/User_files/nor/4b69a3363fc76a23.jpg

מה הטעות שלי? סליחה על השאלה אולי כל כך מפגרת ובסיסית אבל אני רק מתחיל

שתף

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

האשכול	מחבר	תאריך כתיבה	מספר
בדיוק אותה הבעיה אצלי ורציתי לפתוח אשכול, ב chrome	matrix 1	04.02.10 01:56	1
ככה לא מגדירים CSS חחח	Sylver	04.02.10 04:09	2
תיקון קטן	Sylver	04.02.10 04:28	4
מכתב	HeaveN	04.02.10 11:16	9
תעשה כמו שהסברתי	Sylver	04.02.10 11:27	10
מכתב	HeaveN	04.02.10 11:36	11
אוקיי לא הבנת עד הסוף..ככה התכוונתי	Sylver	04.02.10 11:43	12
.0	HeaveN	04.02.10 11:56	13
אממממ אני צריך לראות בעינים אבל בכל מקרה תעשה ככה	Sylver	04.02.10 11:59	14
מכתב	HeaveN	04.02.10 12:18	15
בוא למסנג'ר אני יסביר לך...	Sylver	04.02.10 12:20	16
אגב אם יש לך פיירפוקס תתקין FIREBUG זה יעשה לך חיים קלים	Sylver	04.02.10 04:12	3
אף פעם לא הבנתי למה צריך את התוסף הזה...	CaTz	04.02.10 10:39	5
זה נותן לך לערוך את זה בזמן אמת !!! זה כל הקטע!	Sylver	04.02.10 10:58	6
ב-fireworks אפשר לעשות div? css?	matrix 1	04.02.10 11:06	7
fireworks לא נועד לעריכת HTML או CSS או JS	Sylver	04.02.10 11:07	8

matrix 1
חבר מתאריך 2.8.02
489 הודעות

01:56 04.02.10

1. בדיוק אותה הבעיה אצלי ורציתי לפתוח אשכול, ב chrome
בתגובה להודעה מספר 0

הכל תקין אבל בדפדפנים אחרים כגון ie או ff התמונות חתוכובת ויש לבן בינהם. למה זה?

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

04:09 04.02.10

2. ככה לא מגדירים CSS חחח
בתגובה להודעה מספר 0

אתה לא יכול לרשום סתם איזה תגים שאתה רוצה. כדי למקם דברים באמצע אתה צריך לעשות דבר כזה:
אתה מגדיר במקום איפה שרשמת MIKUMTEXT אתה כותב DIV שזה תג HTML מוכר וידוע.
<div></div>
אחרי שהגדרת אתה מוסיף לו CLASS שאותו כבר הגדרת ב- CSS (מיקוםטקסט)
וזה זה יראה ככה
<div class="mikumtext"></div>
אחרי זה ב- CSS כדי שהדפדפן יידע שמדובר בקלאס אתה צריך להוסיף נקודה לפני מיקוםטקסט.
.mikumtext
רק שהנקודה באה לפני(!) השם של הקלאס.
אחרי שעשית את זה אתה צריך להגדיר את ה CSS הנכון ל DIV.
תמחק את כל מה ששמת (סתם הלכת וסיבכת ללא צורך).
הפרמטרים שאתה צריך להכניס הם:
margin:auto;
מה שזה עושה זה ממרכז את ה- DIV באמצע הדף.
אחרי שעשית את זה, אתה צריך להגדיר את גודל הדיב בפיקסלים, למעשה לפי גודל התמונה (אורך ורוחב) בעזרת HEIGHT ו WIDTH ב CSS.
אחרי שעשית את זה, אתה מגדיר את התמונה כרקע ל DIV. כמו שעשית ל BODY, כמובן תמחק את זה מהBODY כי כבר לא צריך את זה שם. מה גם שלא צריך להוסיף מרכאות למיקום של הקובץ, פשוט סוגריים השם של הקובץ וזהו.
אחרי שבנית DIV יהיה לך הרבה יותר קל לשחק עם המיקום של הקישור בתוך ה DIV, מאשר להזיז אותו ישירות בתוך BODY.
כדי לכוון את הטקסט למקום שלו אתה יכול לעשות דבר כזה.
מכיוון ששמת קישור בתוך תג H1, אתה יכול לקרוא לו ב CSS או בצורה הבאה

.mikumtext h1
בצורה הזאת אתה למעשה מתייחס לכל H1 שיהיה בתוך הדיב.
אם אתה רוצה להתייחס ספציפית לH1 הזה אז אתה צריך להוסיף לו או ID או קלאס ולהגדיר אותם באופן פרטני ב CSS.
בכל מקרה, אחרי שהגדרת, אתה רוצה להזיז את הטקסט בתוך הדיב, נכון?
כדי לעשות את זה אתה יכול לשחק עם ה MARGIN של ה H1, כלומר עם הקצוות שלו. אז אתה מגדיר:

margin-left:
margin-right:
margin-top:
margin-bottom

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

04:28 04.02.10

4. תיקון קטן
בתגובה להודעה מספר 2

אל תשתמש בתג H1 כי הוא תג קצת בעייתי. במקום התג הזה תשתמש ב DIV נוסף ובמקום לשלוט על H1 תשנה את ה CSS ל:

.mikumtext div
ותוסיף פרמטר
display:inline-block

זהו, זה יעבוד לך פרפקט!

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

HeaveN
חבר מתאריך 10.6.05
1974 הודעות

11:16 04.02.10

9. מכתב
בתגובה להודעה מספר 2

הגתעי למצב הזה לפי ההבנה הקטנה שלי, זה קובץ CSS
http://rotter.name/User_files/nor/4b6a901f46ccace5.txt
וזה קובץ HTML

http://rotter.name/User_files/nor/4b6a903747025651.txt

עכשיו יצא לי מצב, שאת התמונה רקע אני יכול ידנית לזיז לאן שבא לי
והטקסט תקוע בתוכו מצד ימין שמאלה ואותו אני לא יכול לזוז ידנית
פספסתי פה משהו, איך אני יוצא מזה ? ותודה אחי על העזרה!

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

11:27 04.02.10

10. תעשה כמו שהסברתי
בתגובה להודעה מספר 9

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

HeaveN
חבר מתאריך 10.6.05
1974 הודעות

11:36 04.02.10

11. מכתב
בתגובה להודעה מספר 10

עשיתי את זה ככה קובץ HTML
http://rotter.name/User_files/nor/4b6a950c51788d4c.txt
קובץ CSS
http://rotter.name/User_files/nor/4b6a952551a60b1a.txt

וזה עדיין לא עובד, כשרואים דרך FIREFOX הטקסט בכלל זז למקום אחר

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

11:43 04.02.10

12. אוקיי לא הבנת עד הסוף..ככה התכוונתי
בתגובה להודעה מספר 11

body {background-color: #000;}
.mikumtext {background-image:url(x.jpg); width:500px; height:500px; margin:auto;}
.mikumtext div {display:inline-block; margin-top:50px; margin-left:50px;}

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

HeaveN
חבר מתאריך 10.6.05
1974 הודעות

11:56 04.02.10

13. .0
בתגובה להודעה מספר 12

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

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

11:59 04.02.10

14. אממממ אני צריך לראות בעינים אבל בכל מקרה תעשה ככה
בתגובה להודעה מספר 13

<html>
<head>
<title>My document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">

</style>
</head>
<body>
<div class="mikumtext">
<div><strong><a href="www.rotter.net">HEAVENZ</a></strong></div>
</div>
</body>
</html>

תכניס את זה במקום ה HTML שלך

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

HeaveN
חבר מתאריך 10.6.05
1974 הודעות

12:18 04.02.10

15. מכתב
בתגובה להודעה מספר 14

עשיתי אחי והנה עדיין התוצאות :
IE רואים ככה (כמו שצריך)
http://rotter.name/User_files/nor/4b6a9ed5676f7f97.jpg

והנה FF רואים מבולגן

http://rotter.name/User_files/nor/4b6a9ee46798da6f.jpg

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

12:20 04.02.10

16. בוא למסנג'ר אני יסביר לך...
בתגובה להודעה מספר 15

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

04:12 04.02.10

3. אגב אם יש לך פיירפוקס תתקין FIREBUG זה יעשה לך חיים קלים
בתגובה להודעה מספר 0

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

CaTz
חבר מתאריך 2.10.04
14537 הודעות

10:39 04.02.10

5. אף פעם לא הבנתי למה צריך את התוסף הזה...
בתגובה להודעה מספר 3

מה מיוחד בו? אז הוא מראה לך את הJS ואת הCSS אז מה...

מישהו יכול להסביר לי?

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

10:58 04.02.10

6. זה נותן לך לערוך את זה בזמן אמת !!! זה כל הקטע!
בתגובה להודעה מספר 5

זה נותן לך לערוך CSS בזמן אמת ואז אתה יכול לחסוך טונות של זמן!!! בקיצור חיים קלים!!

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

matrix 1
חבר מתאריך 2.8.02
489 הודעות

11:06 04.02.10

7. ב-fireworks אפשר לעשות div? css?
בתגובה להודעה מספר 6

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק

11:07 04.02.10

8. fireworks לא נועד לעריכת HTML או CSS או JS
בתגובה להודעה מספר 7

זה תוכנה גרפית שעוזרת לקצר תהליכים מפוטושופ.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד