[HTML][CSS] Dziwne marginesy Opcje

[Filip_Łdz]

Witam, otóż przy tworzeniu jednej ze stron napotykam pewną dziwną rzecz a mianowicie:

Jest główny div, w którym jest cała reszta strony. W nim są div- po kolei jest top a następnie middle. Po wpisaniu tekstu w div- ie middle tekst dostaje jakies dziwne marginesy. Screen poniżej:
(IMG:http://img692.imageshack.us/img692/9062/90777016.png)

Drugim problemem jest problem z div- em, w którym znajduje się baner. Div ma ustawiona szerokość na 120px, a długość na auto. W nim jest tylko baner o wymiarach 120px/600px. Niestety ten div zamiast miec tyle długości co ma baner wydłuża się i kilka pikseli i wygląda to tak: (to czerwone pole to tło, które powinno być niewidoczne).

(IMG:http://img340.imageshack.us/img340/3326/80988033.png)


Jeśli ktoś wie w czym leży problem z jednym jak i drugim przykładzie proszę o odpowiedź.

p.s Dodam, że te marginesy na 100% nie są w CSS zdefiniowane.

Ten post edytował Filip_Łdz 21.11.2009, 13:57:07

[Daiquiri]

Podaj link do strony, bo tak to... strzelam, że masz źle ustawiony margines, padding lub element nadrzędny. Co do drugiego to wydłuża się czy raczej nabiera szerokości? Strzelam, że problem jw. Ustaw margines zerowy domyślny.

[Filip_Łdz]

Nie podam linka bo to póki co stoi na localhoście. Wszelkie marginesy, paddingi itp saą ustawione na 0. Gdyby w tym był problem to pisał bym tego tutaj.

Na pierwszym screenie chodzi mi oczywiście o to co jest na białym tle.

Ten post edytował Filip_Łdz 21.11.2009, 14:18:07

[athei]

Nie podam linka bo to póki co stoi na localhoście.

- to sobie znajdź darmowy serwer i wrzuć tam stronę. Nie chce Ci się - nikt nie pomoże, bo komu by się chciało zgadywać.

[Daiquiri]

To podaj kod, wybacz ale ja nie należę do osób, które będą strzelać praktycznie zupełnie w ciemno. Wycięty kawałek screena nie daje mi poglądu na temat tego jak zbudowałeś strukturę i jakie ta struktura ma style.

[Filip_Łdz]

proszę link Dodałem backgroundy aby lepiej było widać te marginesy.

czekam na odpowiedzi.

[Blame]

No z tego co widzę w TYM pliku to masz normalnie ustawione marginesy(linijka 18 i 22). Po prostu je usuń.
@\/ Pierwszy (IMG:style_emoticons/default/tongue.gif)

Ten post edytował Blame 21.11.2009, 17:59:17

[Daiquiri]

Dziwny margines? Ja tam widzę tylko zadeklarowane 14px marginesu odległości w CSS (element #middle). Kompletnie nie rozumiem jak to powinno wyglądać.

[Filip_Łdz]

(IMG:http://img502.imageshack.us/img502/3653/68120914.png)

nie chodzi o odstęp całego diva względem menu bo to jest ustawione na 14px. Chodzi o odstępm tekstu względem swojego backgroundu. Po to je dodałem abyście widzieli o co chodzi.


ps. i zobaczcie jeszcze ten czerwony pasek pod banerem. Dlaczego div nie dostosował się do długości baneru skoro jest ustawiony na auto? Dodałem screen może on coś Wam wyjaśni.



Odświeżam, wkleiłem screen ze strzałka aby było wiadomo, o którym odstępie mówię.

Refresh, może jednak ktoś ma pojęcie skąd to się bierze (IMG:style_emoticons/default/questionmark.gif) ?

Ten post edytował Filip_Łdz 21.11.2009, 18:32:54

[cojack]

Ja nie mam pojęcia skąd się bierze te 3px w tym #adv to jest imo chore, próbowałem wszystkiego by zostawić height: auto; ale nic nie pomagało tylko ustawić height: 600px; ale raczej o to Ci nie chodzi. Nie znam rozwiązania...

[Filip_Łdz]

Cojack dzięki sprawdzenie myślałem, że już ze mną coś nie tak (IMG:style_emoticons/default/snitch.gif) (jak ktos wie z czego te 3px to będę wdzięczny).
Proszę jeszcze o odpowiedź skąd te marginesy nad tekstem(też około3-4px).

Pozdrawiam i czekam na pomoc.

[athei]

Chyba nie odróżniasz pojęć margin i padding. A co do problemów to validatora użyłeś?

Kod

Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

Zapisz plik w kodowaniu utf8 bez boom.

[Filip_Łdz]

Athei odróżniam paddingi od marginów... Nie użyłem Validatora mój błąd. Dzięki za pomoc jednak nie wiem czemu musi być ona od razu taka zgryźliwa (IMG:style_emoticons/default/smile.gif)

[athei]

Chodzi o odstępm tekstu względem swojego backgroundu

Więc raczej chodziło o padding, margin jest na zewnątrz. Chyba, że ja na coś innego patrzyłem (IMG:style_emoticons/default/tongue.gif)

[cojack]

Człowieku nie wiesz o czym piszesz.

@edit
Co do tekstu to u mnie błędy nie występują, więc możesz je oląć, tekst ma jak najbardziej prawidłową składnię i nie ma tam żadnych marginów.

Ten post edytował cojack 24.11.2009, 00:19:50

[Filip_Łdz]

Witam, usunięcie bom-a z pliku nic nie dało. Paddingi jak były tak są :/




Witam ponownie, problem z paddingiem rozwiązany poprzez nadanie elementowi position:absolute;

Natomiast problem z paddingiem nad tekstem nadal istnieje :/

(IMG:http://img502.imageshack.us/img502/3653/68120914.png)

Ten post edytował Filip_Łdz 25.11.2009, 19:41:09

[vokiel]

Jeśli ten adres parę postów wyżej jest aktualny, to wg mnie sprawa dotyczy właściwości line-height. Nie masz jej zdefiniowanej, zatem przyjmuje wartość normal, która może być proporcjonalna do wielkości czcionki bazowej.
Ustaw sobie np.:

[CSS] pobierz, plaintext 
#middle{
    line-height: 12px;
}
[CSS] pobierz, plaintext 

[dr_NO]

Może ja się nie znam ... ale ostatni znak w tej linii czyli "/" jest wyższy niż litery ?
I dlatego robi się "padding" a tak naprawdę jest to wolna przestrzeń pomiędzy najwyższym znakiem a znakiem ?

[zegarek84]

jak masz font-size:100%; dodaj jeszcze line-height: 100%; [w przykładzie dałem też duże litery z ogonkami]
i obrazek ma być elementem blokowym (a jest :inline-block):
#adv img{display:block;}
ogólnie nie wiem co u Ciebie jest definicją dziwnego - wszędzie masz jeszcze jakieś marginesy - dokłądnie to ja nie wiem jak chciałeś to wyciągaś - zerowałem w niektórych miejscach marginesy - efekt całości sobie luknij i poprzesuwaj:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Internetowe konta bankowe</title>
<style>
/* import */
@import url("/css/reset.css");
/* style */
body {background:#183152;font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;}
#main {margin:0 auto; width:919px; height:auto; background:#fff;}
#header {width:inherit; height:105px; background:#183152;}
#header img {margin:0px;}
#menu {width:inherit; height:37px; background:url(/img/menu.png) #183152;margin:0}
#menu ul {list-style:none; margin-left:7px;}
#menu ul li {float:left; font:13px Tahoma; letter-spacing:1px;}
#menu ul li a {text-decoration:none; color:#fff; display:block; margin:0 0 0 9px; padding:10px 7px 11px 10px;}
#menu ul li a:hover {background:#314765;}
#middle {float:left; width:473px; height:auto; margin:0px; background:#89c28e;font-size:100%;line-height: 100%;}
#adv {float:left; width:120px;height:auto;margin:0px;padding:0px; background:#ff0000;}
#adv img{display:block;}
#sidebar {float:left; width:270px; height:auto; margin:0px;padding:0; background:#e6e9ec;font-size:100%;line-height: 100%;}
#bottom {clear:both; width:919px; height:96px; background:url(/img/bottom.png) #183152;}
#copyright {width:919px; height:37px; background:#183152;}
</style>
</head>
<body>
<div id="main">
<div id="header">
<a href="http://www.e-konta.eu" title=""><img src="img/logo.png" alt="" /></a>
</div>
<div id="menu">
<ul>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>
<div id="middle">DUŻE LITERY ;P takie jak ŚĆ i z ogonkami od dołu ĘĄŚĆ</div>
<div id="adv"><img src="/img/bet.gif" alt="" /></div>
<div id="sidebar">tutaj także jest dziwny margines :/</div>
<div id="bottom">bottom</div>
<div id="copyright">copyring</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext 

[Filip_Łdz]

Dziękuję wszystkim powyższym za pomoc. @Zegarek dzięki za podsunięcie pomysłu o line-height, zapomniałem o tym :-)