HTML / CSS текстовый абзац между изображением и формой

0

Я пытался понять это сейчас, и я думаю, что моя голова взорвется, если я буду пытаться понять это самостоятельно.

Я пытаюсь сделать что-то очень простое, но мне не повезло. Я в основном стараюсь иметь заголовок и абзац между изображением и формой.

Вот как это выглядит прямо сейчас: http://tinypic.com/r/30rob3t/5

И вот что я пытаюсь сделать так: http://tinypic.com/r/30wpdti/5

И вот соответствующий код: HTML:

<div id="content_section4">
<p><img class="round" src="images/image5.jpg" alt="image1" height=175 width=175/></p>
<h1 id="connect">Connect</h1>
<div id="connect">blah blah blha blah joiefje blah blah blahblah blah balah I suck at html I hate my life 
blah blah blah I have a cat blah blah blah blah blah blah blah eu2398re23ioj</div>

<!--contact form here-->
  <div id="contact">
    <br>
    <form action="MAILTO:[email protected]" method="POST" enctype="text/plain">
        <input name="name" type="text" value="Name" size="40" onclick="this.value = '';"/> <br><br>
        <input name="email" type="text" value="Email" size="40" onclick="this.value = '';"/> <br><br>
        <textarea name="message" rows="10" cols="33" type="text" style="overflow:auto;resize:none" />Message</textarea> <br><br>
        <input type="submit" value="Send email"/>
    </form></div>
</div><!--end contact_section4-->

И CSS:

#content_section4 {

float: left;

text-align: justify;

padding-left: 20px; 

}

#content_section4 img {

float: left;

}

#connect {

width: 425px;

padding-left: 205px;

}

#contact {

float:right;    

}

У меня нет большого опыта в веб-дизайне, и я много часов общался с этим. Любая помощь приветствуется =)

  • 0
    насколько широк весь контейнер?
  • 0
    и я понял, что это была еще одна причина, по которой я столкнулся с проблемами. больше не использовать% для этого парня
Теги:
forms
image
wrap

1 ответ

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

Ваш html будет таким.

<div id="content_section4">
<div id="content_left">
<p><img class="round" src="images/image5.jpg" alt="image1" height=175 width=175/></p>
<h1 id="connect">Connect</h1>
<div id="connect">blah blah blha blah joiefje blah blah blahblah blah balah I suck at html I hate my life 
blah blah blah I have a cat blah blah blah blah blah blah blah eu2398re23ioj</div>
</div>
<!--contact form here-->
  <div id="contact">
    <br>
    <form action="MAILTO:[email protected]" method="POST" enctype="text/plain">
        <input name="name" type="text" value="Name" size="40" onclick="this.value = '';"/> <br><br>
        <input name="email" type="text" value="Email" size="40" onclick="this.value = '';"/> <br><br>
        <textarea name="message" rows="10" cols="33" type="text" style="overflow:auto;resize:none" />Message</textarea> <br><br>
        <input type="submit" value="Send email"/>
    </form></div>
</div>

и ваш css будет что-то вроде этого..

#content_section4 {
float: left;

text-align: justify;

padding-left: 20px; 

}

#content_section4 img, #content_left {

float: left;

}

#connect {

width: 425px;

padding-left: 205px;

}

#contact {

float:right;    

}

Наслаждайтесь забавой..

  • 0
    Спасибо! Кто-то +1 это потому что я не могу = /
  • 0
    Что-нибудь, что вы можете предложить, чтобы помешать контактной форме перемещаться при изменении размера окна браузера?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню