Nie jesteś zalogowany.
Jeśli nie posiadasz konta, zarejestruj je już teraz! Pozwoli Ci ono w pełni korzystać z naszego serwisu. Spamerom dziękujemy!

Ogłoszenie

Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.

Strony: 1

 

#1  2010-01-12 20:19:47

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Ramka html

Witam
problem moż okazać się durny ;D ,jak wykonać taką ramke : http://www.fotosik.pl/pokaz_obrazek/5c408422e675c2a1.html ?

za pomocą div i css ?

Offline

 

#2  2010-01-12 22:03:30

  TaZz - Użytkownik

TaZz
Użytkownik
Zarejestrowany: 2009-12-29

Re: Ramka html

Kod:

<html>
<head>
<style type="text/css">
/* <![CDATA[ */
#rama {
border:1px solid gray; /* obramowanie szare linia ciągła 1px */
color:#000000; /* kolor czcionki elementu */
width:250px; /* szerokosc w px (moze byc w %) */
height:350px; /* wysyokosc w px (moze byc w %) */
padding: 5px; /* odleglosc textu i elementow od krawedzi diva */
overflow-y: scroll; /* to cudo pokazuje pasek przewijania */
} 
/* ]]> */
</style>
</head>
<body>

<div id="rama">

test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
test <br />
</div>


</body>
</html>

Ostatnio edytowany przez TaZz (2010-01-12 22:07:09)

Offline

 

#3  2010-01-12 22:23:43

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

dzieki

Offline

 

#4  2010-01-12 22:27:20

  TaZz - Użytkownik

TaZz
Użytkownik
Zarejestrowany: 2009-12-29

Re: Ramka html

Prosze. Pamiętaj że usunięcie overflow spowoduje, że tekst wyjdzie Ci poza ramke

Offline

 

#5  2010-01-13 12:18:16

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

działa naprawdę swietnie ;)

zdobiłem sobie podział strony na div'ach :

Kod:

body {
    background-color: #fff;
    font-family: Helvetica,Arial;
    font-size:11px;
    color: #000;
    margin: 0;
    padding: 0;
}

#top {
    width: 1024px;
    padding-top: 20px ;
    vertical-align: top;
}

#NAGLOWEK {
    background-color: #888;

}


#MENU {
    width: 200px;
    float: right;
    overflow: hidden;
    background-color: #ccc;
}

#INFORMACJE {
    width: 200px;
    float: left;
    overflow: hidden;
}

#TRESC {
    width: 600px;
    height: 450px;
    float: left;
    overflow: hidden;
    background-color: #fff;
}

#STOPKA {
    clear: both;
    width: 100%;
    background-color: #888;
}

i jako głowny div w którym umieszczona jest ramka  to : #top przyznam z CSS cienki jestem ,chciałbym całość wypośrodkować w przegladarce względem boków ,czytałem ze znaczników <center></center> nie zaleca się stosować ,jak można to wykonac inacej ?
dodam że stosowanie text-align:center nic nie daję :((

Offline

 

#6  2010-01-13 12:43:04

  TaZz - Użytkownik

TaZz
Użytkownik
Zarejestrowany: 2009-12-29

Re: Ramka html

Kod:

#top {
    width: 1024px;
    padding-top: 20px ;
    vertical-align: top;
    margin-left:auto;
    margin-right:auto;
}

powinno pomóc;)

edit.

#NAGLOWEK {
    background-color: #888;[/quote]
kolor określaj 6 cyframi bo validator uzna Ci to za błąd

Kod:

#NAGLOWEK {
    background-color: #888888;

Ostatnio edytowany przez TaZz (2010-01-13 12:50:01)

Offline

 

#7  2010-01-13 13:56:07

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Brno, Česko
Zarejestrowany: 2007-12-22
Serwis

Re: Ramka html

[quote=szewczyk]

Kod:

body {
    font-size:11px;
}

