Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

naiani

Erros tamanho/posicionamento de divs

Por , em Desenvolvimento frontend

Recommended Posts

naiani    0

naiani
Postado

Bom dia, gente.

 

Tenho duas perguntas aqui com relacao a um layout de header + 3 colunas + footer, feito de acordo com esse tutorial: http://css.maxdesign.com.au/floatutorial/tutorial0916.htm. Vou postar primeiro os codigos, depois vou as duvidas.

 

CSS:

#container {	width: 90%;	margin: 0 auto;	background-color: #fff;	color: #000;	border: 1px dotted #ff0000;	line-height: 130%;}#title {	height: 152px;	background-image: url(titlebg_alt.jpg);	background-repeat: repeat-y;	background-color: #bab3d4;	background-position: left;	border-bottom: 2px solid #fff;}#title img#logo {	width: 90px;	height: 132px;	padding: 10px 0 0 6%;	float: left;}#title img#cglg {	width: 631px;	height: 35px;	padding: 40px 0 0 2%;}#title img#cto {	width: 323px;	height: 29px;	padding: 5px 0 0 2%;}#menu {	background-image: url(menubg_gold.jpg);	background-repeat: repeat-x;	background-position: top;	float: left;	width: 165px;	margin: 0;	padding: 0;	border-top: 10px solid #ba960e;	border-right: 2px solid #ba960e;	clear: left;}#menu ul {	list-style: none;	margin: 0;	padding: 0;}#menu a {	font: bold 0.8em Verdana, Arial, sans-serif;	color: #000066;	text-decoration: none;	text-align: right;	padding: 3px 5px 4px 0;	border-bottom: #000066 solid 1px;	height: 2.5em;	display: block;}#menu a:active {	color: #fff;	background-color: #ba960e;	border-right: thick solid #000066;}#menu ul ul {	position: absolute;	top: 0;	left: 100%;	width: 100%;}#menu ul ul li {	margin-bottom: -1px;}#menu ul ul li a {	border: 1px solid #ba960e;	color: #fff;	padding-bottom: 5px;	height: 2.3em;}#menu li {	position: relative;}div#menu ul ul {	display: none;	background-color: #000066;}div#menu ul li:hover ul {	display: block;}div#menu ul li:hover > a {	color: #fff;	background-color: #ba960e;	border-right: thick solid #000066;	padding-right: 2px;}#news {	font: 0.8em Verdana, Arial, sans-serif;	line-height: 130%;	float: right;	width: 230px;	margin: 0;	padding: 1em;	border-top: 10px solid #ba960e;	border-left: 2px dotted #ba960e;}#news ul {	list-style: none;	margin: 0;	padding: 0;}#content {	font: 0.9em Verdana, Arial, sans-serif;	text-align: justify;	margin-left: 165px;	padding-left: 1em;	margin-right: 230px;	padding-right: 1em;	border-top: 10px solid #ba960e;	max-width: 45em;}#content img {	vertical-align: top;	float: right;	heigth: 226px;	width: 188px;	top: 0px;	right: 0px;	padding-left: 10px;}#subcontent {	position: absolute;	border: 1px solid #000066;	background-color: #dfcf93;	width: 16%;	padding: 4px;	display: none;}#footer {	font: 0.75em Verdana, Arial, sans-serif;	clear: both;	margin: 0;	padding: 0.5em;	border-top: 2px solid #ba960e;}hr {	display: none;}
HTML:

