Не удается заставить css перемещать мое маленькое текстовое поле в центр

Вопрос:

Я пытаюсь получить маленькую коробку в центре моего экрана, у меня был только текст, хорошо отцентрированный и просто отбросил меня в сторону, но я добавил небольшую рамку, чтобы сделать мой текст более заметным с использованием непрозрачности. Теперь текст и полупрозрачный ящик, на котором он сидит, находится над мной в сторону, а float не будет работать, а поля останутся как странная коробка, где текст будет без поля. Я что-то делаю здесь неправильно или как это исправить? PS Я использую “технику”, я думаю, из веб-сайта w3schools это в моем комментарии позже.

HTML:

<div class="myLinks">
<aside class="myLinks">
<nav class="myLinks">
<a href=""> content </a> <br/> <br/>
<a href=""> content </a> <br/> <br/>
<a href=""> content </a> <br/> <br/>
<a href=""> content </a> <br/> <br/>
<a href=""> content </a> <br/> <br/>
<a href=""> content </a> <br/> <br/>
</nav>
</aside>
</div>
<div class="homePageContent">
<div class="transparency"> <!-- http://www.w3schools.com/css/css_image_transparency.asp -->
<h2> <em> Hello, </em> </h2>
<em> <p> co <br/>

n <br/>

t<br/>

e <br/>

n <br/>

t <br/>

content <br/>

content <br/>

content <br/>

content <br/>

content<br/>

content <br/>

content</p> </em>
</div>
</div>

CSS:

     .myLinks{
background: -webkit-linear-gradient(45deg, #0c64e8, #989898); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, #0c64e8, #989898); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, #0c64e8, #989898); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, #0c64e8, #989898); /* Standard syntax */
padding-left: 5px;
width:120px;
border-color: #323232;
border-style: double;
float:left;
}
.homePageContent{
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
width:400px;
height:530px;
border:1px solid gray;
}
.transparency{
width: 400px;
height: 530px;
margin: 0px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.4;
filter: alpha(opacity=60);
}

Лучший ответ:

если вы хотите, чтобы окно в центре экрана можно использовать margin: 0 auto Попробуйте следующее:

.homePageContent{
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width:400px;
    height:530px;
    border:1px solid gray;  
    margin:0 auto
}

http://jsfiddle.net/Q3vd7/

Ответ №1

У вас есть в стороне, а основной контент не плавает. Смешивание плавающих и неплавающих элементов, подобных этому, приведет к тому, что вы видите. Измените свой CSS на это, чтобы вы пошли в правильном направлении:

.homePageContent{
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
width:400px;
height:530px;
border:1px solid gray;
float: left;
}

Оцените статью
TechArks.Ru
Добавить комментарий