הוסטס - פורום אחסון האתרים הגדול בישראל - HTML

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - HTML | בעיה שאני לא מצליח לסדר (https://hosts.co.il/forums/showthread.php?t=81554)

HTML | בעיה שאני לא מצליח לסדר

HTML קוד:

background-image: url(images/header_line_bg.jpg);

padding-top: 15px;

height: 160px;

זה הcss שנתתי לdiv עכשיו במקום פשוט שהטקסט יתרחק 15 פיקסלים מהחלק העליון זה יורד 15 פיקסלים אבל גם מוסיף 15 פיקסלים נוספים למטה לכל הdiv, למה זה? ואיך אני פותר את זה?

תודה מראש :)

יכול להיות שהגובה של התמונה קטן מ160px

ציטוט:

נכתב במקור על ידי יניב בן צבי (פרסם 757885)

יכול להיות שהגובה של התמונה קטן מ160px

הגובה של התמונה 160 פיקסלים בדיוק, לפני שאני מוסיף את הpadding-top הdiv נראה בסדר גמור אבל אחרי שאני מוסיף זה גדל בעוד 15 פיקסלים.

אתה יכול לשלוח לי קישור?

נסה להוסיף overflow:hidden

ציטוט:

נכתב במקור על ידי Exa.co.il (פרסם 757920)

נסה להוסיף overflow:hidden

לא עזר,
http://pvz.co.il/problem

HTML:

HTML קוד:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 

<html xmlns="http://www.w3.org/1999/xhtml"> 

 

<head> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

  <title></title> 

  <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" /> 

</head> 

 

<body id="home-page"> 

<div id="wrapper"> 

    <div id="header-wrapper"> 

        <div id="header-line">Hello World</div> 

    </div> 

</div> 

</body> 

 

</html>

CSS:

HTML קוד:

body {

        margin:0 auto;

        font-family: Arial;

        font-size: 12px;

        background:#e2e2e2;

        color:#ffffff;

        text-align:left;

}

#wrapper {

  margin: 0 auto;

  padding: 0px;

  width: 100%;

}

#header-wrapper {

  margin: 0 auto;

  padding: 0px;

  width: 100%;

}



#header-line {

  background-image: url(images/header_line_bg.jpg);

  padding-top: 15px;

  height: 45px;

}

תשנה את הCSS לזה...

HTML קוד:

body {

        margin:0 auto;

        font-family: Arial;

        font-size: 12px;

        background:#e2e2e2;

        color:#ffffff;

        text-align:left;

}

#wrapper {

  margin: 0 auto;

  padding: 0px;

  width: 100%;

  height: 45px;

}

#header-wrapper {

  margin: 0 auto;

  padding: 0px;

  width: 100%;

  height: 45px;

}



#header-line {

  background-image: url(header_line_bg.jpg);padding: 0px 0px 0px 0px;

  background-repeat:repeat-x;

  padding-top: 15px;

  height: 45px;

}

ציטוט:

נכתב במקור על ידי יניב בן צבי (פרסם 757962)

תשנה את הCSS לזה...

HTML קוד:

body {

        margin:0 auto;

        font-family: Arial;

        font-size: 12px;

        background:#e2e2e2;

        color:#ffffff;

        text-align:left;

}

#wrapper {

  margin: 0 auto;

  padding: 0px;

  width: 100%;

  height: 45px;

}

#header-wrapper {

  margin: 0 auto;

  padding: 0px;

  width: 100%;

  height: 45px;

}



#header-line {

  background-image: url(header_line_bg.jpg);padding: 0px 0px 0px 0px;

  background-repeat:repeat-x;

  padding-top: 15px;

  height: 45px;

}

למה הגבלת את הגובה של הwrapperים ל45 פיקסלים? אלה המעטפות שצריכות לעטוף את כל העיצוב הן לא יכולות להיות רק 45 פיקסלים

אבירן,
padding אתה שם באלמנט משלו.
כלומר, אם שם הdiv הוא aviran, אתה עושה ככה:

קוד:

background-image: url(images/header_line_bg.jpg);

height: 160px;

ואז:
.aviran .wrap
{
padding:15px 0 0 0;
}
ובתוך הdiv aviran מוסיף div <div class="wrap">

אם הבנתי נכון אתה רוצה להרחיק טקסט? אז משתמש ב- margin בכלל.. במקום padding..