cssbr | Unsorted

Telegram-канал cssbr - CSS Brasil

2419

Grupo técnico sobre CSS. ⚠️ ATENÇÃO: - Para evitar advertências não esqueça de ler as regras com o comando /rules. - Para reportar alguma mensagem utilize o comando /report.

Subscribe to a channel

CSS Brasil

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mega Menu</title>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

body {
align-items: center;
display: flex;
justify-content: center;
min-height: 100vh;
}

.mega-menu {
background-color: white;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 800px;
}

.menu-container {
display: flex;
justify-content: space-between;
}

.menu-section {
flex: 1;
padding: 0 16px;
}

.menu-header {
color: #222;
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
}

.menu-list {
list-style-type: none;
margin-bottom: 16px;
}

.menu-item {
padding: 8px 0;
}

.menu-link {
color: #555;
font-size: 16px;
text-decoration: none;
}

.menu-link:hover {
color: #000;
}
</style>
</head>
<body>
<div class="mega-menu">
<div class="menu-container">
<div class="menu-section">
<p class="menu-header">Nobreaks</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Linha Double Way</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Linha Compacta</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
>Nobreaks com Grau de Proteção Especial</a
>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Safeserver Power (SPW)</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Volt</a>
</li>
</ul>

<p class="menu-header">Soluções</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Rack DWTT-A5 Modular Plugin</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Rack TI & Energia</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Grau de Proteção Especial</a>
</li>
</ul>
</div>

<div class="menu-section">
<p class="menu-header">Baterias</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Baterias de Lítio</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Baterias VRLA - AGM</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Baterias Alcalinas</a>
</li>
</ul>

<p class="menu-header">Acessórios</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">MSB Slim IoT</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">WBRC IoT Engetron</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Читать полностью…

CSS Brasil

subgrids? acho que não conheço

Читать полностью…

CSS Brasil

só não sei se acaba caindo no mesmo ponto

Читать полностью…

CSS Brasil

não, só tava tentando com grid mesmo

Читать полностью…

CSS Brasil

se vc reparar o grid deixa tudo com mesma altura, aí nao sei se existe alguma propriedade pra lidar com esse caso especifico

Читать полностью…

CSS Brasil

mas usei um margin top negativo no container dos acessorios

Читать полностью…

CSS Brasil

Acho que entendi. Talvez dê usando grid-auto-flow com algum valor dense.

Читать полностью…

CSS Brasil

Com fr na altura/rows

Читать полностью…

CSS Brasil

Mas acho que grid não vai resolver teu caso, talvez usando alguma mágica

Читать полностью…

CSS Brasil

to usando assim no sass
&.show {
display: grid;
grid-template-columns: 320px 320px;
gap: 24px;
padding: 24px;
}

Читать полностью…

CSS Brasil

Não entendi o problema.

Читать полностью…

CSS Brasil

Se eu tenho uma letra "B" maiúscula e quero preencher todo o espaço dentro da letra, tampando todos os buracos dentro dela. Como posso fazer isso usando CSS?

Читать полностью…

CSS Brasil

so era meter um list none

Читать полностью…

CSS Brasil

Não consegui ver a qtt

Читать полностью…

CSS Brasil

alguém já teve um workaround pra isso ?

Читать полностью…

CSS Brasil

isso aqui? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid

Читать полностью…

CSS Brasil

Faça com subgrids ou dois grids diferentes

Читать полностью…

CSS Brasil

mas posso fazer com flexbox

Читать полностью…

CSS Brasil

Mas é requisito que seja feito com Grid, mesmo?

Se fizer com Flexbox (ou mesmo columns) talvez chegue nesse mesmo resultado que você tá querendo de maneira mais simples.

Читать полностью…

CSS Brasil

não achei uma boa pratica rs

Читать полностью…

CSS Brasil

Tem o masonry layout mas não sei como tá o suporte

Читать полностью…

CSS Brasil

acho que não vai dar pra separar porque o conteudo vem dinamico do cms

Читать полностью…

CSS Brasil

Ou separa em dois grid diferentes

Читать полностью…

CSS Brasil

Manda como tá agora que talvez fique mais fácil visualizar, tu mandou o design do Figma na foto, certo ?

Читать полностью…

CSS Brasil

acessórios e soluções estão na mesma linha, mesma altura. mas gostaria que acessóros ficasse mais acima, como no exemplo

Читать полностью…

CSS Brasil

pessoal, bom dia.

como vocês fariam para posicionar essas categorias de produto nesse submenu?

estou usando css grid mas nobreaks e baterias ficam na mesma linha com a mesma altura. gostaria que a altura dos containers de categorias calculasse apenas a altura do conteúdo desse container. alguem poderia ajudar, por gentileza?

Читать полностью…

CSS Brasil

esqueci ate de agradece

Читать полностью…

CSS Brasil

Ah, tá falando da quantidade de inscritos? Não exibo mesmo.

Читать полностью…

CSS Brasil

SEU JOB TECH

- Muitas oportunidades de emprego ( CLT ou PJ),
- para varias regiões e empresas, vagas com perfil de Jr a Sr
- Principais Stacks: Angular, Vue, React, php, Node

Áreas: Front end, Back end, FullStack, DevOps, UX/UI, Mobo, QA

https://seujob.tech/?remote=false&amp;level=j%C3%BAnior

Читать полностью…

CSS Brasil

acho que é pq tô usando medidas de viewport

Читать полностью…
Subscribe to a channel