Я пытался понять это сейчас, и я думаю, что моя голова взорвется, если я буду пытаться понять это самостоятельно.
Я пытаюсь сделать что-то очень простое, но мне не повезло. Я в основном стараюсь иметь заголовок и абзац между изображением и формой.
Вот как это выглядит прямо сейчас: 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;
}
У меня нет большого опыта в веб-дизайне, и я много часов общался с этим. Любая помощь приветствуется =)
Ваш 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;
}
Наслаждайтесь забавой..