Splitting text into 2 parts?

A

Andr2015-10-21 20:47:17

css

Andr, 2015-10-21 20:47:17

How to split text into 2 parts using a class?

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  background: url(../img/main_bg.png) #fefefe;
}

a {
  text-decoration: none;
}

@font-face {
  font-family: "Hortensia";
  src: url(../fonts/hortensia.ttf);
  font-size: 100px;
}
.b3radius {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;

}
#page_align {
  width: 960px;
  margin:29px auto;
  background: #fefefe;
  box-shadow: 0px 2px 1px #DDDDDD;
  -webkit-box-shadow: 0px 2px 1px #DDDDDD;
  -o-box-shadow: 0px 2px 1px #DDDDDD;
  -moz-box-shadow: 0px 2px 1px #DDDDDD;

}

#header {
  height: 90px;
  background: url(../img/menu.png);


}


#header ul {
    list-style: none;
    float: left;
    margin-left: 3%;
  margin-right: 1%;
  margin: center;

}
#header ul li {
  float: left; 
  padding: 0px 78px 0px 0px;
}
#header ul li a {
  font-family: "Hortensia";
  font-size: 18px;
  height: 34px; 
  display: inline;
  line-height: 85px;
   padding-top: 30px;
   padding: 9px 2px;
   text-shadow:  0px 1px 2px black;
}


#header ul li a:hover {
  color: #e7e143;
}
.pook {
  float: right;

}

<!DOCTYPE HTML>
<html>
<head>
  	<title>Массаж</title>
  	<meta charset="utf-8">
    <link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
 <div id="page_align" class="b3radius">
 	<div id="header">
 		 <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Сервис</a></li>
            </ul>
            <ul class="pook">
                <li><a href="#">Фотогалерея</a></li>
                <li><a href="#">Видео</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>

 	</div>
 </div>

</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ivan Drozhzhin, 2015-10-21
@dashademkova

You have a problem here:

#header ul {
    list-style: none;
    float: left;
    margin-left: 3%;
  margin-right: 1%;
  margin: center;
}

This rule has a higher priority than:

.pook {
  float: right;
}

Therefore, the float: right rule does not apply;
Try to give the first ul a class and style it through it instead of using the #header ul construct. It's
generally a bad habit to style through the id, you need to use classes for that. It is better to assign a class to each tag than to mention the #header ul construction once.
Don't do it)