Jump to content

Archived

This topic is now archived and is closed to further replies.

Guest

[XHTML] Div pod divem

Recommended Posts

Myślałem, że już koniec moich problemów zw. z tworzeniem strony, ale niestety - nie. Bez owijania w bawełnę:

Na stronie glównej jest wszystko Ok, ale na kolejnej już są kłopoty - stopka pod treścią poszła w lewo (patrz screen niżej);

Na stronie głównej mam taki skrypt (obiekt) z przesuwającymi się newsami obrazkowymi.. nie pamiętam nazwy (screen) i jak go wywalę (bo chcę, by był tylko na stronie gł.) to stopka wtedy się przesuwa w lewo.

scr.jpg

Kod xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
   <meta name="Description" content="vantage /home/" />
   <meta http-equiv="Content-Language" content="pl" />
   <meta name="author" content="Adam R."/>

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

</head>
<body>

    <div id="top">

<div id="naglowek">

<?php
  include('div/naglowek.xyz);
?>

</div>


<div id="menu">

<?php
  include('div/menu.xyz');
?>

</div>


<div id="tresc" margin="2px"><br />

<span class="h1">treść <a href="#">Link :)</a> * treść *  treść * treść * treść * treść * treść * treść *</span>

<br /><br /><br /><br /><br /><br />

</div>

    </div>

<div id="stopka">

<?php
  include('div/stopka.xyz');
?>

</div>

</body>
</html>

Kod CSS:

html, body {
    font-family: verdana,helvetica,arial,sans-serif;
    font-style: normal;
    font-size: 11px;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    color: #000000;

}

body {
    background-color: #282D33;
    background-image: url(img/bg_up.jpg);
    background-repeat: repeat-x;
    background-position: top;
}

a:link {
    text-decoration: none;
    color: #9F9F9F;
}
a:visited {
    text-decoration: none;
    color: #9F9F9F;
}
a:hover {
    text-decoration: none;
    color: #CFCFCF;
}
a:active {
    text-decoration: none;
    color: #9F9F9F;
}

#top {
    width: 780px;
    margin: 0 auto 0 auto;
}

#naglowek {
    width: 770px;
    height: 120px;
    padding: 5px;
    background: url(img/logo.jpg);
}

#menu {
    width: 185px;
    padding: 5px;
    float: right;
    margin: auto;
    overflow: hidden;
    background-color: #252525;
    margin-bottom: 20px;
}

#menu a {
font-family: Verdana, Sans-serif;
font-size: 12x;
display: block;
width: 120px;
padding: 3px;
color: #BFBFBF;
margin-top: 2px;
text-decoration: none;
border-left: 6px solid #3E3E3E; }

#menu a:hover {
font-family: Verdana, Sans-serif;
font-size: 11px;
display: block;
width: 120px;
background-color: #DFDFDF;
text-decoration: none;
color: #2F2F2F;
border-left: 6px solid #AFAFAF; }

#menu li {
list-style-type: none; }

#tresc {
    width: 575px;
    padding: 5px;
    float: left;
    overflow: hidden;
    background-color: #2F2F2F;
}

#stopka {
    width: 575px;
    padding: 5px;
    float: left;
    overflow: hidden;
    background-color: #0F0F0F;
}

