So I am trying to make this admin page responsive and there are some problems when I resize the page. I want the div with the Inventory to be aligned with the 3 buttons.
This is my container which needs to properly adapt when resizing the viewport.
.reports{
border: 1px solid red;
overflow-y: scroll;
/*overflow-x: hidden; */
height: 100%;
}
.row{
height: 4.5em;
width: 100%;
margin-left: 0;
}
.actions{
float: right;
width: 30%;
}
.entry-group{
border: 1px solid red;
float: left;
width: 70%;
}
.title{
border: 1px solid red;
float: right;
width: 72.5%;
height: 3.7em;
word-wrap: break-word;
margin-left: 2em;
}
<div class="reports">
<div class="list-group-item row">
<div class="entry-group">
<button class="btn btn-primary date" >2016-09-19</button>
<div class="title">
<h4 class="list-group-item-heading">2080136 - Inventory</h4>
<p class="list-group-item-text">2 Napier Court West Southend On Sea SS1 1JU</p>
</div>
</div>
<div class="actions">
<button class="btn btn-primary download">Download</button>
<button class="btn btn-primary edit">Edit</button>
</div>
</div>
</div>
I think there is a few issues with the code here. Firstly, I believe it odd to have DIVs between your 'tr' and td', and not having a 'table' element.
I think you are trying to mix different ways of doing things: bootstrap and HTML tables.
My suggestion is use something like layoutit.com to build a layout with divs only in bootstrap. You can easily still integrate it into your back end technology, and get the divs responsive by editing the class names, e.g. col-sm-1.
I understand that you want to use tables for reports, having said that, it should be carried through completely, without divs inbetween.
Add this:
.list-group-item-heading {
margin-top: 0;
}
https://jsfiddle.net/kefhvc7y/
Add:
.title h4 {
margin-top: 0px;
}
.date {
float: left;
}
and remove margin-left: 2em; from .title.
Here is an updated version of your fiddle: https://jsfiddle.net/r11p5n4d/
Related
I hope it didn't sound too confusing, but basically what I want is to move that div with the buttons, highlighted in green, to the place highlighted in red, with the image on the left and the buttons on the center:
I searched in every place on the internet and all the solutions don't put me the div in the center, only on the far right or in any other place where is not supposed to be, so I'm hoping someone here could help me with this!
This is the HTML I have on that top part:
<body>
<div id="topback">
<div class="caixa_botoes">
<button id="bot1" type="button">Resultados</button>
<button id="bot1" type="button">Rankings</button>
<button id="bot1" type="button">Partidas</button>
<button id="bot1" type="button">Noticias</button>
</div>
<img class="logo" src="logo.png">
</div>
And this is the CSS i have:
#topback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #2a4158;
z-index: 100;
}
.logo{
margin-top: 0.3%;
height: 80%;
width: 4.5%;
border: 4px solid #22272c;
margin-left: 5%;
}
.caixa_botoes{
margin-top: 0.3%;
display: block;
}
#bot1{
border: none;
color: #2a4158;
background-color: #8c9ea3;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
I hope that someone can help me, thank you all in advance!
This is what you want to use on the parent div:
display: flex
https://flexboxfroggy.com/ < Learn how to use flexbox here using this fun game, and you will be able to create any layout you want then :)
You should probably start by adjusting the order of your HTML elements if that's an option:
<div id="topback">
<img class="logo" src="logo.png">
<div class="caixa_botoes">
<button id="bot1" type="button">Resultados</button>
<button id="bot1" type="button">Rankings</button>
<button id="bot1" type="button">Partidas</button>
<button id="bot1" type="button">Noticias</button>
</div>
</div>
Those elements will appear in order so the image should be to the left (above in the the HTML) anyway. And then there are a lot of ways to proceed.
Does the #topback need to be position: absolute? That may be complicating things a bit.
I suggest you to add the following:
.caixa_botoes{
width: 60%;
margin-left: 20%;
}
and
#bot1{
padding: 15px 1.5%;
margin: 1% 1%;
width: 21%;
}
I made an small html field and now I'm trying to get it responsive.
To make it clear, I made an picture how the fields should move when it's displayed on a smaller screen.
How it should be
After figuring out a few hours I got this solution, whichs works fine on the Desktop but not on a smaller screen. The Logo is not moving to the top but remains on the left side.
Can someone help me with this?
Here is the code:
<div style="background-color: orange; color: white; width: 30%; padding: 4px 4px; text-align: center; margin:0">Stackoverflow</div>
<div style="background-color: #f9f9f9; border: 2px solid orange; max-width:800px; overflow: auto;">
<div style="float: left;width: 30%; overflow: auto;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
<div style="float:left;width:70%">
<div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
</div>
<div>
<div style="float: left; background-color: lightblue; width:50%">
<ul>
<li>Owner: Stack Exchange, Inc.</li>
<li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
<li>Type of site: Knowledge markets</li>
</ul>
</div>
<div style="float: right; background-color: lightgrey; width:50%; padding:5px">
<ul>
<li>Website: stackoverflow.com</li>
<li>Commercial: Yes</li>
<li>Registration: Optional</li>
</ul>
<div style="float: left; width: auto; background-color:yellow">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
</div>
<div style="clear:both;text-align: center;"> <input type="button" value="Go to the Website" />
</div>
</div>
</div>
In order to change styles according to the screen resolution you can use a media query
#media (max-width: 1024px) {
.logo{
width: 100%;
}
}
Add classes to your elements in order to be able to target them with specific css rules:
<div style="float: left;width: 30%; overflow: auto;">
Becomes
<div class = "logo">
...
<style>
.logo{
float: left;
width: 30%;
overflow: auto;
}
</style>
You can't do responsive with inline styles. Once you have your styles separate, you can you use #media queries to style elements based on screen size
* {
box-sizing: border-box;
}
.tab {
background-color: orange;
color: white;
width: 30%;
padding: 4px 4px;
text-align: center;
margin: 0
}
.wrapper {
background-color: #f9f9f9;
border: 2px solid orange;
max-width: 800px;
overflow: auto;
}
.logo {
text-align: center;
}
#media (min-width: 640px) {
.logo {
float: left;
width: 30%;
overflow: auto;
}
.main {
float: left;
width: 70%
}
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row {
margin-left: -5px;
margin-right: -5px;
margin-bottom: 5px;
}
.col {
margin: 0 5px;
width: calc(50% - 10px);
}
.col-left {
float: left;
background-color: lightblue;
}
.col-right {
float: right;
background-color: lightgrey;
padding: 5px
}
.highlight {
float: none;
width: auto;
background-color: yellow;
margin-bottom: 10px;
}
<div class="tab">Stackoverflow</div>
<div class="wrapper">
<div class="logo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
<div class="main">
<div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
</div>
<div class="row">
<div class="col col-left">
<ul>
<li>Owner: Stack Exchange, Inc.</li>
<li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
<li>Type of site: Knowledge markets</li>
</ul>
</div>
<div class="col col-right">
<ul>
<li>Website: stackoverflow.com</li>
<li>Commercial: Yes</li>
<li>Registration: Optional</li>
</ul>
</div>
</div>
<div class="highlight">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
</div>
<div style="clear:both;text-align: center;">
<input type="button" value="Go to the Website" />
</div>
</div>
<!-- /.main -->
</div>
<!-- /.wrapper -->
Your HTML structure is not that bad, even though it will be better if your style code was inside a .css file, if is that the case try it.
Anyways, in your mobile structure you have 3 main containers, I will called:
main-container
image-container
content
Your main-container has image-container and content inside, but both has a villain, in your case that is float: left, this thing will set everything to be on left of themselves an others objects around them.
I will suggest you to change your float: left and start to work with display: flex, you can find tons of information in the internet about it, to help you to construct very polish structures that will obey to any rule that you will build to them.
Thank you guys, I made a solution out of your answers.
I made it with display:flex, flex-wrap:wrap and #media.
For this I seperated the whole "body of the box" into a Logo container and a text fields container (almost like before) and gave both flex attributes. In the text fields I used float (like before).
For smaller screens I changed the flex-direction to column and now it works how I wanted it.
I need some help with my website. I am struggling to achieve that three pictures are shown as "display:inline", which means next to each other and not under each other.
I can't find my mistake and would welcome and hints.
.trikot {
max-width: 1050px;
height: 200px;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 10px;
margin-left: 10px;
margin-top: 10px;
display: inline;
}
.trikotset {
margin-top: 15px;
margin-left: 10px;
height: 150px;
}
#buy_button {
background-color: #9c1737;
width: 100px;
display: block;
margin-left: 35px;
}
<section class="trikot">
<div id="trikot1">
<img class="trikotset" src="img/trikot.jpg">
<button id='buy_button' type='button'>Jetzt Kaufen</button>
</div>
<div id="trikot2">
<img class="trikotset" src="img/hose.jpg">
<button id='buy_button' type='button'><a href=>Jetzt Kaufen</button>
</div>
<div id="trikot3">
<img class="trikotset" src="img/traningsanzug.jpg">
<button id='buy_button' type='button'><a href=>Jetzt Kaufen</button>
</div>
</section>
You would find floats much more reliable for this type of situation because I don't see you need vertical positioning.
EDIT : remember to include clearfix! Floated elements are similar to absolute, they are taken from the document flow.
The images are inside the containers #trikot1, #trikot2, #trikot3. You need to define display: inline-block; for those containers:
#trikot1, #trikot2, #trikot3 {
display: inline-block;
}
I'm trying to make different boxes that are placed in the same line using CSS.
However, without any style rule (at least that I've noticed) making it do so, the second box is lower than the first. Why is that? How can I fix it?
If you have any question, feel free to ask, I'll do my best to answer.
Thank you in advance.
Code snippet below.
JSFiddle
.index-links {
width: 90%;
position: relative;
left: 5%;
padding: 1%;
}
.index-link {
display: table-cell;
height: 150px;
width: 150px;
border: 2px solid black;
margin: 1%;
padding: 0.5%;
text-align: center;
vertical-align: middle;
position: relative;
cursor: pointer;
float: left;
}
.index-link > .index-link-perms::before {
content: " | "
}
<div class="index-links">
<br>
<div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
</div>
<br>
<div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
</div>
</div>
Remove the br tag between the divs.
<div class="index-links">
<br>
<div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
</div>
<div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
</div>
</div>
change the CSS as below
.index-links {
display:flex;
width: 90%;
position: relative;
left: 5%;
padding: 1%;
}
I have a <div> with a number of sub-elements (which happen to be custom-sized buttons). It can have between 1 and 3 buttons.
Example of HTML with 2 buttons:
<div id="head">
<div id="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
</div>
</div>
When there are 3 buttons, they fill the entire <div>, so it is not an issue. However, when there are 1 or 2 buttons, they need to be centered but I can't seem to accomplish this without introducing ridiculous conditional margins or something.
How can I modify this CSS so that <div> elements with 1 or 2 of these buttons show the buttons centered within the div?
Please refer to the Fiddle: https://jsfiddle.net/bf33wc6w/1/
Edit: With only 2 buttons, I don't want them to be spread out. I want them to be in the center with only ~2px between them similar to their spacing for when there are 3 buttons.
You could set inline block on the items, with container set to text align center.
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
JSFIDDLE DEMO
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
height: 73px;
width: 128px;
margin: 3px 1.5px;
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
.control-button:hover {
background-color: #3FA9DB;
}
#head, #body, #foot {
border: 1px solid red;
position: absolute;
width: 396px;
height: 80px;
left: 0;
}
#head {
top: 0;
}
#body {
bottom: 50%;
-ms-transform: translateY(50%);
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
#foot {
bottom: 0;
}
<div id="head">
<div class="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="body">
<div class="control-buttons-container">
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="foot">
<div class="control-buttons-container">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
Updates:
Fixed same id being used multiple times on a single page, which is in valid HTML - changed it to class.
Improved the position of middle block, make it to always stay in the middle more accurately - by using CSS transform.
Merged some duplicated CSS rules.
Like this:https://jsfiddle.net/bf33wc6w/7/
All I did was change your float to none and the margin to auto for the left and right margin?
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
height: 73px;
width: 128px;
margin: 3px auto;
}
Add these style rules:
#head, #body, #foot { text-align: center; }
#control-buttons-container { display: inline-block; }
As an aside, you shouldn't use the same id (control-buttons-container) multiple times in one document. You should use a classname instead.
Updated fiddle: https://jsfiddle.net/mr8e7kyt/
Try something like this:
<div id="control-buttons-container">
<div class="col-1">
<button class="control-button">some button text</button>
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="control-buttons-container">
<div class="col-1">
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
</div>
</div>
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
float: left;
height: 73px;
width: 100%;
}
.control-button:hover {
background-color: #3FA9DB;
}
#control-buttons-container {
max-width: 400px;
padding: 1px;
border: 1px solid red;
}
.col-1, .col-2, .col-3 {
width: 32.6%;
display: inline-block;
margin: auto
}
Isn't flawless, but it was made in a couple of minutes and gets the job done: JSFiddle
For the containers without 3 items you should remove the float: left; for the buttons inside it. Leave it for the one with 3 items. Then you can just set text-align: center; on the container.
You can add a class like no-float on the containers you want to control whether its children should be floated or not.
https://jsfiddle.net/bf33wc6w/10/
This answer will probably help you out. Wrap your buttons in a container, give it a fixed width, and change margin to auto. Be sure to remove float: left.