עזרה ב HTML, CSS, JS הגדרה של תת תפריט נפתח

DH778 · 30/1/18

בקוד שצירפתי פה, עשיתי 2 סטים של טקסט

בפועל רואים רק 1

עוץליגוץלי · 30/1/18

טורים, תראי את התמונות שהוא צרף.

DH778 · 1/2/18

כי לדבר הספציפי הזה, אני צריך תפריט ותת תפריט

בחלקים אחרים של האתר השתמשתי ב bootstrap.

DH778 · 1/2/18

האמת שלא חשבתי על האפשרות הזאת

אני באמת אנסה את זה, אולי זה באמת מה שיעזור לי.

עוץליגוץלי · 2/2/18

כי כל עוד הקוד מבולגן, bootstrap לא ממש יעזור.

כל עוד יש שגיאות קינון, יש מבנה שגוי של אלמנטים וכו' - זה פשוט לא יעבוד. קודם כל צריך להעביר את הקוד בvalidator, לנקות את השגיאות, להוסיף classes משמעותיים, ואז אפשר לפתור את הבעיות הויזואליות.
אחרת - יתכן שדפדפנים שונים יציגו תוצאות שונות. יתכן מאד שהתצוגה השגוייה בטלפון היא לא תולדה של רזולוציה, אלא של דפדפן שונה.
&nbsp

DH778 · 28/1/18

עזרה ב HTML, CSS, JS הגדרה של תת תפריט נפתח

היי, אני עושה אתר רספונסיבי, ובמצב דסקטופ יש לי לוגו ,תפריט ותת תפריט. זה אתר דוגמא בלי עיצוב, הכל בסיסי, שבו אני עושה את כל הדברים שאני רוצה שיהיו, ואם יהיו תקלות אז לא אפגע ואהרוס את האתר האמיתי.
בתת תפריט אני צריך שטקסט יהיה בתורים, הצלחתי לעשות תור אחד וכל אחד מהם בתור הוא קישור, אבל אני לא מצליח ולא יודע איך להציג את השאר שיהיו לידו - תור ליד, ניסיתי להגדיר את זה, אבל זה לא עובד.
במצב מובייל אני לא יודע איך לסדר את הלוגו שיהיה באותה שורה יחד עם האיקון של ההמבוגר.
בנוסף לזה גיליתי תקלה נוספת, בתת תפריט כשאני לוחץ על הלינקים (כרגע הם לא מובילים לשום מקום), הם סוגרים לי את התת תפריט (בגלל שזה הוגדר ב JS, במצב מובייל).
איך אני מסדר את זה שתהיה הפרדה בין מצב דסקטופ למצב מובייל והלינקים יעבדו כמו שצריך?
הפעם האחרונה שעבדתי עם אתרים ותיכנות היה לפני 10 שנים, רמת התיכנות שלי לא גבוהה, אני יודע קצת ועשיתי מה שאני יכול ויודע,בעיקר בגלל שלימדו אותי דברים קטנים - בסיסיים, ואז ישר עברתי לדרימוויבר..אשמח שמישהו יוכל לעזור לי, תודה

קוד:

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link href="[URL]https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css[/URL]" rel="stylesheet">
</head>
<body dir="rtl">
	<nav>
		<div class="menu-icon">
			<i class="fa fa-bars fa-2x"></i>
		</div>
		<ul>
			<li class="logo"><a href="#"><img src="img/logo.png" width="70px" heidth="50px"></a></li>
			<li><a href="#">home</a></li>
			<li><a href="#">work</a>
			<ul>
				<div class="menu">
				<h3 class="category-1"><a href="#">category</a></h3>
				<li><a href="#">link 1</a></li>
				<li><a href="#">link 2</a></li>
				<li><a href="#">link 3</a></li>
				<li><a href="#">link 4</a></li>
			</ul>
				<ul class="menu-col-1">
					<h3>category</h3>
					<li><a href="#">link 1</a></li>
					<li><a href="#">link 2</a></li>
					<li><a href="#">link 3</a></li>
					<li><a href="#">link 4</a></li>
				</ul>
				<ul class="menu-col-1">
					<h3>category</h3>
					<li><a href="#">link 1</a></li>
					<li><a href="#">link 2</a></li>
					<li><a href="#">link 3</a></li>
					<li><a href="#">link 4</a></li>
				</ul>
			</li>
			<li><a href="#">about</a></li>
			<li><a href="#">contact</a></li>
			</div>
		</ul>
	</nav>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

קוד:

body {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

nav li.logo:hover {
	background-color: transparent;
}

ul {
	margin: 0;
	padding: 0;
	background-color: #00695c;
	list-style-type: none;
	position: relative;
	text-align: center;
}

ul li {
	display: inline-block;
}

ul li a {
	color: #fff;
	text-decoration: none;
	padding: 15px;
	margin: 0px;
	display: block;
}

ul li:hover {
	background-color: #00897b;

}

ul li:hover ul {
	display: block;
}

ul ul {
	display: none;
	position: absolute;
	padding: 25px;
	text-align: right;
	background-color: #00897b;
	right: 720px;
}

.menu-col-1,
.menu-col-2,
.menu-col-3,
.menu-col-4 {
	float: right;

ul li.menu-col-1 {
	display: inline-block;
}


.menu {
	float: right;
}

}

.menu-col-1 {
    width: 25%;
}

ul ul li {
	display: block;

	background-color: #00897b;

}

ul ul li:hover {
	background-color: #26a69a;
}

nav div {
	display: none;
	background-color: #000;
	color: #fff;
	text-align: left;
	padding: 10px;
	cursor: pointer;
}

@media (max-width: 480px) {
	nav div {
		display: block;
	}

ul {
		display: none;
		position: static;
		padding-top: 5px;
	}

h3 {
	margin: 0;
	text-align: center;
	padding: 13px;

}

h3.category-1 {
	border-bottom: 1px solid #014f45;
	padding: 1px;
}

h3:hover.category-1 a  {
	background-color: #26a69a;
}

	ul li {
		display: block;
		border-bottom: 1px solid #014f45;
		text-align: center;
	}

	ul ul.menu-col-1 {
		position: static;
		background-color: #4db6ac;
		width: 100%;
		padding: 0;
	}

	ul ul li {
		background-color: #4db6ac;
		border-radius: 0;
		width: 100%;
	}
}

קוד:

$(window).resize(function() {
	if ($(window).width() > 480) {
		$("ul").removeAttr('style');
	};
});

$ ("nav div").click(function() {
		$("ul").slideToggle();
		$("ul ul").css("display", "none");
});

$("ul li").click(function() {
	$(".menu").slideUp();
	$(this).find('ul').slideToggle();
});

DH778 · 29/1/18

יש מישהו שיכול לעזור?

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

עוץליגוץלי · 29/1/18

הקוד שלך לא ממש ברור. תוכל בבקשה להעלות ציור של "ככה אני

רוצה"?
&nbsp

DH778 · 29/1/18

אוקיי , אני מצרף תמונה

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

עוץליגוץלי · 30/1/18

מה התמונה שאתה רוצה שיראו בטלפון?

עוץליגוץלי · 30/1/18

משהו כזה יעזור?

כאשר המסך רחב מספיק, הנתונים "מסתדרים" ב-4 עמודות. כאשר תקטין את הרוחב (נניח עבור טאבלט) מס' העמודות יפחת. ברזולוציה של samsun y תקבל עמודה בודדת. עוזר לך ?

קוד:

<!doctype html>
<html>	
	<head>
		<meta charset='utf-8'>
		<title>example</title>
		<style type='text/css'>
			div.divContent { display:inline-block; width:24.5%; min-width:200px; background-color:#a0a0a0 }
			div.divContent > h2 { color:white; }
			div.divContent > ul > li { color:blue; }
		</style>
	</head>
	<div class='divContent'>
		<h2> content 1 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>
	
	<div class='divContent'>
		<h2> content 2 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>

	<div class='divContent'>
		<h2> content 3 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>

	<div class='divContent'>
		<h2> content 4 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>

	<div class='divContent'>
		<h2> content 5 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>

	<div class='divContent'>
		<h2> content 6 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>

	<div class='divContent'>
		<h2> content 7 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>

	<div class='divContent'>
		<h2> content 8 </h2>
		<ul>
			<li> link 1 </li>
			<li> link 2 </li>
			<li> link 3 </li>
			<li> link 4 </li>
		</ul>
	</div>
	
</html>

DH778 · 30/1/18

זה עוזר ולא עוזר

בדוגמא שלך, זה מחולק ל- 4 חלקים (מלבן אפור) ובתוכם 2 עמודות, אני צריך שזה יהיה כמו בתמונה שצירפתי (בהודעה הקודמת) במלבן אחד, ו - 4 עמודות.
הקוד שאני צירפתי (בהודעה הראשונה) במצב מובייל - אני מצרף גם תמונה אז תוכל לראות , יש כרגע רק 2 עמודות, זה מסתדר יופי, רואים את ה - 2 עמודות, יש שם בעיות נוספות שצריך לטפל בהם, אבל קודם את החלק של הדסקטופ צריך לסדר.

עוץליגוץלי · 30/1/18

שנה בCSS את צבע הbody

לחליפין - כלול את כל הקוד שלי בתוך div עם צבע הרקע המתאים לך.

DH778 · 30/1/18

אני יודע שזאת בקשה גדולה (מאוד)

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

DH778 · 30/1/18

אני רוצה לחדד מה שאמרתי

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

עוץליגוץלי · 31/1/18

תתחיל מתיקון בעיות בקוד שלך

שמוש במאפיינים לא תקניים לH5 (דוגמת המאפיינים width וheight עבור img),
שגיאות היררכיה (מי מכניס div ישירות תחת ul?) , ועוד כהנה וכהנה.
אני ממליץ להעזר בhtml validator.
&nbsp
אח"כ אם עדיין לא יעבוד לך, נסה להתחיל את הכל ללא שום css, ולהוסיף את הכללים בזה אחר זה.
&nbsp

DH778 · 1/2/18

כבר בהודעה הראשונה כתבתי ואכתוב שוב

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

עוץליגוץלי · 1/2/18

כפי שהגבתי - נסה לדבג את הקוד שלך

יתכן מאד שזה יפתור לך חלק גדול מהבעיות. לאחר מכן - תוסיף את הכללים של הstyle בזה אחר זה (יש לך שם כללים שעשויים להתנגש זה בזה).
מקום טוב להתחיל בו את הבדיקה - https://validator.w3.org/
&nbsp
הדרך הנכונה היא לעבור על הקוד שלך, אחרי שמנקים אותו, ולא לשלב בקוד שלי, אלא להתאים לו כללי style לפי מה שאתה רוצה.

DH778 · 4/2/18

טוב, ניסיתי את כל האפשרויות

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

עוץליגוץלי · 4/2/18

תעלה בבקשה את הקוד שלך

לאחר ש"תפשיט" ממנו את כל הCSS (כל תגיות הstye או ה line rel=style ודומותיהן).
ונראה מה אפשר לעולל לו ...

עזרה ב HTML, CSS, JS הגדרה של תת תפריט נפתח

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member