<body>	<div id="container">		<div id="title">				<img src="bluelogo_sml.jpg" id="logo" alt="CGLG" />				<img src="title.png" alt="The Council of Great Lakes Governors" id="cglg" /><br />				<img src="subtitle.png" alt="Canadian Trade Office" name="cto" id="cto" />		</div>		<hr id="divider" />		<div id="menu">			<ul>				<li><a href="index.html" target="_parent">Home</a></li>				<li><a href="java script:showPage('aboutus.html', 'content');">About Us</a></li>				<li><a href="java script:showPage('states.html', 'content');">State Partners</a>					<ul>						<li><a href="java script:showPage('pa.html', 'content');">Pennsylvania</a></li>						<li><a href="java script:showPage('wi.html', 'content');">Wisconsin</a></li>					</ul>						</li>				<li><a href="java script:showPage('services.html', 'content');">Services</a></li>				<li><a href="java script:showPage('expdocs.html', 'content');">Export Documents</a>					<ul>						<li><a href="java script:showPage('expdocs1.html', 'content');">Canadian Customs Invoice</a></li>						<li><a href="java script:showPage('expdocs2.html', 'content');">NAFTA Certificate of Origin</a></li>						<li><a href="java script:showPage('expdocs3.html', 'content');">Harmonized Tariff Codes</a></li>						<li><a href="java script:showPage('expdocs4.html', 'content');">Cargo Control Document</a></li>						<li><a href="java script:showPage('expdocs5.html', 'content');">Bill of Lading</a></li>						<li><a href="java script:showPage('expdocs6.html', 'content');">Taxes</a></li>						<li><a href="java script:showPage('expdocs7.html', 'content');">Consumer Packaging and Labeling</a></li>						<li><a href="java script:showPage('expdocs8.html', 'content');">Role of a Customs Broker</a></li>					</ul>				</li>				<li><a href="java script:showPage('visiting.html', 'content');">Visiting Canada</a>					<ul>						<li><a href="java script:showPage('visaimm.html', 'content');">Visa and Immigration</a></li>						<li><a href="java script:showPage('bizcult.html', 'content');">Business Culture</a></li>						<li><a href="java script:showPage('faqs.html', 'content');">FAQs</a></li>					</ul>				</li>				<li><a href="java script:showPage('bizopp.html', 'content');">Business Opportunities</a></li>				<li><a href="java script:showPage('links.html', 'content');">Links</a></li>				<li><a href="java script:showPage('contactus.html', 'content');">Contact Us</a></li>			</ul>			<div id="imgslide">				<script type="text/javascript" src="imgslide.js"></script>			</div>		</div>		<hr id="divider" />		<div id="content">			<p><img id="imgfront" src="imgfront.jpg" />The Canadian Trade Office of the Council of Great Lake Governors provides SMEs in our partner states of <a href="java script:showPage('pa.html', 'content');">Pennsylvania</a> and <a href="java script:showPage('wi.html', 'content');">Wisconsin</a>, with an invaluable resource in the Canadian market. Our professional staff can assist companies to research, identify and capitalize on market opportunities in a broad range of industry sectors across Canada.</p>			<p>Canada, the United States’ largest trading partner, continues to be a lucrative market for U.S. Exporters. The strongest Canadian dollar in thirty years makes U.S. products more competitive than ever. From opportunities in traditional industry like oil, gas and mining to innovative industries such as information technology and biotechnology, our staff can provide the background and strategic entry advice your company needs to successfully navigate the Canadian market.</p>			<p>Review our website to learn more about the services we offer and how we can help you to either begin, or expand your business in Canada.</p>			<p id="disclaimer">* While the Canadian Trade Office of the Council of Great Lakes Governors attempts to ensure the correctness of the information presented here, we cannot guarantee its reliability or its accuracy. The links provided are intended for informational purposes; however, the Canadian Trade Office assumes no responsibility or liability for information posted on linked sites.</p>		</div>		<hr id="divider" />		<div id="news">			<div id="updates">				<h3>Updates</h3>				<ul>					<li><strong>August 09, 2007</strong> - Mandatory nutritional labelling implementation period coming to an end. <a href="#" onclick="return overlay(this, 'subcontent', 'bottom')">More >></a></li>					<li><strong>January 23, 2007</strong> - New American law concerning the need of passport when entering the U.S. by air. <a href="#" onclick="return overlay(this, 'subcontent', 'bottom')">More >></a></li>				</ul>			</div>			<div id="subcontent">				<script type="text/javascript">					showPage('ddbox1.html', 'subcontent')				</script>			</div>			<br />			<hr />			<div id="cadusnews"><h3>Canada/U.S. News:</h3>				<script type="text/javascript">					var newsfeed=new gfeedfetcher("rssnews", "rssnewsclass", "_new")					newsfeed.addFeed("CBC", "http://rss.cbc.ca/lineup/money.xml")					newsfeed.addFeed("Globe&Mail", "http://www.theglobeandmail.com/generated/rss/BN/Business.xml")					newsfeed.addFeed("CNN", "http://rss.cnn.com/rss/money_latest.rss")					newsfeed.addFeed("MSNBC", "http://rss.msnbc.msn.com/id/3174182/device/rss/rss.xml")					newsfeed.displayoptions("datetime label")					newsfeed.setentrycontainer("li")					newsfeed.filterfeed(6, "datetime")					newsfeed.init()				</script>			</div>		</div>		<hr id="divider" />		<div id="footer">			<span><a href="index.html" target="_self">Home</a> | <a href="java script:showPage('aboutus.html', 'content');">About Us</a> | <a href="java script:showPage('states.html', 'content');">State Partners</a> | <a href="java script:showPage('services.html', 'content');">Services</a> | <a href="java script:showPage('expdocs.html', 'content');">Export Documents</a><br />			<a href="java script:showPage('visiting.html', 'content');">Visiting Canada</a> | <a href="java script:showPage('bizopp.html', 'content');">Business Opportunities</a> | <a href="java script:showPage('links.html', 'content');">Links</a> | <a href="java script:showPage('contactus.html', 'content');">Contact Us</a></span>			<br />			<span>All Rights Reserved. 2007. Developed by <a href="#" id="webdev">Naiani Rosa de Barros</a></span>		</div>	</div></body>
Postei apenas o <body>, pois o conteudo do <head> eh soh as configs especificas pro IE, a chamada pro CSS e pros JavaScripts que uso na pagina. Os 2 erros ocorrem tanto no IE7 como no FF.

 

Problema 1: a coluna #menu nao chega ateh onde comeca o #footer, mas no codigo do tutorial, funciona. Alguem sabe me dizer o pq?

 

Problema 2: a coluna da direita nao fica onde deveria (encostada no #header). Testei o codigo do tutorial, e funciona perfeitamente. Mas o meu codigo nao funciona, eh como se tivesse um clear: right na coluna do meio, ou um clear: left na da direita, mas nao tem.

 

Nao sei o que tah acontecendo, jah tentei modificar parametros e tudo mais, mas nada funciona, e nao tenho ideia do que seja, portanto, qq ajuda eh bem-vinda.

 

Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

naiani    0

naiani
Postado

Descobri, apos questionar em outro forum, que o problema da coluna #news fora do lugar era simplesmente pq, no codigo, ela teria que vir ANTES da #content, mas estava vindo depois. Mudei a ordem do codigo e o posicionamento funcionou.Continuo procurando uma solucao pro menu.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito