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;
}
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'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 wanted to make my text to make my text lower to make it to the center of the <div> tag. But I tried to use margin-top to make it lower a little bit but it just can't work. This is my code.
.loremipsum {
background-color: white;
height: 1060px;
}
.content {
font-family: 'Lato';
text-align: center;
}
h3 {
font-size: 75px;
}
.h3 {
border: 2px black solid;
width: 750px;
margin: auto;
margin-top: 100px;
}
<div class="loremipsum" id="loremipsum" >
<div class="h3">
<h3 class="content" >Why Choose Us?</h3>
</div>
<p class="content">We create the best front-end design.Each template cost only $5.</p>
</div>
I recommend you to look up a lot of web based tutorials before you go any further, as web based development is vast (esp for a complete beginner)
I've created a quick demo of margin and padding examples below, (I would post as a comment, although for demonstration purposes, this might be better)
html{background:gray;}
div {
height: 20px;
border: 1px solid black;
}
.right {
margin-right: 100px;
}
.left {
margin-left: 100px;
}
.top {
margin-top: 100px;
}
.bottom {
margin-bottom: 100px;
}
.left-padded{
padding-left:100px;
}
.right-padded{
padding-right:100px;
}
.top-padded{
padding-top:100px;
}
.bottom-padded{
padding-bottom:100px;
}
<div class="normal">I'm normal</div>
<div class="right">I'm margin-right</div>
<div class="left">I'm margin-left</div>
<div class="top">I'm margin-top</div>
<div class="bottom">I'm margin-bottom</div>
<div class="left-padded">I'm padded-left</div>
<div class="right-padded">I'm padded-right</div>
<div class="top-padded">I'm padded-top</div>
<div class="bottom-padded">I'm padded-bottom</div>
You can set property to important. so it will give priority
` .h3 {
border: 2px black solid;
width: 750px;
margin:auto;
margin-top:100px;
}
h3.content{padding:25px} `
Check it on fiddle : [http://jsfiddle.net/515zttfr/][1]
Hi there,
I'm trying to make a div's width to be automatically increased/decreased based on it's child elements width inside the div. However the elements inside always overflow outside the div as if they were standalone elements.
<div id='item_stats_info'>
<div id='item_name'> Name </div>
<div id='item_attr1'> Attribute </div>
<div id='item_req_lvl'> Level X</div>
<div id='item_buy_cost'>
<div>
4000000 <img src="path_to_img">
10 <img src="path_to_img">
</div>
</div>
</div>
see more here:
Fiddle
Can anyone help me with this?
In your css, remove the width: 90px; and add float: left;
Replace this in your css:
div#item_stats_info {
background-color: rgba(41, 53, 59, 0.4);
border: 1px solid #000;
color: black;
float: left;
min-height: 100px;
min-width: 80px;
opacity: 1;
padding-top: 2px;
position: relative;
text-align: left;
/*width: 90px;*/
z-index: 25;
}
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo