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%;
}
Related
Im building my first responsive type website, So far doing the index page. Im having an issue when that i cannot align the footer divs together. i have three divs spread out and the last div on the right has social 4 icons. but im unable to get these to align with the other two divs texts. Ive tried a number of different things to fix it in the css and flex though id rather stick to css right now on this site.
Here is the site on test host to see the actual icons in the footer.
https://hireahottub2.netlify.com/
i feel the problem may lie in my code somewhere but i cannot see it for the life of me.
align-items: center
display:inline block is in the parent
<html>
<footer>
<div id="footerwrap">
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<a href="https://www.facebook.com/hireahottub2000" target="_blank"
><img src="./img/fb2.png"
/></a>
<a href="https://www.instagram.com/hireahottub2000" target="_blank"
><img src="./img/insta2.png"
/></a>
<a href="https://twitter.com/HireahottubUK" target="_blank"
><img src="./img/twitter2.png"
/></a>
<a href="mailto:hireahottub2000#hotmail.com" target="_blank"
><img src="./img/email2.png"
/></a>
</div>
</div>
</footer>
</html>
/* FOOTER CSS */
footer{
padding: 5px;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
#footerwrap{
width: 80%;
text-align: center;
}
.fdiv1{
float: center;
display: inline-block;
width: 20%;
}
.fdiv2{
float: left;
width: 20%;
}
.fdiv3{
float: right;
width: 20%;
min-width: 75px;
}
.fdiv3 img{
width: 30px;
}
For your issue specifically, I'm seeing that your divs fdiv1 and fdiv2 only align in the center because of browser-set margins on the heading tags within them. Furthermore, they have zero concept of the height of any other div, because they are floated (removed from document flow). To fix this, you will need to set them all an equal height. Then vertical-align will actually work.
h5 {
margin: 0;
}
.fdiv1, .fdiv2, .fdiv3 {
height: 50px;
}
a {
display: inline-block;
vertical-align: middle;
}
It may be beneficial for you to learn Flexbox. It makes these types of tasks easy, but it's not supported in older browsers.
My recommendations are:
Get rid of all of the float stuff.
Get rid of the width: 20% stuff on the footer items. (Maybe bring it back after you see the results of the rest of this.)
Get rid of the single inner <div> that's a child to the <footer> element (I guess you said you already did that somewhere else, just not on the current demo website).
Use the flex justify-content (space-between) and align-items (center) CSS attributes on your <footer> to spread your footer items out in the proper fashion.
Follow up...
I tried the above, ended up keeping the width: 20%, and got this as a result:
I guess you might want to switch the order of those first two footer items around, but that's not something I could do easily just playing with CSS attributes in my web console.
Use a css grid layout to achieve this.
footer {
padding: 5px;
color: #ffffff;
background-color: #354243;
text-align: center;
border-top: #e8491d 3px solid;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
footer div img {
width: 30px;
}
<footer>
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<img src="./img/fb2.png" />
<img src="./img/insta2.png" />
<img src="./img/twitter2.png" />
<img src="./img/email2.png" />
</div>
</footer>
Hello this is a solution if you want to stick with only CSS ( without flex ) :
footer{
padding: 5px;
position: relative;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
.fdiv3{
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.fdiv2{
width: 20%;
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
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.
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!