文本不在div标签中

时间：2015-12-17 06:51:48

标签： html css text positioning

我使用了float：left用于上面的一些元素，但是我无法将文本放到div位置... 如果您查看图像，您可以看到我想要做的事情：将文本放在空灰框的位置。

是的，这是一个学校项目..不要太认真地对待设计.. :)

here's what it looks like!

我会粘贴我的HTML和我的CSS：

HTML：

<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="js.js" type="text/javascript" ></script>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body onLoad="cargar_pagina()">
<div class="cuerpo">
<p>&nbsp;</p>
    <div class="acercaDeArriba">
    Luis Jarman <br>
    Ivan Ortega <br>
    Jose Manuel
    </div>
  <div class="barraMenu">
        <img src="images/RedNormal.png" width="112" height="30" onclick="boton_ferrari()" onMouseOver="this.src='images/RedHover.png';" onMouseOut="this.src='images/RedNormal.png';" alt=""/>      
        <img src="images/BlackNormal.png" width="112" height="30" onMouseOver="this.src='images/BlackHover.png';" onMouseOut="this.src='images/BlackNormal.png';" onclick="boton_porsche()" alt=""/>
        <img src="images/GreyNormal.png" width="112" height="30" onMouseOver="this.src='images/GreyHover.png';" onMouseOut="this.src='images/GreyNormal.png';" onclick="boton_mclaren()" alt=""/>
        <img src="images/BlueNormal.png" width="112" height="30" onMouseOver="this.src='images/BlueHover.png';" onMouseOut="this.src='images/BlueNormal.png';" onclick="boton_pagani()" alt=""/>
  </div>

            <div class="miniaturas">
                <table height="289">
                    <tr>
                        <td><img id="i1" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i2" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                    <tr>
                        <td><img id="i3" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i4" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                    <tr>
                        <td><img id="i5" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i6" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                    <tr>
                        <td><img id="i7" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i8" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                </table>
             </div>
            <div class="framePhoto">
                <img id="frameFoto" src="images/porsche/porsche1.jpg" width="300" height="200" alt=""/>
            </div>
            <div class="navbar">
                <h4 class="titulos">PUBLICIDAD FERRARI</h4>
                <iframe class="video" width="200" height="135" src="https://www.youtube.com/embed/7HQ7-jnJ0J4? rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent"               frameborder="0" allowfullscreen controls></iframe>
                <h4 class="titulos">WEBS oficiales</h4>
                <ul>
                <li> <a class="enlace" href="http://www.ferrari.com/es_es/">Ferrari</a> </li>
                <li> <a class="enlace" href="http://www.porsche.com/spain/">Porsche</a> </li>
                <li> <a class="enlace" href="http://www.mclaren.com/">Mclaren</a> </li>
                <li> <a class="enlace" href="http://www.pagani.com/">Pagani</a> </li>
                </ul>
                <img class="volante" src="images/volante.png" width="200" heigt="200" alt=""/>
            </div>

              <div class="info">
                    <p class="textoDescri">Ferrari es una compañía de automóviles deportivos con sede en Maranello (Italia). Fue fundada en 1929 por un piloto de autos de competición, Enzo Ferrari, con el nombre de Scuderia Ferrari, construyendo               automóviles de competición y, más tarde, en 1947, fabricando autos deportivos.</p>
                 </div>





</div>
</body>
</html>

CSS：

