Forum PHP.pl > [CSS][PHP][HTML] Include "przesuwa" element html w dół

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][PHP][HTML] Include "przesuwa" element html w dół

thomson89

3.09.2009, 20:39:14

Witam!

Kupiłem sobie szablon. Jest z nim pewien problem. Napisałem już do autora ale zanim odpowie trochę minie. Może wy mi szybciej pomożecie.

Przykładowy fragment kodu z szablonu

[HTML] pobierz, plaintext 
<div class="maindiv">
	<div id="logo"></div>
    <div id="topmenu">
    	<a href="index.html" title="szablony www" id="button1"></a>
        <a href="omnie.html" title="darmowe szablony" id="button2"></a>
        <a href="http://www.dragonxt.pl/" title="najlepsze szablony" id="button3"></a>
        <a href="http://www.dragonxt.pl/" title="projektowanie stron www" id="button4"></a>
        <a href="http://www.dragonxt.pl/" title="projektowanie www" id="button5"></a>
        <a href="http://www.dragonxt.pl/" title="szablony" id="button6"></a>
    </div>
</div>
[HTML] pobierz, plaintext

A tutaj, kawałek kodu wyciąłem i wkleiłem do pliku html. Plik index zmieniłem na index.php. Uruchamiam pod Wamp'em i menu, jest przesunięte o kawałek w dół. Przeszkadza to ponieważ menu jest wkomponowane w tło i przesunięcie okropnie wygląda.

[PHP] pobierz, plaintext 
<div class="maindiv">
	<div id="logo"></div>
    <?php include('menu.html'); ?>
</div>
[PHP] pobierz, plaintext

A poniżej część styli z szablonu.

CODE

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #7e6e32;
background: #e6dbb3;
margin: 0px;
padding: 0px;
background-image: url(../images/topbg.jpg);
background-repeat: repeat-x;
}

a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #444727;
text-decoration: none;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}

h1 {
display: inline;
}

img {
border: 0px;
}

/* TRESC STRONY */

.maindiv {
width: 750px;
margin-left: auto;
margin-right: auto;
}

#logo {
width: 750px;
height: 211px;
background-image: url(../images/logo.png);
}

#topmenu {
padding-left: 90px;
padding-top: 13px;
width: 660px;
height: 50px;
background-image: url(../images/topmenu.png);
background-repeat: no-repeat;
}

#button1 {
float: left;
margin-right: 5px;
width: 129px;
height: 36px;
background-image: url(../images/topmenu/b1.jpg);
}

#button1:hover {
background-position: 0px -36px;
}

#button2 {
float: left;
margin-right: 5px;
width: 72px;
height: 36px;
background-image: url(../images/topmenu/omnie.png);
}

#button2:hover {
background-position: 0px -36px;
}

#button3 {
float: left;
margin-right: 5px;
width: 80px;
height: 36px;
background-image: url(../images/topmenu/b115.png);
}

#button3:hover {
background-position: 0px -36px;
}

#button4 {
float: left;
margin-right: 5px;
width: 80px;
height: 36px;
background-image: url(../images/topmenu/b4.jpg);
}

#button4:hover {
background-position: 0px -36px;
}

#button5 {
float: left;
margin-right: 5px;
width: 104px;
height: 36px;
background-image: url(../images/topmenu/kg.png);
}

#button5:hover {
background-position: 0px -36px;
}

#button6 {
float: left;
margin-right: 5px;
width: 85px;
height: 36px;
background-image: url(../images/topmenu/b6.jpg);
}

#button6:hover {
background-position: 0px -36px;
}

#cientop {
clear: left;
height: 83px;
background-image: url(../images/cientop.jpg);
}p

Proszę o pomoc, jak zrobić żeby to się z automatu nie przesuwało.

Pozdrawiam, Mateusz!

thek

3.09.2009, 21:14:49

Elementom nadaj margines pionowy równy 0 ( margin-top i margin-bottom ) poza tym sprawdź czy aby padding w menu nie robi kreciej roboty. Najlepiej byłoby przed całością kodu zresetować wszystkie style elementów i dopiero takim nadawać nowe. Wtedy ma się dużą kontrolę nad tym jak layout wygląda w różnych przeglądarkach. Elementy zagnieżdżone powinny dziedziczyć po body w którym siedzą, ale poprzez manipulację w jakiejś klasie lub ostylowaniu elementu możesz zgubić się i objąć zmianą nie to co chcesz. Wtedy przydaje się choćby FireBug gdzie po najechaniu na element widzisz jakie style go tyczą.

thomson89

4.09.2009, 18:15:43

Próbowałem tymi zabiegami, a przesunięcie ani drgnie. No, chyba że użyję margin z wartością minusową. Dodatkowo zauważyłem, ze przy kodowaniu w ANSI przesunięcia nie ma. A przy utf, już jest!

thek

4.09.2009, 20:38:07

To lepiej zobacz czy plik w jakim pracujesz nie ma przypadkiem ustawionego formatu kodowania wewnętrznego jako utf8+BOM lub przy generowaniu kodu html nie wrzuca Ci czegoś przed DOCTYPE, bo to często powoduje różne "cyrki" z niespodziewanymi lukami.

thomson89

5.09.2009, 18:53:48

Dałem w Notepad konwertuj na utf (bez bom). Ale tylko ten plik includowany i przesunięcie znika.

Dziękuje!

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.