11 Replies - 653 Views - Last Post: 12 April 2015 - 09:53 AM

#1 Mercedeh  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-April 15

problem in text-shadow

Posted 11 April 2015 - 08:30 PM

hi
my codes for text-shadow doesn't work
i checked everything but ....
i saw 20 videos and it is easy but i don't know why it doesn't work
maybe because of IE or my browser .... i don't know

<!Doctype html> 
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="robots" content="autor">
	<title>CIS 152 - Page Layout and CSS3</title>
	<link rel="multi_4850" href="multi_4850.css">
</head>

<body>
	<header>
		<h1>Page Layout and CSS3</h1>
	</header>
	<div class="left_column">
	</div>
	
	<div class="right_column">
	
	</div>
		
	<footer>
	</footer>
</body>
</html>


and the cSS :

.text-shadow{
	font-size: 2em;
	
	/* Firefox, webkit, Opera 9+ */ 
    text-shadow: 3px 3px 5px #F7BE81;
}

:code:/>

This post has been edited by Dormilich: 11 April 2015 - 11:59 PM


Is This A Good Question/Topic? 0
  • +

Replies To: problem in text-shadow

#2 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2363
  • View blog
  • Posts: 9,488
  • Joined: 03-December 12

Re: problem in text-shadow

Posted 11 April 2015 - 09:23 PM

It probably doesn't work, because you don't have a class named text-shadow.

This post has been edited by astonecipher: 11 April 2015 - 09:23 PM

Was This Post Helpful? 1
  • +
  • -

#3 Mercedeh  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-April 15

Re: problem in text-shadow

Posted 12 April 2015 - 08:57 AM

View Postastonecipher, on 11 April 2015 - 09:23 PM, said:

It probably doesn't work, because you don't have a class named text-shadow.


like this: (in html)

<header class="text-shadow">
<h1><center>SoRooR : Page Layout and CSS3</center></h1>
</header>

this is CSS:

.text-shadow{
font-size: 1.25em;
/* CSS comment for Firsfox, WebKit, Opera 9+ */
text-shadow: 6px 6px 6px #FACC2E;
}

but no text shadow :(

thank you for reply
i never thought someone answer
thank you
Was This Post Helpful? 0
  • +
  • -

#4 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2363
  • View blog
  • Posts: 9,488
  • Joined: 03-December 12

Re: problem in text-shadow

Posted 12 April 2015 - 09:02 AM

You don't want to use old tags like center.


Post it in it's entirety. I can't tell what you are actually doing when you are posting snippets. Because, when I use that same code in the proper locations, it works.
Was This Post Helpful? 1
  • +
  • -

#5 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: problem in text-shadow

Posted 12 April 2015 - 09:04 AM

That code does work, but your stylesheet is probably not attached:
<link rel="multi_4850" href="multi_4850.css">

This should be:
<link rel="stylesheet" type="text/css" href="multi_4850.css">

Note that the center tag is obsolete, use CSS to centre. If your tutorial uses it then find an up-to date tutorial.

(It is also more typical to apply a text-shadow to a text element, rather than to an entire block like 'header'.)



You also need to use code tags when posting, it demonstrates how to use them directly in the area where you type your post.
Was This Post Helpful? 1
  • +
  • -

#6 Mercedeh  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-April 15

Re: problem in text-shadow

Posted 12 April 2015 - 09:31 AM

oh my god
thank you
thank you to help me , because before i register in this forum no body answer me
i created a page (i knew it was wrong but teacher said it's correct)
thank god to i find you guys
also my english is not very good, sorry

ok
- i add all my codes astonecipher
- i fixed it for link and stylesheet andrewsw and how could i write for center in header

- and another things is in assignment instructure wants something but i didn't understand

<!Doctype html> 
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="robots" content="autor">
	<title> CIS 152 - Page Layout and CSS3</title>
	<link rel="stylesheet" type="text/css" href="multi_4850.css">

</head>

<body>
<div id="container">
	<header  class="text-shadow">
		<h1><center> Page Layout and CSS3</center></h1>
	</header>
				
	<div class="left_column">
		<div class="nav">
			<nav>
				<a href="form_example_5840.html">Form</a><br>
				<a href="table1_5840.html">Tables</a><br>
				<a href="http://www.google.com" target="_blank">GooGle</a>
			</nav>
		</div>
	</div>
	
	<div class="right_column">
		<p class="serif">My favorite foods are <b>Iranian traditional foods.</b><br>
						The best one is Kebab in my opinion. This dish is served throughout Iran today,but was traditionally associated with the northern
						part of the country. One of the best kebab in Tehran called Shamshiry, it's near the downtown of Tehran.
						In here many resturants served but most of them are not the real kebab, they added soya and <br>
						One dish of <b>"Chelo Kebab"</b> contain white rice and kebab with one or two roast tomatoes.
						There are four kind of Kebab, Chicken kebab, Koobideh kebab, Barg kebab and CHenje.
		</p>
		<img src="KB.jpg" alt="kebab" />
		<div class="nav">
			<ul>
				<li><a href="http://www.daryarestaurant.com/" target="_blank">Darya Restaurant</a><br></li>
				<li><a href="http://www.hatamrestaurant.net/" target="_blank">Hatam Restaurant</a><br></li>
			</ul>
		</div>
	</div>
		
	<div id="footer">
			<p>Created by Soroor at <a href="http://www.fullcoll.edu" target="_blank">Fullerton COllege</a><br>
			Last updated April 12,2015</p>
	</div>
	<!--Background image courtesy of https://www.sharefaith.com -->
	</div>
	</body>
</html>



and css :

h1{
height:50px;
width: 1200px;

border: 2.5px solid #0B0719;
border-radius: 15px;
padding-top:10px;

}

.text-shadow{
	font-size: 1.25em;
		/* CSS comment for Firsfox, WebKit, Opera 9+ */
	text-shadow: 6px 6px 6px #FACC2E;
}
body{
	background-image: url("bg3large.gif");
	}
background-image{
	opacity: 0.2;
	
	}
	
.left_column {
	float: left;
	font-size: 2em;
	background-color: #F3E2A9;
	height: 500px;
	width: 600px;
	margin: 10px;
	border: 1px solid #0B0719;
	border-radius: 5px;
}

.right_column {
	float: left;
	background-color: #F6CEF5;
	height: 500px;
	width: 600px;
	margin: 10px;
	border: 1px solid #0B0719;
	border-radius: 5px;
}

.nav{
	font-weight: bold;
	font-size: 1.25em;
	padding-top: 20px;
	padding-left: 15px;
	margin:5px;
}

a{color: #298A08;
	text-decoration: none;
}

a:hover{color:#FFFF00;
	text-decoration: underline;
}

a:active{color: #DF013A;
}

a:visited{color: #8904B1;
	text-decoration: none;
}

p{font-size: 1.5em;
	padding-left: 5px;
	padding-right: 5px;
	text-align: justify;
    text-justify: inter-word;
}

img{	float: right;
   margin-left: auto;
   margin-right: 15px;
   }
   
#footer {
  clear: both ;
}
   


assignment :

Instructions:

Instructions:
1. Refer to all previous Learning Module notes, readings, and Internet links for assistance with this assignment.
2. In the following assignment, all code must be in lowercase letters, and must be indented as shown in previous Learning Module notes.
3. Launch your Plain Text Editor.
4. Create a new HTML page, including the opening and closing html, head, and body elements as well as the language attribute and character encoding statements.
5. Save the file as multi-column_XXXX.html, substituting the last four digits of your student id where appropriate.
6. The page title of this file should be Your Name - CIS 152 - Page Layout and CSS3.
7. Create a new CSS file and save it as multi_XXXX.css.
8. In the following directions, all CSS changes should be made in the external style sheet, not embedded within the HTML document.
9. In the multi-column_XXXX.html file, create a link to the multi_XXXX.css external style sheet.


Time to get creative... Your page should contain all of the following:
10. Create and appropriately name a div that will serve as a parent container for all other elements and divs in the page. (Include the header and footer tags in the new container.)
11. The new container should:
o be aligned in the center of the page
o have a width of no more than 80% (a relative width measurement) of the page. OR, if you choose to use a fixed width, the width of the new container div should not exceed 900 pixels.
12. Within the container div, create at least two additional divs that align side-by-side.
o One of the divs should be named 'leftcolumn'.
o One of the divs should be named 'rightcolumn'.
13. Adjust the width of any divs within the new container so that their total does not exceed that of the container. (You may need to play with the widths of the leftcolumn and rightcolumns divs to get both of the column divs to fit in the parent container.)
14. Use the HTML5 structural elements 'header' and 'footer'.
15. In the header element, create an h1 that reads "Your Name: Page Layout and CSS3" without the quotation marks, substituting your given name where appropriate.
16. In the external stylesheet, create a rule to add the CSS3 text-shadow to the h1.
17. Within the 'leftcolumn', create a three-item vertical navigation/menu bar. Create relative links to two previous assignments and an absolute link to Google. Be sure that the absolute link uses a target attribute so that the Google page opens in a new window.
18. Use the HTML5 nav element appropriately.
19. Create pseudo-classes (a:link, a:visited, a:hover, and a:active) for the links in the navigation/menu bar. Use a contextual selector (page 96-97) so that the pseudo-classes do not affect any other links on the page.
20. Within the 'rightcolumn', add two paragraphs of text describing favorite foods. (You can copy/paste text from a previous assignment, as long as the content is relevant.)
21. Still in the 'rightcolumn', add an image (no larger than 2 x 2 inches).
22. In the external stylesheet, create a rule to add the CSS3 box-shadow property to the img element.
23. Create and apply a rule to float the image to the right.
24. In the right-column div, create a new two-item, unordered list using these parameters:
o name, and link to, your two favorite restaurants
o The links should NOT use the same properties as the pseudo-classes in the navigation/menu bar.
25. Add any padding or margin values as necessary.
26. Add a border and border-radius property to your container div so that the change is evident and visually appealing.
27. Add a background-image to the body element.
28. Create a rule to apply the CSS3 opacity to the container div so that you can still see the container text clearly, but can slightly see the background image through the container (page 169).
29. Use the footer element and create the two lines of text that you have used in previous assignment. In the second line, make sure to include an absolute link to College. Use the target attribute to ensure that the Fullerton College web site opens in a new window.
30. Create rules to apply the float property to divs as necessary.

This post has been edited by andrewsw: 12 April 2015 - 09:38 AM
Reason for edit:: LEARN TO USE CODE TAGS

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: problem in text-shadow

Posted 12 April 2015 - 09:35 AM

How to use code tags:

Attached Image

Quote

how could i write for center in header

For a heading you could use text-align: center;.

What is it you don't understand in your assignment?

This post has been edited by andrewsw: 12 April 2015 - 09:36 AM

Was This Post Helpful? 1
  • +
  • -

#8 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2363
  • View blog
  • Posts: 9,488
  • Joined: 03-December 12

Re: problem in text-shadow

Posted 12 April 2015 - 09:36 AM

Quote

- and another things is in assignment instructure wants something but i didn't understand


What don't you understand? Do you have a book for the class?

Beat me to it!!!
Was This Post Helpful? 1
  • +
  • -

#9 Mercedeh  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-April 15

Re: problem in text-shadow

Posted 12 April 2015 - 09:42 AM

I'm so excited


ok
number 11 :

11. The new container should:
o be aligned in the center of the page
o have a width of no more than 80% (a relative width measurement) of the page. OR, if you choose to use a fixed width, the width of the new container div should not exceed 900 pixels.
Was This Post Helpful? 0
  • +
  • -

#10 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2363
  • View blog
  • Posts: 9,488
  • Joined: 03-December 12

Re: problem in text-shadow

Posted 12 April 2015 - 09:44 AM

Okay, what do you not understand about it?
Was This Post Helpful? 0
  • +
  • -

#11 Mercedeh  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-April 15

Re: problem in text-shadow

Posted 12 April 2015 - 09:46 AM

still text shadow doesn't work
Was This Post Helpful? 0
  • +
  • -

#12 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2363
  • View blog
  • Posts: 9,488
  • Joined: 03-December 12

Re: problem in text-shadow

Posted 12 April 2015 - 09:53 AM

Do the other style rules work?
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1