HTML and CSS = Website: May 2011

Friday, May 27, 2011

Friday (5/27/11)

Finally today I finish the CD'S website but now I just need the link of the music so people can download.

I work on the main website and here is the link.

The main menu have the same effect of the CD'S site but with a different color when you pass the mouse over it.

For the menu I used the same style of the CD'S.

The CSS. In the css if you notes some commands that look something similar to this one below is because is not making any effect to the website.

/*h4 {
 width: 900px;
 color: #d7ceb2;
        text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
        font: 21px 'BazarMedium';
        letter-spacing: 9px;
 margin-left: auto;
 margin-right: auto; 
 padding-top: 50px;
}*/

Thursday, May 26, 2011

Thursday(5/26/11)

The website about the CD'S is almost done I just need to style the way of the website. Here is the picture of the website and the new LINK.

Tomorrow I will try to put every individual CD'S a box like the contact website.
Here is the code I will be using.

<div class="center">
<div class="position">

</div>
</div>

Here the CSS which give the style.

div.center
{
padding:2px;
margin:auto;
width:80%;
}
div.position
{
padding:10px;
border:1px solid gray;
background-color:#000000;
}

Wednesday, May 25, 2011

The website of the musician in almost done but however today I was working on the CD's website putting the cd's photos and the names of them.
Here a new link of the website. I still got to work with the commands and separate the h4 from the nav because now the nav is on top of the h4.
Here is how the menu nav is done and i give the effects of hover.

nav {
 position: absolute;
 left: 0;
 width: 100%;
}
nav ul {
 margin: 0 auto;
 width: 940px;
 list-style: none;
}
nav ul li {
 float: left;
}
nav ul li a {
 display: block;
 margin-right: 20px;
 width: 140px;
 font-size: 14px;
 line-height: 44px;
 text-align: center;
 text-decoration: none;
 color: #777;
}
nav ul li a:hover {
 color: #fff;
 }
nav ul li.selected a {
 color: #fff;
}

Tomorrow I will try to finish this site (CD'S) and keep working in the

main website.

Tuesday, May 24, 2011

Tuesday(5/24/11)

This sis the website of the CD's I just start this webpage and give the style here the link of th website. The picture above is how the website look.

Here is something I found out today when I was about to put the picture is this.

If I put the command like this :

<img src="pictureback.jpg" alt="cuecasback"/>

This will not give you and error .

If you try it like this.

            <img src="picturefrom.jpg" />
            <img src="pictureback.jpg" />

This will give you errors.

And here is a link to the CSS.

Friday, May 20, 2011

Friday

Thursday, May 19, 2011

Video command...((5)(19)(11))

I was working on the feedback that my teacher give from last week. I was reading trough the book of HTML 5 NOW and I watch the video. I learn how to created the video player and here is the code

<!Doctype html>
<meta charset="utf-8">
<video controls>
<source src="here name of the video">
<source src="here name of the video ">
</video>

In the video said that if I do this command this way I can put different videos for several browser.
I will practice this command tomorrow and read more the book. I don't have a link to where I practice the commands but here is a picture but I don't have a video so I will try to put one tomorrow.

Thursday, May 12, 2011

Thursday(5/12/11)

Few days ago I was wondering how I can created a music player using HTML . and today looking in the Internet I found a example which look great but I want to look for another that has the play list to.

Here a picture of how the music player look.

and here it what make possible the music player.

<embed name="name of song"
width="300"
height="90"
loop="false"
autostart="false" />

I will look and try to find a better tutorial.

Wednesday, May 11, 2011

Wednesday(5/11/11)

Yesterday was no progress because

Monday, May 9, 2011

Monday(Creating the Contact Page)

I was working on the website I decide to work on the Contact page.

Here is a picture of the page.

and I used to create the box are:
<div class="center">
</div>
And
<div class="position">
</div>

This will created the the rectangle.
The CSS is this below.

div.center
{
padding:2px;
margin:auto;
width:80%;
}
div.position
{
padding:10px;
border:1px solid gray;
background-color:#000000;
}

Friday, May 6, 2011

Friday (5/6/11)

Today I was working on the website and I was trying to center the background-images of the main page and I was using the the margin-left.
Example:
{
      margin-left: 450px;
}
The margin above is not wrong but the way my teacher tell me to do If I want to center a background-image or other things is using:

{
      margin-left: auto;
      margin-right: auto;
}

This command will center the image or p,h1,and everything you want to center.
Images of the website before and after.

Before.

And here the website after using the margins.

New Link of the website.

I have not validate my website for a while but today I did and here is is the result.

The HTML.

Also the CSS Level 3.

Thursday, May 5, 2011

Thursday(5/5/11)

Working on the website of the Musician I decide to made the main more clean I should created another website and link from the main page to where all the content is going to be.

Here picture of the main page now.

and here is a link to the website where all the content is going to be it start to look nice.

WEBSITE.