Zaloguj się

swimmerpoland · 02-03-2010, 01:34

Witam wszystkich, mam nadzieję, że uzyskam tu pomoc na mój problem...
Przejdę do rzeczy - wykonuję stronę na potrzeby szkolne. Niestety wystąpiły 2 problemy, z którymi ja sobie poradzić nie mogę.
Wszystko do obejrzenia na: http://www.fliper.webd.pl/franc/
Problem 1: pośrodku na index.html znajduje się obrazek wieży Eiffla zapisany w formacie png, dość cięzki. Czy sposobem na szybsze ładowanie byłoby obniżenie jego wagi? W jaki sposób? Png specjalnie ze względu na elementy przezroczyste.
Problem 2: zachowanie stopki – różnie i w index.html jak i w wnf.html – w zupełnie innej pozycji (odległość od obrazka, jednak to nie od jego wysokości zależy).
Mogę liczyć na Waszą pomoc? Pozdrawiam!

**dziamber** · 02-03-2010, 02:23

Może wklej kod bo tak na sucho to trudno spekulowac.

swimmerpoland · 02-03-2010, 02:41

HTML:

Kod:
<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="generator" content="WebSite PRO 4.3" />

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />

  <meta name="author" content="Filip Wojciechowski" />

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

  <title>Why not Français? :: strona przedmiotowa języka francuskiego</title>

</head>

<body>

<div id="logo"></div>

<div id="left_menu">

<div id="left_menu_i">

<ul id="left_menu">

<li><a href="index.html" alt="Start"><div id="lm_start"></div></a></li>

<li><a href="wnf.html" alt="Why not Francais?"><div id="lm_wnf"></div></a></li>

<li><a href="podreczniki.html" alt="Podręczniki"><div id="lm_podreczniki"></div></a></li>

<li><a href="pso.html" alt="PSO"><div id="lm_pso"></div></a></li>

<li><a href="gimnazjalisci.html" alt="Gimnazjaliści"><div id="lm_gimnazjalisci"></div></a></li>

<li><a href="licealisci.html" alt="Licealiści"><div id="lm_licealisci"></div></a></li>

<li><a href="dlamaturzystow.html" alt="Dla maturzystów"><div id="lm_dlamaturzystow"></div></a></li>

</ul>

</div>

</div>

<div id="right_menu">

<div id="right_menu_i">

<ul id="right_menu">

<li><a href="kalendarium.html" alt="Sprawdziany, klasówki - Kalendarium"><div id="rm_kalendarium"></div></a></li>

<li><a href="dodatkowe.html" alt="Zajęcia dodatkowe"><div id="rm_dodatkowe"></div></a></li>

<li><a href="konkursy.html" alt="Konkursy"><div id="rm_konkursy"></div></a></li>

<li><a href="kulturalnie.html" alt="Kluturalnie"><div id="rm_kulturalnie"></div></a></li>

<li><a href="ogloszenia.html" alt="Ogłoszenia"><div id="rm_ogloszenia"></div></a></li>

<li><a href="linki.html" alt="Ważne linki"><div id="rm_waznelinki"></div></a></li>

<li><a href="ilunasjest.html" alt="Ilu nas jest?"><div id="rm_ilunasjest"></div></a></li>

</ul>

</div>

</div>

<div id="content_background"><div id="content_box" class="h4">

Przykładowy tekst

</div></div>

<div id="foot"><div id="sign">Realizacja: Filip Wojciechowski</div></div>

</body>

</html>

CSS:

Kod:
* {margin:0;padding:0;}

