Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Search box, logo, and navigation coding size problem

    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.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    We wouldn't know the problem if we can't see any code.

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the code :
    <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="menu">
    <a href="#">Home</a>
    <a href="#">Us</a>
    <a href="#">Sign Up</a>
    <a href="#">Login</a>

    <div/>
    </form>

    </form>
    <div/>
    <div/>
    <div/>
    </body>
    </html>

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You have errors. The closing is "</div>" not "<div/>" for example. You have two form end tags. You might want to indent the code to make it easier to follow:

    Code:
    <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="menu">
                <a href="#">Home</a>
                <a href="#">Us</a>
                <a href="#">Sign Up</a>
                <a href="#">Login</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </body>
    </html>
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    a) You didn't close your img tag and your properties are all messed up.
    b) I'm assuming your browser isn't zoomed in?
    c) Can we see the CSS as well?
    d) Why is there a header menu div and a wrapper div. What's different about them?

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    CSS code:

    * {
    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;
    }

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    The size issues lie in your use of the 1.5em font-size in the universal selector (*). From what I've read, this can cause problems. I only use the universal selector for margin and padding resets. Take care of the font issues when defining p, h1-6, and a selectors later on.

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •