עבור לתוכן

גלישת תווים בתגית DIV ושאלה נוספת הקשורה ל CSS

Featured Replies

פורסם

איך אני חוסם את הגלישת תווים? OVER FLOW אם אני לא טועה.. לא מצאתי את עצמי בגוגל אז באתי לכאן חח..

אני יודע איך להסתיר אותם, איך להפוך את זה ל SCROLL אם צריך,

אבל אני לא יודע איך לפרק אותם..

אני רוצה שברגע שהוא יגיע לקצה הרוחב בתוך ה DIV, הוא יחתך וירד שורה.

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

אני מגדיר להם חוקים ב CSS אז יהיה מעולה אם כך גם התשובה תיהיה.. תודה

למשל:

הטקסט הבא יגלוש לי:

TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT

הטקסט הבא עובר בצורה תקינה:

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

48973330.jpg

שאלה שנייה, כללית ובסיסית מאד ב CSS

רציתי לדעת אם הדרך שבה אני בונה את ה "LAYOUT" שלי היא יעילה וטובה? או שיש דרך יותר יעילה?

המחלקות שלי:

body {
margin-top: 20px;
background-color: #2a4280;
}
#round {
width: 720px;
margin-right: auto;
margin-left: auto;

}
#top {
background-image: url(../libs/images/top.png);
width: 720px;
height: 17px;
position: relative;
}
#roundcontainer {
background-color: #FFFFFF;
}
#bottom {
height: 22px;
width: 720px;
background-image: url(../libs/images/bottom.png);
position: absolute;
}
#container {
margin-top: 1px;
margin-right: 10px;
margin-bottom: 1px;
margin-left: 10px;
}

וה BODY שלי:


<div id="round">


<div id="top"></div>

<div id="roundcontainer">

TEXT TEXT, text.

</div>


<div id="bottom"></div>


</div>

זה מה שמופיע בתמונה דרך אגב..

תודה

פורסם

לשאלה הראשונה:

word-wrap:break-word

(זה חלק מCSS3)

השאלה השנייה היא פשוט יותר מדי כללית

פורסם
  • מחבר

תודה..

[br]פורסם בתאריך: 27.01.2011 בשעה 23:55:36


ממשיך להתקשות..

אותו קוד מלמעלה...משום מה זה לא מספיק דינאמי, כשאני משתמש ב <P> ואני מאמין תגיות נוספות ב HTML, קורה הדבר הבא:

88921372.png

67389761.png

תודה לעוזרים!

פורסם

ניסית לאפס את המרג'ין העליון והאחרון?

פורסם
  • מחבר

ניסית לאפס את המרג'ין העליון והאחרון?

מז"א ואיך מאפסים?

פורסם
margin: 0

פורסם
  • מחבר

margin: 0

מעולה! בסוף באמת איפסתי את המרג'ין, של כל תגיות ה P

p {

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

}

פורסם

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

פורסם
  • מחבר

כל הימין שמאל למעלה למטה האלו זה תוצאה של דרימאוויבר...

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

הכנסתי עמוד בשם layout ואני קורא לעמודים אחרים מתוכו.

לצורך הדגמה ניסיתי לעשות משהו מאד פשוט.. הקטע שעמוד ה FORUM שלי מצוייד בסקריפט של הצג/הסתר את תוכן ההודעה,

ומשהו מוזר קורא שם.

בעמוד אחר, לשם בדיקה, עשיתי השתמשתי בDIV כ 3 פעמים וכל פעם קראתי לעיצוב מתוך אותו CSS שמשמש אותי לעמוד הפורום.

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

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

חוץ מהסקריפט.

השאלה שלי, איך אני מתגבר על זה, דרך חוק CSS שיהיה על ה DIV ה"אמצעי" שלי בעמוד ה LAYOUT.

18133450.jpg

82731153.jpg

פורסם

יעזור אם תביא את המקור לדף ואת הסקריפט ::)

פורסם

מה הבעיה?

פורסם
  • מחבר

הבעיה היא שהפורום צף למטה במקום במקום שלו.

יש כאן שני קודים, הראשון זה העמוד המשתנה שלי.. במקום של במרכז ממוקם ה BODY שלי

הקוד השני זה מקור HTML פשוט תשמור את זה HTML ותבין על מה אני מדבר..

תודה על כל העזרה :yelclap:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/url]
<html xmlns="[url]http://www.w3.org/1999/xhtml"[/url] >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<link href="<?php echo $root; ?>libs/css/layout.css" rel="stylesheet" type="text/css" />
<link href="libs/css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body >

<div id="round">


<div id="top"></div>

<div id="roundcontainer">
<?php

renderbody();
?>

</div>

<div id="bottom"></div>
</div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/url]
<html xmlns="[url]http://www.w3.org/1999/xhtml"[/url] >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>פורומים</title>
<style>

.question{

cursor:pointer; /* Cursor is like a hand when someone rolls the mouse over the question */
}

.answer{

/* This one should not be changed */
display:none;
}

