Ayato
Power Member
Olá!
Estava agora a tratar de arranjar o site, pouco a pouco. E tentei dividir aquilo a que chamo "Navigation Bar" em 5 (em CSS), porque vai 5 temas: "Home", "GIZ", "Escola", "Contactos" e "Ano Lectivo 2008/2009".
Os primeiros quatro temas vão ser ser "misturados" com JavaScript para que quando "mouseon" apareçam «submenus» clicáveis.
Voltando à minha dúvida, ao fazer a divisão... tive o resultado que vocês podem observar no site:
http://www.projectogiz.com
Não era aquele o meu objectivo... Tentei o elemento "float:left" mas não ajudou... Se alguém me puder ajudar... Vou colocar os códigos aqui.
P.S.: O que acham do "logótipo", acham melhor com sombras, ou dar uma cor a cada sombra?
OS CÓDIGOS
index.html
Estava agora a tratar de arranjar o site, pouco a pouco. E tentei dividir aquilo a que chamo "Navigation Bar" em 5 (em CSS), porque vai 5 temas: "Home", "GIZ", "Escola", "Contactos" e "Ano Lectivo 2008/2009".
Os primeiros quatro temas vão ser ser "misturados" com JavaScript para que quando "mouseon" apareçam «submenus» clicáveis.
Voltando à minha dúvida, ao fazer a divisão... tive o resultado que vocês podem observar no site:
http://www.projectogiz.com
Não era aquele o meu objectivo... Tentei o elemento "float:left" mas não ajudou... Se alguém me puder ajudar... Vou colocar os códigos aqui.
P.S.: O que acham do "logótipo", acham melhor com sombras, ou dar uma cor a cada sombra?
OS CÓDIGOS
index.html
layout.css<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Este é um site referente a um trabalho em desenvolvimento para a disciplina de Ãrea de Projecto da Escola Secundária José Gomes Ferreira.
Projecto coordenado pela professora Maria João Ribeiro Rodrigues Alves." />
<link REL=StyleSheet HREF="layout.css" Title="text/css" />
<title>Projecto GIZ (Grupo de Investigação Zoófila)</title>
</head>
<body>
<div class="container">
<!-- Header -->
<div id="logo"></div>
<div id="navbar-home"><center>HOME</center></div>
<div id="navbar-giz"><center>GIZ</center></div>
<div id="navbar-escola"><center>ESCOLA</center></div>
<div id="navbar-contactos"><center>CONTACTOS</center></div>
<div id="navbar-anolectivo"><center>Ano Lectivo 2008/2009</center></div>
<div id="welcome-section"></div>
<!-- Main Content -->
<div id="column-left"><br><br><img border="0" alt="free counter" src="http://xyz.freelogs.com/counter/index.php?u=ayato&s=fdg" ALIGN="middle" HSPACE="4" VSPACE="2"><script src=http://xyz.freelogs.com/counter/script.php?u=ayato></script><br>Contador desde 1 de Fevereiro de 2009<br><img src="Testing/not_pass.jpg" width="173,5" height="173"><br><img border="0" alt="hit counter" src="http://xyz.freelogs.com/counter/index.php?u=rahxephon&s=nextgen" ALIGN="middle" HSPACE="4" VSPACE="2"><script src=http://xyz.freelogs.com/counter/script.php?u=rahxephon></script><br>Contador de Usuário desde 1 de Fevereiro de 2009</div>
<div id="sidebar"><img src="Testing/under_construction.gif" width="200" height="200"><img src="Testing/site_construction.jpg" width="200" height="180"></div>
<!-- Footer -->
<div id="footer"></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/* STANDARD HTML TAG RESET */
form {
border:0;
margin:0px;
padding:0px;
}
li {
border:0;
margin:0px;
padding:0px;
}
ul {
border:0;
margin:0px;
padding:0px;
}
p {
border:0;
margin:0px;
padding:0px;
}
h3 {
border:0;
margin:0px;
padding:0px;
}
h2 {
border:0;
margin:0px;
padding:0px;
}
h1 {
border:0;
margin:0px;
padding:0px;
}
body {
border:0;
margin:0px;
padding:0px;
}
/*END*/
/* STANDARD HTML TAG DEFINITION */
input {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}
form {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}
body {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}
h1{font-size:24px; /* ...other properties... */}
h2{font-size:18px; /* ...other properties... */}
h3{font-size:13px; /* ...other properties... */}
a:visited{color:#0033CC;}
a:link{color:#0033CC;}
a:hover {color:#666666;}
/*END*/
/* PAGE ELEMENTS */
.container{
margin:0;
width:1000px;
}
/* NAVIGATION */
#navbar-home{
margin-left:175px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
height:35px;
width:165px;
border-right:1px solid #000000;
}
#navbar-giz{
margin-left:340px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:165px;
height:35px;
border-right:1px solid #000000;
}
#navbar-escola{
margin-left:505px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:165px;
height:35px;
border-right:1px solid #000000;
}
#navbar-contactos{
margin-left:670px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:165px;
height:35px;
border-right:1px solid #000000;
}
#navbar-anolectivo{
margin-left:835px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:164px;
height:35px;
border-right:1px solid #000000;
}
/* LOGOTYPE */
#logo{
background:url(logo.jpg) no-repeat;/* background image for "Bem-Vindos ao Projecto GIZ" or repeat X-line from a gradient image */
float:left;
height:175px;
width:175px;
}
/* WELCOME SECTION */
#welcome-section{
background:url(banner.jpg) no-repeat;/* background image for "Bem-Vindos ao Projecto GIZ" or repeat X-line from a gradient image */
height:140px;
margin-left:175px;
}
/* LEFT COLUMN OR THE NEWS PAGE AKA BODY */
#column-left{
float:left;
margin-right:30px;
width:472px;
}
#column-left body{
}
#column-left h1{
border-bottom:solid 1px #DEDEDE;
font-family: Trebuchet MS, Verdana;
margin-bottom:20px;
}
#column-left p{
font-size:14px;
color:#333333;
}
/* RIGHT COLUMN (sidebar) */
#sidebar{
float:left;
width:353px;
}
/* FOOTER (sidebar */
#footer{
clear:both;
color:#666666;
font-size:11px;
}
Última edição: