I'm trying to create an endless scrollable row, to display info items.
I have set it up as per below and it's making the item the same size as the holder. I've tried using inline-block but that displays the items in one column:
UPDATE:
the link is the is the element that need to appear at the bottom of the item, i've tried positioning absolute this removes the a tag from item completely. i have also tired vertical align:bottom to no effect.
any help is much appreciated.
.holder {
overflow-x: scroll;
overflow-y: visible;
height: 550px;
width: 100%;
padding: 0;
}
.item_row {
display: -webkit-inline-box;
list-style: none;
padding: 0;
}
.item {
width: 300px;
background: #fff;
margin: 0 10px 0 10px;
}
<div class="holder">
<div class="item_row">
<div class="item">
<!-- Info -->
need to appear at bottom
</div>
</div>
</div>
This is your solution for now. If you dont have content in the item why the link goes to bottom. -webkit--inline-box work only chrome thats why i have add two extra display in your .item-row class
Happy coding enjoy and good luck
.holder {
overflow-x: scroll;
overflow-y: visible;
height: 550px;
width: 100%;
padding: 0;
}
.item_row {
display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-box;
list-style: none;
padding: 0;
}
.item {
width: 300px;
background: #fff;
margin: 0 10px 0 10px;
}
<body>
<div class="holder">
<div class="item_row">
<div class="item">
<!-- Info -->
<img src="http://cdn.online-convert.com/images/image-converter.png"
alt="test">
<h1>test</h1>
<p>test</p>
<p>test</p>
need to appear at bottom
</div>
<div class="item">
<!-- Info -->
<img src="http://cdn.online-convert.com/images/image-converter.png"
alt="test">
<h1>test</h1>
<p>test</p>
<p>test</p>
need to appear at bottom
</div>
</div>
</div>
</body>
Related
I'm trying to add two sidebars to both edges of the middle element. The left one works without an issue, however, the right one won't. Instead, it appears below its parent element (as seen in the picture) unless I position it as absolute, then however, it goes over the navbar.
Relevant css:
/* The parent element */
main {
margin: 0;
position: relative;
left: 22%;
right: 22%;
width: 56%;
height: 50vh;
background-color: #c5c5c5;
}
/* The correctly shown sidebar */
.sidenav {
margin: 0;
height: 100%;
width: 160px;
top: 7%;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
/* The wrongly shown sidebar */
.bar-right{
float: right;
margin: 0;
width: 200px;
height: 100%;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
HTML:
<main>
<div class="topbar">
[top bar stuff]
</div>
<div class="sidenav">
[usernamestuff]
Link1
Link2
Link3
</div>
<div class="bar-right">
<p>text for test</p>
</div>
</main>
Both sidebars are effectively identical so I don't understand why they behave so differently. How do I get them both to their appropriate edges of the main element?
I would recommend you to use Bootstrap. This will help you to achieve what you looking for so easy, by this code:
<div class="container">
<div class="row">
<div class="col-sm-3">
// First sidebar
</div>
<div class="col-offset-6 col-sm-3">
// Second sidebar
</div>
</div>
</div>
Hello I am just making a base template to help me make a website a lot better, I have just recently started using bootstrap and have noticed that when I resize my browser (for example to a mobile size) it is overlapping on my footer?
Does anyone know why this is happening?
Here are some images of when I add more text or resize:
Like I say I am fairly new to bootstrap and am most likely doing something really stupid which is easy to fix :)
Here is my css:
html, body { height:100% }
nav {
margin: 0;
padding: 0;
}
div {
display: block;
}
.col-centered {
float: none;
margin: 0 auto;
}
.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.container {
width: 100%;
margin: 0;
padding: 0;
height:100%;
background:red;
}
.content {
padding: 5rem 1.5rem;
text-align: left;
height:90%;
width:75%;
margin:0 auto;
background: green;
}
footer {
background: grey;
height:10%;
width:75%;
margin:0 auto;
}
Here is my main HTML:
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>
EDIT: I forgot to include the footer, if you think that I need to add this for you then please let me know.
Thank you very much for even looking at this post!
EDIT 2:
Here is the code for my footer:
<footer>
<div class="row">
<div class="col-md-auto">
<p class="float-right">Back to top</p>
<p>© 2017 Company, Inc. · Privacy · Terms</p>
</div>
</div>
</footer>
Here is the link to the website:
http://81.131.193.35/
Remove the height of .content
.content {
padding: 5rem 1.5rem;
text-align: left;
width: 75%;
margin: 0 auto;
background: green;
}
and also remove the height of .container
.container {
width: 100%;
margin: 0;
padding: 0;
background: red;
}
I would wrap the footer.php in a pair of divs and apply a row and col-md-auto class to it. It looks like the footer is maybe styled with an absolute or even a static display. This is making the footer not play along with the other divs
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
<?php include "footer.php" ?>
</div>
</div>
</div>
I have a section that I want to look as if it is centered on the page. I have four boxes that appear inline and I believe the reason they do not like they are centered is because everything is aligned naturally to the left. The thing is, I do not want the content that is in these boxes to be centered, I want them aligned left.
So how can I make the boxes appear as if they are centered within the page, but not have it affect my text?
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
#contact-connect-box-container {
margin: 0 auto;
width: auto;
}
.contact-connect-box {
width: 25%;
margin: 60px 0 0 0;
display: inline-block;
border: 1px solid black;
vertical-align: top;
transition:1s; -webkit-transition:1s;
}
<div id="contact-connect">
<div id="contact-connect-box-container">
<div class="contact-connect-box">
<h2 class="contact-connect-title">Call</h2>
<div class="contact-connect-description">vcxv</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Write</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">Fill out our contact form.</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fgrge
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Connect</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">Visit us on Facebook</div>
<div class="contact-connect-link">See us on Youtube</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
</div>
You can just add "display: flex" on your #contact-connect-box-container
#contact-connect-box-container {
margin: 0 auto;
width: auto;
display: flex;
}
DEMO :
https://jsfiddle.net/w776Lq1u/8/
The problem is the margin on the right side of "Connect." I would recommend using flexbox and using display: flex; justify-content: space-around; That way you won't need any margins at all.
EDIT: plnkr
I have a specific layout that is causing me HUGE headaches. Here is an image:
My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.
Current Markup
<body>
<div id="container" class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<div class="panel-logo">
"Logo here text"
</div>
</div>
</div>
</div>
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<nav class="panel">
</nav>
</div>
</div>
</div>
</div>
<div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
<div class="inner-panel">
<header class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 header-logo">
LOGO Would go here, of course.
</div>
<div class="pure-u-md-3-4 pure-u-1 header-title">
<h1>Consumers Energy</h1>
<h1><strong>CARE 3.0 Program</strong></h1>
<h1>Enrollment Application</h1>
</div>
</header>
<div id="content">
"Enrollment application text..."
</div>
</div>
</div>
</div>
</body>
Current CSS
.panel {
box-sizing: border-box;
height: 100%;
display: table-cell;
}
.panel.p {
padding: 3px;
}
.panel .panel-row {
display: table-row;
}
.panel .inner-panel {
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: red;
}
Here is an alternative fiddle to play with: http://jsfiddle.net/3c3tqo3e/ but I really don't want to use a table...
Q How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.
NOTE I would really prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer just css/html. Thanks!
I have created a demo for you, but it will work on all modern browsers only. and you might have to read flexbox and its demos in details to make your work more meaningful in terms of performance and maintenance.
Also read on calc() here
HTML:
<main>
<aside>
<div class="logo">Logo</div>
<div class="aside-content">Other Content</div>
</aside>
<section>Section</section>
</main>
CSS:
html, body{ height: 100%; }
main{
height: 100%; background: teal; padding: 2em; box-sizing: border-box;
display: flex; flex-direction: row;
}
aside{
height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
background: #fff; height: 140px;
}
aside .aside-content{
background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}
main section{
height: inherit; background: #fff; flex-grow: 2;
}
Demo Fiddle: http://jsfiddle.net/vpqqyo9L/1/
Edit:
Here's one for IE9: http://jsfiddle.net/vpqqyo9L/3/
What I would like to achieve (the goal)...
I'm trying to display a row of images (with the image name below the image) in html, like so:
When a user clicks on an image I want a square to appear over the image, to indicated selection like so (user has clicked on Tile1):
What I have done so far...
So far I have managed to display the tiles in a row:
Here's the html code that produced the image above:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="default_tiles_view_square" id="tile2">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
And the CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.default_tiles_view_square {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
And a fiddle showing the example above: http://jsfiddle.net/jamiefearon/t8d6U/
The strategy to achieve the goal...
I was thinking about wrapping the image and its title in a div, and then changing the background colour of the div. Here is the result and the code:
HTML:
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
#tile1 {
background-color:red;
}
The Problem..
It does not look good, and the actual image is not covered by the red colour. Maybe it would be possible to overlay a div over the wrap div, set it's opacity < 1 and change its background colour.
What do think? Does anyone have any ideas of a good way to achieve the goal?
Something like this should do the trick: http://jsfiddle.net/t8d6U/1/
So just hide the overlay DIVs initially with display:none (or e.g. left:-9999px) then show them onClick.
CSS:
#default_tiles_view {
overflow: auto;
}
.default_tiles_view_square {
float: left;
margin: 5px 10px 10px 10px;
position: relative;
height: 128px;
width: 128px;
}
.default_tiles_view_square p {
text-align: center;
}
.content {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.overlay {
position: absolute;
z-index: 2;
background: red;
opacity: 0.5;
height: 128px;
width: 128px;
top: 0;
left: 0;
}
HTML:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="overlay"></div>
</div>
<div class="default_tiles_view_square" id="tile2">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
<div class="overlay"></div>
</div>
</div>
I have taken what Gaurav said in the comments, changing the opacity:
HTML
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
#tile1:hover{
background:red;
opacity:0.4;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
Fiddle: http://jsfiddle.net/jamiefearon/BY9Fp/
Hover over Tile1 to see the effect.