 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
beginner.html
Joined: 02 Aug 2007
Posts: 365
|
 Posted: Thu May 15, 2008 6:07 pm problem with code |
 |
|
|
I have a lil problem with a code, that is the image code. The image isn't aligned properly for some reason. I had it fine this morning and yesterday. Here is the code:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Using mastHeads</title>
<style type="text/css">
body
{
background-image:
url('bg_page_container.gif');
background-repeat: repeat-y;
width:742px;
height:140px;
background-position:top center;
p:hello {content: "hello"};
</style>
<p style="margin-left:175px; font-size:35px; font-family:freestyle script; font-weight:normal;">My Music: From Past to Present</p>
<style type="text/css">
<!--
a:link {color: #000; text-decoration: none; }
a:active {color: #000; text-decoration: none; }
a:visited {color: #000; text-decoration: none; }
a:hover {color: #666; text-decoration: underline; }
-->
</style>
<p style="margin-left:175px; font-size:11px; font-family:verdana; font-weight:normal;">
<font color="black"><font face="Verdana" size="-1"></font>
<a href="#">Home</a> ◘
<a href="my albums.htm">My Albums</a> ◘ <a href="mp3.htm">♪MP3♪</a> ◘
<a href=mailto:ls06muzikatyahoo.com">Contact</a> ◘
<a href="events.htm">Events</a> ◘ <a href="faq.htm">FAQ</a> ◘
</p>
<img style="border: 4px double #000; margin-left:175px;"
src="me_piano.jpg;"
width=742px;
height=120px;
</style>
</head>
</html>
<p style="color:black; margin-left:175px; line-height:2.5; font-size:11px; font-family:verdana; font-weight:normal; text-indent:10px;">Hey all. This is a test page I have made using CSS/HTML. Just trying out some stuff. I enjoy learning CSS/HTML. I find CSS a bit challenging. But, with a bit of experimenting, I am able to learn lots and do lots. Just now, I learned to space out this paragraph to make it more readable. Yay! :).<br><br>I have not yet decided what to make out of this page, but I think I may make it my music page, or my cousins' music page. Now that's a thought!<br><br>This layout is one that I have always wondered how to create for myself. It seriously isn't easy being a web designer. I'm a beginner, and have learned a huge ton. Still learning! Now I know that there are two ways to make sites. One way is using CSS, the other is HTML. CSS I've heard and learned about, is easier.<br><br>I am glad that I have got my hands into web designing. If I hadn't, I wouldn't have created anything.
</p>
|
| Code: |
<img style="border: 4px double #000; margin-left:175px;"
|
This is the image code above. It shows in red, when I view the source on Firefox. Not sure what happened. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1100
|
| Posted: Thu May 15, 2008 8:14 pm |
|
|
|
Learn to use classes in your css to cut down on the content bloat. I have redone the page how I would do it, probably not how you want it to look but I had a hard time ge3tting a good view in my head from all the misplaced and misused code. I used html instead of xhtml as it is what you should be using.
Browsers do not like the music symbols in the links either. You should be using images.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Using mastHeads</title>
<style type="text/css">
body {
background: url('bg_page_container.gif') repeat-y top center;
width: 742px;
height: 140px;
font-family: verdana;
color: black;
font-size:11px;
}
a:link {color: #000; text-decoration: none; }
a:visited {color: #000; text-decoration: none; }
a:hover {color: #666; text-decoration: underline; }
a:active {color: #000; text-decoration: none; }
.one {
margin-left: 175px;
font-size: 35px;
font-family: freestyle script;
}
.nav {
margin-left: 175px;
display: inline;
}
.three {
margin-left: 175px;
line-height: 25px;
text-indent: 10px;
}
.image {
border: 4px double #000;
margin-left:175px;
width=742px;
height=120px;
}
</style>
</head>
<body>
<p class="one">My Music: From Past to Present</p>
<div class="nav">
<a href="#">Home</a> | <a href="my albums.htm">My Albums</a> | <a href="mp3.htm">♪MP3♪</a> | <a href="mailto:ls06muzikatyahoo.com">Contact</a> |
<a href="events.htm">Events</a> | <a href="faq.htm">FAQ</a>
</div>
<img class="image" src="me_piano.jpg;" alt="">
<p class="three">Hey all. This is a test page I have made using CSS/HTML. Just trying out some stuff. I enjoy learning CSS/HTML. I find CSS a bit challenging. But,
with a bit of experimenting, I am able to learn lots and do lots. Just now, I learned to space out this paragraph to make it more readable. Yay! :).
<br><br>
I have not yet decided what to make out of this page, but I think I may make it my music page, or my cousins' music page. Now that's a thought!
<br><br>
This layout is one that I have always wondered how to create for myself. It seriously isn't easy being a web designer. I'm a beginner, and have learned a huge ton. Still
learning! Now I know that there are two ways to make sites. One way is using CSS, the other is HTML. CSS I've heard and learned about, is easier.
<br><br>
I am glad that I have got my hands into web designing. If I hadn't, I wouldn't have created anything.</p>
</body>
</html> |
|
|
beginner.html
Joined: 02 Aug 2007
Posts: 365
|
| Posted: Fri May 16, 2008 6:40 am |
|
|
|
| Thanks, but it doesn't work out too well. The image isn't as big as it should be. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1100
|
| Posted: Fri May 16, 2008 10:38 am |
|
|
|
On this line of html code,
<img class="image" src="me_piano.jpg;" alt="">
make it like this
<img class="image" src="me_piano.jpg;" alt="" width="742" height="120"> |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
