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/.

#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;

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: Poznań, Polska
Zarejestrowany: 2007-12-22
Serwis

Re: Ramka html

szewczyk napisał(-a):

Kod:

body {
    font-size:11px;
}

Nigdy, ale to przenigdy nie podawaj wielkości pisma w pikselach. Nigdy. Używaj względnych rozmiarów fontów (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).

TaZz napisał(-a):

Kod:

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

powinno pomóc;)

Kiedyś Riddle spłodził świetny tekst o centrowaniu w Cssie.

TaZz napisał(-a):

edit.

#NAGLOWEK {
    background-color: #888;

kolor określaj 6 cyframi bo validator uzna Ci to za błąd

Kod:

#NAGLOWEK {
    background-color: #888888;

Ciekawe że specyfikacja (dla CSS3 tak samo) na to pozwala.

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

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: Poznań, Polska
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?

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: Poznań, Polska
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.

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ą )

Minio 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: Poznań, Polska
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...

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

szewczyk napisał(-a):

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

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;
}

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: Poznań, Polska
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.

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

 

Stopka forum

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