Mały Problem +Test Strony i Proponowane Poprawki

**szymkraw** · 03-02-2011

Witajcie.
Miałem za zadanie zrobić stronę internetową dowolnie rozbudowanej lecz nie mogę używać JavaScript.
Stworzyłem prostą stronę mój problem polega na tym, iż układ strony jest zachowany jedynie przy używaniu IE, lecz otwierając ja na Mozilla niestety układ ten jest zaburzony.
Czy wie ktoś jak to naprawić?

Chętnie posłucham też waszych rad co zmienić co usprawnić, co byście dodali itp.
Podaje kod to strony głównej na razie chce wysłuchać waszych opinii zanim przejdę do dalszych pytań.

Index.html

Kod:

<html>

<head>

<link rel="Stylesheet" type="text/css" href="style.css" />


<title>

</title>

</head>

<body>

<div id="top">
	<div id="HEADING"><img width= 780 src="banner.jpg"  /></div>
	<div id="MENU"><h1>MENU</h1></br>
				<ul id="button">
					<li><a href="index.html" title="Main Page">Main Page</a></li>
					<li><a href="teams.html" title="Teams">Teams</a></li>
					<li><a href="#" title="Gallery">Gallery</a></li>
				</ul>









        </div>
	<div id="BODY" hight="500px">The National Basketball Association (NBA) is the pre-eminent men's professional basketball 
		       league in North America which consists of thirty franchised member clubs, of which twenty-nine 
                       are located in the United States and one in Canada. It is an active member of USA Basketball (USAB), 
	 	       which is recognized by the International Basketball Federation as the National Governing Body (NGB) for
		       basketball in the United States. The NBA is one of the four major North American professional sports 
		       leagues, which include Major League Baseball (MLB), the National Football League (NFL), 
                       and the National Hockey League (NHL).
		       The league was founded in New York City on June 6, 1946 as the Basketball Association of America (BAA).
	               The league adopted the name National Basketball Association in 1949 after merging with the rival National Basketball League (NBL).
		       The league's several international as well as individual team offices are directed out of its head offices located in the Olympic Tower at 645 Fifth Avenue in New York City. 
		       NBA Entertainment and NBA TV studios are directed out of offices located in Secaucus, New Jersey.

</div>

<div id="END">
<ul>
<li><a href="info.html">Info</a></li>
<li><a href="contact.html">Contact</a></li>

</ul>
</div>

</div>







</body>
</html>

Style.css

Kod:

html, body {
	background-color: #686868;
	color: #fff;
	margin: 2.5cm;
	padding: 0;
	font: 15px, tahoma;
	
}

#top {
	width: 780px;
	
}

#HEADING {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #000000;
	height: 982px;
        border-style: double solid;
        border-width: thin;
        






        
}

#BODY {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #000000;
	height: 982px;
	
}

#END {
	clear: both;
	width: 100%;
	background-color: #888;
}

#button {
    width: 169px;
    font: bold 20px verdana, tahoma, arial, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    border: medium none inherit;
}

#button li {
    padding: 0;
    text-align: left;
}

#button li a {
    display: block;
    padding: 0 0 0 8px;
    border-left: 12px solid #fff;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

#button li a:hover {
    border-left: 12px solid FF9966; 
    color: FF9966; 
}
h1 {
    font: bold 20px verdana, tahoma, arial, sans-serif;
    text-align: center;
}
table {
    caption-side: top;
    margin: 55px;
    
    
}

table td {
        
}

table caption {
    font-size: large;
	color:#6CF;
}

table th {
    font-size: medium;
}

#END {
    width: 740px;
    font: bold 20px verdana, tahoma, arial, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    border: medium none inherit;
}

#END li {
    padding: 0;
    text-align: left;
}
#END ul li {
	float: left;
}
#END ul li {
	display: inline;
	white-space: nowrap;
}

#END li a {
    display: inline;
    padding: 0 0 0 8px;
    border-left: 12px solid #fff;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

#END a:hover {
    border-left: 12px solid FF9966; 
    color: FF9966; 
}
#table1
{
	list-style: none;
    margin: 0;
    padding: 0;
    border: medium none inherit;
}
#table1 td
{
	display: block;
    padding: 0 0 0 8px;
    border-left: 12px solid #fff;
    color: #fff;
    text-decoration: none;
    width: 100%;
}
#table td {
    padding: 0;
    text-align: left;
}
#table1 td a:hover
{
	border-left: 12px solid FF9966; 
    color: FF9966;
}

**Mad_Dud** · 03-02-2011

Strona się nie validuje The W3C Markup Validation Service więc nie mamy o czym rozmawiać.
Nie ma czegoś takiego jak </br>. Jest <br />.
<html> też jest nieprawidłowy HTML/XHTML Templates - The Web Standards Project

**szymkraw** · 03-02-2011

Ok poprawiłem index.html

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>

<head>

<link rel="Stylesheet" type="text/css" href="style.css" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>
NBA
</title>

</head>

<body>

<div id="top">
	<div id="HEADING"><img width= "780" src="banner.jpg" alt="" > </div>
	<div id="MENU"><h1>MENU</h1><br>
				<ul id="button">
					<li><a href="index.html" title="Main Page">Main Page</a></li>
					<li><a href="teams.html" title="Teams">Teams</a></li>
					<li><a href="#" title="Gallery">Gallery</a></li>
				</ul>









        </div>
	<div id="BODY" >The National Basketball Association (NBA) is the pre-eminent men's professional basketball 
		       league in North America which consists of thirty franchised member clubs, of which twenty-nine 
                       are located in the United States and one in Canada. It is an active member of USA Basketball (USAB), 
	 	       which is recognized by the International Basketball Federation as the National Governing Body (NGB) for
		       basketball in the United States. The NBA is one of the four major North American professional sports 
		       leagues, which include Major League Baseball (MLB), the National Football League (NFL), 
                       and the National Hockey League (NHL).
		       The league was founded in New York City on June 6, 1946 as the Basketball Association of America (BAA).
	               The league adopted the name National Basketball Association in 1949 after merging with the rival National Basketball League (NBL).
		       The league's several international as well as individual team offices are directed out of its head offices located in the Olympic Tower at 645 Fifth Avenue in New York City. 
		       NBA Entertainment and NBA TV studios are directed out of offices located in Secaucus, New Jersey.

</div>

<div id="END">
<ul>
<li><a href="info.html">Info</a></li>
<li><a href="contact.html">Contact</a></li>

</ul>
</div>

</div>







</body>
</html>

Wiec teraz ktoś mi powie dlaczego w IE wszystko wygląda normalnie a na Firefox nie

**lojciecdyrektor** · 03-02-2011

Na pewno jeden znacznik zamykający </div> za dużo, a tak w ogóle to napisz co jest nie tak...

Obawiam się, że nawet ścisłe trzymanie się standardów nie zagwarantuje identycznego wyglądu... Przeglądarka tylko interpretuje kod.

Ponieważ sam standardu się nie trzymam, to problemy takie jak ty mam na co dzień...

Pozdrawiam

**Mad_Dud** · 03-02-2011

Wszystkie div'y są na miejscu. Problem leży w clear: both;.

Clearing a float container without source markup

Zapoznaj się też z zerowaniem wszystkich marginesów w css'ie i ustawianiem ich na nowo.

**szymkraw** · 03-03-2011

Mad_Dud napotkałem problemy z clear: both; albo coś namieszałem albo coś nie gra, bardziej to pierwsze.
Więc pytam was o zdanie czy lepiej strona będzie wyglądać na przykład z 10-20 pixelowym obramowaniem, marginesem czy jak zrobię ją na całej powierzchni dostępnej bez marginesów itp

A jeśli z marginesami to jak to zrobić

Za pomocą box-sizing czy ustalić marginesy

Mile widziane pomysły lub szablony.

Kod się ąz tak nie zmienił jedynie szerokość nagłówka i stopki ustawiony jest na 1007px plus zmiana wizualna troszkę.

P.S
Jak zrobić graficzne obramowanie chodzi mi o to by stopka strony tak bardzo nie odcinała się od części gdzie się styka z menu i treścią

**lojciecdyrektor** · 03-03-2011

Z tymi divami to dałem ciała...

Napisał szymkraw

Jak zrobić graficzne obramowanie chodzi mi o to by stopka strony tak bardzo nie odcinała się od części gdzie się styka z menu i treścią

Jak chcesz zrobić płynne przejście to najprościej wykorzystać divy jak tabelę. Ja przy tworzeniu stron robię grafike strony np. w gimpie z zastosowaniem oczywiście rozmiarów w pikselach, a następnie tnę ją na części, które później oplatam divami i css.

Zaraz wyślę Ci na priva przykładowy css i stronę, która ma podobne rozwiązanie do Twojego z płynnym przejściem pomiędzy stopką a treścią zarówno w FF jak i IE.

Pozdrawiam

**szymkraw** · 03-03-2011

lojciecdyrektor dzięki raz jeszcze za wysłane materiały pomysł jest dobry, ale problem leży w tym, że podstrona "Teams" sama jest zbudowana z tabeli, w której są zawarte dwie osobne tabele wiec trochę się obawiam zrobić to w ten sposób i troszkę jestem niechętny do używania tabel ale jeśli wszystko inne zawiedzie zastosuje na pewno twój sposób.

A i dowiedziałem się dzisiaj, że nie muszę się martwić rozdzielczością ekranu ale wypadałoby by działała choćby na jeszcze jednej przeglądarce tak więc to co Mad_Dud mi wysłał bedę musiał jakoś przejrzeć i zastosować

Mam pytanie czy jako border mogę użyć jakiegoś pliku graficznego?
Chodzi o to by oddzielić stopkę, banner i ewentualnie menu od reszty

Temat: Mały Problem +Test Strony i Proponowane Poprawki

Narzędzia wątku

Display

Mały Problem +Test Strony i Proponowane Poprawki

Zasady Postowania

Subskrybuj