[XHTML] Div pod divem

Czerwiec 25, 2009

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.

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; }

Czerwiec 25, 2009

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 ?

Czerwiec 25, 2009

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

Zap · Czerwiec 25, 2009

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?

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

Czerwiec 26, 2009

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

Zaloguj się

Zarchiwizowany

[XHTML] Div pod divem

Polecane posty

Gość

Link do komentarza

Udostępnij na innych stronach

Gość Beniamins9

Link do komentarza

Udostępnij na innych stronach

Gość

Link do komentarza

Udostępnij na innych stronach

Zap

Link do komentarza

Udostępnij na innych stronach

Gość

Link do komentarza

Udostępnij na innych stronach

Kto przegląda 0 użytkowników

CD-Action

Przeglądaj

Aktywność