On For All
-
Posts
3 -
Cadastrado em
-
Última visita
Tipo de conteúdo
Artigos
Selos
Livros
Cursos
Análises
Fórum
Tudo que On For All postou
-
CSS Margem não funciona quando utilizado o writing-mode
On For All respondeu ao tópico de On For All em Web e banco de dados
Olá amigo eu pesquisei um pouco mais afundo e comparando os códigos de outras pessoas, descobri o problema meu, o meu diretório estava errado então a propriedade não estava sendo aplicada. Agradeço a sua ajuda. -
CSS Margem não funciona quando utilizado o writing-mode
On For All respondeu ao tópico de On For All em Web e banco de dados
Olá amigo, eu tinha em mente que o writing-mode era o responsável pois quando o retiro eu consigo utilizar o margin-left normalmente. Codigo CSS :root{ --font-color: #b4b4b4; } a { text-decoration: none; } #page-index { background-image: radial-gradient( circle, #ffffff 38%, #eefafb); background-size: 100% 100%; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; } #page-index header .logo span{ background-image: url(/public/img/logomarca.png); background-size: 100% 100%; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 60px; height: 60px; } #page-index header .links { font-family: 'Roboto', sans-serif; font-size: 18px; margin-left: 100px; margin-top: 20px; } #page-index header .links a{ color: var(--font-color); margin-left: 16px; transition: 200ms; } #page-index header .links a:hover{ color: #ffa561; } #page-index header .linksdois{ font-family: 'Roboto', sans-serif; writing-mode: vertical-lr; margin-top: 170px; margin-left: 1280px; margin-bottom: 0px; margin-right: 5px; font-size: 16px; transform: rotateZ(180deg); } #page-index header .linksdois a{ color: var(--font-color); transition: 400ms; margin-left: 18px; } #page-index header .linksdois a:hover{ color: rgb(26, 26, 26); } Código HTML <!DOCTYPE html> <html lang="pt_br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index</title> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/public/css/page-index.css"> </head> <body> <div id="page-index"> <header> <div class="logo"> <span></span> </div> <div class="links"> <a href="#">About</a> <a href="#">Portifolio</a> <a href="#">Blog</a> <a href="#">Contact</a> </div> <div class="linksdois"> <a class="twiter" href="#">twiter</a> <a class="beahance" href="#">beahance </a> <a class="dribbble" href="#">dribbble </a> <a class="linkedin" href="#">linkedin</a> </div> </header> <main> <div class=title> <p> About <p> </div> </main> </div> </body> </html> Desde já agradeço a ajuda -
CSS Margem não funciona quando utilizado o writing-mode
On For All postou um tópico em Web e banco de dados
Olá, não estou conseguindo achar o problema ou erro, porque quando utilizo o 'writing-mode' no meu código o 'margin' não funciona. O meu projeto necessita de que eu utilize o meu texto na vertical, mas não consigo encontrar outra forma de deixar o texto verticalizado sem o 'writing-mode'. #page-index header .linksdois{ font-family: 'Roboto', sans-serif; /* o que está causando o problema */ writing-mode: vertical-lr; /*----------*/ margin-top: 170px; margin-left: 1280px; margin-bottom: 0px; margin-right: 5px; font-size: 16px; transform: rotateZ(180deg); } #page-index header .linksdois a{ color: var(--font-color); transition: 400ms; /* parte que não funciona */ margin-left: 18px; } Resumindo eu necessito deixar meu texto verticalizado, porém quando uso o 'writhing-mode' no consigo aplicar a margem ao texto. Desde já agradeço.
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
