לוגו אתר Fresh          
 
 
  אפשרות תפריט  ראשי         אפשרות תפריט  מבזקים     אפשרות תפריט  צור קשר     חץ שמאלה ‎print ‎"Hello World!"; if‎ ‎not rules.‎know ‎then rules.‎read(); חץ ימינה  

לך אחורה   לובי הפורומים > מחשבים > תכנות ובניית אתרים
שמור לעצמך קישור לדף זה באתרי שמירת קישורים חברתיים
תגובה
 
כלי אשכול חפש באשכול זה



  #1  
ישן 21-05-2015, 18:07
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,265
מיקום input

יש לי אינפוט בתוך דיב ולידו סמל, זה נראה כך:
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה

מה שאני רוצה זה להעלות אותו טיפה למעלה, כדי שהוא יהיה ממורכז עם הסמל של החיפוש, כלומר באמצע שלו, ניסיתי עם margin ו padding לא הלך לי כך, זה הקוד שלי:
CSS
קוד:
#search { width: 90%; margin: 20px auto; background-color: #23507c; color: white; padding: 0 7px; } .search { background-color: #23507c; border: none; padding: 5px; outline: none; width: 86.85%; } .search::-webkit-input-placeholder { color: white; font-size: 18px; } .search:-moz-placeholder { color: white opacity: 1; font-size: 18px; } .search::-moz-placeholder { color: white opacity: 1; font-size: 18px; } .search:-ms-input-placeholder { color: white font-size: 18px; }

HTML:
קוד:
<div id="search"> <form action="search.php" method="POST"> <span class="glyphicon glyphicon-search" style="font-size: 20px;"></span> <input type="text" class="search" name="search" placeholder="search for diamonds" /> <button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span> Search</button></form> </div>


עריכה: פתרתי את זה עם position אבל אם יש למישהו פיתרון אחר אשמח לשמוע.
_____________________________________
[


נערך לאחרונה ע"י Nati323 בתאריך 21-05-2015 בשעה 18:12.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #8  
ישן 21-05-2015, 20:13
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,265
בתגובה להודעה מספר 7 שנכתבה על ידי MatiM שמתחילה ב "margin-bottom מרווח את האלמנט..."

לא ברור לי, כמו שאם הייתי רוצה להוריד את האלמנט למטה הייתי משתמש ב margin-top והתוצאה לא הייתה הרחבת ה div כלפי מעלה אלא דחיפה של האלמנט כלפי מטה, כך היה צריך להיות גם ב bottom, כאילו למה שזה ידחוף את הדיב ולא ידחוף את האלמנט?

בכל מקרה, הנה הקוד: https://jsfiddle.net/kL1m9a8x/1/ , התמונה משום מה לא מוצגת, אבל בכל מקרה קבעתי את זהלדוגמא ל -150Px ואתה יכול לראות שהוא עדיין צמוד למטה...

אגב עוד שאלה, אני רוצה למרכז אלמנט אנכית, כלומר שהוא יהיה באמצע האלמנט האב מבחינת הגובה, מה שעשיתי היה:
קוד:
top:auto; bottom:auto; margin: auto;

זה יעבוד בכל הדפדפנים בכל הגרסאות?
ואגב, עד איזה גירסא של IE צריך להתאים שבונים אתר? בכל שאר רוב הדברים פועלים ברוב הגירסאות..
_____________________________________
[

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #10  
ישן 21-05-2015, 21:33
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,265
בתגובה להודעה מספר 9 שנכתבה על ידי MatiM שמתחילה ב "תקרא שוב את התיאור שכתבתי...."

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

בכל מקרה תודה על הפיתרון.

מה לגבי שאלתי השנייה?

ויש לי עוד שאלה ברשותך, אני הגדרתי ל input רוחב באחוזים, כפי שראית בדוגמא של הקוד שלי, החלון שמציג את ה HTML קטן, אם אתה מרחיב אותו קצת עדיין הכפתור יורד שורה, למה זה ? הרי האחוזים אומרים עד כמה שאני מבין להיות 86 אחוז מרוחב אלמנט האב , וכיוון שהרוחב של החלון קטן, אז אלמנט האב פחות רחב, אז מן הסתם שהאחוזים של האינפוט אמורים לייצג פחות מקום, אז למה הדיב נשבר לשניים? חשבתי שאחוזים זה רספונסיבי, אם לא אשמח אם תסביר לי איך לעשות את זה רספונסיבי....
_____________________________________
[

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #11  
ישן 21-05-2015, 22:46
צלמית המשתמש של MatiM
  משתמש זכר MatiM MatiM אינו מחובר  
 
חבר מתאריך: 12.04.06
הודעות: 2,021
שלח הודעה דרך MSN אל MatiM
בתגובה להודעה מספר 10 שנכתבה על ידי Nati323 שמתחילה ב "תראה, אני מבין את מה שאתה..."

1.
ה margin נמצא מחוץ לאלמנט.
http://www.w3.org/TR/CSS2/box.html#box-margin-area
תסתכל על התמונה ותראה את הקו של המסגרת (border). ככל שאתה מגדיל את ה margin נוצר יותר רווח בין האלמנט למה שסביבו (כלפי חוץ).

2.
יש כל מיני דרכים למקם אלמנטים במרכז, זה תלוי במה שרוצים לעשות.
לגבי תאימות, אני לא יודע להגיד לך על כל דפדפן. צריך לבדוק ולראות איפה כל דבר עובד ואיפה לא.
השיטה שאני אישית הכי אוהב:
קוד:
div { display: block; height: 200px; position: absolute; top: 50%; margin-top: -100px; /* half of height */ }


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

3.
אומנם הגדרת רוחב באחוזים לאינפוט, אבל אני לא רואה שהגדרת משהו כזה לכפתור ולכן הוא נשאר בגודל קבוע ולכן הוא לא "מתאים את עצמו" לרוחב של העמוד.
_____________________________________
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #12  
ישן 21-05-2015, 23:09
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,265
בתגובה להודעה מספר 11 שנכתבה על ידי MatiM שמתחילה ב "1. ה margin נמצא [b]מחוץ..."

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

2) סבבה אני אשתמש בשיטה שלך, היא מתאימה לכל הדפדפנים וגם גירסאות קודמות כן?

כן אבל לפעמים אתה רוצה להשתמש בדברים מיוחדים, השאלה היא אם חוששים ל IE6-7 או 8 , מן הסתם כשאתה בונה אתר לציבור הרחב אתה מתכוון שכולם יגלשו בו כמו שצריך, אבל אולי זה מיעוט שאינו מצוי...
הרי אם ננסה להתאים את הכל לכל הדפדפנים, לא יהיה אפשר להשתמש ב CSS3 ב5 שנים הקרובות....

3) גאוני , רק שאלה, קודם כל אם אני מגדיר את הכפתור באחוזים ויצא במסך קטן שהוא יותר קטן, אז הטקסט שנמצא בו נחתך, איך אני יכול לקבוע בצורה רספונסיבית מה יהיה גודל הפונט של הכפתור שיכניס את עצמו לרוחב של הכפתור הנוכחי?
ב) הסמל של הזכוכית מגדלת שראית בתמונה זו לא תמונה, זה גליפקרון של בוט סטראפ, ובקיצור קובעים לו את הגודל עם px , או עם אחוזים, השאלה שלי היא לדוגמא אם אני מגדיר בפיקסלים, איך אני יכול לדעת כמה אחוזים מרוחב המסך זה לקח? ואם זה עם אחוזים אז כמו שאמרו פה http://stackoverflow.com/questions/...m-for-font-size וכמו שמוגדר ב w3scools , גודל כתב באחוזים מציין אחוזים מפונט אלמנט האב, ולא מגודל החלון, לכן אם אני רוצה להגדיר את שלושת האלמנטים האלו בשורה אחת, מה אני מגדיר לכל אחד מהם? אני יודע את הנוסחה:
קוד:
<search size="16px"> <input width="80% - 16px"> <button width="20%">


קראתי פעם על calc , אני כביכול אמור לעשות כך:
קוד:
input style="width: calc(80% - 16px)"

אני צודק? הבעיה היא שזה נתמך מ IE 9 ומעלה, יש לך פיתרון אחר אולי?
_____________________________________
[

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #14  
ישן 22-05-2015, 17:45
צלמית המשתמש של MatiM
  משתמש זכר MatiM MatiM אינו מחובר  
 
חבר מתאריך: 12.04.06
הודעות: 2,021
שלח הודעה דרך MSN אל MatiM
בתגובה להודעה מספר 12 שנכתבה על ידי Nati323 שמתחילה ב "לא רוצה לחפור, אבל אני מבין..."

1. אין לי יותר מה להסביר בנושא. אני חושב שחזרתי על זה שוב ושוב כבר מספיק פעמים.
הדרך היחידה שתבין את זה היא אם תנסה לשחק עם זה בעצמך ותבין שהmargin הוא כלפיי חוץ מהאלמנט, ולא כלפיי פנים.
ובכל מקרה, לאף אלמנט אין גובה קבוע אלא אם הוגדר אחרת בCSS.

2. הדוגמא שהבאתי אמורה לעבוד טוב בכל דפדפן, לפחות ממה שאני בדקתי.

הרעיון בבניית אתר שייתמך בגירסאות שונות של דפדפנים הוא ליצור אתר/עיצוב שיוצג כראוי לגולש בכל דפדפן, ולא שאלמנטים מסויימים יהיו תלויים בקיימות של המאפיינים ה"מתקדמים" בCSS. ואת זה אפשר לעשות עבור כל דפדפן גם עם המאפיינים הישנים.
אם רוצים לשלב אופציות מתקדמות לדפדפנים ישנים זה כבר סיפור אחר, ואז יש כל מיני דרכים ושיטות גם עם JS, לדוגמא.

3. אין סיבה לבצע חישובים שכוללים אחוזים+פיקסלים.
אם הגדרת לדוגמא אינפוט באורך 80%, מן הסתם שלשאר האלמנטים אתה מתכנן להשאיר 20%.

לגבי החיתוך והתוצאה ברזולוציות/מסכים שונים, את זה פותרים עם css media ולא בצורה מוחלטת על ידי ערך ספציפי אחד.
_____________________________________
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
תגובה

כלי אשכול חפש באשכול זה
חפש באשכול זה:

חיפוש מתקדם
מצבי תצוגה דרג אשכול זה
דרג אשכול זה:

מזער את תיבת המידע אפשרויות משלוח הודעות
אתה לא יכול לפתוח אשכולות חדשים
אתה לא יכול להגיב לאשכולות
אתה לא יכול לצרף קבצים
אתה לא יכול לערוך את ההודעות שלך

קוד vB פעיל
קוד [IMG] פעיל
קוד HTML כבוי
מעבר לפורום



כל הזמנים המוצגים בדף זה הם לפי איזור זמן GMT +3. השעה כעת היא 07:16

הדף נוצר ב 0.18 שניות עם 12 שאילתות

הפורום מבוסס על vBulletin, גירסא 3.0.6
כל הזכויות לתוכנת הפורומים שמורות © 2019 - 2000 לחברת Jelsoft Enterprises.
כל הזכויות שמורות ל Fresh.co.il ©

צור קשר | תקנון האתר