I am trying to learn CSS, and find myself stuck. I am hoping you can help.
I have created a section and I want this to be a flex container. I have nested divs in the section for each item I want to display in the container. I have added a class to both the section and the parent div, but I cannot get the display: flex property to apply to the div. When I inspect in Chrome as I have it now it reflects display: block. If I try to select the div.class it will not style. Thanks!
HTML:
<section class="headline">
<div class="Details">
<div>
<h4>headline 1</h4>
<p>some content included.</p>
</div>
<div>
<h4>headline 2</h4>
<p>some more content.</p>
</div>
<div>
<h4>headline 3</h4>
<p>more content</p>
</div>
<div>
<h4>headline 4</h4>
<p>end content</p>
</div>
</div>
</section>
.headline {
color: white;
background-color: black;
display: flex;
}
.details {
display: flex;
}
I figured it out - the class .Details was in the html with a capital d and in the stylesheet with a lower case d. :)
Related
I try to let a menu bar within a header stay sticky. The header is a flexbox with vertical align (flex-direction: column). But as you may guess, it does not work.
simplified arrangement
here
HTML
<header>
<div id="quality-logos">
[some images here]
</div>
<div id="logo_motte_top">
[a big logo here]
</div>
<div id="navigation-wrapper">
<div id="navigation">
[some navigation code here]
</div>
<div id="menu_promo_text">
<div>Mo – Sa: 09 – 18 Uhr, So nach Vereinbarung</div>
</div>
</div>
</header>
CSS (shortened)
header{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
div#navigation-wrapper{
position:sticky;
top:0;
}
You can see it live at motteduesseldorf.de
For your website's link, your <header> is a child of another div called #wrapper. position: sticky is probably being applied but it is not visible because the entire <header> div is not in view. Put another way, position: sticky works only "until" its immediate parent.
One way to fix your issue would be to move <div id="navigation-wrapper"> outside of <header> and make it an immediate child of the <div id="wrapper">.
I am hoping to have a navigation bar run across the entire screen, with a purple background and a to have a the menu sit in the middle of the bar. Right now I cant get the background color to work.
My Css:
div#main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
My Html:
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
You are using wrong css selector # is for ids, to select element by class you have to use ., so the first line of your CSS must be: div.main-navigation {
Look for this:
Replace div#main-navigation for div.main-navigation
div.main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
Write . instead of #
# is for id, . is for class.
The following is the structure of my layout in Bootstrap 3.2:
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
<div class="col-xs-6">
<!-- I want only this column to be fluid. -->
</div>
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
As you can see in psuedo-code comments, I want only the middle column to be fluid according to the screen size.
Is it possible in container-fluid fashion of Bootstrap? Or I should go through other ways?
There is no "Bootstrap way" to have columns a fixed width. So, we can use CSS to do what you want in a few ways
Use flexbox (the best way) - Demo.
.row {
display: flex;
}
.fixed-side-column {
width: 250px;
}
.fluid-middle-column {
flex-grow: 1;
}
Use calc() (or the JavaScript equivalent) keeping in mind browser support - Demo
.row > div {
float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
width:250px;
}
.fluid-middle-column {
width:calc(100% - 500px);
}
Use absolute positioning and padding on the middle element to remove the need for any calculations - Demo
You'd have to change the markup some
<div class="container-fluid">
<div class="row">
<div class="fluid-middle-column">
<!-- I want only this column to be fluid. -->
</div>
<div class="fixed-side-column">
<!-- I want this column to be fixed. -->
</div>
<div class="fixed-side-column right">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
/* CSS */
.fixed-side-column {
width:250px;
float:left;
}
.right {
float:right;
}
.fluid-middle-column {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
padding: 0 250px 0 250px;
}
You'll need to add custom media queries to handle what happens when the screen is getting small.
i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.
if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.