0 Пользователей и 1 Гость просматривают эту тему.
  • 2 Ответов
  • 250 Просмотров
*

Ferum1

  • Осваиваюсь на форуме
  • 49
  • 0
Не получается картинку (638535328.jpg) расположить справа от div, переходит на следующую строку и все...
прилагаю HTML и CSS

Код
<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto" rel="stylesheet">

<title>Страница авторизации</title>

</head>
<body>
<header>
<h1>АСУ ПК</h1>
</header>

<section>
    <article>


<div class=subscribe>

<form action="" method="post">

<label for="title">Email</label>
<input type="email" name="email" placeholder="email">
<br>

<label for="title">Пароль</label>
<input type="password" name="Пароль" placeholder="пароль">

<br>
<label for="input">Язык</label>
<select size="1" name="lang">
<option selected="selected">Ру</option>
<option>EN</option>
</select>
<br>

<input type="submit" value="Вход в программу">
</form>
</div>

  <img class="imgleft" src="images/638535328.jpg" alt="">

    </article>

</section>

<footer>
<h1>&nbsp;</h1>
</footer>
</body>

<html>

CSS
Код
/* --------------- reset.css --------------- */
HTML, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;                               /* îáíóëßåì îòñòóïû è óáèðàåì áîðäþðû */
vertical-align: baseline;          /* ïðèâîäèì âñå ê îäíîé áàçîâîé ëèíèè */
background: transparent;      /* ÷òîáû íå ïðîñêàêèâàëè ëåâûå ôîíû, óñòàíîâëåííûå ïî óìîë÷àíèþ */
font-size: 100%;                     /* ðàçìåð øðèôòà âñåì îäèíàêîâûé */
}
a {                                           /* ññûëêà íå â îáùåì ñïèñêå ÷òîáû íå ñáðàñûâàòü outline ïî óìîë÷àíèþ */
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
outline:none;
}
table { /* óñòðàíßåì îòñòóïû ìåæäó ß÷åéêàìè òàáëèöû */
border-collapse: collapse;
border-spacing: 0;
}
td, td img {
vertical-align: top; /* âîçâðàùàåì ïðèâû÷íîå âåðòèêàëüíîå âûðàâíèâàíèå */
}
input, select, button, textarea {
margin: 0; /* óáèðàåì îòñòóïû ïî óìîë÷àíèþ äëß ýëåìåíòîâ ôîðì (â ÷àñòíîñòè äëß checkbox è radio) */
font-size: 100%; /* äåëàåì ðàçìåð øðèôòîâ âåçäå îäèíàêîâûì */
outline: none;
}
input[type="text"], input[type="password"], textarea {
padding: 0; /* óáèðàåì âíóòðåííèå îòñòóïû äëß òåêñòîâûõ ïîëåé */
}
input[type="checkbox"] { /* âåðòèêàëüíîå âûðàâíèâàíèå ÷åêáîêñîâ è ðàäèîáàòîíîâ îòíîñèòåëüíî ìåòîê */
vertical-align: bottom;
}
input[type="radio"] {
vertical-align: text-bottom;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul {
list-style:none;
}
/* --------------- /reset.css --------------- */

/* --------------- áàçîâûå íàñòðîéêè ---------*/
HTML {
min-height:100%; /* âñåãäà ïîêàçûâàåì âåðòèêàëüíóþ ïîëîñó ïðîêðóòêè  */
}
body {
color: #000;
text-align: left;
font-size: 1em; /* èñïîëüçóåì áåçîïàñíûå øðèôòîâûå CSS ñòåêè */
min-height:100%;
background: #cdebfa;
font-family: 'Roboto', sans-serif;
}
a, a:visited { /* ïîðßäîê ïðàâèë äëß ññûëîê èìååò çíà÷åíèå */
color: #e6618c;
text-decoration: underline;
}
a:hover {
color: #fdf208;
text-decoration:none;
}
a:focus, a:active {
color: #c83867;
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
}
img{

max-width:100%;
}
.clr{
clear:both;
}
.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
/* --------------- /áàçîâûå íàñòðîéêè ---------*/

header{
background:url(images/638535326.jpg) center center no-repeat; color:#fff; text-align:center; vertical-align:middle; background-size:cover;
padding:20px 20px 20px 20px;
}

header>h1{
font-size:5.00em; font-family: 'Open Sans', sans-serif; margin-bottom:25px; font-weight:bold; font-style:italic;
}
.subscribe {
background:rgba(9,16,79,1); display:table; height:337; width:328; padding: 40px 20px 40px 20px; margin:5px 0px 5px 0px;
line-height:30px;

}
.subscribe input{
    float:right;
}
.subscribe select{
    float:right;
}
.subscribe label{
    float:left;
}

.subscribe label{
padding: 0px 0px 0px 5px; color: #ffffff; font-size: 0.94em; margin-top: 20px; height: 30px; width: 60px;

}

.subscribe input[type="email"], input[type="password"], select[name="lang"] {
padding: 0px 0px 0px 5px; border: 0; height: 30px; width: 220px; margin-top: 20px; font-size: 0.94em;
color: #515151; box-sizing: border-box;
/* óáèðàåì âíóòðåííèå îòñòóïû äëß òåêñòîâûõ ïîëåé */
}

.subscribe input[type="submit"] {
padding: 0px 0px 0px 5px; background: #ffffff; border:0; color: #515151; font-size: 0.94em;
    cursor: pointer; height: 30px; width: 150px; margin-top: 30px; margin-right: 70px; box-sizing: border-box;
}

article {
width: 1100px;
}

footer{
background:url(images/638535326.jpg) center center no-repeat; color:#fff; text-align:center; vertical-align:middle; background-size:cover;
padding:20px 20px 20px 20px;
}
footer>h1{
font-size:5.00em; font-family: 'Open Sans', sans-serif; margin-bottom:25px; font-weight:bold; font-style:italic;
}

*

Ilhom666

  • Живу я здесь
  • 1304
  • 166
Код: css
.imgleft {
display: inline-block;
vertical-align: top;
max-width: 60%;  /* или сколько там надо */
}
.subscribe {
display: inline-block;
 }
*

Ferum1

  • Осваиваюсь на форуме
  • 49
  • 0
работает, спасибо!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Картинку уменьшить при сжимание

Автор GuN

Ответов: 1
Просмотров: 236
Последний ответ 10.08.2017, 11:57:15
от SheriffDM
Адаптировать картинку с анмацией

Автор GuN

Ответов: 1
Просмотров: 137
Последний ответ 10.08.2017, 11:50:23
от SheriffDM
css: Скрыть текст пункта меню, но отобразить иконку

Автор slepoy

Ответов: 2
Просмотров: 329
Последний ответ 20.07.2016, 21:14:07
от slepoy
Minitek Wall module сделать кликабельную картинку категории материала

Автор meloman

Ответов: 23
Просмотров: 983
Последний ответ 18.04.2016, 19:05:36
от meloman
Картинку на передний план

Автор Михалыч

Ответов: 4
Просмотров: 874
Последний ответ 30.11.2014, 12:52:01
от Ilhom666