Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 07.09.2013, 19:19   #1
Rikcon
 
Регистрация: 23.03.2012
Сообщений: 9
По умолчанию Обтекание картинки текстом

Доброе время суток.
Сел недавно осваивать CSS и HTML.
кое что понял,а вот кое что совсем не лезет.

Не могу никак сделать обтекание картинки текстом.
Сама картинка это logo.png (прикрепил на всякий) + кнопки брал отсюда
http://www.ourtuts.com/create-css3-b...-all-browsers/
Уже много чего пробвал,гуглил,не помогает,ибо я там уже накосячил изрядно скорее всего,и банально не вижу простых вещей.



Код HTML:
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Untitled</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/buttons.css" type="text/css" media="screen" /> 
        <link rel="author" href="humans.txt">
    </head>
    <body>
        <div id="header"> 
      
        <div id="logo"> 
           <div id="Text"> sdasdasdasdasdsad</div>
          <img src="http://localhost/img/logo.png" alt="logo" align="middle">
            


          </div>

        <div id="menubig">  
          <a href="#" class="button black">**MAIN**</a> 
          <a href="#" class="button black">**ABOUT**</a> 
          <a href="#" class="button black">CONTACTS</a>  <!-- пррбелмы ставить alt+0160 на нампаде-->
        </div>
       
       <div id="menu">
          
          <ul class="hr">

         <li> <a href="dummy">ALL</a></li>
          <li><a href="dummy">DIGITAL</a> </li>
        <li> <a href="dummy">WEB</a> </li>
         <li> <a href="dummy">PRINT</a> </li>

        </ul>
          
        </div>
      </div>
        <div id="base">
          

          <p> One morning, when
           Gregor Samsa woke from troubled dreams, he found 
           and if he lifted his head a little he could see his brown belly, slightly domed and divided by
            arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. 
            His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.</p>
          <div id="rasporka"></div>
        </div>
       

       <footer> ss</footer>
    </body>
</html>
СSS

Код:
* {margin: 0; padding: 0;} /* обнуляем отступы */

html,body /* устанавливаем для кроссбраузерности явно отступы */
{
	margin:0;
	height:100%;
	background-color: white;
}

#header 								
{
	position:relative;
	clear:both;
	margin: 0px 75px;
	height:180px;
	color:white;



}
#logo 
{
width:70px;
height:70px;
float:left;
margin-top: 40px;
}
#menubig
{
	float: right;
	margin-top: 55px;


}
#menu
{
	margin-bottom: 15px;
	position: absolute;
	bottom: 0;
}

ul.hr {




    margin: 0; /* Обнуляем значение отступов */
    padding: 4px; /* Значение полей */
   }
   ul.hr li 
   {
    display: inline; /* Отображать как строчный элемент */
	padding: 0px 20px 0px 0px; /* Поля вокруг текста */
	font: 11pt Trebuchet MS;
	a:link {color:black};
	a:visited {color:orange};
}

ul.hr li a 
{
  
color:black;
}
#base 
{
	min-height: 100%;
	background-color: grey;
	margin: 0px 75px ;


}
#rasporka 
{
	clear: both;
height:135px; 
}

footer 
{ 
background: #0000CC; /* цвет фона подвала (для наглядности) */

color: #fff;

height: 135px; /* высота подвала */
margin-right: 75px;
margin-left: 75px;
margin-top: -135px; /* делаем отрицательный отступ по высоте равный высоте подвла, чтобы четко вписаться в размер экрана */


}


#text 
{

width:200px;
height:70px;
float:left;
}
Взываю к вашей помощи )

Так же приветсвуються любые замечания по коду/корректировки.
Изображения
Тип файла: png logo.png (2.6 Кб, 24 просмотров)
Rikcon вне форума Ответить с цитированием
Старый 07.09.2013, 19:29   #2
grominfo
Форумчанин
 
Аватар для grominfo
 
Регистрация: 30.05.2011
Сообщений: 651
По умолчанию

Код:
#logo img{float:left;margin:5px;}
Но это вариант для рабочего кода. А у вас тут так много всего навалено, что посмотреть можно только в работе. Если страница выложена на сервере, то дайте ссылку.
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ.
Список услуг и портфолио на сайте www.andreygrom.ru
grominfo вне форума Ответить с цитированием
Старый 07.09.2013, 19:42   #3
grominfo
Форумчанин
 
Аватар для grominfo
 
Регистрация: 30.05.2011
Сообщений: 651
По умолчанию

Советую бросить этот код и переверстать заново.
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ.
Список услуг и портфолио на сайте www.andreygrom.ru
grominfo вне форума Ответить с цитированием
Старый 07.09.2013, 21:29   #4
Rikcon
 
Регистрация: 23.03.2012
Сообщений: 9
По умолчанию

Цитата:
Сообщение от grominfo Посмотреть сообщение
Советую бросить этот код и переверстать заново.
Будет уже 3 раз ^_^.

Спасибо за скорый ответ )

Еще хотел спросить,есть ли на примете какой-нибудь гайд,статьи о вёрстке с макета?
Так то я сверстал без макета себе страничку,захотелось так сказать "по взрослому" с макета,и вот что в итоге получилось )
Rikcon вне форума Ответить с цитированием
Старый 07.09.2013, 21:35   #5
grominfo
Форумчанин
 
Аватар для grominfo
 
Регистрация: 30.05.2011
Сообщений: 651
По умолчанию

Макеты можешь взять здесь

http://htmlbook.ru/layout

Там же и подробные справочники.
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ.
Список услуг и портфолио на сайте www.andreygrom.ru
grominfo вне форума Ответить с цитированием
Старый 11.09.2013, 18:53   #6
Matthe
Новичок
Джуниор
 
Регистрация: 11.09.2013
Сообщений: 9
По умолчанию

Цитата:
Сообщение от grominfo Посмотреть сообщение
Макеты можешь взять здесь

http://htmlbook.ru/layout

Там же и подробные справочники.
хорошие варианты есть, но только один резиновый
Matthe вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
картинки с текстом вокруг картинки zloba HTML и CSS 4 30.05.2012 10:12
Обтекание текстом. segail HTML и CSS 6 05.02.2012 00:35
Обтекание картинки текстом Natysya HTML и CSS 1 02.03.2011 09:37
Обтекание в ИЕ: блочный обтекающий элемент не обтекает caprella HTML и CSS 7 27.05.2010 09:47
Позиционирование блоков и обтекание boget HTML и CSS 4 06.05.2010 14:18