Aside идет после logo, хотя он должен идти под ним

@DatIK · Регистрация: 19.11.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте, нарисовал себе макет

пытался сверстать, вроде бы простой, а сварил кашу =(

1: почему у меня aside идет после logo, если он должен был под ним идти?
2: как увеличить пробел между Home About?
3: .navbar li a:hover не получается

Спасибо!

@Fedor92 · 17.05.2015, 23:53

Сообщение от DatIK

почему у меня aside идет после logo, если он должен был под ним идти?

с чего бы?

Сообщение от DatIK

как увеличить пробел между Home About?

padding/margin в помощь...

Сообщение от DatIK

.navbar li a:hover не получается

CSS

.nav a:hover {
  text-decoration: underline;
  color: red;
}

@DatIK · 18.05.2015, 00:43 **[ТС]**

Сообщение от Fedor92

с чего бы?

ну я выделил div.wrapper, в нем .logo и .nav
закрыл

только после всех div'ов начал aside, а он посередине wrapper появляется =С

со 2ым пунктом разобрался

в 3ем пункте проблема оказалось в text-decoration-color, которого браузеры не воспринимают

@kisk · 18.05.2015, 07:44

1. Потому что aside у тебя обтекает logo с помощью стиля float
2. Свойством margin-left, а потом избавляешь от первого отступа селектором :first-child
3. Не вижу класса .navbar

@Fedor92 · 18.05.2015, 11:18

Сообщение от DatIK

в 3ем пункте проблема оказалось в text-decoration-color, которого браузеры не воспринимают

Как бы такого правила нет - вот и не воспринимают...

Сообщение от kisk

Потому что aside у тебя обтекает logo с помощью стиля float

Вы не правы выделите границы у блоков с помощью свойства border и посмотрите на вложенность блоков, думаю Вас это немного удивит...

Вам как минимум нужен див обёртка, для того чтобы разметить в ней и logo и aside...

Да и для .main Вы неправильно указали ширину...

@DatIK · 18.05.2015, 11:46 **[ТС]**

Сообщение от Fedor92

Вам как минимум нужен див обёртка, для того чтобы разметить в ней и logo и aside...

да я вот как хотел

засунуть logo и nav в хедер(logo float left, nav float right) и это все 1 блок
потом aside и main снизу (тоже aside left, main right)
и в конце концов футер снизу

сейчас ломаю голову, чего logo и nav вне хедера сейчас находятся

@Fedor92 · 18.05.2015, 12:09

DatIK, если так?

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<style>
html,body{width:100%; height:100%; margin:0}
.wrapper {
  width: 100%;
  height:100%;
  border:2px solid green
}
header{
  border: 4px solid red;
  display:block;
  height:95px
  
}
.logo {
  width: 40%;
  height: 90px;
  float: left;
  border: 4px solid blue;
}
 
.nav {
  width: 50%;
  float: right;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px;
  border: 4px solid blue;
}
 
.nav li {
  display: inline;
  margin-right: 40px; 
  font-size: 32px;
  border: 4px solid blue;
}
.nav li a{
  text-decoration: none;
  border-bottom: 1px solid white;
  
}
.nav li a:hover {
  border-bottom-color:red;
}
 
.main {
  border: 4px solid blue;
  float: right;
  width: 60%;
  margin: 10px;
  background-color: #665544;
}
 
.main h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: 'Fredericka the Great', cursive;
}
 
.portrait {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 300px;
  height: 300px;
}
 
.text {
  float: inherit;
  background-color: grey;
  position: relative;
}
aside{border: 2px solid violet}
</style>
<body>
    <div class="wrapper">
        <header>
            <img src="http://www.janinetissot.fdaf.org/images/DIESEL%20Rudolf5.jpg" alt="logo" class="logo">
            <div class="nav">
                <div class="cont">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <aside>sdf</aside>
        <div class="main">
          <h1>Rudolf Diesel</h1>
          <div class="text">
            <p><img src="http://upload.wikimedia.org/wikipedia/commons/9/90/Diesel_1883.jpg" alt="Rudolf Diesel, inventor of the diesel engine" class="portrait"><b>Rudolf Christian Karl Diesel</b> (German: [ˈʁuːdɔlf ˈkʁɪstjan ˈkaʁl ˈdiːzəl]; March 18, 1858
              – September 29, 1913) was a German inventor and mechanical engineer, famous for the invention of the diesel engine. Diesel was the subject of the 1942 film Diesel.
            </p>
            <p>
              Rudolf Diesel was born in Paris in 1858. His parents were Bavarian immigrants. Rudolf Diesel was educated at Munich Polytechnic. After graduation he was employed as a refrigerator engineer. However, he true love lay in engine design. Rudolf Diesel designed
              many heat engines, including a solar-powered air engine. In 1893, he published a paper describing an engine with combustion within a cylinder, the internal combustion engine. In 1894, he filed for a patent for his new invention, dubbed the
              diesel engine. Rudolf Diesel was almost killed by his engine when it exploded. However, his engine was the first that proved that fuel could be ignited without a spark. He operated his first successful engine in 1897.
            </p>
            <p>
              In 1898, Rudolf Diesel was granted patent #608,845 for an "internal combustion engine" the Diesel engine.
            </p>
            <p>
              The diesel engines of today are refined and improved versions of Rudolf Diesel's original concept. They are often used in submarines, ships, locomotives, and large trucks and in electric generating plants.
            </p>
            <p>
              Though best known for his invention of the pressure-ignited heat engine that bears his name, Rudolf Diesel was also a well-respected thermal engineer and a social theorist. Rudolf Diesel's inventions have three points in common: They relate to heat transference
              by natural physical processes or laws; they involve markedly creative mechanical design; and they were initially motivated by the inventor's concept of sociological needs. Rudolf Diesel originally conceived the diesel engine to enable independent
              craftsmen and artisans to compete with large industry.</p>
            <p>
              At Augsburg, on August 10, 1893, Rudolf Diesel's prime model, a single 10-foot iron cylinder with a flywheel at its base, ran on its own power for the first time. Rudolf Diesel spent two more years making improvements and in 1896 demonstrated another
              model with the theoretical efficiency of 75 percent, in contrast to the ten percent efficiency of the steam engine. By 1898, Rudolf Diesel was a millionaire. His engines were used to power pipelines, electric and water plants, automobiles
              and trucks, and marine craft, and soon after were used in mines, oil fields, factories, and transoceanic shipping.</p>
          </div>
        </div>
    </div>
</body>
</html>

@DatIK · 18.05.2015, 12:46 **[ТС]**

вся суть проблемы было в том, что я не задал высоту?

@Fedor92 · 18.05.2015, 12:54

DatIK, вроде того...

Вы её можете задать и резиновую, если что пример теперь перед глазами...

@DatIK 3 / 3 / 0 Регистрация: 19.11.2011 Сообщений: 128
		1
	Aside идет после logo, хотя он должен идти под ним 17.05.2015, 23:32. Показов 660. Ответов 8 Метки нет (Все метки) Здравствуйте, нарисовал себе макет пытался сверстать, вроде бы простой, а сварил кашу =( 1: почему у меня aside идет после logo, если он должен был под ним идти? 2: как увеличить пробел между Home About? 3: .navbar li a:hover не получается Спасибо! 0

@DatIK 3 / 3 / 0 Регистрация: 19.11.2011 Сообщений: 128
	18.05.2015, 00:43 [ТС]	3
	Сообщение от Fedor92 с чего бы? ну я выделил div.wrapper, в нем .logo и .nav закрыл только после всех div'ов начал aside, а он посередине wrapper появляется =С со 2ым пунктом разобрался в 3ем пункте проблема оказалось в text-decoration-color, которого браузеры не воспринимают 0

@kisk 6 / 6 / 4 Регистрация: 15.05.2015 Сообщений: 75 Записей в блоге: 3
	18.05.2015, 07:44	4
	1. Потому что aside у тебя обтекает logo с помощью стиля float 2. Свойством margin-left, а потом избавляешь от первого отступа селектором :first-child 3. Не вижу класса .navbar 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	18.05.2015, 11:18	5
	Сообщение от DatIK в 3ем пункте проблема оказалось в text-decoration-color, которого браузеры не воспринимают Как бы такого правила нет - вот и не воспринимают... Сообщение от kisk Потому что aside у тебя обтекает logo с помощью стиля float Вы не правы выделите границы у блоков с помощью свойства border и посмотрите на вложенность блоков, думаю Вас это немного удивит... Вам как минимум нужен див обёртка, для того чтобы разметить в ней и logo и aside... Да и для .main Вы неправильно указали ширину... 0

@DatIK 3 / 3 / 0 Регистрация: 19.11.2011 Сообщений: 128
	18.05.2015, 11:46 [ТС]	6
	Сообщение от Fedor92 Вам как минимум нужен див обёртка, для того чтобы разметить в ней и logo и aside... да я вот как хотел засунуть logo и nav в хедер(logo float left, nav float right) и это все 1 блок потом aside и main снизу (тоже aside left, main right) и в конце концов футер снизу сейчас ломаю голову, чего logo и nav вне хедера сейчас находятся 0

@DatIK 3 / 3 / 0 Регистрация: 19.11.2011 Сообщений: 128
	18.05.2015, 12:46 [ТС]	8
	вся суть проблемы было в том, что я не задал высоту? 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	18.05.2015, 12:54	9
	DatIK, вроде того... Вы её можете задать и резиновую, если что пример теперь перед глазами... 0