.h1 {color: #8F8F8F; font-size: 12px; font-weight: normal;}
.h1b {color: #8F8F8F; font-size: 12px; font-weight: bold;}
.h2 {color: #5577AA; font-size: 16px; font-weight: bold;}
.h2b {color: #5172AE; font-size: 11px; font-weight: bold;}
.logo {color: #5F5F5F; font-size: 12px; }
.stopka {color: #AFAFAF; font-size: 11px; }

Link to comment
Share on other sites

Guest Beniamins9

Spróbuj wrzucić DIV "stopka" do DIVA "top". Może zadziała. Moment... W css masz w stopce float: left. To znaczy że jest ok :) Przesuwa się w lewo bo ma tak napisane. Jakby to nie zadziałało to W DIVIE "stopka" usuń polecenie padding i float a napisz margin:auto i clear:both. U mnie działa :)

PS. Mógłbys mi podesłać ten skrypt do przesuwania obrazków ?

Link to comment
Share on other sites

Niestety bez zmian. A float: left, to dlatego, że ma być po lewej stronie, jak treść. Zresztą i bez tego nic się nie zmienia. Próbowałem każdego sposobu chyba.. najlepiej, jak po prostu napiszesz do mnie na GG, tak będzie łatwiej się dogadać.

/EDIT/

Poniżej dodaję link do wszystkich plików ze skryptu, w plikach txt masz napisane co gdzie i jak się wstawia. W sumie to są 4 pliki js (aczkolwiek jest to nie tyle java script, co jego lekka wersja), plik css do ustalenia stylu tego elementu + sam element.. no i oczywiście kod, który trzeba wstawić do pliku html, aby znalazł pliki js i css.

http://rapidshare.com/files/248445570/skrypt.rar.html

Link to comment
Share on other sites

Masz burdel w kodzie. Wywal diva zamykajacego przed <div id="stopka"> :

</div>

    </div>         <<<<<< wywalić

<div id="stopka">

Po tym stopka wyląduje tam gdzie powinna.

I wypadałoby zamknac zawartość include (apostrof po xyz):

<?php
  include('div/naglowek.xyz');
?>

edit:

I co to ma byc?

<div id="tresc" margin="2px">

albo style="margin:2px" albo wywal to do osobnego pliku, coś takiego jak margin="Xpx" nie istnieje.

edit2:

I jedziemy dalej:

.h1 {color: #8F8F8F; font-size: 12px; font-weight: normal;}
.h1b {color: #8F8F8F; font-size: 12px; font-weight: bold;}
.h2 {color: #5577AA; font-size: 16px; font-weight: bold;}
.h2b {color: #5172AE; font-size: 11px; font-weight: bold;}

???

Jeśli to są nagłówki (a tak to wygląda) - wtedy nie robisz z nich klas .h1 .h1b .h2 .h2b, tylko po ludzku h1, h2, h3, h4, bez kropek na początku. to są elementy html i html potrafi je sobie sam rozpoznać, nie trzeba dodatkowych klas robić.

Jeśli to nie są nagłówki to daj im jakieś nazwy nie nawiązujące do ich wywołania w html. .jakasKlasa .jakasKlasaBold etc.

Poczytaj troche o semantyce bo strasznie to wygląda : >

I podobnie, nie powinno się ustalać wielkości czcionki pikselami - to było dobre ładnych pare lat temu, kiedy monitory miały w zasadzie 3 rozdzielczości. Najlepiej robić to w "em":

http://www.clagnut.com/blog/348/

Kolejna rzecz - nawet jeśli chciałeś pod treścią dać troche wolnego miejsca, to nie przez miliard <br />. Treść powinna być przede wszystkim w <p></p> (ZAWSZE), a nie span - i temu p nadajesz margin-bottom: Xpx;

spanem sobie możesz np. wyróżnić jakiś kawałek tekstu poprzez zagniezdżenie go w p.

np. <p>blablablabla<span class="red">ten tekst bedzie na czerwono</span>blablablabla</p>

definiujesz do tego klase span.red, albo po prostu .red, podajesz kolor czy co tam chcesz i gotowe. do teog to wlasnie sluzy.

Twój kod powinien wyglądać teraz tak (Z css wywnioskowałem, że div "top" jest divem nadrzędnym dla pozostałych - lezy semantyka, powinen sie nazywać container, wrapper, lub jakkolwiek inaczej, byle by sugerował jego przeznaczenie, jesli jednak nie ma on być kontenerem to po pierwsze -nie zamknąłeś go w ogóle na początku, po drugie - nie dziw się, że strona sie rozjeżdża, skoro tylko #top ma ustawione marginesy boczne na auto. Kontener to podstawa. więc ostatecznie powinno to wyglądać tak jak poniżej):

<div id="container">

    <div id="naglowek">    
        <?php
          include('div/naglowek.xyz');
        ?>    
    </div>    
    
    <div id="menu">    
        <?php
          include('div/menu.xyz');
        ?>    
    </div>
        
    <div id="tresc">    
        <h1>treść</h1>
                <a href="#">Link :)</a>
                <p>* treść *  treść * treść * treść * treść * treść * treść *</p>
    </div>
        
    <div id="stopka">    
        <?php
          include('div/stopka.xyz');
        ?>    
    </div>

</div>

+ oczywiście odpowiednie zmiany w .css

Link to comment
Share on other sites

Wielkie dzięki. Dopiero się uczę o divach tak jak już wspominałem i wiele rozwiązań stosuję podpatrując strony znajomego - który niestety opiera się wciąż na tabelkach zamiast divów co jest nie do przyjęcia.

/EDIT/

Tak jak myślałem - wszystko wyszło. Ale jest jedno ale.. nie zgodzę się, że najlepiej wielkość czcionki określać w "em" -

polecam zajrzeć tutaj: http://www.kurshtml.boo.pl/css/wielkosc,czcionki.html

Link to comment
Share on other sites



  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...