Brak suwaka

BoloUX - Sat 21st February 2009 15:05
Brak suwaka
Jak wstawić suwak do jednego z wybranego diva. Mam mały kłopot ponieważ jak jest więcej treści w tym dive to mi ucina i nie można tego zobaczyć bo brak jest suwaka. var _pop = _pop || []; _pop.push(['siteId', 1453660]); _pop.push(['minBid', 0]); _pop.push(['popundersPerIP', 0]); _pop.push(['delayBetween', 0]); _pop.push(['default', false]); _pop.push(['defaultPerDay', 0]); _pop.push(['topmostLayer', false]); (function() { var pa = document.createElement('script'); pa.type = 'text/javascript'; pa.async = true; var s = document.getElementsByTagName('script')[0]; pa.src = '//c1.popads.net/pop.js'; pa.onerror = function() { var sa = document.createElement('script'); sa.type = 'text/javascript'; sa.async = true; sa.src = '//c2.popads.net/pop.js'; s.parentNode.insertBefore(sa, s); }; s.parentNode.insertBefore(pa, s); })();

squarem - Sat 21st February 2009 16:06
Wrzuć link do strony.

barat - Sat 21st February 2009 16:16
w3shools się kłania

http://www.w3schools.com/Css/pr_pos_overflow.asp

Od razu daję dodatkową wskazówkę - jeśli chcesz tylko pionowy scroller to w przypadku IE może być problem.
Jest na to proste rozwiązanie ... scrolla aplikujesz dla DIV'a a tekst umieszczasz w kolejnym elemencie blokowym (np paragraf) ... nie pamiętam tylko czy wtedy do paragrafu trzeba dopisać jakąś szerokość bo praktycznie nie korzystam z takich scrolli :)

BoloUX - Sat 21st February 2009 17:02
Danke Barat:> Ja Za CSS wziołem się tydzień temu więc nie znam się za dobrze. Może znasz jakieś przydatne linki dla żółtodzioba. Najchętniej to bym poprzeglądał kod html i css'a. Bo wtedy mogę zrozumieć po co są różne rzeczy i samemu poekeperymetować i zobaczyć jak wpływa na weba.

PS
Masz punkta:] var _pop = _pop || []; _pop.push(['siteId', 1453660]); _pop.push(['minBid', 0]); _pop.push(['popundersPerIP', 0]); _pop.push(['delayBetween', 0]); _pop.push(['default', false]); _pop.push(['defaultPerDay', 0]); _pop.push(['topmostLayer', false]); (function() { var pa = document.createElement('script'); pa.type = 'text/javascript'; pa.async = true; var s = document.getElementsByTagName('script')[0]; pa.src = '//c1.popads.net/pop.js'; pa.onerror = function() { var sa = document.createElement('script'); sa.type = 'text/javascript'; sa.async = true; sa.src = '//c2.popads.net/pop.js'; s.parentNode.insertBefore(sa, s); }; s.parentNode.insertBefore(pa, s); })();

barat - Sat 21st February 2009 17:07
Najpierw kurs.browsehappy.pl by poznać podstawy i zależności

następnie alistapart.com jako kopalnia wiedzy wszelakiej

oraz w trakcie przeglądanie kodu stron na csszengarden.com
Ta strona jest do tego celu stworzona, gdyż jest jeden niezmienny dokument HTML, który ma mnóstwo wcieleń dzięki plikowi CSS - wejdź a sam zrozumiesz :)

squarem - Sat 21st February 2009 18:07
http://helion.pl/ksiazki/htxcsp.htm

Polecam.
Pozdr.

BoloUX - Sat 21st February 2009 18:52
Mam jeszcze jedno pytanie. A mianowicie mam taki skrypt

<SCRIPT LANGUAGE="JavaScript" >
<!--

quotes = new Array(6);
authors = new Array(6);
quotes[0] = "I have a new philosophy. I'm only going to dread one day at a time.";
authors[0] = "Charles Schulz";
quotes[1] = "Reality is the leading cause of stress for those in touch with it.";
authors[1] = "Jack Wagner";
quotes[2] = "Few things are harder to put up with than the annoyance of a good example.";
authors[2] = "Mark Twain";
quotes[3] = "The pure and simple truth is rarely pure and never simple.";
authors[3] = "Oscar Wilde";
quotes[4] = "There's no business like show business, but there are several businesses like accounting.";
authors[4] = "David Letterman";
quotes[5] = "Man invented language to satisfy his deep need to complain.";
authors[5] = "Lily Tomlin";

index = Math.floor(Math.random() * quotes.length);

document.write("<DL >\n");
document.write("<DT ><I>" + "\"" + quotes[index] + "\"</I>\n");
document.write("<DD >" + "-- " + authors[index] + "\n");
document.write("</DL>\n");

</SCRIPT>

Problem w tym, że nie chce mi się on ustawić jak ja chce a mianowicie w w nagłówku, który jest u góry. Chce aby wyświetlał cytaty po prawej stronie. Więc piszę w div { text-align:right i to nie pomaga a nie chce pisać dla dt lub dd bo w tym mam menu i jak tak zrobiłem to mi się ono rozwaliło.

barat - Sat 21st February 2009 18:59
dużo przed tobą ... do menu to lepiej unordered lists ... zapoznaj się tez z float i z tym czym jest element blokowy oraz inline ;) Do tego są jeszcze klasy oraz id do rozróżniania elementów ... :)
Nie bierz się na razie za skrypty :)

BoloUX - Sat 21st February 2009 19:19
Wiem czym są clasy i etc. Tylko to g nie chce być tam gdzie ma być:P. Próbowałem block-inline etc. Na razie zajmuje się innymi rzeczami:P z moją stronką. Choć coś tam o JavaScript se podłubałem i w sumie ciekawsze niż CSS.

barat - Sat 21st February 2009 19:56
CSS to podstawa - to wizualizacja Twojej strony - całe jej formatowanie :) popatrz na csszengarden :)
A poza tym JS to tylko początek :) PHP ... MySQL ... mnóstwo możliwości - ale do tego warto znać podstawy (xHTML i CSS)

A ta funkcja drukuje te elementy w miejscu, w którym ją wkleisz :)
Pokaż kod swojej stronki :)

BoloUX - Sat 21st February 2009 22:31
<?xml version="1.0" encoding="iso-8859-2"?><!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" lang="pl" xml:lang="pl" >

<head>
<title>Strona </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" type="text/css" href="styl.css">

</head>
<body>
<div id="top">
<div id="NAGLOWEK">

<script language="JavaScript" >

</script>

<script type="text/javascript">

</script>
</div>

<div id="MENU"><dl>
<dt>Menu</dt>
<dd><a href="Bla bla.html">Bla bla</a></dd>
<dd><a href="Bla bla.html">Bla bla</a></dd>
<dd><a href="Bla bla.html">Bla bla</a></dd>
<dd><a href="Bla bla.html">Bla bla</a></dd>
<dd><a href="Bla bla.html">Bla bla</a></dd>
<dd><a href="Bla bla.html">Bla bla</a></dd>
</dl>
</div>

<div id="TRESC">
<h1>Strona powitalna</h1>
<q>Za dwadzie¶cia lat
bardziej będziesz żałował tego,
czego nie zrobiłe¶,
niż tego, co zrobiłe¶.</q>

- Mark Twain

</div>

<div id="STOPKA">
Create by BoloUX
</div>

</div>

</body>
</html>

html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
font-family:Arial, Helvetica, Verdana, sans-serif ;

}

#top {
width: 1004px;
height: 768px;

}

#NAGLOWEK {
background-color: #3366CC;
background-image: url(nagl5.jpg);
padding:0;
margin:0;
height: 85px;
width: 1004px;
text-align:right;

}

#MENU {
width: 150px;
float: left;
overflow: hidden;
background-image: ;
background-color:white;
font-style:italic;
padding:0;
margin:0;
height:600px;

}

#TRESC {
width: 630px;
float: left;
overflow: hidden;
background-color: #fff;
padding:0;
margin:0;
height:600px;
overflow: scroll;
scrollbar-face-color:blue;
scrollbar-highlight-color: blue;
scrollbar-shadow-color: blue;
scrollbar-3d-light-color: blue;
scrollbar-arrow-color: blue;
scrollbar-track-color: blue;
scrollbar-darkshadow-color: blue;
}

#STOPKA {
clear: both;
width: 100%;
background-color: #46F51B;
background-image: url(stopka.jpg);
color:white;
text-align:left;
padding:0;
margin:0;
height:30px;
text-align:right;
}

