Skocz do zawartości

Wartości procentowe (%)

Dagguh

Przez Dagguh
w HTML i CSS

Rekomendowane odpowiedzi

Dagguh Newbie

Dagguh

Opublikowano
Opublikowano

Przyznaję, że jestem totalnym nubem jeżeli chodzi o budowanie stron. Robię stronę, z której ludzie na innym forum mają mie możliwoś ściągnięcia najnowszej wersji mojej testowej mapy do W3. Są tylko 2 podstrony. Główna z download'em i druga z changelog'iem. Jako tło mam fixed jpg'a, na środku powinien być 50% opacity czarny prostokąt (wokół którego powinno być po 10% czystego backgroundu) obramowany 8 pikselowymi solid ramkami. Niestety próby nadania temu przezroczystosci skończyły na powielanym 1x1 px obrazku PNG. Na tle owego czarnego (pół)przezroczystego prostokątu miał być główny link do mapy. Pierwszą wersję zrobiłem metodą 'nested tables' (właśnie ona jest on-line w tym momencie. Zanim zaczniecie flame'ować, sprostuję, że aktualnie próbuję ją przebudować używając głównie css. Używając tabel napotkałem mnóstwo niedogdności, w różnych przegladarkach miały różne rozmiary, trudno było mi cokolwiek edytować i za Chiny nie potrafiłem zrobić scrollującej się komórki, która była mi potrzebna w changelogu, któy sie powoli rozrasta. Budując tę strone od nowa, tym razem używajac div'ów , paragrafów i zewnętrznego cssa udało mi się zrobić to samo z nieco lepszym efektem. Paski czystego tła faktycznie wynoszą 10% (przynajmniej górny i lewy), strona jest bardziej przejrzysta i krótsza podczas edycji, udało mi się zrobić przezroczystość w divie bez uzywania żadnego pliku graficznego. Tutaj następuje problem: mimo, że ramki górna i dolna działają doskonale to nie jestem w stanie "zmusić" bocznych divów do wyswietlania się po bokach (div automatycznie wskakuje na linijkę niżej). Ustawienie display:inline działałoby gdyby pomiedzy bocznymi ramkami miał byc tylko jeden objekt, a tam mam 2 divy, jeden na nagłówek, drugi na listę. Nagłówek ma być fixed a lista scrollowana. Także porzuciłem przezroczystosć i dałem standardowe bordery z 100% opacity. Teraz bordery są super (za wyjątkiem opacity) tylko, żę relatywne wielkosci divów nie działaja za dobrze. Pierwsza sprawa to szerokosć obu divów. Ustawienie jej na 80% (bo marginesy całej strony maja po 10%... ponoć) powoduje że boxy wyglądają na 60% szerokie (móie o szerokosći całej strony). Założyłem więc że to "bierze" 80% z "wolnego" miejsca (czyli po odjeciu marginesów). Niestety, nawet na szerokosciach 100% wyraźnie widać, że luka po prawej stronie jest większa. Ergo: div nie jest wyśrodkowany. Próbowałem align center, wrzucać do tabelki i centrować tabelkę, ale nic nie działa. Czyli na szerokosć jest krzywo. Wysokość górnego diva (nagłówek) jest domyślna i działa dobrze, ale wysokość dolnego diva (z listą) sprawia problemy. Chcę przyjąć wartosć względną (%), żeby strona działała na kazdą rozdzielczość, ale jakiej wartosci procentowej bym nie wpisał (nawet 1%) na wysokosć dolnego fiva, ramka będzie się ciągnąć w nieskończość na dół (a raczej aż skończy się tekst, ale tego nie jesteście w stanie zobaczyć, bo body position jest fixed, żeby za żadne skarby mi sie cała strona nie scrollowała (co tez pewnie ma wpływ na całą sprawę, ale bez position fixed, to cała strona mi się scrollowała zamiast tej listy >_<)). Próbowałem min-height, max-height i height ale jakoś bez rezultatu. Także teraz mam wartość bezwzgledną (450px), ustawiona na oko, nadal troche krzywo i nie uzyskuję pożądanego efektu (chciałem mieć 10% wolnego z każdej strony), wystarczy zmienić wielkosć okna i się sypie.

Tutaj jest kod stronki (jeszcze nie ma dodatkowych linków na dole strony):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="https://www.w3.org/1999/xhtml">
  <head>
<title>Dagguh's DotA Suggestions - Changelog</title>
 <link rel="stylesheet" href="style1.css" type="text/css">
 <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta content="My and my mates' suggestions about Defense of the Ancients" name="Description">
<meta content="Dagguh" name="Author">
</head>
<body style="background-attachment: fixed; background-image: url('images/dotabg.jpg'); margin: 10%; overflow: hidden; position: fixed">
<div id="logtitle">Changelog</div>
<div id="logcontent">
<p class="listh">1.13b:</p>
<ul>
<li>Set Etheral bonus properly.
<li>Fixed upkeep warnings.
<li>Done armor-damage table. It is 100% like DotA now.
<li>Added a hero glow for Shaku.
</ul>
<p class="listh">1.13a:</p>
<ul>
<li>Set maximum movement speed to 522 and miniumum to 100.
<li>Adjusted the in-game 'day' length
<li>Properly set frost movement and attack speed reductions.
<li>Added the basic gold income.
<li>Set proper neutral creep XP gain.
<li>Buildings grant XP now.
<li>Rhasta the Shadow Shaman successfully implemented.
</ul>
<p class="listh">1.12a:</p>
<ul>
<li>Started logging changes.
<li>One lane, one tower per team.
<li>Creeps just like in DotA.
<li>The Sentinel and The Scourge colours change by Xeno³ [67326].
<li>Things happen twice as fast as in DotA (creep wave spawn rate, upgrade rate, towers attack speed, trees respawn).
<li>Shaku the Rider, a hero by -=[MORPHEUS]=-, successfully implemented [174073].
<li>Anub'arak the Nerubian Assassin successfully implemented.
<li>Damage type classification in tooltips by Nagoshi [153417].
</ul>
</div>
</body>
</html>

