Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gabriielrt

Alinhamento do Topo

Por , em Desenvolvimento frontend

Recommended Posts

gabriielrt    0

gabriielrt
Postado

Galera estou tentando alinhar o meu topo de acordo com uma magem que fiz no photoshop, só que não consigo, ainda estou estudando o HTML/CSS aqui vai a imagem e o código que estou usando:

kefV1Hn.png

Eu quero deixar meu topo com essa formatação, o código que estou usando é:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RPG © Título</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!--Header-->
<div id="header">
<div id="top">
<div id="logo"></div>
<h2>Título</h2>
    <ul>
        <li><a href="#">Contato</a></li>
        <li><a href="#">Regras</a></li>
        <li><a href="#">Personagens</a></li>
        <li><a href="#">História</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</div>
</div>
<!--Content-->
<div id="Content"></div>
<!--Footer-->
<div id="footer"></div>
</body>
</html>


@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800italic,800);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* {
margin: 0;
padding: 0;
}

body {
background:#fff;
}

#header {
font-family: 'Open Sans', 'sans-serif';
color: #fff;
}

#logo {
position: center;
background: "\Logo.png";
}

#top {
height: 70px;
background: #2b477b;
}

#top h2 {
margin-left: 30px;
}

#top ul {
list-style: none;
}

#top li a {
font-family: 'Open Sans', 'sans-serif';
font-weight: 700;
float: right;
margin-bottom: 30px;
margin-right: 30px;
color: #fff;
text-decoration: none;
}

#top li a:hover {
color: #c7c7c7;
}

a imagem que está saindo é:

SizrFCy.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

samoelyeshua    15

samoelyeshua
Postado 
#logo{
 position: relative;
 left: 300px // Este valor é apenas um exemplo
}

o RESTO FICA IGUAL*

 

tenta ler um pouco sobre a propriedade position

http://www.w3schools.com/cssref/pr_class_position.asp

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito