Hi i have three h3 (masthead-brand 0-2)
now i saw on the internet that display inline block makes them on the same line, but my idea was having them in the same line AND having spaces between that: masthead is on the left corner of the website, masthead1 is in the center, and masthead2 is in the right corner of the website.
How could i do it?
.masthead-brand {
text-align: left;
font-size: 50px;
margin-right: 30px;
margin-top: 10px;
margin-bottom: 10px;
color: #3434f3;
}
.masthead-brand1 {
text-align: center;
font-size: 50px;
margin-right: 30px;
margin-top: 10px;
margin-bottom: 0px;
}
.masthead-brand2 {
text-align: right;
font-size: 50px;
margin-top: 10px;
margin-bottom: 10px;
color: crimson;
}
h3 {
display: inline-block;
}
<div class="background">
<div>
<h3 class="masthead-brand">Held </h3>
<h3 class="masthead-brand1"> oder</h3>
<h3 class="masthead-brand2"> Schurke?</h3>
</div>
<nav>
<ul class="nav masthead-nav">
<li class="active"><a [routerLink]="['/dashboard']">Dashboard</a></li>
<li><a routerLink="/heroes">Heroes</a></li>
<li><a routerLink="/villains">Schurken</a></li>
</ul>
</nav>
<p class="lead">
Kämpfe jetzt!
</p>
<router-outlet></router-outlet>
</div>
Just add any class to h3' wrapper div:
<div class="wrapper">
<h3 class="masthead-brand">Held</h3>
<h3 class="masthead-brand1">oder</h3>
<h3 class="masthead-brand2">Schurke?</h3>
</div>
and make it flex:
.wrapper {
display: flex;
justify-content: space-between;
}
It's semantically wrong to use 3 seperate headlines.
You should rather use one headline and format its contents.
Here I did it with the help of span elements.
The positioning is done with the help of flex. Flex offers the property to justify its contents just as you need it:
.masthead-brand {
color: #3434f3;
}
.masthead-brand1 {
}
.masthead-brand2 {
color: crimson;
}
h3 {
display: flex;
justify-content: space-between;
}
h3 span {
display: block;
}
<h3>
<span class="masthead-brand">Held</span>
<span class="masthead-brand1">oder</span>
<span class="masthead-brand2">Schurke?</span>
</h3>
Related
I am new to css grid and I just understood how exactly positioning the grid elements works. What I don't understand is how to put an item that's resizing inside this grid element.
I will explain it this way:
This is my site's layout
and this is my code:
<div class="container">
<div class="header">Header</div>
<div class="content1">Content1</div>
<div class="content2">Content2</div>
<div class="footer">footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80px 1fr 1fr 120px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.header {
grid-column: 1 / 5;
}
.content1 {
row-gap: 200px;
grid-column: 1 / 5;
grid-row: 2 / 3;
}
So now what I would love to do is in that header box an actual navigation menu but I want somehow to be only inside this box and resize automatically when I change the size of that box. Right now this is what I have done:
2nd picture
code:
<div class="header">
<nav>
<ul>
<li> <a text-white asp-area="" asp-page="/main">Home</a></li>
<li><a text-white asp-area="" asp-page="/pc">Games</a>
<ul>
<li><a text-white asp-area="" asp-page="/pc">PC</a></li>
<li><a text-white asp-area="" asp-page="/xbox">XBOX</a></li>
<li><a text-white asp-area="" asp-page="/ps">PS</a></li>
</ul>
</li>
<li><a text-white asp-area="" asp-page="/devices">Devices</a></li>
<li><a text-white asp-area="" asp-page="/pcparts">PC Parts</a></li>
</ul>
</nav>
</div>
.header {
grid-column: 1 / 5;
}
nav p {
float: left;
color: white;
font-size: 20px;
line-height: 40px;
}
nav ul {
float: left;
background-color: #222;
z-index: 998;
}
nav ul li {
float: left;
list-style: none;
padding: 0px 15.50px;
}
nav ul li a {
display: block;
font-family: arial;
background-color: #222;
color: #fff;
font-size: 16px;
padding: 26px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #222;
outline-color: #f92525;
padding: 0px 2px;
padding-left: 0vh;
left: 2px;
width: 35px;
border-radius: repeat (5, 4px);
}
and this is so wrong that I don't really have an idea how it should be. I am sorry if this question exists but I tried to find a solution and I could not resolve the problem with anything I got from the Internet, nor understood how it should be.
Some general tips:
Don't define your site layout using both grid template rows and grid template columns.
Instead: If you have Sidebar, use grid-template-columns, if you have stacked content (like you), just use display:grid; This will force the content to stack ontop of each other.
Don't define static heights for your header and footer
Instead: Work with the spacing of the elements inside (margin and padding) to make your container responsive.
Get familiar with Flexbox and Grid a bit more to easily get started modelling your site, for example spacing out your menu items and much more.
Resources:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Here is an example of those tricks:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 1rem;
}
.main {
display: grid;
}
.nav, .content {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.nav {
padding: 2rem;
}
.content {
padding: 5rem;
}
<div id="main">
<header class="nav">Header</header>
<div class="content">Content 1</div>
<div class="content">Content 1</div>
<footer class="nav">Footer</footer>
</div>
I have a sidebar that is set to flex with direction column. I am trying to get my menu ul to be vertically centered, and my .logo-container to be on the top of the page.
Is there any way to get one child to flex-start and another one centered?
Code:
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
CSS:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
Codepen
Many thanks!
What you can do is to create an empty/invisible element as a third flex item inside the flex parent (in my example below it's the divwith class xxx) and apply justify-content: space-between to the flex parent (instead of center).
Depending on your actual code and content you should make sure that that additional element has the same height as the nav element (30px in your and my example). And again, depending on the situation you might want to add visibility: hidden; to the additional element (xxx) to make it invisible but still have its height included in the flex position calculations:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
.xxx {
height: 30px;
visibility: hidden;
}
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
<div class="xxx"></div>
</nav>
</aside>
You can try this approach.
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
* {
color: black;
}
ul {
list-style: none;
}
.logo-container {
display:grid;
justify-content:space-around;
margin:0 auto;
padding-top: 20px;
}
.logo-container img {
text-align:center;
padding:5px;
}
<aside class="side-bar">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<nav class="navigation">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
All you have to do is to have the logo and ul in separate divs within the parent div that has the column direction styling, apply flex-shrink:0 to the div containing the logo and flex-grow: 1 to the other div.
That will allow the logo to be at the top and the other div to take the rest of the space - then you can apply flex styling in the navigation -container to center the ul within that div.
UPDATE - the OP wanted the ul centered into the height of the viewport - as noted in the comments this is as simple as offsetting the position of the ul in the bottom div by half the height of the top div - so in this case - moving it up by 20px) because the top div is 40px in height. This allows centering of the ul into the viewport height without resorting to adding empty divs just to get the alignment.
html {
box-sizing: border-box;
color: white;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
padding: 8px;
}
.navigation {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
}
.logo-container {
flex-shrink:0
}
.logoname {
display: inline-block;
padding : 8px;
color: lime;
}
.navigation-container {
flex-grow:1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
position: relative;
top: -20px
}
li a{ color: white; }
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<div class="navigation-container">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</div>
</nav>
</aside>
I'm working on styling my menu, but I can't get the format I expect, I don't really know what I'm doing wrong, I'm new to this
.customHorizontalList {
list-style: none;
display: flex;
flex-direction: row;
}
.customHorizontalList>li {
margin-right: 1rem;
}
.divmenu{
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
background-color: white;
font:400 20px/20px sans-serif;
}
.ButtonsMenu{
color: white;
background-color: #001e50;
border:none;
font-family: 'VWHead-Bold';
font-size: 13px;
}
.textTitleSubMenu {
padding-left: 12px;
color: #000000;
font-size: 17px;
font-family: "VWText-Regular";
}
.textSubMenu{
padding-left: 12px;
color: #001e50;
font-size: 15px;
font-family: "VWText-Regular";
}
<div class="scroll-wrapper scrollbar-outer" style="position: relative;">
<div id="menu-mobile-cats" class="scrollbar-outer scroll-content scroll-scrolly_visible">
<div class="panel-group" id="accordion-mbl-menu">
<!-- ===Menu Desktop=== -->
<div id="app" class="large">
<b-button v-b-toggle.collapse-1 class="ButtonsMenu">Accesorios</b-button>
<b-collapse id="collapse-1" class="mt-2">
<ul class="customHorizontalList">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</b-collapse>
</div>
Searching the web I tried to fix the problem but so far nothing has worked
I look for this:
I have until now this:
Dropdown menu (white) must be exactly below Div (blue)
The drop-down menu that covers the entire width of the screen
The upper buttons have to be fixed, when I press one the whole main menu moves
the selected menu must be underlined
any help or recommendation?
This can be created using CSS Grid. I will give an example code snippet below.
This styling isn't designed for you to just copy/paste into your project, but rather show you how powerful CSS grid is (It's easy to make completely mobile-responsive as well!)
If you are interested, here is a Youtube video you can watch that I personally found helpful. When getting to learn CSS Grid.
header {
display: grid;
grid-template-columns: repeat(10, 1fr);
background: #001E50;
padding: 20px;
border: 4px solid #C85171;
margin-bottom: 2em;
align-content: center;
}
header > * {
color: white;
}
#b1 {
grid-column: -3/-2;
}
main {
display: grid;
grid-template-columns: repeat(4, 2fr) repeat(2, 1fr);
}
main > * {
width: 100px;
height: 100px;
background: red;
}
<header>
<div id="n1">Lorem Ipsum</div>
<div id="n2">Lorem Ipsum</div>
<div id="n3">Lorem Ipsum</div>
<div id="n4">Lorem Ipsum</div>
<button id="b1"></button>
<button id="b2"></button>
</header>
<main>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="m4"></div>
</main>
I've rows with two flex divs inside each one. In one div i show an image and inside the other there is text. I don't understand why some divs shows correctly but in others the text overflows.
If i reload the page this bug disappears but if i delete cache it comes again.
Any ideas? Thanks in advance.
.box {
position: relative;
}
.image-box-right, .image-box-left {
width: 50%;
}
.image-box-left {
float: left;
}
.image-box-right {
float: right;
}
.title {
font-size: 0.95em;
}
.text-box-right, .text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}
.text-box-left {
left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-right" src="img/image1.jpg">
<div class="text-box-left dark">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html"> MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-left" src="img/image2.jpg">
<div class="text-box-right">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html">MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
I don't think you need inline-block:
.notes-text-box-right, .notes-text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}
You wrote two displaysettings in one CSS rule:
.notes-text-box-right, .notes-text-box-left {
[...]
display: flex;
[...]
display: inline-block;
[...]
}
The second one overwrites the first one, so you better erase that.
I am new to CSS so please excuse if this s basic question ,
I am trying to develop a similar User Interface as show in this picture below
This is my code
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li><span>NASDAQ</span><br>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li><span>DJIA</span><br>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
But could you please tell me why only the first span is visible and others are hidden ??
http://jsfiddle.net/Wf43X/319/
I have tried something like this..
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
.marquee {
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
margin:0px;
padding:0px;
}
.container{
display: flex;
justify-content: center;
list-style-type: none;
}
.ind-cont {
background-color: #000;
width: 200px;
height: 100px;
margin: 0px;
padding:0px;
}
.txtcolor {
color: #fff;
}
.txtcolorb {
color: #aaa;
}
.ind-name {
margin: 20px;
}
.capital {
float: right;
margin: 20px;
}
.floatright {
float: right;
margin: 10px;
margin-right: 20px;
}
.one-share {
margin: 10px;
margin-left: 20px;
}
<div class="container">
<div class="marquee-sibling"> </div>
<div class="marquee">
<span class="ind-cont">
<span class="ind-name txtcolor ">NASDAQ</span>
<span Class="capital txtcolor">4655.92</span>
<span class="one-share txtcolorb">17.93</span>
<span class="per txtcolorb floatright">0.39%</span>
</span>
<span class="ind-cont">
<span class="ind-name txtcolor ">DJIA</span>
<span Class="capital txtcolor">16414.39</span>
<span class="one-share txtcolorb">15.82</span>
<span class="per txtcolorb floatright">0.1%</span>
</span>
</div>
</div>
You can do this with Flexbox
ul {
display: flex;
justify-content: center;
list-style-type: none;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
background: black;
color: white;
border: 1px solid white;
paddgin: 10px;
}
li span {
flex: 50%;
padding: 5px;
box-sizing: border-box;
}
li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
text-align: right;
}
li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
font-size: 16px;
font-weight: bold;
}
li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
font-size: 14px;
color: #aaa;
}
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>
<span>NASDAQ</span>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li>
<span>DJIA</span>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
You are breaking a line after the first span, and this code is hiding whatever is after the first line:
.container {
overflow: hidden;
height: 45px;
}
I also think that the flexbox ideas is the best but if you still want to stay with your code, I think you should try changing the size height of your .container in your css. you will be able to see the rest of your 'li' element. The text is in white color and you can't really see it when you run your code cause the background is white.