[/quote]
Nigdy, ale to przenigdy nie podawaj wielkości pisma w pikselach. Nigdy. Używaj [url=http://mimas.ceti.pl/dia/day_26.html]względnych rozmiarów fontów[/url] (ten artykuł jest tłumaczeniem tekstu sprzed 8 lat, więc jakieś dywagacje o Netscape 4 czy IE 5 można olać ciepłym moczem. Za to informacja dlaczego używać względnych rozmiarów jest jak najbardziej aktualna i zawsze taka pozostanie).

[quote=TaZz]

Kod:

#top {
    width: 1024px;
    padding-top: 20px ;
    vertical-align: top;
    margin-left:auto;
    margin-right:auto;
}

powinno pomóc;)[/quote]
Kiedyś Riddle spłodził świetny tekst o [url=http://perfectionorvanity.com/2006/04/19/wszystko-co-chcesz-wiedziec-o-centrowaniu-w-css/]centrowaniu w Cssie[/url].

[quote=TaZz]edit.

#NAGLOWEK {
    background-color: #888;[/quote]
kolor określaj 6 cyframi bo validator uzna Ci to za błąd

Kod:

#NAGLOWEK {
    background-color: #888888;

[/quote]
Ciekawe że [url=http://www.w3.org/TR/CSS2/syndata.html#color-units]specyfikacja[/url] (dla CSS3 [url=http://www.w3.org/TR/css3-color/#numerical]tak samo[/url]) na to pozwala.

Gorsze od olewania wyników walidatora jest tylko ślepe stosowanie się do wyników walidatora.

Spinnen Essen: [url=http://fluxboxpl.org/portal/]FluxboxPL[/url] [url=http://przepis-na-lo.pl/]Przepis na LibreOffice[/url]

Offline

 

#8  2010-01-13 14:58:12

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

o kolory narazie sie nie przejmuję chcę na początek sam szkielet ułożyć

co do wypośrodkowania ,niestety nie działa , o to kod html :

Kod:

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

    <div id="INFORMACJE">sssss</div>
    <div id="TRESC"> tresc tresc tresc tresc tresc tresc ssss
        <div id="rama">sssssssssssssssssss<br></div>
    </div>
    <div id="MENU">meny</div>
    <div id="STOPKA">stopka</div>

</div>

Offline

 

#9  2010-01-13 15:36:29

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Brno, Česko
Zarejestrowany: 2007-12-22
Serwis

Re: Ramka html

Nie podajesz całego kodu HTML. Wkleiłem to co Ty przed chwilą, wyżej między <style> a </style> wrzuciłem zawartość CSS-a (z modyfikacją TaZza) i blok z treścią perfekcyjnie się wycentrował w przeglądarce.

Jakiej rozdzielczości używasz? Jaka przeglądarka?

Spinnen Essen: [url=http://fluxboxpl.org/portal/]FluxboxPL[/url] [url=http://przepis-na-lo.pl/]Przepis na LibreOffice[/url]

Offline

 

#10  2010-01-13 16:07:52

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

cały kod to css który jest wyżej + divy które zamieściłem ,poost wyżej
przeglądarka Opera 9.62 , IE , Mozila na wszystkich tak samo :/

Offline

 

#11  2010-01-13 16:22:53

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Brno, Česko
Zarejestrowany: 2007-12-22
Serwis

Re: Ramka html

Kod:

<style>
body {
    background-color: #fff;
    font-family: Helvetica,Arial;
    font-size:11px;
    color: #000;
    margin: 0;
    padding: 0;
}

#top {
    width: 1024px;
    padding-top: 20px ;
    vertical-align: top;
         margin-left:auto;
    margin-right:auto;
}

#NAGLOWEK {
    background-color: #888;

}


#MENU {
    width: 200px;
    float: right;
    overflow: hidden;
    background-color: #ccc;
}

#INFORMACJE {
    width: 200px;
    float: left;
    overflow: hidden;
}

