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.
Related
I am trying to have the text overlap the triangle on my code. Tried z-index but I still can't figure out what the error is.
Ten principles of rapid skill acquisition
by Josh Kaufman
<div class="table_theme_dark">
<div class="table__cell_theme_dark">
<ul>
<li class="table__heading_theme_dark">1</li>
<li class="table__text_theme_dark">Choose a lovable project</li>
</ul>
</div>
.kaufman-triangle {
position: absolute;
overflow: hidden;
width: 660px;
height: 636px;
top: 250px;
right: 0;}
While I am open to any solution, counting tables, Bootstrap and Flexbox, a purely CSS solution using just div elements is greatly appreciated.
HTML
<div class="sentence-summary">
<div class="stat bookmarked">
<i class="fas fa-bookmark"></i>
<span class="count">999</span>
</div>
<div class="stat upvotes">
<i class="fas fa-thumbs-up"></i>
<span class="count">999</span>
</div>
<div class="stat downvotes">
<i class="fas fa-thumbs-down"></i>
<span class="count">999</span>
</div>
<div class="main">
<p>{{ $sentence->body }}</p>
</div>
</div>
SCSS
.sentence-summary {
div {
display: inline-block;
}
.stat {
width: 40px;
text-align: center;
span {
display: block;
font-size: 10px;
}
&.bookmarked {
background-color: red;
}
&.upvotes {
background-color: blue;
}
&.stat.downvotes {
background-color: pink;
}
}
.main {
background-color: green;
}
}
Current Result
Desired Result
I would recommend using a grid layout for this. You can specify that the first three columns (stats) should be 40px wide. And then use '1fr' to say that the 'main' sections should take up the remaining space. Using a grid means that the heights will stay the same.
You can use 'grid-column-gap' to specify the amount of space you would like between each column. Something like this:
.sentence-summary {
display: grid;
grid-template-columns: 40px 40px 40px 1fr;
column-gap: 5px;
grid-auto-rows: 40px;
}
Make sure you use the appropriate browser prefixes as this syntax isn't supported by all browsers. I usually use this auto-prefixer.
Update: Adding grid-auto-rows: 40px; makes sure your 'stats' stay square!
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. :)
I have some problems to customize the icon of menuitem component.
I tried this form but i don't have success:
<p:menuitem value="Clientes" outcome="/clientes/CadastroCliente" icon="resources/images/person.png"/>
I too try use css
<p:menuitem value="Clientes" outcome="/clientes/CadastroCliente" icon="user"/>
.user{
background: url('resources/images/menu/users.png') no-repeat;
height:16px;
width:16px;
}
I use PrimeFaces 5.
Try this
<p:menuitem value="Clientes" outcome="/clientes/CadastroCliente" icon="user"/>
.user {
background: url(../images/menu/users.png) !important;
height:16px;
width:16px;
}
You need !important to overwrite the default image of Primefaces and create the folder images directly under src directory
primeFaces 6
If you don’t want to create your own skin and setup the style directly and show a icon/image only,
You can do this:
Note, there is no value=”avoid” attribute inside the tag.
<p:menuitem url="./config.xhtml" styleClass="myStyleName"/>
The result is:
<li role="menuitem">
<a tabindex="-1"
class="ui-menuitem-link ui-corner-all myStyleName"
href="./Konfiguration.xhtml">
<span class="ui-menuitem-text"></span>
</a>
</li>
Note there will be a empty traffic blow up span tag.
used style:
a.ui-menuitem-link.ui-corner-all.myStyleName{
background: url("img/zahnrad.png") no-repeat;
background-size: 1em;
width: 1em;
height: 1em;
}
Important is the background-size in my case 1em
If you would like to add a icon with text so do this:
<p:menuitem url="./Konfiguration.xhtml"
styleClass="myStyleName" value="navigation" />
The result is:
<li role="menuitem">
<a tabindex="-1" class="ui-menuitem-link ui-corner-all myStyleName" href="./config.xhtml">
<span class="ui-menuitem-text">navigation</span>
</a>
</li>
used style:
a.ui-menuitem-link.ui-corner-all.myStyleName{
background: url("img/zahnrad.png") no-repeat;
background-size: 1em;
padding-left: 1.2em; /* reserved text space */
/*
right to left
background-position: right;
padding-right: 1.2em;
*/
}
I have a problem with div positioning in my form. My page contains a sheet. With div layout as below.
In divs on the left side, there are description of the fields. (they share the same style class)
In divs on the right side, there are the fields. (they share the same style class)
After validation my page look like this:
But I want it to look like this:
Honestly, I thought how do deal with it, for quite a white, and I simlpy have no idea what to do it. My page is almost ready so I'd like to fix that with possible at low cost.
[edit1]:
My current css look simple, something like this:
div_on_left{
clear: both;
float: left;
width: 440px;
padding-top: 5px;
padding-bottom: 8px;
}
div_on_right{
float: left;
width: 500px;
padding-top: 3px;
padding-bottom: 6px;
}
[edit2]:
I have just found one solution (posted below), but I don't like it. It will crash if context of divs on the left is too big. That's due to
position:absolute;
So I'd like to avoid this property.
<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>
<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>
<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>
It have to be a common problem. How do you deal width forms with validation that apear over the field boxes?
There's a solution for your problem but it involves a table-cell layout. The layout must have a row and two inner cells aligned to the bottom.
Here is a JSFiddle Example: http://jsfiddle.net/cvbLC/
I'm not aware of which browser support you are needing, but here is more information about this matter: http://www.quirksmode.org/css/display.html