I was wondering if is it possible to create a submenu using divs? All online tutorials use this ul li thing. I don't know how to activate my submenu by hovering over an option. Should I add new class to "director" div? Incuding photos and code pieces.
HTML:
.menu_opcje {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
}
.menu_wysuwane {
min-width: 100px;
text-align: center;
border-bottom: dotted 2px black;
padding: 10px;
display: none;
}
.menu_wysuwane:hover {
background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
background-color: lightgray;
cursor: pointer;
}
<div id="menu">
<div class="menu_opcje">Strona główna</div>
<div class="menu_opcje">Galeria</div>
<div class="menu_opcje">Reżyserzy
<div>
<div class="menu_wysuwane">Quentin Tarantino</div>
<div class="menu_wysuwane">Bracia Coen</div>
<div class="menu_wysuwane">Wes Anderson</div>
</div>
</div>
</div>
https://i.stack.imgur.com/cldDy.png
https://i.stack.imgur.com/TrvsC.png
It is semantically incorrect, though making it appear on hover, do like this
.menu_opcje:hover div {
display: block;
}
Sample snippet
.menu_opcje {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
}
.menu_wysuwane {
min-width: 100px;
text-align: center;
border-bottom: dotted 2px black;
padding: 10px;
display: none;
}
.menu_wysuwane:hover {
background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
background-color: lightgray;
cursor: pointer;
}
.menu_opcje:hover div {
display: block;
}
<div id="menu">
<div class="menu_opcje">Strona główna</div>
<div class="menu_opcje">Galeria</div>
<div class="menu_opcje">Reżyserzy
<div>
<div class="menu_wysuwane">Quentin Tarantino</div>
<div class="menu_wysuwane">Bracia Coen</div>
<div class="menu_wysuwane">Wes Anderson</div>
</div>
</div>
</div>
Related
I am trying to create a very simple webpage to learn a bit about CSS as I am awful with it.
I am trying to add a navigation bar to my page. The two elements that are not working as expected are the text-align: center (in .Item) and vertical-align: bottom. If I add or remove these lines nothing happens.
Could anyone tell me why these two parts don't seem to be working as expected? Thanks in advance.
My JSX is as follows:
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
About
</ul>
<ul className={classes.Item}>
Shop
</ul>
</div>
</div>
</React.Fragment>
My CSS is as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
}
.Item {
text-align:center;
margin:10px;
display: inline;
border: 2px solid black;
}
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
display: flex;
align-items: center;
justify-content: center;
}
.Nav ul{
margin: 0px;
padding: 0px;
}
.Nav li{
display: inline-block;
margin: 0 10px;
padding: 0px;
border: 1px solid red;
text-align: center;
}
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
<li> About</li>
</ul>
<ul className={classes.Item}>
<li> Shop</li>
</ul>
</div>
</div>
</React.Fragment>
After reading all of your suggestions I was able to do it as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
}
.Item {
position: relative;
text-align: center;
margin: 0px 50px;
display: inline;
border: 2px solid black;
top: calc(100% - 30px);
}
And
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<div className={classes.Item}>About</div>
<div className={classes.Item}>Shop</div>
</div>
</div>
</React.Fragment>
I'm trying to draw the black border around Test1 - Test4 to also span around Test5. At the moment, Test5 falls outside. Does anyone know how to draw it to include Test5?
.description {
border: 1px solid;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
Add overflow: auto; to the container to include floated elements:
.description {
border: 1px solid;
overflow: auto;
}
.descriptionTop {
display: inline-block;
}
.altOffer {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.prices {
text-align: right;
float: right;
}
.promotion {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="altOffer">Test2</span>
</div>
<div class="prices">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="promotion">Test5</div>
</div>
</div>
This is because .prices has float. Explanation of the problem
add the following to your css (the css of famous clearfix class) -
.description:after {
content: "";
display: table;
clear: both;
}
.description {
border: 1px solid;
}
.description:after {
content: "";
display: table;
clear: both;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
I have two buttons in my template like so:
I'm trying to ensure they remain symmetrical in size (height and width) over smaller screens. Yet, as screen width decreases, this happens:
How do ensure the Foo button is the same height as the Bar Foo Bar button even over smaller screen sizes? Looking for the simplest, purely CSS-based solution.
My current CSS looks like this:
<style>
div.tab {
overflow: hidden;
background-color: white;
text-align:center;
display:inline-block;
width:95%;
max-width:400px;
padding:5px;
}
div.tab button {
background-color: #eeeeee;
float: left;
padding: 0.5em;
border: none;
width:49.5%;
}
div.tab button:hover{
border-bottom: 2px solid #ffa726;
color:#fb8c00;
}
</style>
<div class="tab">
<button>Foo</button>
<button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</div>
Using display:flex in div.tab results in this:
You can achieve that by using display: flex:
div.tab {
overflow: hidden;
background-color: white;
text-align: center;
display: inline-block;
width: 95%;
max-width: 400px;
padding: 5px;
display: flex; /*here*/
}
div.tab button {
background-color: #eeeeee;
float: left;
padding: 0.5em;
border: none;
width: 49.5%;
}
div.tab button:hover {
border-bottom: 2px solid #ffa726;
color: #fb8c00;
}
<div class="tab">
<button>Foo</button>
<button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</div>
Giving that you are using links as child elements, the solution is display-table:
div.tab {
overflow: hidden;
background-color: white;
text-align: center;
width: 95%;
max-width: 400px;
padding: 5px;
display: table;
}
div.tab a {
display: table-cell;
width: 1%;
height: 100%;
}
div.tab a button {
padding: 0.5em;
border: none;
vertical-align: middle;
width: 98%;
background-color: #eeeeee;
display: inline-block;
height: 100%;
}
div.tab button:hover {
border-bottom: 2px solid #ffa726;
color: #fb8c00;
}
<div class="tab">
<a href="#/">
<button>Foo</button>
</a>
<a href="#/">
<button style="border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</a>
</div>
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>