I'm a newbie... what am I dooing wrong?

Community Off Topic
#1

Hi 4 all! I’m a newbie in HTML and CSS.
I’ve made my on web page, but I cant align the navigaton bar menus on the center of the cell table.

image
image3745×579 589 KB

Below is the code… I 've made a search on the site how to insert the html code but I couldn’t find a better way… sorry if I made a mistake.

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>index</title>

<style>
.navbar {
overflow: hidden;
background-color:teal;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: cyan;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px; border: none;
outline: none;
color: cyan;
padding: 14px 16px;
background-color: inherit;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: LightSeaGreen;
}
.dropdown-content {
display: none;
position: absolute;
background-color: cyan;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: teal;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>


<body>
<table style="text-align: left; width: 100%; background-color:teal;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(204, 255, 255);" colspan="1" rowspan="1" align="center" valign="middle">
<img style="width: 1026px; height: 124px;" alt="IMAGE" src="decebal.jpg" align="middle"></td>
</tr>
<tr>
<td colspan="1" rowspan="1" align="center" valign="middle">

<div class="navbar">
  <a href="INDEX.HTML">ACASA</a>

  
<div class="dropdown">
    <button class="dropbtn">DESPRE NOI 
      <i class="fa fa-caret-down"></i>
    </button>
    
<div class="dropdown-content">
      <a href="#">ISTORIC</a>
      <a href="#">VIZIUNE</a>
      <a href="#">MANAGEMENT</a>
</div>
</div> 

<div class="dropdown">
    <button class="dropbtn">SCOALA
      <i class="fa fa-caret-down"></i>
    </button>
    
<div class="dropdown-content">
      <a href="#">STRUCTURA AN</a>
      <a href="#">SCOLARIZARE</a>
      <a href="#">ORAR</a>
</div>
</div>
<div class="dropdown">
    <button class="dropbtn">PERSONAL
      <i class="fa fa-caret-down"></i>
    </button>
    
<div class="dropdown-content">
      <a href="#">PROFESORI</a>
      <a href="#">ADMINISTRATIV</a>
      <a href="#">CARIERE</a>
</div>
</div>

<div class="dropdown">
    <button class="dropbtn">ELEVI
      <i class="fa fa-caret-down"></i>
    </button>
    
<div class="dropdown-content">
      <a href="#">ELEVI</a>
      <a href="#">REGULAMENTE</a>
      <a href="#">REVISTĂ</a>
    
</div>
</div>

<div class="dropdown">
    <button class="dropbtn">CONTACTE
      <i class="fa fa-caret-down"></i>
    </button>
    
<div class="dropdown-content">
      <a href="mailto:scoala@yahoo.com">MAIL</a>
      <a href="#">ADRESA</a>
      
</div>
</div>

</td>
</tr>
<tr>
<td style="background-color: rgb(204, 255, 255);" colspan="1" rowspan="1" align="center" valign="middle"><img style="width: 724px; height: 442px;" alt="SCOALA" src="bgindex.jpg" align="middle"></td>
</tr>
</tbody>
</table>
#2

This tag is not needed in HTML5 so I won’t dwell on corrections required. The defacto content type is text/html.

Here is the HTML5 skeleton

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All the meta data we need for HTML5</title>
</head>
<body>

</body>
</html>

You have a style sheet so all the above properties should be written there. Inline styles are a nightmare waiting to happen six months down the road.

table {
    border-collapse: collapse;
    border: 1px solid black;
    width: 100%;
    background-color: teal;
    padding: 2px;
}
td {
    background-color: rgb(204, 255, 255);
    text-align: center;
}

Default colspan and rowspan are 1 so do not need to be declared.

<table>
  <tbody>
    <tr>
      <td>

      </td>
    </tr>
  </tbody>
</table>

Again, CSS properties belong in the style sheet, not in the tag.

img[src=decebal.jpg] {
    width: 1026px;
    height: 124px;
    margin: 0 auto;
}

Alternate text is meant to describe an image, when a description is helpful to user agents or assistive technology users. When there is nothing to describe, leave it empty (but leave it in the tag).

alt=""

The header graphic is not something we need to describe since it really is just window dressing. Ideally that should be a CSS background image, not an img tag.

Servers are generally case sensitive and for that reason convention has it that all URL’s are written in lowercase to prevent errors or confusion.

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

Pretty sure that attribute is deprecated in HTML5. Use CSS line-height to help middle align vertically.

el {
    height: 2em;
    line-height: 2em;
    font-size: 1em;
}

If what I understand of your question is that you wish to center the menu in the page, you should be able to do that with,

.navbar {
    text-align: center;
}

On the whole, tables are a poor choice when creating a layout since they are quirky and need a lot of work, and they are not as responsive as CSS layouts. You may wish to set this layout aside and come up with one that does not use a table. It will mean doing some reading, but you’ll still have your hair at the end of the day.

1 Like
#3

Tks a lot for your answer… as I wrote I’m a newbie… still learning… don’t throw with rotten tomatoes!:rofl:
I will try to read more. I will come back with the result.

1 Like
#4

Trying to build a webpage from scratch is something that we should go into after we’ve learned the core concepts. Don’t try to learn as you go or you will be forever hitting walls and making huge mistakes you don’t recognize. Take the HTML and CSS track so you cover the fundamentals. Leave the project for later.

#5

I have another question…
You wrote:

[quote]If what I understand of your question is that you wish to center the menu in the page, you should be able to do that with,

.navbar {
text-align: center;
}
[/quote]
but in my code is wrote this instruction, and the navigation bar doesn’t align to center… in fact the menus I need to align to center of the table cell.

#6

I cannot help you with this any further until it is cleaned up. As suggested, set it aside and take the courses. Be sure to do follow-up reading for each lesson or unit. There is a lot to learn and you need to become familiar with the online documentation and other resources available to learners.

Mozilla Developer Network (MDN) and W3C are two such resources that are invaluable to all developers, not just learners. Familiarize yourself with those environments so you can find answers quickly.

1 Like
#7

ok, tks for your answer and your time!

1 Like
#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.