I have the following fiddle
The HTML is created by javascript. I can add/change the styles to the div's if needed but I cannot change the order of the HTML code.
I know I can use:
text-align: center;
But there is a catch :) The div containing the 4 images is put in the HTML code before the <h3> is. Since I cannot edit the HTML order I figured to lower the DIV with the images using margin-top: 70px; The problem is that this has an effect on the text in the <h3> which isn't centered anymore.
How to solve this? (pref with css3)
It's okay if the values of the DIV's in the HTML need to be changed in order to fix it
(I can change them)
Thanks a lot
The HTML code:
<div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;">
<form method="get" action="">
<div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;">
<div><img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
<div><img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
</div>
<h3>Options</h3>
<h4>Images for size 119</h4>
</form>
</div>
The CSS:
div.solitaireprefs {
background-color: #fff;
border-radius: 7px;
border: 1px solid #ddd;
}
div.solitaireprefs form {
padding: 0 15px;
}
div.solitaireprefs h3 {
background: #e9e9e9;
margin: 0 -15px;
padding: .7em 0;
text-align: center;
border-radius: 7px 7px 0 0 ;
}
The real answer to the question is to figure out how you can arrange the dom elements correctly. Semantics is more important than you think. But since you are already kinda hacking the visuals, the quickest and dirtiest hack is to fix your padding:
padding: .7em 45%;
on the div.solitairprefs h3
Tweak the percentage to get the middle, but the missing 10% of the sum of left and right padding on the h3 is the space between where the options text appears (so tweak accordingly).
And since you're already manually centering, you can go ahead and get rid of the
text-align: center;
Instead of float:right; and margin:top on the element that contains the images, position it absolutely.
{ position: absolute;
top: 70px;
right: 10px;
}
Using absolute positioning takes it out of the flow of the document; which is what is messing up the centering on your h3.
Related
I am having trouble to put the button (enter) next to my input comment section.
I have tried many options like align=right and working on the paddings but it did not do the trick. When I take out the starts wrapper it works but doesn't when it is in it.
Any help would be greatly appreciated!
Thank you in advance
Here is a Screenshot of the page.
Here is my HTML:
.BoxInfo {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
}
.BoxDesign {
width: 70%;
height: 500px;
padding: 15px;
padding-left: 50px;
padding-right: 50px;
border-radius: 0.9rem;
border: 1px solid gray;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.ButtonEnter {
padding-top: 200;
width: 60px;
color: red;
}
.CommentSection {
width: '100%';
margin-right: -4px;
margin: 0;
display: inline-block;
}
<div class="BoxInfo">
<div class="BoxDesign">
<h3 class="police_fonce">My box</h3>
<hr/>
<h3>1 Info</h3>
<h3 class="police_fonce">2 Info</h3>
<h3 class="police_peu_fonce">3 Info</h3>
<div class="ec-stars-wrapper">
★
★
★
★
★
<a id="textCom" href="#" title="s5"> Reviews</a>
</div>
<input type="text" class="CommentSection" placeholder="Write a comment" />
<Button class="ButtonEnter">Enter</Button>
</div>
</div>
Just use position: and left: or right: in your CSS. Here is MDN and w3schools for reference.
You could do something like this:
position: absolute;
left: 500px;
Or
position: relative;
left: 50px;
Whichever you find best for you.
So in order to make the button and the input have a relative position to one another, they need to share a common father (perferably an individual parent) so just put a wrapper div around them:
<div id="comment_container">
<input type="text" class="comment_input comment_element" placeholder="Write a comment" />
<Button class="comment_submit comment_element">Enter</Button>
</div>
Now that your elements share a common father - wrapper, you can start by adding a width value to the parent. Id keep this as a pixel value but you can convert it to % or vw or whatever. Then you will want to add a small margin to the button and the input (give them space to breath) and finally specifying their width. You can play around with the values or copy mine. Finally adjust height of both elements and enjoy the magic of good html and css.
.comment_element{
display: inline-block;
padding: 10px 5px;
border: none;
}
#comment_container {
width: 400px;
height: auto;
background: #4278DD;
padding: 10px 5px;
}
.comment_input {
width: 300px;
}
.comment_submit {
width: 80px;
cursor: pointer;
}
I added a few CSS tricks to spice things up.
According to image you have to decrease the with of button like
without quote.
.CommentSection {
width: 100%;
}
As mention above your style need to change in padding-top of button (approx)
.ButtonEnter{
padding-top:20px;
width:60px;
color: red;
}
or else try out bootstrap.
As you can see from the above picture, how can I vertically align them to the middle of the grey box, where they have equal height of top and bottom.
Code:
<div style="height: 290px; width: 210px; background-color: grey;">
<img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
<img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
</div>
I tried with the above style, but it seems to only adjust the top of the picture. I can't get it to align to the middle. Any help would be much appreciated. Thanks
Since the images are inline elements by default, use the methods that apply to vertically center text with CSS will work for this case.
For example, use line-height will work like this:
<div style="height: 290px; width: 210px; background-color: grey; line-height:250px;">
<img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
<img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
</div>
Use flex box will also works fine. If you are willing to set the img to a block element, then you can use some other tricks like transform or negative margin.
For example:
<div style="height: 290px; width: 210px; background-color: grey; position: relative;">
<img src="${ImagePopulator}${MainProductImage}"style="display: block; margin-top:-145px;top 50%; position:relative; height: 100%; padding: 20px 0;"/>
<img src="${ImagePopulator}${MainProductImage}"style="display: block; margin-top:-145px;top 50%; position:relative; height:100%; padding: 20px 0;"/>
</div>
You can try this css -
display: flex; or, -webkit-flex
justify-content: center;
align-items: center;
flex-direction: column; or, row
Add these css to the element you want to align in the center.
position: relative;
top: 50%;
transform: translateY(-50%);
Look at this fiddle
Use the following styling, added to your code:
<div style="height: 290px; width: 210px; background-color: grey; display:table-cell; vertical-align:middle; text-align:center">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTKfww8iUXidrKRO9vnHq3rWTJdcXK8YCIhSPTMxrQ9yD1EdlnX" style="padding: 20px 0;"/>
</div>
Here is a working example with the above code.
Which produce the following:
You can try like this
.block{
display: table-cell;
vertical-align: middle;
height: 120px;
background: rgba(0,0,0,.3);
}
img{
height: 30px;
}
<div class="block">
<img src="https://raw.githubusercontent.com/ModernPGP/icons/master/keys/icon-fingerprint.png">
</div>
When you use display: table-cell then you are able to use vertical-align CSS property
Can seem to be able to move the image around, I need the image and the text side-by-side and it is, but I would like to be able to move the image done just a little bit so that the middle part or the image is lined up with the text. Right now it is the bottom and no matter what I do it wont move up or down, here is the html for the div and then the css
<div class="img">
<img src="/image/file/location">
<div class="imgwording">
<img src="/image/file/location" class="logoimage">
Test Text
</div>
<div class="sub">
<img src="/image/file/location" class="mail">
Test Text
</div>
<div class="imagelinks1">
Training &</br>Events
</div>
<div class="imagelinks2">
Trauma & Gender</br>Projects
</div>
<div class="imagelinks3">
Behavioral Health</br>Resources
</div>
</div>
CSS:
.imgwording {
text-decoration: none !important;
line-height: 1.28;
letter-spacing: 1.5px;
text-align: center;
font-size: 48px;
padding: 0px 60px !important;
position: absolute;
top: 65px;
width: 100%;
font-family: eb garamond,serif;
color: #fff;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
left: -110px;
display: inline-block;
}
.logoimage {
width: 50px;
height: 100px;
}
From what I understand, you have an image and text side by side but the image is lower than it should be. What you could do is add padding-bottom to the image CSS to change its position. How many pixels you would want to move would depends on how much higher you want the image to go.
Basically doing:
.logoimage {
width: 50px;
height: 100px;
padding-bottom: 5px; /* this could be any value depending */
}
Believe after some digging I got it, just need to add
position: relative;
to the .logoimage css
Add vertical-align:middle; to your logoimage class:
.logoimage {
width: 50px;
height: 100px;
vertical-align:middle;
}
If we look at my site, we see that the icon with the like and dislike button is not on its correct place. I want it to be to the right of the text evaluate tekkkz.com and above XX total views. So that's my html:
<div id="bar">
<span>evaluate<br>tekkkz.com</span>
<a class="icon-small" id="like"></a>
<a class="icon-small" style="margin: 0 0" id="dislike"></a>
<br>
<span id="views"></span>
</div>
And here some CSS:
.icon-small {
display: block;
position: absolute;
height: 32px;
width: 32px;
text-indent: -9999em;
margin: 0 0.5em;
}
#bar span {
float: none;
padding: 0 0.2em;
vertical-align: middle;
}
#bar {
right: 70px;
top: 1em;
position: absolute;
font-size: 0.7em;
}
So what is wrong?
I rewrote the HTML. Not all the changes are necessary to solve your issue, but I think it's better practice to makes your elements divs as opposed to spans with <br />. A hard-coded break like this makes it more complicated to control line breaks using CSS. I also found it easier to group your like/dislike buttons in one div.
<div id="bar">
<div class="evaluate">evaluate<br>tekkkz.com</div>
<div class="likeButtons">
<a class="icon-small" id="like"></a>
<a class="icon-small" style="margin: 0 0" id="dislike"></a>
</div>
<div id="views"></div>
</div>
Then for the CSS I used inline-block to put the necessary elements side by side.
.evaluate, .likeButtons { /* this is new */
display: inline-block;
}
.icon-small {
display: inline-block; /* was block before */
/*position: absolute; <-- remove this */
height: 32px;
width: 32px;
text-indent: -9999em;
margin: 0 0.5em;
}
/*#bar span {
float: none;
padding: 0 0.2em;
vertical-align: middle;
}
^ I don't think you need this any more,
maybe the padding but I'm sure you can work that out yourself */
#bar { /* didn't touch this */
right: 70px;
top: 1em;
position: absolute;
font-size: 0.7em;
}
You're positioning the icons absolutely, but not defining where they go (top, bottom, left, right) in the parent, which is also positioned absolutely.
You're probably going to need to define a top value for them both, then individually define a left or right value.
I would strongly recommend restructuring the html and use floats instead to accomplish what you want. Using absolute positioning can be a pain and very buggy.
Remove position: absolute;
seems to work
Guys Please help me to solve this floating problem.I tried different methods but anything didn't work for me.
In the html file,Small images are in the global container.Footer placed right below the global container.But now the footer comes to the top.
These are my css-
CSS of images-
style="margin-top: 25px; margin-right: 48px; float: right;"<br>
style="margin-top: 25px; margin-right: 48px; float: left;"
#footer_container{
width: 900px;
height: 10px;
margin-top: 10px;
padding-bottom: 10px;
position: absolute;
border: solid;
}
#global_body_container{
width: 746px;
position: absolute;
padding-bottom: 10px;
border-color: #c6c8cc;
border-style:dashed;
clear: both;
}
Thank you.
Place on the container of the floated elements overflow: hidden.
#global_body_container {
overflow: hidden;
}
You have position: absolute; on your #footer_container. Remove that and then add a clearing br under the footer, like so
<div id="global_body_container">
<img>
<img>
etc...
<br style="clear:both;" />
<div id="footer_container">
whatever content...
</div>
</div>
#footer_container{
width: 900px;
height: 10px;
margin-top: 10px;
padding-bottom: 10px;
position: absolute; //REMOVE THIS
border: solid;
}
Also, you may want to consider adding more to your border rule, such as thickness and color, e.g., border:1px solid black;
Create a new "content container". Put all your floating images in. Then place the new container right before your footer_container.
Because all your elements in global_body_container are float, so it cannot wrap those images visually.
A simple solution is add a stub at the end of global_body_container, and let it clear float elements.
<div id="global_body_container">
<img class="left">
<img class="right">
<div style="clear:both"></div>
</div>
shinkou has mentioned a clearing trick. You can also refer to clearfix mixin in compass. The expended css looks like:
.clearfix {
overflow: hidden;
*zoom: 1;
}
Also refer to discussion in What methods of ‘clearfix’ can I use?