body{
    background-color:#000000;
}
.cuerpo{
    height:1200px;
    width:800px;

    margin-left:auto;
    margin-right:auto;
    background-image:url(images/background4.png);
    background-repeat:no-repeat;

}
.barraMenu{
    margin-top:200px;
    margin-left:15px;
    height:38px;
    width:490px;
    padding-top:3px;
    padding-left:20px;
    background-image:url(images/barramenu.png);
    background-repeat:no-repeat;

}
.acercaDeArriba{
    margin-top:177px;
    background-image:url(images/acercade.png);
    background-repeat:no-repeat;
    height:129px;
    width:270px;
    float:right;
    text-align:center;
    font-size:22px;
    padding-top:20px;
}
.framePhoto{
    background-image:url(images/frameFoto.png);
    background-repeat:no-repeat;
    width:364px;
    height:319px;
    text-align:center;
    padding-top:50px;
    float:left;
    margin-left:15px;


}
#frameFoto:hover {
     width: 325px;
     height: 225px;
}
#frameFoto{
    alignment-adjust:central;
    width: 300px;
    height: 200px;
    -webkit-transition: height 1s, width 1s;
}
.miniaturas{
    width:130px;
    float:left;
    margin-left:20px;
    margin-top:20px;

}
.container{
    display:table;
}
.containerRow{
    display:table-row;
}
.navbar{
    background-image:url(images/navbar.png);
    background-repeat:no-repeat;
    width:266px;
    height:550px;
    float:left;
    padding-left:5px;
}
.volante {
    margin-left: 25px;
    width: 150px;
    height: 150px;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
   50% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes mymove {
   50% {transform: rotate(360deg);}
}
.video{
vertical-align:top;
margin-top: 0px;    
margin-left: 9px;
box-shadow: 0px 7px 2px #888888;

}

.titulos{
margin-left: 10px;
text-shadow: 2px 2px rgba(238,115,115,0.93);
}

@font-face {
   font-family: myFirstFont;
   src: url(Anita_semi_square.ttf);
}

.enlace{
   font-family: myFirstFont;
}
.info{
    background-image:url(images/descrip.png);
    background-repeat:no-repeat;
    margin-top:325px;
    margin-left:10px;
    width:550px;
    height:170px;

}
.textoDescri{
    padding-bottom:500px;

}

3 个答案:

答案 0 :(得分：0)

我移动class =“info”你还好吗？

body{
    background-color:#FFFFFFF;
}
.cuerpo{
    height:1200px;
    width:800px;

    margin-left:auto;
    margin-right:auto;
    background-image:url(images/background4.png);
    background-repeat:no-repeat;

}
.barraMenu{
    margin-top:200px;
    margin-left:15px;
    height:38px;
    width:490px;
    padding-top:3px;
    padding-left:20px;
    background-image:url(images/barramenu.png);
    background-repeat:no-repeat;

}
.acercaDeArriba{
    margin-top:177px;
    background-image:url(images/acercade.png);
    background-repeat:no-repeat;
    height:129px;
    width:270px;
    float:right;
    text-align:center;
    font-size:22px;
    padding-top:20px;
}
.framePhoto{
    background-image:url(images/frameFoto.png);
    background-repeat:no-repeat;
    width:364px;
    height:319px;
    text-align:center;
    padding-top:50px;
    float:left;
    margin-left:15px;


}
#frameFoto:hover {
     width: 325px;
     height: 225px;
}
#frameFoto{
    alignment-adjust:central;
    width: 300px;
    height: 200px;
    -webkit-transition: height 1s, width 1s;
}
.miniaturas{
    width:130px;
    float:left;
    margin-left:20px;
    margin-top:20px;

}
.container{
    display:table;
}
.containerRow{
    display:table-row;
}
.navbar{
    background-image:url(images/navbar.png);
    background-repeat:no-repeat;
    width:266px;
    height:550px;
    float:left;
    padding-left:5px;
}
.volante {
    margin-left: 25px;
    width: 150px;
    height: 150px;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
   50% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes mymove {
   50% {transform: rotate(360deg);}
}
.video{
vertical-align:top;
margin-top: 0px;    
margin-left: 9px;
box-shadow: 0px 7px 2px #888888;

}

.titulos{
margin-left: 10px;
text-shadow: 2px 2px rgba(238,115,115,0.93);
}

@font-face {
   font-family: myFirstFont;
   src: url(Anita_semi_square.ttf);
}

.enlace{
   font-family: myFirstFont;
}
.info{
    background-image:url(images/descrip.png);
    background-repeat:no-repeat;
    margin-top:10px;
    margin-left:10px;
    width:500px;
    height:170px;
     z-index:2 ;

}
.textoDescri{
    padding-bottom:10px;
    z-index:auto;

}
<!doctype html>

<html>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="js.js" type="text/javascript" ></script>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body onLoad="cargar_pagina()">
<div class="cuerpo">
<p>&nbsp;</p>
    <div class="acercaDeArriba">
    Luis Jarman <br>
    Ivan Ortega <br>
    Jose Manuel
    </div>
  <div class="barraMenu">
        <img src="images/RedNormal.png" width="112" height="30" onclick="boton_ferrari()" onMouseOver="this.src='images/RedHover.png';" onMouseOut="this.src='images/RedNormal.png';" alt=""/>      
        <img src="images/BlackNormal.png" width="112" height="30" onMouseOver="this.src='images/BlackHover.png';" onMouseOut="this.src='images/BlackNormal.png';" onclick="boton_porsche()" alt=""/>
        <img src="images/GreyNormal.png" width="112" height="30" onMouseOver="this.src='images/GreyHover.png';" onMouseOut="this.src='images/GreyNormal.png';" onclick="boton_mclaren()" alt=""/>
        <img src="images/BlueNormal.png" width="112" height="30" onMouseOver="this.src='images/BlueHover.png';" onMouseOut="this.src='images/BlueNormal.png';" onclick="boton_pagani()" alt=""/>
  </div>

            <div class="miniaturas">
                <table height="289">
                    <tr>
                        <td><img id="i1" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i2" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                    <tr>
                        <td><img id="i3" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i4" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                    <tr>
                        <td><img id="i5" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i6" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                    <tr>
                        <td><img id="i7" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                        <td><img id="i8" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
                    </tr>
                </table>
             </div>
            <div class="framePhoto">
                <img id="frameFoto" src="images/porsche/porsche1.jpg" width="300" height="200" alt=""/>
            </div>
            <div class="info">
                    <p>Ferrari es una compañía de automóviles deportivos con sede en Maranello (Italia). Fue fundada en 1929 por un piloto de autos de competición, Enzo Ferrari, con el nombre de Scuderia Ferrari, construyendo               automóviles de competición y, más tarde, en 1947, fabricando autos deportivos.</p>
                 </div>
            <div class="navbar">
                <h4 class="titulos">PUBLICIDAD FERRARI</h4>
                <iframe class="video" width="200" height="135" src="https://www.youtube.com/embed/7HQ7-jnJ0J4? rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent"               frameborder="0" allowfullscreen controls></iframe>
                <h4 class="titulos">WEBS oficiales</h4>
                <ul>
                <li> <a class="enlace" href="http://www.ferrari.com/es_es/">Ferrari</a> </li>
                <li> <a class="enlace" href="http://www.porsche.com/spain/">Porsche</a> </li>
                <li> <a class="enlace" href="http://www.mclaren.com/">Mclaren</a> </li>
                <li> <a class="enlace" href="http://www.pagani.com/">Pagani</a> </li>
                </ul>
                <img class="volante" src="images/volante.png" width="200" heigt="200" alt=""/>
            </div>

              





</div>
</body>
</html>

答案 1 :(得分：0)

我认为你在代码中已经改变了很多东西，我们可以谈几个小时关于什么是好的html页面。无论如何，首先我建议你给一个“架构”试图将你的身体分成2个宏格。 左侧有一个用于主要内容，另一个用于侧边栏。 要做到这一点，你必须遵循这个方案：

HTML：

<body>
 <div class"container">
  <div class="main-content">
   <!-- your main content here -->
  </div>
  <div class="sidebar">
   <!-- your sidebar content here -->
  </div> 
 </div>
</body>

CSS：

.main-content {width: 66%; float: left;}
.sidebar {width: 34%; float: right;}

答案 2 :(得分：0)

尝试将位置相对于info div放置，并将绝对位置设置为textoDescri，就像那样

.info{
    background-image:url(images/descrip.png);
    background-repeat:no-repeat;
    margin-top:325px;
    margin-left:10px;
    width:550px;
    height:170px;
    **position:relative**

}
.textoDescri {
    **position:absolute**

}

Codepin

相关问题
最新问题