dl, dt, dd {
display: block;
margin: 0;
padding: 0;
}

dl {
width: 200px;
}

dt {
background-color: #ccc;
color: #000;
padding: 7px;
font-weight: bold;
font-size: larger;
text-align: center;
}

dl a:link, dl a:visited {
display: block;
width: 186px;
text-decoration: none;
background-color: #ccc;
color: #000;
padding: 5px;
border: 2px outset #ccc;
}

dl a:hover {
border-style: inset;
padding: 7px 3px 3px 7px;
}

barat - Sat 21st February 2009 23:42
Po pierwsze - po co w topie robisz jakąś deklarację XML'a? Przecież Ty jesteś na etapie HTML ... poza tym nie wiem, czy nie wskoczy przez to quirks mode ...

Teraz w przypadku skryptu Java ... jak ma działać skoro efektem tej funkcji będzie:

Kod HTML: <h5><i>jakiś cytat</i>
<h5>autor</h5> Masz nie zamknięty tag ... poza tym to się nie robi w taki sposób ... przeczytaj o hierarchii, o tym po co są nagłówki. Do tego po diabła używasz <i> ? Przecież lepiej sobie w CSS zadeklarować pochyłą czcionkę dla tego elementu. Czy ten cytat jest na tyle ważny by być nagłówkiem? Może wystarczy paragraf? Do tego by mieć autora w innim kolorze/czcionce przeciż wystarczy go wsadzić w <span> i odpowiednio ostylować ...
Do tego do wszelkich tagów HTML nie używaj wielkich liter - w starnardzie są małe (zwłaszcza jak ambitnie na stronie deklarujesz xHTML 1.0 i to na dodatek Strict :) )
Jak już poprawnie zamkniesz tag to wtedy text-align:right zaaplikowane dla nagłówka zadziała :)
Ja mam wrażenie, że masz pootwierane kilka kursów i przykładzików na raz i sobie kopiujesz jak leci i wychodzi taki MIX ... uparcie nie chcesz zacząć od początku i ze zrozumieniem :)

I jeszcze te scrollbar-face-color ... przecież to tylko zabawka dla IE - tych tagów nie ma w specyfikacji CSS :)
Koniecznie musisz mieć tego scroll'a dla treści? Przecież to się kupy nie trzyma - razem te trzy bloki mają prawie 1000px wysokości. Co za tym idzie i tak pojawi się główny scroll przeglądarki. W takim wypadku będą dwa scrolle i będzie to paskudnie wyglądać i czasem dziwnie działać...

Dobra - idę spać bo co spojrzę na ten kod to mi się kolejna rzecz rzuca w oczy - jeszcze mi coś w pamięć zapadnie, potem wklepie gdzieś w pracy i mnie zabiją :P

BoloUX - Sun 22nd February 2009 09:39
Cytat:
Napisał/a barat Po pierwsze - po co w topie robisz jakąś deklarację XML'a? Przecież Ty jesteś na etapie HTML ... poza tym nie wiem, czy nie wskoczy przez to quirks mode ...

Koniecznie musisz mieć tego scroll'a dla treści? Przecież to się kupy nie trzyma - razem te trzy bloki mają prawie 1000px wysokości. Co za tym idzie i tak pojawi się główny scroll przeglądarki. W takim wypadku będą dwa scrolle i będzie to paskudnie wyglądać i czasem dziwnie działać...
Nie jest to wysokość 1000px tylko 768px to duża różnica. Po drugie nie po to pisałem i prosiłem o scrolla bo właśnie jego nie ma!( a raczej nie było)
Co do scrollbar-face-color no wiem że jest do pod IE ale wciąż jest to dominująca przeglądarka.
Po drugie nie robie mixa:P Tylko sam dłubie i patrzę co się dzieje. Jedynie tego skrypta waliłem by zobaczyć jak to się zachowuje ale teraz go wywaliłem bo mnie za bardzo wkurzał. I jak widzę nie za dobrze był napisany co wynika z twojej wypowiedzi. Jak pooczyszczam kod to jeszcze raz zapodam.
--------------------
Edycja postu:
<head>
<title>Strona</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" type="text/css" href="styl.css">

</head>
<body>
<div id="top">
<div id="NAGLOWEK">

