I'm working on building mega menu. I have trouble when arrange div.
Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout Test</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:180px;
}
.subcategory
{
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="category">
<h1>Lorem Ipsum 1</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 2</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 3</h1>
<div>
Dolor Sit Amet
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 4</h1>
<div>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 5</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 6</h1>
<div>
Dolor Sit Amet
Phasellus Congue
Fringilla Accumsan
Praesent aliquam
Suspendisse non purus
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 7</h1>
<div>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 8</h1>
<div>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
</div>
</body>
</html>
Produces output like this:
This menu create dynamically so im difficult to set fixed height each div
Is better way How to remove empty space between Lorem Ipsum 3 and Lorem Ipsum 5; Lorem Ipsum 5 and Lorem Ipsum 7 ?
I answer my own question:
(1) Hard way: use a jQuery Masonry
(2) Simple way: Add new div for each colum, here the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:90%;
}
.col
{
float:left;
width:45%
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 1</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 2</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 3</h1>
Dolor Sit Amet
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 4</h1>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
</div>
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 5</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 6</h1>
Dolor Sit Amet
Phasellus Congue
Fringilla Accumsan
Praesent aliquam
Suspendisse non purus
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 7</h1>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 8</h1>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
</div>
</div>
</body>
</html>
and here the output:
I would remove the spaces, yes. The other way, you'll need some wrapping div's for each 'row' you have.
Related
I need your help.
I have a column where there is some text. This must be in the center but aligned as shown below.
I tried adding a
display: inline-block; text-align: left
but it does not work.
I should have as shown below:
Other Lorem Stuff
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
> Aenean laoreet lectus nec risus
malesuada auctor.
> Vestibulum pellentesque, ante sit
amet congue tempus
note that when the writings go back, they go under the writing and not under the > symbol
This is code:
.footsmall{
background-color: #FFF8DC;
top:-50px;
right: 100px;
height: 300px;
display: inline-block;
text-align: left
}
<div class="col-3 position-absolute footsmall text-center p-3">
<p class="fs-4">Other Lorem Stuff</p>
<p> > <u>Lorem ipsum dolor sit amet</u></p>
<p> > <u>Consectetur adipiscing elit</u></p>
<p> > <u>Aenean laoreet lectus nec risus malesuada auctor.</u></p>
<p> > <u>Vestibulum pellentesque, ante sit amet congue tempus</u></p>
</div>
Can anyone help me please?
You could use a flexbox container for each item.
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
</div>
See the working snippet below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-3 p-3 text-center">
<p class="fs-4">Other Lorem Stuff</p>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
</div>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Consectetur adipiscing elit</p>
</div>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Aenean laoreet lectus nec risus malesuada auctor.</p>
</div>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Vestibulum pellentesque, ante sit amet congue tempus.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
A few things to note, rather than using display and text-align in your CSS you can just add the classes directly to your elements:
<div class="d-inline-block text-start"> </div>
Instead of paragraphs, you could use an unordered list and change the marker style to the chevron you want.
.custom-li {
list-style-type: '> ';
}
<div class="col-3 footsmall text-center">
<p class="fs-4 p-3">Other Lorem Stuff</p>
<ul class="text-start custom-li">
<li>
<u>Lorem ipsum dolor sit amet</u>
</li>
<li>
<u>Consectetur adipiscing elit</u>
</li>
<li>
<u>Aenean laoreet lectus nec risus malesuada auctor.
</li>
<li>
<u>Vestibulum pellentesque, ante sit amet congue tempus</u>
</li>
</ul>
</div>
Is that what you were after? Having the text not end up below your line markers?
i have bunch of cards over here i just want that each first and third card in the row gets margin top of 50px but it is not working with bootstrap but using css it is working?is there any class in bootstrap through which i can do this? i know i can do it manually by doing .mt class but i have a php code which dynamically generate this so it fails over there please have a look at this codepen and help me with this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
</div>
<style>
.card{
margin:30px 20px;
padding:20px;
}
</style>
.card is a child of col-sm-4 so you have to add CSS like below
.col-sm-4:nth-child(odd) .card{
margin: 50px 0 0 0;
background: red;
}
I want to accomplish this with only HTML and CSS
Another example from bbc.com
I want them to be separated from each other.
this is the code I made so far
.newsitems {
display : inline-block;
}
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
Unfortunately I can't post code now, but it's simple
Just display all divs as block
Add the image inside the div, then
Write the text inside the div as well
Then in CSS just add something like this :
.divname{
position:absolute;
}
Then set the proper value(px) of right/left, top/bottom positions , and set a width and height
You can use flexbox to make it easly and keep it responsive:
main{
display:flex;
flex-flow:row wrap;
}
.newsitems{
width:200px;
}
<main>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
</main>
you have two options either you use flex or you can also use the bootstrap class to acheive this (which is basically made up of flex)
1 : Bootstrap code
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
</div>
2: use pure css/ SCSS (using flex)
<div class="main-container">
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
</div>
SCSS
.main-container{
display:flex;
justify-content:center;
width:100%;
align-items:center;
flex-flow:row wrap;
}
.item-container
{
display:flex;
width:20%;
flex-flow:column nowrap;
img
{
width:100%;
height:200px;
}
div
{
font-size:12px;
}
}
I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.
How can I set column height equal to others? (see codepen below)
Notice they are all in another column container, and there are few rows of those columns.
Expected behaviour: (woah i made optical illusion)
https://codepen.io/anon/pen/JNKexr
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
</head>
<body>
<div class="columns">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.
</div>
<div class="column">
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel </p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel </p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet</p>
</div>
<div class="column">
<p class="notification is-success">Nulla</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor,
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet</p>
</div>
<div class="column">
<p class="notification is-success">Nulla</p>
</div>
<div class="column is-6">
<p class="notification is-warning">Pellentesque eros tortor,
</p>
</div>
</div>
</body>
</html>
Question is related to my previous one: How to set column height equal to longest column in Bulma (flexbox)?
edit: corrected title
edit2: it has something to do with align-content: stretch; class, though I'm have no idea how to use it. More info: http://cssreference.io/flexbox/#align-content
try to add the css code:
p.notification {
height: 100%;
}
I used the following CSS rule, this way I can use the class .is-equal-height to have aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}
I am having issues getting a div to display on top of a Google Map API block.
As far as I can see I have it positioned absolute with a z-index which should place it on top, but I don't see it. It is the .topblock1 div I am looking to appear over the map.
<div class="block4">
<div id="map-canvas">
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
</div>
I have a similar code, try closing your map-canvas div first:
<div class="block4">
<div id="map-canvas"></div>
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
Make a wrapper around the map canvas, the code of google hide all elemets that are not native.
<div class="wrapper">
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
<div id="map-canvas">
</div>
</div>
And set this css
<style>
.wrapper{ display:block; position:relative; top:0px; left:0px; right: 0px;}
.topblock1{ display:block; position:absolute; top:0px; left:0px; right: 0px; z-index:99999} /* Must be above map-canvas */
</style>