co tu poprawić html i css?

Post14 mar 2014, 21:09

czesc

co tu poprawić jeszcze :

<html>
<head><title>strona</title>
</head>
<body>

<div id="box1"><center>
<img src="logo1.jpg" width="1000" height="120" border="0"/></a></center></div>

<div id="box2">

<img src="logo2.jpg" width="1000" height="60" border="0"/></a>

</div>

<div id="box3"><center>
<div style="position: absolute; LEFT: 30px; TOP: 30px;">

<a href='adres'><font color="black"><p align="left">Strona Glowna</font></p></a>
<a href='adres'><font color="black"><p align="left">O mnie</font></p></a>
<a href='adres'><font color="black"><p align="left">O rybach</font></p></a>
<a href='adres'><font color="black"><p align="left">Galeria</font></p></a>
<a href='adres'><font color="black"><p align="left">Kontakt</font></p></a>

</div>

<img src="menu.jpg" width="250" height="400" border="0"/></a></center></div>

<div id="box4"><center>

<div style="background: url('tresc.jpg');background-repeat:no-repeat;color: white; height: 400px;
width: 800px;">
<center>

tekst jakis

</center>
</div>

</center></div>

<div id="box5"><center>
<img src="stopka.jpg" width="1000" height="60" border="0"/></a></center></div>

<style>
#box1{position: absolute;
left: 60px;top: 0px;z-index: 1;}

#box2{position: absolute;
left: 60px;top: 0px;z-index: 2;

}
#box3{position: absolute;left: 60px;font-family:arial;font-size:24px;
top: 123px;z-index: 3;}

a:hover{background-color:gray;}

a {text-decoration: none;}

p {text-align: left;}

#box4{position: absolute;left: 314px;top: 123px;z-index: 4;}

#box5{position: absolute;
left: 60px; top: 528px;z-index: 5;
<style>
</body>
</html>

Post14 mar 2014, 21:20

Po co używasz inline stylów w kodzie HTML?
Wszystko robi się przy użyciu klas i CSS aby oddzielić warstwę prezentacyjną.
Plik css ładujesz w nagłówku dokumentu, w pliku styles.css zawierasz wszelkie deklaracje które wykorzystujesz do ostylowania layoutu wliczając w to background.
Poczytaj na ten temat więcej...

Kod: Zaznacz cały

http://www.w3schools.com/html/html_layout.asp

Poniżej jeszcze podstawy kodowania templatek...

Kod: Zaznacz cały

http://learnlayout.com

Post16 mar 2014, 21:03

można to zrobić w inny sposób?

Kod: Zaznacz cały

<!doctype html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Hello, HTML5!</title>

<style>
      
header {height:100px;width:1000px; background-color:#00A693; border:1px solid white;clear:both}

article {height:500px; width:500px; background-color:#00A693; border:1px solid white;clear:both }

aside {height:500px; width:500px; background-color: #00A693; position:absolute; margin-left:500px; bottom:113px;border:1px solid white;clear:both}

footer {height:60px; width:1000px;background-color:#00A693;boder:1px solid white;clear:both;}

</style>   
</head> 
 
<body>
<header>naglowek</header>

<article>article</article>

<aside>aside</aside>

<footer>stopka</footer>

</body>    
    
</html>

Post20 mar 2014, 18:35

Starsze wersje przeglądarek nie interpretują znaczników HTML5, lepiej zrobić templatkę na divach i później opakować w znaczniki HTML5. Style obowiązkowo przenieść do zewnętrznego pliku styles.css.

Post20 mar 2014, 22:47

Można ewentualnie dodać myk z javąscript, ale będzie problem przy przeglądarkach z NoScript i innymi narzędziami do blokowania skryptów.

Kod: Zaznacz cały

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
<![endif]-->

Tego scripta wrzucasz, a potem w CSS formatujesz jako display:block

Post04 cze 2014, 16:23

Brak znaczników meta: keywords i description, brak doctype. Poza tym tak jak pisali powyżej: style określa się w arkuszu CSS i przypisuje do elementów na podstawie nazw klas / id.