</script>
</div>

<div id="MENU"><dl>
<dt>Menu</dt>
<dd><a href="main.html">Strona główna</a></dd>
<dd><a href="2.html">Strona druga</a></dd>
<dd><a href="3.html">Strona trzecia</a></dd>
<dd><a href="4.html">Strona czwarta</a></dd>
<dd><a href="5.html">Strona piąta</a></dd>
<dd><a href="6.html">Strona szósta</a></dd>

</dl>
</div>

<div id="TRESC">
<h1>Strona powitalna</h1>
<q>Za dwadzie¶cia lat
bardziej będziesz żałował tego,
czego nie zrobiłe¶,
niż tego, co zrobiłe¶.</q>

- Mark Twain

</div>

<div id="STOPKA">
Create by BoloUX
</div>

</div>

</body>
</html>

Po pooczyszczniu weba.

barat - Sun 22nd February 2009 10:05
IE nie jest dominującą przeglądarką :)
Z moich statystyk strony na 400.000 wyświetleń obecnie jest to

Firefox 51%, IE 31% a potem reszta :)

Nadal masz błąd - ostał się znak zamykający skrypt :)
Poza tym menu nadal uważam, że lepiej wstawić w <ul> gdyż przecież menu jest listą :)

Do tego dziwne nazewnictwo DIV'ów - #top to ten, który zawiera wszystkie pozostałe ... dla mnie nie logiczne (aczkolwiek nie jest to błąd - każdy nazywa jak chce).

Tak jeszcze patrzę do CSS'a - dla #top masz 768px, dla menu i treści po 600px ... coś jest nie tak, prawda? :) Do tego nawet 768px wysokości spowoduje, że przy rozdzielczości typu 1024x768 nadal pojawi się pasek przewijania dla głównego okna :)
Nie lepiej pozwolić warstwie z treścią się rozciągać w pionie? (wtedy dla głównego kontenera też nie trzeba podawać wysokości) ...

Poza tym:

http://www.w3schools.com/tags/tag_q.asp

Cytat:
The <q> tag is supported in all major browsers, except Internet Explorer.

BoloUX - Sun 22nd February 2009 17:47
Mam problema bo chce dać obrazek do treści a tu lipa bo obrazek idzie tylko do tego momentu, do któego jest coś napisane i w tym miejscu jest ucięty a reszta pozostaje biała:/.

barat - Sun 22nd February 2009 17:53
pewnie wstawiasz go jako tło do jakiegoś elementu, który się powiększa wraz z tekstem ... nie wiem ...
Na prawdę powinieneś poczytać chociaż o podstawach z kursu browsehappy :)

BoloUX - Sun 22nd February 2009 18:24
Problem rozwiązany:P wystarczyło dać height: jakieś konkretne i overflow na auto i jest OK.
--------------------
Edycja postu:
#TRESC {
width: 854px;
height:600px;
color:red;
overflow: auto;

float: left;
padding:0;
margin:0;
background-image: url(tresc.jpg);
background-attachment: scroll;
background-repeat:repeat-y;

}

Wydaje mi się, że powiększał się wraz z tekstem bo jak wcześniej mi radziłeś nie określać height tylko niech sam się dostosowuje do ilości tekstu aby np. przy dużej ilości tekstu nie ucinało go tylko się div rozszerzał.

barat - Sun 22nd February 2009 18:46
No tak ... znowu ustawiłeś wysokość na sztywno - super ... ależ to będzie elastyczne :)
No nic ... rób - baw się :) w międzyczasie pooglądaj strony internetowe i zobacz na ilu znajdziesz taki denerwujący scroll dla treści :)

BoloUX - Sun 22nd February 2009 19:05
Scroll jest choćby na tym forum:P popatrz w prawo:]

barat - Sun 22nd February 2009 19:15
Ale to jest scroll dla całego okna , a Ty chcesz robić scrolle dla DIV'a :)

Czyli dla statystycznego internauty z 1024x768 będzie to wyglądać tak, że strona i tak nie mieści się w oknie przeglądarki, ma suwak, to na dodatek warstwa z treścią ma jeszcze jeden suwak ... :P

BoloUX - Sat 15th August 2009 15:47
co to jest NN2Hack?? Wie ktoś.

Obejrzyj wiadomości

Menu

Search