body {background:#AADA2C url('img/top_bg.png') repeat-x; font-family:'trebuchet ms', sans-serif;}

#eiffel {margin-left:auto; margin-right:auto; top:0px; width:700px; height:850px; background:transparent url('img/eiffel.png');}

#content_background {position:relative; margin-left:auto; margin-right:auto; top:100px; width:625px; height:654px; z-index:190; background:transparent url('img/content_background.png');}

#foot {position:relative;  height:20px; background:url('img/foot_line.png') repeat-x;}

#sign {font-size:12px; color:#DDD; line-height:20px; padding-left:2px; font-weight:bold}

#logo {position:absolute; margin-left:10%; margin-top:30px; width:267px; height:120px; z-index:200; background:transparent url('img/logo.png') no-repeat;}

#content_box {position:absolute; padding-left:20px; padding-top:50px; padding-right:40px; padding-bottom:20px;}

.h1 {font-size:18px; color:#000000; font-weight:bold;}

.h4 {color:#000000;}

#left_menu {width:166px; position:absolute; z-index:100; margin-top:100px; margin-left:6%;}

#left_menu_i {margin-bottom:15px; list-style-type:none;}

#left_menu li {display:block; height:52px; margin:10px;}

#left_menu a img {border:none; margin-left:6%; position:relative; top:2px;}

#lm_start {width:166px; height:52px; background:transparent url('img/buttons/start.png') no-repeat;}

#lm_start:hover {background:transparent url('img/buttons/start_h.png') no-repeat;}

#lm_wnf {width:166px; height:52px; background:transparent url('img/buttons/wnf.png') no-repeat;}

#lm_wnf:hover {background:transparent url('img/buttons/wnf_h.png') no-repeat;}

#lm_podreczniki {width:166px; height:52px; background:transparent url('img/buttons/podreczniki.png') no-repeat;}

#lm_podreczniki:hover {background:transparent url('img/buttons/podreczniki_h.png') no-repeat;}

#lm_pso {width:166px; height:52px; background:transparent url('img/buttons/pso.png') no-repeat;}

#lm_pso:hover {background:transparent url('img/buttons/pso_h.png') no-repeat;}

#lm_gimnazjalisci {width:166px; height:52px; background:transparent url('img/buttons/gimnazjalisci.png') no-repeat;}

#lm_gimnazjalisci:hover {background:transparent url('img/buttons/gimnazjalisci_h.png') no-repeat;}

#lm_licealisci {width:166px; height:52px; background:transparent url('img/buttons/licealisci.png') no-repeat;}

#lm_licealisci:hover {background:transparent url('img/buttons/licealisci_h.png') no-repeat;}

#lm_dlamaturzystow {width:166px; height:52px; background:transparent url('img/buttons/dlamaturzystow.png') no-repeat;}

#lm_dlamaturzystow:hover {background:transparent url('img/buttons/dlamaturzystow_h.png') no-repeat;}

#right_menu {width:166px; position:absolute; z-index:100; margin-top:100px; margin-left:70%;}

#right_menu_i {margin-bottom:15px; list-style-type:none;}

#right_menu li {display:block; height:52px; margin:10px;}

#right_menu a img {border:none; margin-left:70%; position:relative; top:2px;}

#rm_kalendarium {width:166px; height:52px; background:transparent url('img/buttons/kalendarium.png') no-repeat;}

#rm_kalendarium:hover {background:transparent url('img/buttons/kalendarium_h.png') no-repeat;}

#rm_dodatkowe {width:166px; height:52px; background:transparent url('img/buttons/zajecia.png') no-repeat;}

#rm_dodatkowe:hover {background:transparent url('img/buttons/zajecia_h.png') no-repeat;}

#rm_konkursy {width:166px; height:52px; background:transparent url('img/buttons/konkursy.png') no-repeat;}

#rm_konkursy:hover {background:transparent url('img/buttons/konkursy_h.png') no-repeat;}

#rm_kulturalnie {width:166px; height:52px; background:transparent url('img/buttons/kulturalnie.png') no-repeat;}

#rm_kulturalnie:hover {background:transparent url('img/buttons/kulturalnie_h.png') no-repeat;}

#rm_ogloszenia {width:166px; height:52px; background:transparent url('img/buttons/ogloszenia.png') no-repeat;}

#rm_ogloszenia:hover {background:transparent url('img/buttons/ogloszenia_h.png') no-repeat;}

#rm_waznelinki {width:166px; height:52px; background:transparent url('img/buttons/waznelinki.png') no-repeat;}

#rm_waznelinki:hover {background:transparent url('img/buttons/waznelinki_h.png') no-repeat;}

#rm_ilunasjest {width:166px; height:52px; background:transparent url('img/buttons/ilunasjest.png') no-repeat;}

#rm_ilunasjest:hover {background:transparent url('img/buttons/ilunasjest_h.png') no-repeat}

**dziamber** · 02-03-2010, 21:56

Co do tego obrazka to jedyne co mi do głowy przychodzi to pociąc go na kilka mniejszych. Co do tej stopki, możesz zawsze ustawic ją aby zawsze była w tej samej pozycji używając position: absolute; ale to nie jest zbyt dobre rozwiązanie, ale tylko takie mi przychodzi do głowy. Z tego gąszczu kodu wiele nie da się wyciągnac Smile

misakyy · (Ten post był ostatnio modyfikowany: 03-03-2010, 05:51 przez misakyy.)

jeśli chodzi o stopke to spróbuj wywalić position: relative i zamiast tego wstawić clear: both;

**dziamber** · 03-03-2010, 23:10

No tak i mamy jasność, jak masz position relative to stopka układa się względem selektora id lub klasy w którym się znajduje.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie