Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Delphi программирование > Общие вопросы Delphi
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.11.2011, 22:19   #1
Ko$
Пользователь
 
Регистрация: 21.12.2010
Сообщений: 91
По умолчанию Delphi и CSS

Извеняюсь если создал тему не там незнаю куда написать. Почему при открытии в Google Chrome всё работает отлично, а в Delphi в WebBrowser коряво??? В Delphi не показывает Тени на иконках, Надписи под иконками, индикаторы стоят вертикально а не горизонтально как надо, и ещё при быстром "перелистывания" скрипта он становиться прозрачным между иконок но это не столь важно (Форма стоит с прозрачностью). (Первая Картинка Chrome вторая Delphi.) Вот CSS:
Код:
/*-------------------------
        Simple reset
        Простой сброс
--------------------------*/
 
 
*{
 
 
}
 
 
/*-------------------------
        General Styles
        Генеральный Стиль
--------------------------*/
 
 
html{
        background-color:#161616;
        background-image: url(../img/back.jpg);
}
 
body{
 
        color:#fff;
        font:14px/1.3 'Segoe UI',Arial, sans-serif;
        
}
 
a, a:visited {
        text-decoration:none;
        outline:none;
        color:#54a6de;
}
 
a:hover{
        text-decoration:underline;
}
 
 
 
/*----------------------------
        The Home Screen  
        Главный экран
-----------------------------*/
 
 
#homeScreen{
        width:810px;
        height:770px;   
        
}
 
/* The mask shows only one screen at the time. Uses oveflow:hidden  
 Маска показывает только один экран в то время. Использование oveflow: скрытый */
 
#mask{
        width: 332px;
        height:380px;
        position: relative;
        overflow: hidden;
        margin: 180px auto 0;
        margin-top: 100px;
        margin-left: 70px;
}
 
#allScreens{
        height:100%;
        top:0;
        left:0;
        position:absolute;
        cursor:move;
}
 
.screen{
        width: 332px;
        float:left;
        
}
 
#dock .dockicon,
.screen .icon{
        float:left;
        width:60px;
        height:60px;
        background-repeat: no-repeat;
        margin: 25px;
        position: relative;
}
 
/* Displaying the title attribute below the icon:  
Отображение названия атрибута ниже изображение: */
 
.screen .icon:after{
        bottom: -25px;
        color: White;
        content: attr(title);
        font-size: 12px;
        height: 20px;
        left: -20px;
        overflow: hidden;
        position: absolute;
        text-align: center;
        white-space: nowrap;
        width: 100px;
        text-shadow: 0 0 3px #222;
}
 
#dock{
        height: 70px;
        margin: 60px auto;
        width: 332px;
        margin-left: 70px;
        margin-top: 10px;
}
 
/* The dock icons get subtle shadows below them
Док значков получить тонкие тени под ними */
 
#dock .dockicon:after{
        border-radius: 50px/10px;
        bottom: 7px;
        box-shadow: 0 5px 2px #000000;
        content: "";
        height: 1px;
        position: absolute;
        width: 58px;
}
 
#indicators{
        
        list-style: none;
        margin-left: 154px;
        
}
 
#indicators li{
        border-radius:50%;
        display: inline-block;
        margin:7px;
        width:6px;
        height:6px;
        background-color:white;
        opacity:0.6;
        
}
 
#indicators li.active{
        opacity:1;
        
        background-color:#00A2D6;
        box-shadow: 0 0 3px #00A2D6, 0 0 1px #51CFF9 inset;
}
Изображения
Тип файла: jpg G.jpg (166.9 Кб, 131 просмотров)
Тип файла: jpg IPad.jpg (97.3 Кб, 141 просмотров)
Ko$ вне форума Ответить с цитированием
Старый 24.11.2011, 22:29   #2
Ko$
Пользователь
 
Регистрация: 21.12.2010
Сообщений: 91
Вопрос Delphi и CSS

(В первую не влезло) (1 часть) HTML этого же скрипта:
Код HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iOS Home Screen with CoffeeScript | Tutorialzine Demo</title>
        
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
                <section id="homeScreen"> 
                        <div id="mask">
                                <div id="allScreens"></div>
                        </div>
                        
<ul id="indicators"></ul>
                        
<div id="dock"></div>
</section>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="assets/js/touchable.js"></script>
<script src="assets/js/coffee-script.js"></script>
                            
<script type="text/coffeescript">
                        
# The Icon class. 
                        
                        class Icon
 
# The constructor. The -> arrow signifies
# a function definition.
                                
                                constructor: (@id, @title) ->
# @ is synonymous for "this". The id and title parameters
# of the construtor are automatically added as this.id and this.title
                                        
# @markup holds the HTML of the icon. It is
# transformed to this.markup behind the scenes.
                                        
                                        @markup = "<div class='icon' style='background-image:url(assets/img/icons/#{@id}.png)'
                                                                 title='#{@title}'></div>"
                        
 
# The DockIcon class inherits from Icon
                        
                        class DockIcon extends Icon
                                constructor: (id, title)->
 
# This calls the constructor if Icon
                                        
                                        super(id, title)
                                        
# Changing the class name of the generated HTML 
                                        @markup = @markup.replace("class='icon'","class='dockicon'")
                        
                        
# The Screen Class
                        
                        class Screen
