CSS Positioning - Как вы можете исправить компоненты на месте? - PullRequest
Новая
       27

CSS Positioning - Как вы можете исправить компоненты на месте?

2 голосов
/ 11 августа 2011

Пример - http://appdist.me

Я бы хотел, чтобы клавиатура SVG была прикреплена к нижней части экрана и занимала половину высоты экрана, а логотип Facebook всегда накладывался на клавишу «Q», независимо от размера окна.

Я пытался сделать это в течение нескольких дней. Что я делаю неправильно? Спасибо.

Вот мой HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="style.css" rel="stylesheet" type="text/css">
        <title>CSS Layout Problem</title>
    </head>
    <body>
        <div id="svg">
            <embed src="keyboard-gray.svg" id="keyboard"
                         type="image/svg+xml"
                         pluginspage="http://www.adobe.com/svg/viewer/install/"/>
            <embed src="fb.svg" id="facebook"
                         type="image/svg+xml"
                         pluginspage="http://www.adobe.com/svg/viewer/install/"/>
            <embed src="frame.svg" id="frame"
                         type="image/svg+xml"
                         pluginspage="http://www.adobe.com/svg/viewer/install/"/>
        </div>
    </body>

Вот мой CSS: 

body{
    background-color: #333;
}

#svg{

} 

#facebook{
   position: fixed;
   width: 6%;
   height: 6%;
}

#frame{
   position: fixed;
   width: 100%;
   height: 47%;
   top: 2%;
   left: 0;
}

#keyboard{
   position: fixed;
   width: 100%;
   height: 50%;
   bottom: 2%;
   left: 0;
}

Ответы [ 2 ]

2 голосов
/ 12 августа 2011

Если вы хотите объединить изображения и сделать SVG интерактивным, тогда вы можете использовать <a> теги в своем XML (вместо <g>). * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * * *1007*.

2 голосов
/ 11 августа 2011

Позиционируйте #facebook абсолютно тоже и установите z-индекс так, чтобы он отображался над клавиатурой. 

#facebook{
  position: absolute;
  height: 12%;
  bottom: Y%;
  right: X%;
  z-index: 99;
}

Измените X и Y так, чтобы он находился над клавишей Q.

...