Strona z fullpage js (PROBLEM)

pytanie zadane 27 stycznia 2017 w HTML i CSS przez DzikWojownik Początkujący (430 p.)

Siemka

mam problem ze stroną.

Zrobiłem całą stronę po czym gdy dodałem fullpage js cała stona sie posypała.

Bardzo prosze o pomoc.

https://drive.google.com/drive/folders/0ByuXPkUtf98FNTBWMlJIV21qNms?usp=sharing

PS. fullpage jest zakomentowany wiec storna wygląda tak jak powinna ale po włączeniu zaczyna sie sypać

1 odpowiedź

odpowiedź 27 stycznia 2017 przez pablop76 VIP (123,180 p.)
wybrane 27 stycznia 2017 przez DzikWojownik

Najlepsza

Witam. <div id="fullpage"> zamyka się w 42 wierszu zamiast spajać całość. To zamknięcie jest chyba z czapy.

komentarz 27 stycznia 2017 przez DzikWojownik Początkujący (430 p.)

Rzeczywiście , dzięki. Aczkolwiek cały layout sypie sie po właczeniu fullpage

Poprawiony html:

<html>
    
    <head>
        <meta charset="utf-8">
        <title>Tytuł</title>
        
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.fullPage.js"></script>
        <script>
         $(document).ready(function() {
			$('#fullpage').fullpage({
                verticalCentered:true,
                overflowScroll:true
			});
		});
        </script>

        <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
        <link href="css/css.css" rel="stylesheet">
        

    </head>
    <body>
        <div id="fullpage">
        <div class="section" id="intro">
                <div class="center">
                    <div id="intro-img">
                        <img src="img/img_2a.png">
                    </div>
                    <div id="intro-body">                
                                <h1><span class="red-one">LOR </span><span class="gray">LOREM SROLERMM</span></h1>
                                <p id="intro-text"><soan class="red-two">LoremLoremLoremLoremLoremLoremLoremLoremLoremLorem </soan></p>
                    </div>   
            </div>
        </div>
        <div class="section" id="about">
            <div class="center">
                <div id="about-title"><span class="red-two">LOREM SROLERMM BLOREMM</span></div>
                <p id="about-text">OREM SROLER <br> Lorem ipsum dolor sit amete <br> plaLorem ipsum dolor sit amet<br> oLorem ipsum dolor sit ametch, <br> programLorem ipsum dolor sit ameti, <br>Lorem ipsum dolor sit amet <br> Lorem ipsum dolor sit amet <br>Lorem ipsum dolor sit amet.</p></div>
            </div>

        <div class="section" id="contact">
            <div id="img">
                <div class="center">
                    <div id="contact-title"><span class="red-two">LOR</span></div>
                </div>
            </div>
            <div id="contact-body">
                <div class="center">
                    <h2 class="bold">Lorem ipsum dolor sit amet</h2>
                    <p id="contact-text">
                        <span class="red-two bold">LOR </span>
                        <span class="gray bold ">TLorem ipsum dolor sit amet</span> <br> Lorem ipsum dolor sit amet<br> Lorem ipsum dolor sit amet <br> Lorem ipsum dolor sit amet <br> <a href="mailto:Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a> 
                    </p>
                </div>
            </div>
        </div>
    </div>
    </body>

</html>

komentarz 27 stycznia 2017 przez pablop76 VIP (123,180 p.)
edycja 27 stycznia 2017 przez pablop76

.center {
    display: table-cell;
    vertical-align: middle;
}

Chyba nie potrzebne :)

komentarz 27 stycznia 2017 przez DzikWojownik Początkujący (430 p.)

To jak inaczej wyśrodkować w pionie i poziomie ? ;/

komentarz 27 stycznia 2017 przez pablop76 VIP (123,180 p.)

display: table; a nie table-cell; lub jak w innych div margin-left: auto; matgin-right: auto; lub krócej margin 0 auto;

Pisząc margin: 0 0 0 0 ; któcej margin: 0; oznacza 0 dla wszystkich czterech stron.

margin: 0 auto; oznacza 0 od góry i dołu oraz auto z prawej i lewej :)