.topic {
font-family: Tahoma, Geneva, sans-serif;
background-color: #79A9E3;
font-weight: bold;
color: #383838;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}

.con_left {
background-color: #FEFFE8;
color: #039;
font-family: Tahoma, Geneva, sans-serif;

width: 100%;

height: auto;
}


.topic_right {
float: right;
margin-right: 5px;

}

.topic_left {
float: left;
margin-right: 5px;



}
body {
margin-top: 20px;
background-color: #2a4280;
}

p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#round {
width: 1200px;
margin-right: auto;
margin-left: auto;

}
#top {
background-image: url(../images/top.png);
width: 100%;
height: 17px;
position: relative;
}
#roundcontainer {
background-color: #FFFFFF;
word-wrap:break-word;
height: auto;
}
#bottom {
height: 22px;
background-image: url(../images/bottom.png);
width: 100%;
}




</style>
<script>
function showHideAnswer()
{
var numericID = this.id.replace(/[^\d]/g,'');
var obj = document.getElementById('a' + numericID);
if(obj.style.display=='block'){
obj.style.display='none';
}else{
obj.style.display='block';
}
}


function initShowHideContent()
{
var divs = document.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='question'){
divs[no].onclick = showHideAnswer;
}

}
}

window.onload = initShowHideContent;



</script>
</head>

<body >

<div id="round">


<div id="top"></div>

<div id="roundcontainer">


<br />
<hr /><br />
<a href='newpost.php'> Post a new thread</a><br />
<div style="position: relative; width: 100%; float: right;">
<div id="q1" class="question" >
<table width="100%" cellspacing="0" class="topic" >
<tr>
<td height="20" colspan="3" >
<div class='topic_left'>Post #1</div><div class='topic_right'>(by aviv) </div>
</td>
</tr>
</table>
</div>



<div id="a1" class="answer">


<div class="con_left"> </div>




<div class="msg_buttons">
<a href="newpost.php?fid=1"> post response </a>

</div>

</div>
</div>

<div style="position: relative; width: 98%; float: right;">
<div id="q7" class="question" >
<table width="100%" cellspacing="0" class="topic" >
<tr>
<td height="20" colspan="3" >
<div class='topic_left'>asdsad</div><div class='topic_right'>(by aviv) </div>
</td>
</tr>
</table>
</div>



<div id="a7" class="answer">


<div class="con_left"> asdf <br>asdf</div>




<div class="msg_buttons">
<a href="newpost.php?fid=7"> post response </a>

</div>

</div>
</div>

<div style="position: relative; width: 100%; float: right;">
<div id="q2" class="question" >
<table width="100%" cellspacing="0" class="topic" >
<tr>
<td height="20" colspan="3" >
<div class='topic_left'>Check</div><div class='topic_right'>(by aviv) </div>
</td>
</tr>
</table>
</div>



<div id="a2" class="answer">


<div class="con_left"> sdf</div>




<div class="msg_buttons">
<a href="newpost.php?fid=2"> post response </a>

</div>

</div>
</div>

<div style="position: relative; width: 100%; float: right;">
<div id="q6" class="question" >
<table width="100%" cellspacing="0" class="topic" >
<tr>
<td height="20" colspan="3" >
<div class='topic_left'></div><div class='topic_right'>(by aviv) </div>
</td>
</tr>
</table>
</div>



<div id="a6" class="answer">


<div class="con_left"> </div>




<div class="msg_buttons">
<a href="newpost.php?fid=6"> post response </a>

</div>

</div>
</div>

<div style="position: relative; width: 100%; float: right;">
<div id="q10" class="question" >
<table width="100%" cellspacing="0" class="topic" >
<tr>
<td height="20" colspan="3" >
<div class='topic_left'>hgjghj</div><div class='topic_right'>(by aviv) </div>
</td>
</tr>
</table>
</div>



<div id="a10" class="answer">


<div class="con_left"> jgghj</div>




<div class="msg_buttons">
<a href="newpost.php?fid=10"> post response </a>

</div>

</div>
</div>




</div>

<div id="bottom"></div>
</div>
</body>
</html>

פורסם

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

אם כן, תשנה את הDIV שלך לזה:

<div style="position: absolute; width: 98%; float: right;z-index:10"> 

פורסם
  • מחבר

לא זאת לא הייתה השאלה..

השאלה בעמוד הקודם..

שים שכל הפורום, כולו, נמצא מתחת ל div class="bottom"

אבל בדף אחר למשל, הכל בסדר.

תראה את זה לפי זה שבדף הרגיל אתה רואה את הצצלית הזאת שעשיתי למטה,

ובפורום לא, בנוסף, מאחורי הפורום אין את הרקע של div roundcontainer

כל הימין שמאל למעלה למטה האלו זה תוצאה של דרימאוויבר...

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

הכנסתי עמוד בשם layout ואני קורא לעמודים אחרים מתוכו.

לצורך הדגמה ניסיתי לעשות משהו מאד פשוט.. הקטע שעמוד ה FORUM שלי מצוייד בסקריפט של הצג/הסתר את תוכן ההודעה,

ומשהו מוזר קורא שם.

בעמוד אחר, לשם בדיקה, עשיתי השתמשתי בDIV כ 3 פעמים וכל פעם קראתי לעיצוב מתוך אותו CSS שמשמש אותי לעמוד הפורום.

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

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

חוץ מהסקריפט.

השאלה שלי, איך אני מתגבר על זה, דרך חוק CSS שיהיה על ה DIV ה"אמצעי" שלי בעמוד ה LAYOUT.

18133450.jpg

82731153.jpg

פורסם

תוסיף

clear:both;

ל- bottom.

ד.א. אל תשתמש בTABLE.

ארכיון

דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.

דיונים חדשים