HTML Problem

Programming
Tutor: None Selected Time limit: 5 Days

I am beginning to build my first website and have stumbled upon a curious problem. I have read multiple books on coding and have taken various HTML and CSS classes, however, for the life of me I can't seem to figure out why when i try to insert a search box, logo, or navigation into the site they appear at a humungous size. My coding appears to be correct and i've never been told about this issue. Does anybody know what could be the problem.

Nov 30th, -0001
Send code
Jul 1st, 2013

<html>

<head>

<link rel="stylesheet" type="text/css" href="css/main.css" />

</head>

<body>

<div class="headerMenu">

<div id="wrapper">

<div class="logo">

<img src="img/Music_Wave_ logo_(2).png align= top left"

<div/>

<div class="search_box">

<form method="get" action="/search" id="search">

  <input name="q" type="text" size="80" placeholder="Search for artists, music, playlists" />

  <div id="mainnav">    

           

           <a href="index.html">Home</a>

           <a href="us.html">Us</a>

           <a href="signup.html">Sign Up</a>

           <a href="login.html">Login</a> 

           

  <div/>

</form>

</form>

<div/>

<div/>

<div/>

</body>

</html>

CSS:

* {

margin: 0px;

padding: 0px;

font-family: Tahoma;

font-size: 1.5em;

 

}

.headerMenu {

background-color: #F5F5F5;

height:70px;

border-bottom: 0px;

padding-left: auto;

padding-right: auto;

width: 100%

}

#wrapper {

margin-left: auto;

marign-right: auto;

width: 1000px;

padding-top: 0px;

padding-bottom:0px;

}

.logo {

width: 25px;

}

.logo img {

width: 150px

height: 38px;

}

.logo:hover {

background-color:#A9E2F3;

}

.search_box {

position: absolute; top 13px;

margin-left: 300px;

}

#search input[type="text"] {

    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;

    border: 1px solid #d1d1d1;

    font: bold 12px Tahoma,Helvetica,Sans-serif;

    color: #bebebe;

    width: 250px;

    padding: 6px 15px 6px 35px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    -webkit-transition: all 0.7s ease 0s;

    -moz-transition: all 0.7s ease 0s;

    -o-transition: all 0.7s ease 0s;

    transition: all 0.7s ease 0s;

    }

#search input[type="text"]:focus {

    width: 200px;

    }


Jul 1st, 2013

incomplete code. 

Jul 1st, 2013

thats the problem?

Jul 1st, 2013

If thats your complete code ? Than you need to close HTML tags .

and your use text size "80" thats really odd. So change it to 14 or 16 for heading and normal font 11 or 12 maximum.


Thanks 

Jul 1st, 2013

Studypool's Notebank makes it easy to buy and sell old notes, study guides, reviews, etc.
Click to visit
The Notebank
...
Nov 30th, -0001
...
Nov 30th, -0001
Dec 5th, 2016
check_circle
Mark as Final Answer
check_circle
Unmark as Final Answer
check_circle
Final Answer

Secure Information

Content will be erased after question is completed.

check_circle
Final Answer