2014-02-18 3 views
-1

У меня есть объект, который некоторое время назад был бы центрирован вокруг окна, который будет исчезать. Моя проблема заключается в том, что текст находится в углу, и окно ушло. Я не знаю, почему. Кажется, что все в порядке с позиционированием css выглядит отлично, ect. Если кто-то может помочь мне разобраться, почему элемент больше не сосредоточен вокруг коробки, вокруг которой было бы здорово. Вы можете увидеть пример here (прокрутите вниз до последнего слайда, свяжитесь со мной)CSS/HTML - Item Not Centered

Вы можете увидеть css для поля и css для текста, приведенного ниже.

Текст CSS:

#slide4 .contact{ 
    color: red; 
    position: relative; 
    font-size:70px; 
    top: 30px; 
    left: 36%; 
} 
#slide4 .contact1{ 
    color: rgba(51,51,51,.3); 
    position: relative; 
    font-size: 40px; 
    top: 100px; 
    left: 8%; 
} 
#slide4 .contact2{ 

    position: absolute; 
    font-size: 40px; 
    top: 140px; 
    right: 21%; 
     color: rgba(51,51,51,.3); 
} 
#slide4 .box{ 
     position:relative; 
    width: 400px; 
     height: 200x; 
    padding-right: 25px; 
    padding-left: 25px; 
    padding-top: 25px; 
    padding-bottom: 25px; 
     background: rgba(255,255,255,.9); 
    top: 100px; 
    left: 32%; 
    opacity: 0; 
    filter:alpha(opacity=0); 
} 

Box CSS:

<div class="box"> 
    <span class="contact1">This is a test</span> 
    <span class="contact2">This is a test</span></div> 
    </div> 

Итак, позвольте мне summerize мой вопрос еще раз, почему коробка не центрированный вместе с текстом, который должен иметь хороший шрифт этого больше нет.

+0

У вас есть какая-то проблема в файле CSS. Сначала в '# homeprofile'' height' определяется дважды, а ':' отсутствует на первом. '# slide3 .text' имеет дополнительный' {'. '' 'отсутствует для' a: visited'. – morgul

ответ

3

Когда я делаю Inspect Element в Chrome, он не находит связанные свойства CSS slide4. Обновление CSS style.css как предложено ниже,

/****************************** 
SLIDE 3 
*******************************/ 
#slide3{ 
    background-color:#b6c10b; 
} 
#slide3 .text{ 
    position: relative; 
    top: 35px; 
    left: 505px; 
    font-size: 35px; 
    color: rgba(51,51,51,0.3);opacity: .3;} ~~> remove } as its extra 

} 

a:link {color:#333333; 
opacity: .3;}  
a:visited {color:#333333; ~~> add } as its missing 
a:hover {color:#333333; 
opacity: .3;} 
a:active {color:#333333; 
opacity: .3;} 
+0

OMG ваша жизнь заставка редактировать мой текст в настоящее время ушел – apples

+0

@apples Он работает сейчас? Помог ли мой ответ? Примите ответ. –

+0

kinda, но я не могу найти, почему только один из них - это тест, показывающий [здесь] (https://dl.dropboxusercontent.com/u/10329732/portfolio/Parallasx/index.html) – apples

0

Я пробовал код. Сначала я удалил последние два предложения, связанные с непрозрачность в вашем разделе .box {}. И это сработало.

В противном случае, изменение непрозрачность коробки до .

Надеюсь, это поможет.

Thanx.

0

Вы получили несколько ошибок в вашем коде, публикуемую:

  • Высота коробки не хватает точек.
  • В настройках непрозрачности не отображается окно.
  • Вы получили дополнительный DIV в разметке
  • слайд не является частью разметки