#TRESC {
    width: 600px;
    height: 450px;
    float: left;
    overflow: hidden;
    background-color: #fff;
}

#STOPKA {
    clear: both;
    width: 100%;
    background-color: #888;
 }
</style>
<div id="top">
        <div id="NAGLOWEK">NAGLOWEK</div>

        <div id="INFORMACJE">sssss</div>
        <div id="TRESC"> tresc tresc tresc tresc tresc tresc ssss
                <div id="rama">sssssssssssssssssss<br></div>
        </div>
        <div id="MENU">menu</div>
        <div id="STOPKA">stopka</div>

</div>

U mnie działa a u Ciebie nie? Wątpliwe.

Nie napisałeś jaką masz ustawioną rozdzielczość monitora.

Spinnen Essen: [url=http://fluxboxpl.org/portal/]FluxboxPL[/url] [url=http://przepis-na-lo.pl/]Przepis na LibreOffice[/url]

Offline

 

#12  2010-01-13 16:31:52

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

1280 x 800 ,całą tabele nie mam na środku lecz przesuniętą do lewej strony (nie całkowicie przesuniętą )

[b]Minio[/b] użyłem Twojego kodu i chodzi ;) dzieki !

Ostatnio edytowany przez szewczyk (2010-01-13 16:37:34)

Offline

 

#13  2010-01-13 20:21:15

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Brno, Česko
Zarejestrowany: 2007-12-22
Serwis

Re: Ramka html

Tylko „mój” kod jest dokładnie tym samym kodem który Ty wrzucałeś kolejno o 12:18:16 i 14:58:12...

Spinnen Essen: [url=http://fluxboxpl.org/portal/]FluxboxPL[/url] [url=http://przepis-na-lo.pl/]Przepis na LibreOffice[/url]

Offline

 

#14  2010-01-13 20:58:07

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

przy tych manewracjach zgubiłem jednego div'a ;) dlatego tak gupio wyszło

Offline

 

#15  2010-01-13 21:33:56

  lubomir - Użytkownik

lubomir
Użytkownik
Zarejestrowany: 2007-08-30

Re: Ramka html

czy tys jest bootem
ze za cytuje ravena

Offline

 

#16  2010-01-13 23:00:00

  TaZz - Użytkownik

TaZz
Użytkownik
Zarejestrowany: 2009-12-29

Re: Ramka html

[quote=szewczyk]przy tych manewracjach zgubiłem jednego div'a ;) dlatego tak gupio wyszło[/quote]
Na windowsa polecam Notepad++ a na linucha sam nie znam dobrego odpowiednika:p on ładnie pokazuje który div nalezy do którego </div'a>

Offline

 

#17  2010-01-13 23:21:25

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

pracuję pod MS :/ ,ale fajny program znalazłem phpdesinger ,automatycznie uzupełnia składnie i pokazuję braki i ewentualne błedy w skladni ;)

Ostatnio edytowany przez szewczyk (2010-01-13 23:21:53)

Offline

 

#18  2010-01-18 12:38:25

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

hmm nie widzę sensy aby pisać kolejny temat więc napiszę tu :
bawiąc sie jquery chce zrobic za pomoca przenikania div'ow wykonać dodawanie komentarzy więc napisałem css dla div'ów :

#box
{
    display: none;
    position: absolute;
    float: left;
    clear: none;
    width: 100%;
    margin-left: -10px;
    margin-top: -30px;
    height: 100%;
    color: #4B4B4B;
    text-align: center;
    border: 1px solid #8F9D11;
    background-color: #D4FF55;

    -moz-opacity: 0.6;
    opacity: 0.6;

}

#coment
{
    margin-top: 150px;
    background-color:#FFFFFF;
    clear:both;
    width:400px;
    height:300px;
    margin-left:auto;
    margin-right:auto;   
    -moz-opacity: 1;
    opacity: 1;
}[/quote]

Kod:

<div id="box">ssss
    <div id="coment">Dodaj komentarz : <br>
    <textarea name=comment rows=15 ></textarea>
    <input type=button name=save value="Dodaj">
    </div>
</div>

obsługa ajaxa sama w sobie działa ,lecz nie mogę poradzić sobie z tym że id="coment" jest również "półprzezroczysty" a tego nie chcę :((

Offline

 

#19  2010-01-18 22:06:15

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Brno, Česko
Zarejestrowany: 2007-12-22
Serwis

Re: Ramka html

Potomek elementu jakkolwiek przezroczystego nie może być mniej przezroczysty niż swój rodzic dowolnego rzędu.

Innymi słowy — tak długo jak #box będzie miał opacity, tak długo każdy z jego elementów potomnych (w tym #coment) ma opacity nie większe niż on. Musisz zmienić strukturę dokumentu.

Spinnen Essen: [url=http://fluxboxpl.org/portal/]FluxboxPL[/url] [url=http://przepis-na-lo.pl/]Przepis na LibreOffice[/url]

Offline

 

#20  2010-01-18 23:19:15

  szewczyk - Stary wyjadacz :P

szewczyk
Stary wyjadacz :P
Zarejestrowany: 2006-12-03

Re: Ramka html

tak juz doszłem do tego ;) ,udało się za pomoca elemetu jquery wykonac ten manewr

Offline

 

 

Strony: 1

Stopka forum

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson
To nie jest tylko forum, to nasza mała ojczyzna ;-)

[ Generated in 0.011 seconds, 11 queries executed ]

Informacje debugowania

Time (s) Query
0.00009 SET CHARSET latin2
0.00004 SET NAMES latin2
0.00099 SELECT u.*, g.*, o.logged FROM punbb_users AS u INNER JOIN punbb_groups AS g ON u.group_id=g.g_id LEFT JOIN punbb_online AS o ON o.ident='3.148.108.144' WHERE u.id=1
0.00062 REPLACE INTO punbb_online (user_id, ident, logged) VALUES(1, '3.148.108.144', 1732500646)
0.00081 SELECT * FROM punbb_online WHERE logged<1732500346
0.00058 SELECT topic_id FROM punbb_posts WHERE id=138775
0.00005 SELECT id FROM punbb_posts WHERE topic_id=15916 ORDER BY posted
0.00033 SELECT t.subject, t.closed, t.num_replies, t.sticky, f.id AS forum_id, f.forum_name, f.moderators, fp.post_replies, 0 FROM punbb_topics AS t INNER JOIN punbb_forums AS f ON f.id=t.forum_id LEFT JOIN punbb_forum_perms AS fp ON (fp.forum_id=f.id AND fp.group_id=3) WHERE (fp.read_forum IS NULL OR fp.read_forum=1) AND t.id=15916 AND t.moved_to IS NULL
0.00024 SELECT search_for, replace_with FROM punbb_censoring
0.00093 SELECT u.email, u.title, u.url, u.location, u.use_avatar, u.signature, u.email_setting, u.num_posts, u.registered, u.admin_note, p.id, p.poster AS username, p.poster_id, p.poster_ip, p.poster_email, p.message, p.hide_smilies, p.posted, p.edited, p.edited_by, g.g_id, g.g_user_title, o.user_id AS is_online FROM punbb_posts AS p INNER JOIN punbb_users AS u ON u.id=p.poster_id INNER JOIN punbb_groups AS g ON g.g_id=u.group_id LEFT JOIN punbb_online AS o ON (o.user_id=u.id AND o.user_id!=1 AND o.idle=0) WHERE p.topic_id=15916 ORDER BY p.id LIMIT 0,25
0.00319 UPDATE punbb_topics SET num_views=num_views+1 WHERE id=15916
Total query time: 0.00787 s