A tutaj stylesheet (style1.css):

@charset "ISO-8859-2"
a.lime:link {text-decoration: none; color: #baff00}
a.lime:visited {text-decoration: none; color: #baff00}
a.lime:hover {text-decoration: none; color: #ffffff; border-bottom: dotted 3px #baff00}
a.lime:active {text-decoration: none; color: #ffcc00}
a.orange {text-decoration: none; color: orange}
a.orange:visited {text-decoration: none; color: none}
a.orange:hover {text-decoration: none; color: #ffffff; font-weight: bold; border-bottom: dotted 5px orange}
a.orange:active {text-decoration: none; color: rgb(128,0,255)}
a.velvet {text-decoration: none; color: #0080ff}
a.velvet:visited {text-decoration: none; color: none}
a.velvet:hover {text-decoration: none; color: #ffffff; font-weight: bold; border-bottom: dotted 4px #0080ff}
a.velvet:active {text-decoration: none; color: rgb(0,255, 160)}
li {text-decoration: none; color: #ffffff; font-family: Tahoma; font-size: 16px; line-height: 30px}
.listh {font-weight: bold; color: #0080ff; font-family: Tahoma; font-size: 20px}
#logtitle {width: 100%; color: #0080ff; font-family: Caribbean, Tahoma; font-size: 80px; background: url(images/black50.png); text-align: center; padding: 16px; border: 8px solid #0080FF; border-bottom-style: none}
#logcontent {width: 100%; height: 450px; overflow: auto; background:url(images/black50.png); padding: 16px; border: 8px solid #0080FF; border-top-style: none}

lime, orange i velvet używam do linków na stronie downlaodu a także w changelogu (który jest w budowie).

Używam również niesystemowej czcionki, więc będziecie widzieć Tahomę, ale to juz zupełnie inna bajka, pobawię się z EOT potem.

Mam nadzieję, że jest jakis myk na wartości względne.

Odnośnik do komentarza
Udostępnij na innych stronach
Dagguh Newbie

Dagguh

Opublikowano
  • Autor
Opublikowano
Może na początek popraw błędy validatora...

Prossssz, poprawiona wersja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="https://www.w3.org/1999/xhtml">
  <head>
<title>Dagguh's DotA Suggestions - Changelog</title>
 <link rel="stylesheet" href="style1.css" type="text/css"/>
 <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"/>
<meta content="My and my mates' suggestions about Defense of the Ancients" name="Description"/>
<meta content="Dagguh" name="Author"/>
</head>
<body style="background-attachment: fixed; background-image: url('images/dotabg.jpg'); margin: 10%; overflow: hidden; position: fixed">
<div id="logtitle">Changelog</div>
<div id="logcontent">
<p class="listh">1.13b:</p>
<ul>
<li>Set Etheral bonus properly.</li>
<li>Fixed upkeep warnings.</li>
<li>Done armor-damage table. It is 100% like DotA now.</li>
<li>Added a hero glow for Shaku.</li>
</ul>
<p class="listh">1.13a:</p>
<ul>
<li>Set maximum movement speed to 522 and miniumum to 100.</li>
<li>Adjusted the in-game 'day' length.</li>
<li>Properly set frost movement and attack speed reductions.</li>
<li>Added the basic gold income.</li>
<li>Set proper neutral creep XP gain.</li>
<li>Buildings grant XP now.</li>
<li>Rhasta the Shadow Shaman successfully implemented.</li>
</ul>
<p class="listh">1.12a:</p>
<ul>
<li>Started logging changes.</li>
<li>One lane, one tower per team.</li>
<li>Creeps just like in DotA.</li>
<li>The Sentinel and The Scourge colours change by Xeno³ [67326].</li>
<li>Things happen twice as fast as in DotA (creep wave spawn rate, upgrade rate, towers attack speed, trees respawn).</li>
<li>Shaku the Rider, a hero by -=[MORPHEUS]=-, successfully implemented [174073].</li>
<li>Anub'arak the Nerubian Assassin successfully implemented.</li>
<li>Damage type classification in tooltips by Nagoshi [153417].</li>
</ul>
</div>
</body>
</html>

BTW, zewnetrzne style też potrzbują DOCTYPE?

No i problem jest nadal ten sam, w praktyce nic sie nie zmieniło.

W skrócie:

1.) Div ma miec wysokość 80% a rozciąga się tak długo jak długi jest tekst.

2.) Nie mogę ustawić divów w takim położeniu: |=| , czyli wysoki ponowy, 2 płaskie na prawo od niego i dalej kolejny pionowy. Wysokośc pionowych ma być równa sumei wysokości poziomych.

Odnośnik do komentarza
Udostępnij na innych stronach
klojniewski Newbie

klojniewski

Opublikowano
Opublikowano

Witam,

Procentowe wartości są często kłopotem kiedy chodzi nam o wysokość elementów. Ogólnie trzeba pamiętać, żeby te 100% (lub 80%) odnieść do obejmującego elementu.

Zobacz jak to zrobiłem tutaj, powinieneś już sobie dalej poradzić:

https://www.ciecie.imo.pl/playground/80prcnt.html

pozdrawiam

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności