HTMLּ+CSS: בעיה בהצגת הדף

avr416

כתבתי את הקוד הבא:

<!DOCTYPE html>
<html>
	<header>
		 <meta charset="UTF-8">
		<title>תרגיל פרק 6</title>
		<link rel="stylesheet" href="includes/Style123.css"/>
	</header>
	<body>		
		<div id="wrapper">
			<nav></nav>
			<section>
				<article id="1"/>
				<article id="2">
			</section>			
		</div>
	</body>
</html>

ובקובץ הCSS כתבתי כך:

*
{
	margin: 0;
	padding: 0;	
	direction: rtl;
}
section,nav, aside,header,footer,article
{
	display: block;
}
#wrapper
{
	width: 1000px;
	height: 1500px;
	margin:  0 auto;
	background-color:  azure;
}
nav
{
	float: right;
	width: 200px;
	height: 1500px;
	border: 1px solid red;
}
section
{
	position: relative;
	float: right;
	width: 600px;
	height: 1500px;
	border: 1px solid brown;
	background-color:  blue;
}
#1
{
	position:relative;
	top: 150px;
	left: 100px;
	width: 200px;
	height: 80px;
	
	background-color: white;
}
#2
{
	position: relative;
	bottom: 100px;
	right: 50px;
	width: 400px;
	height: 300px;	
	background-color: white;
}

התוצאה אמורה להיות כביכול סרגל ניווט צידי (מצד ימין) ועמודת תוכן מרכזית שבתוכה שני מלבנים (אחד למעלה משמאל ואחד למטה מימין) בצבע לבן.. (המלבנים הם תגיות הarticle עם הID).
משום מה המלבנים הללו לא מוצגים לי בדפדפן...
אני לא מצליח להבין מה לא טוב בקוד, ומדוע הם לא מוצגים??
אשמח לעזרה!
תודה רבה!

פורסם במקור בפורום CODE613 ב11/09/2015 00:53 (+03:00)

dovid

מממ מעניין, אצלי עובד. בדוק שהCSS אכן נמצא בתיקיה includes שאותה תיקייה בה קובץ הHTML ושקובץ הCSS אכן נקרא Style123.css

נ.ב.אמור לעבוד אפי' שיש לך כמה טעויות בHTML:
לarticle השני חסר סוגר, ואף הראשון לא תקין בHTML5: חייבים לסגור עם אלמנט סגירה מלא (<article></article>).
הheader כמדומני טעות ולא חוקי: התגית צריכה להיות head. הheader (שלדעתי לא חוקית מחוץ לbody) זה תגית לכותרת ברמת מבנה כמו כותרת של מאמר, שיכול להיות עשר בתוך דף אחד.

פורסם במקור בפורום CODE613 ב11/09/2015 11:52 (+03:00)

avr416

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

פורסם במקור בפורום CODE613 ב11/09/2015 11:55 (+03:00)

dovid

פלא. אצלי הן הכרום והן האקספלורר מציגים מצויין. כמו"כ פה: http://jsfiddle.net/n2wu1x7h/

פורסם במקור בפורום CODE613 ב11/09/2015 12:02 (+03:00)

avr416

כמו כן, אני רוצה שתגיות הarticle יהיו ממוקמות בתוך הגבולות של הsection.
לשם כך כתבתי אותם בתוכו.
אולם הם מופיעים לי בדף בלי קשר אליו.
אני מבין שזה בגלל שהגדרתי אותו כאלמנט "צף" - float. אך חשבתי שאם הם נמצאות בתוכו - אז זה לא אמור להפריע...
מה ביכולתי לעשות? רק להגדיר את הpositon כ absolute? או שיש אפשרויות אחרות?
תודה רבה!
(זה חלק מתרגיל בספר html5 אבל אני קצת מסתבך..)

פורסם במקור בפורום CODE613 ב11/09/2015 12:08 (+03:00)

avr416

@דוד ל.ט.

פלא. אצלי הן הכרום והן האקספלורר מציגים מצויין. כמו"כ פה: http://jsfiddle.net/n2wu1x7h/

גם בקישור שהבאת אני לא רואה את המלבנים הלבנים (שהם תגיות הarticle)..
או שאני צריך להגדיל את המספר במשקפיים :lol: :lol:

פורסם במקור בפורום CODE613 ב11/09/2015 12:10 (+03:00)

dovid

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

אבל אכן הבעיה זה המספר... אמנם HTML5 מרשה id שלא מתחיל באות (מה שהיה אסור בHTML4) אבל הCSS לא מרשה תחביר כזה: #1, אולם ניתן להשתמש בתחביר מוארך: [id='1'] ראה http://jsfiddle.net/n2wu1x7h/1/. על פי https://css-tricks.com/ids-cannot-start-with-a-number/.

פורסם במקור בפורום CODE613 ב11/09/2015 16:06 (+03:00)

תחומים - פורום חרדי מקצועי

HTMLּ+CSS: בעיה בהצגת הדף