# Function arguments can have default parameters
                                constructor: (icons = [])->
                                        @icons = icons
                                
                                attachIcons: (icons = [])->
                                        Array.prototype.push.apply(@icons, icons)
 
                                generate: ->
                                        markup = []
                                                                                # Looping through the @icons array
                                        markup.push(icon.markup) for icon in @icons
                                                                                # The last line of every function is implicitly returned
                                        "<div class='screen'>#{markup.join('')}</div>"
                                
 
                        class Stage                                                        # The width of our "device" screen. This is                                 # basically the width of the #mask div.
                                
Ko$ вне форума Ответить с цитированием
Старый 24.11.2011, 22:32   #3
Ko$
Пользователь
 
Регистрация: 21.12.2010
Сообщений: 91
По умолчанию

(2 часть) HTML этого же скрипта:
Код HTML:
 screenWidth: 332
                        
                                constructor: (icons)->
                                        
                                        @currentScreen = 0
                                        @screens = []                                                                                # Calculating the number of screens                                        # necessary to display all the icons
 num = Math.ceil(icons.length / 9)
                                        i = 0
while num--
# we pass a slice of the icons array
s = new Screen(icons[i...i+9])
# adding the screen to the local screens array
@screens.push(s)
i+=9
# This method populates the passed element with HTML
                                addScreensTo: (element)->
                                
                                        @element = $(element)
                                        @element.width(@screens.length*@screenWidth)
 for screen in @screens
@element.append(screen.generate())
addIndicatorsTo: (elem)->
# This method creates the small
# circular indicatiors
 @ul = $(elem)
 for screen in @screens
 @ul.append('<li>')
 @ul.find('li:first').addClass('active');
 goTo: (screenNum)->
# This method animates the allScreen div in
 # order to expose the needed screen in #mask
                                        
                                        if @element.is(':animated')
                                                return false
# if this is the first or last screen,
# run the end of scroll animation
 if @currentScreen == screenNum
# Parallel assignment:
[from, to] = ['+=15','-=15']
 if @currentScreen != 0
 [from, to] = [to, from]
@element.animate( { marginLeft : from }, 150 )
.animate( { marginLeft : to }, 150 )
                                        else
 # If everything is ok, animate the transition between the screens.
                                                
# The fat arrow => preserves the context of "this"
                                                
@element.animate( { marginLeft:-screenNum*@screenWidth }, => @currentScreen = screenNum )
@ul.find('li').removeClass('active').eq(screenNum).addClass('active');
                                                
next: ->
toShow = @currentScreen+1
# If there is no next screen, show
# the current one
                                        
if toShow == @screens.length
toShow = @screens.length - 1
                                        
@goTo(toShow)
                                        
previous: ->
toShow = @currentScreen-1
                                        
# If there is no previous screen,
# show the current one
if toShow == -1
 toShow = 0
                                        
 @goTo(toShow)
                        
# This is equivalent to $('document').ready(function(){}):
$ ->         
allIcons = [
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
new Icon('Chuzzle', 'Chuzzle'), new Icon('Safari', 'Safari')
new Icon('Weather', 'Weather'), new Icon('nes', 'NES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('BossPrefs', 'Boss Prefs'), new Icon('Chess', 'Chess')
new Icon('Mail', 'Mail'), new Icon('Phone', 'Phone')
new Icon('SMS', 'SMS Center'), new Icon('Camera', 'Camera')
new Icon('iPod', 'iPod'), new Icon('Calculator', 'Calculator')
new Icon('Music', 'Music'), new Icon('Poof', 'Poof')
new Icon('Settings', 'Settings'), new Icon('YouTube', 'Youtube')
 new Icon('psx4all', 'PSx4All'), new Icon('VideoRecorder', 'Record Video')
new Icon('Installer', 'Installer'), new Icon('Notes', 'Notes')
new Icon('RagingThunder', 'RagingThunder'), new Icon('Stocks', 'Stocks')
new Icon('genesis4iphone', 'Genesis'), new Icon('snes4iphone', 'SNES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')]   
                
dockIcons = [
new DockIcon('Camera', 'Camera')
new DockIcon('iPod', 'iPod')
new DockIcon('Calculator', 'Calculator')] 
allScreens = $('#allScreens')
# Using the Touchable plugin to listen for
# touch based events:                             
allScreens.Touchable();
# Creating a new stage object
stage = new Stage(allIcons)
stage.addScreensTo(allScreens)
stage.addIndicatorsTo('#indicators')
# Listening for the touchablemove event.
# Notice the callback function
allScreens.bind 'touchablemove', (e,touch)->    
stage.next() if touch.currentDelta.x < -5
stage.previous() if touch.currentDelta.x > 5
# Adding the dock icons:                              
dock = $('#dock')
for icon in dockIcons
dock.append(icon.markup)        
</script>
</body>
</html>
Ko$ вне форума Ответить с цитированием
Старый 25.11.2011, 06:14   #4
Johnson
кривокодер ;)
Форумчанин
 
Аватар для Johnson
 
Регистрация: 20.06.2008
Сообщений: 707
По умолчанию

удалено.......
"А как написать праграму?, "ришыти задачьку очинь нада" ©с форума. Жить становится интереснее, жить становится веселее...
{Быть или не быть} {Неуспешный суицид}
Johnson вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
отключить css в webbrowser Delphi designer999 Работа с сетью в Delphi 0 11.06.2010 09:54