Jump to content
  • 0

проблема с двумя блоками css


123456789igor
 Share

Question

image_503bac3e8c919.jpg

есть вот такая страничка написанная на html javascript и css. Вопрос следующий Текст, который выделен в кружке на картинке, не получается вставить на один уровень с видео. Что-то с блоками в style.css но вот как решить проблему не пойму

часть кода из main.html:


<section id="content">
<div class="container_12">
<article class="a1 border-bot extra-wrap">
<center><iframe width="640" height="480" src="http://www.youtube.com/embed/0FgKQdc96k4" frameborder="0" allowfullscreen></iframe></center></br>
<article class="a1 border-bot2 extra-wrap">
<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

</article>
</article>
</div>
</div>

И из css:


/********************** Content ************************/

section#content {
padding:55px 0px 65px 0;

}
#splash #content {
background:#090909;
position:absolute;
bottom:0;
top:137px;
z-index:1;
left:0;
right:0;
overflow:hidden;
padding:0;
}
#splash #advanced {
position:absolute !important;
}
.splash-min-height {
min-height:300px;
}

.col-1 {
float:left;
width:183px;
margin:0 35px 0 0;
}
.col-2 {
float:left;
width:183px;
}
.map-container {
margin:0 0 25px 0;
}
.map-container iframe {
width:270px;
height:338px;
margin:0;
border:none;
}
.adress {padding:0;}
.adress dt {
display:block;
font-weight:normal;
color:#fff;
font-size:14px;
line-height:26px;
padding:0 0 8px 0;
}
.adress dd {
font-size:14px;
line-height:26px;
color:#9b9a9a;
overflow:hidden;
}
.adress dd span {
float:left;
width:82px;
}

.content-box {
width:940px;
margin:0 auto;
padding:0;
}
.inner-404 {
background:url(../images/page404-img.jpg)/*tpa=http://static.livedemo00.template-help.com/wt_40504/images/page404-img.jpg*/ no-repeat 0 0;
padding:0 0 0 640px;
min-height:340px;
}
.heading-404 {
display:block;
color:#fff;
font-weight:normal;
font-family: 'Oswald', sans-serif;
font-size:48px;
line-height:55px;
}
strong.heading-404 {
}
b.heading-404 {
font-size:42px;
margin:-6px 0 22px 0;
}
.inner-404 p {
font-size:14px;
line-height:26px;
padding:0 0 10px 0;
color:#9b9a9a;
}

ещё


.extra-wrap{
overflow:hidden;
display:block;
}

.border-bot {
padding:0px 86% 30px 0;
/*padding-bottom:20px; */
margin-bottom:29px;
border-bottom:1px solid #1d1d1d;
}

.border-bot2 {
padding:0px 0px 0px 660px;
width:560px;
/*padding-bottom:20px; */
margin-bottom:129px;
border-bottom:1px solid #1d1d1d;
}

.a1 {margin:0 10px;}

.container_12{margin-left:auto;margin-right:auto;width:1000px;position:relative;}

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
<article class="a1 border-bot2 extra-wrap">

<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

</article>

Article - блочный элемент. Разреши обтекание слева - float:right;

Link to comment
Share on other sites

  • 0

http://demo3285.atservers.net/

а если делать так:

<article class="a1 border-bot extra-wrap">
<iframe width="640" height="480" src="http://www.youtube.com/embed/0FgKQdc96k4" frameborder="0" allowfullscreen></iframe>
Right Sidebar: Integer velit. Vestibulum ni
</article>

при

.border-bot {
/* float:left; */
padding:0px 86% 30px 0;
margin-bottom:29px;
border-bottom:1px solid #1d1d1d;

то видео и надпись располагаются просто друг под другом при float:left все сносит и перекашивает

Link to comment
Share on other sites

  • 0

Все проблема решена. Решил свою проблему с помощью grid.css

<div class="wrapper"> 
<div class="grid_8">
<iframe width="640" height="480" src="http://www.youtube.com/embed/0FgKQdc96k4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="grid_4">
<p><strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, </p>
</div>
</div>
</br></br>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy