I have some issues with the text inside two of my buttons located inside a block_head class div.
In Chrome, they show exactly as I want :
In IE9, there is no text :
Here's my CSS code :
.block .block_head button {
margin: 13px;
padding: 5px 15px;
float: right;
height: 30px;
text-align: center;
}
I tried playing with the CSS attributes (vertical-align, remove margin, etc.), and the best I could come up with is by removing the padding line :
I sense a stupid mistake or compatibility problem, as I am kind of new to web programming.
Any help would be much appreciated!
Without seeing your code, all I can imagine is that there is a style being applied that is setting the line height. Can you try adding this to your ".block .block_head button" style?
line-height: 1em;
padding: 0px;
Try this:
.block {
float: right;
}
.block .block_head button {
margin-right: 13px;
padding: 2px 15px;
// float: right; (button is an inline element)
// height: 30px; (auto height)
// text-align: center; (no fixed width, the text will always be in the center)
}
Related
This is the css I have atm but it is all going chaotic and this is how the section of the page looks:
[![
#firstborder{
border: #3063A5;
border-style: double;
font-size: 9.5px;
font-family: "Palatino Linotype", serif;
padding-left: 5px;
float: left;
margin: 0 20px 20px 0;
}
.linguistics_paragraph{
margin-left: 385px;
padding: 3px; margin-top: 5px;
top: 40px;
font-family: "Palatino Linotype", serif;
margin-right: 3px;
margin: 0 0 10px 10px;
float: right;
}
]1]1
To make the image box slimmer I would suggest using the max-width property and setting it to your desired width so it never gets any bigger than that.
I can make a code snippet but as far as your text issue, are you trying to get the text within the bordered box? Also what is your desired outcome for the legend?
I'm gonna answer this question on a conceptual basis as you don't have your HTML provided
So as you said everything gets messy when you change the width of the browser therefore
we have to first work on making it responsive. So just go to your Html file and make a div wrapper or container that would hold both of your image and the paragraph tags
for example, something that would look like this:
<div class="container">
<img src="files/exampleimg.png" id="pic">
<p id="text">This is something</p>
</div>
Now in your CSS file remove the margin-left or margin-right you used to position the image and the paragraph tags and use flex or grid or anything similar to make it responsively positioned, I'm gonna go with flex so here it goes:
.container{
display:flex;
justify-content: space-between; /*putting img to left and paragraph to right*/
}
#pic {
padding-left: 50px; /*as per your requirement*/
}
#text {
padding-right: 50px; /*as per your requirement*/
}
and that's pretty much it for the responsive part, all we have to do now is make the image box slimmer, so for that do this:
#firstborder{
border: 1px solid #707070; /*this would make it slimmer but play with it to find out what suits best*/
}
you change the 1px to 4 px its gonna get thicker and you crank it down and it would get slimmer, there you go, now you have a responsive page and your image-box slimmed up.
and oh for your legend part add this to your HTML
<img src="files/legend.png" id="legend">
CSS:
.container{
display:flex;
justify-content: space-between;
position: relative; /*binding up the legend with container*/
}
#legend {
padding-left: 50px;
position: absolute; /*stiching the legend to that pic*/
top: 40px; /*as per your requirement*/
}
So i'm working on a school project (beginner to coding here), and i need to make a div move when you hover over it.
Here is my css code for that div:
#div2
{
box-shadow: 4px 4px 10px;
width: 80%;
height: 220px;
font-size: 15px;
margin-left: 5%;
margin-bottom: 3%;
text-align: center;
margin: auto;
background-color: #99CC00;
a:hover
{
float: right;
}
}
I need to make the whole box move to the right when you hover over it.
If anyone could help me that would be awesome!
If you are looking to move the whole div, you can make a new div id with a hover on it. Not just links have the ability to hover.
Example:
#div2:hover {
float: right;
}
Although, having a float on a hover will have it be very strange on the page. You can add padding-right to make it move just a little.
Your hover is currently just for a elements. If you want the div to do something, you'd have to add a new section with #div2: hover
remove
a:hover
{
float: right;
}
and insert
#div2:hover
{
float: right;
}
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
In my article header section, I'm having a few alignment issues. I did a screen shot, but here is the live page:
http://www.picturemeclubbing.com/newyear/index.php/2014-01-21-01-37-46/item/19-phil-cashout-interview
Pic here:
I chose to inspect the area I wished to move and found:
span.itemAuthorDetailss
position: relative;
text-indent: 4px;
bottom: 20px;
Changing bottom: 20px to a lower number brought the text down. At least in the code inspector window. But when I made the changes in the css file, the page when haywire. On top of that, the image next to the text would not move down independently. I'm new to this coding stuff. Any help would be greatly appreciated.
span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Does that work? Maybe add some margin to:
.authorDetails {
float: left;
margin-right: 12px;
margin-top: 5px;
}
Another alternative is your PMD image seems a little high - so try this:
.authorDetails img {
margin-top: 5px;
float: left;
}
.authorDetails span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Put that in your custom.css style sheet:
http://www.picturemeclubbing.com/newyear/templates/yoo_moreno/css/custom.css
I have seen many topics on this around Stackoverflow, but I still could not find out how to do this on this particular case.
I am trying to display a list in a card fashion, I have a template I developed. It looks like this:
Here I have 3 cards, and in the first one, I displayed where I think divs should be created
I cannot align the text the way I want. I want the Title on top of the Description and both aligned right of the first image. But so far I have gotten nowhere. I have a JSFiddle of what I have so far right here: http://jsfiddle.net/MEaze/
Sorry about the ugly colors, I just needed to "see" the divs.
Make them float, and use div instead p.
.trophy-image {
float: left;
background-color: #FF0000;
margin: 8px;
height: 56px;
}
.trophy-info {
float: left;
background-color: #00FF00;
margin: 8px;
line-height: 28px;
}
updated jsFiddle
You have to make the image float left.
I added:
float:left;
to the image div's css. Is that what you were looking for?
http://jsfiddle.net/2jfSK/
You only have to float the image to left. This div will automatically become a inline-block:
.trophy-image {
background-color: #FF0000;
margin: 8px;
height: 56px;
float: left;
}
To set the description to the middle of the image you can use line-height:
.trophy-info {
//background-color: #00FF00;
line-height: 90%;
}
Here an example.
You have to use float:left
http://jsfiddle.net/cAT2B/
http://jsfiddle.net/y7GJa/
I have also added a second image
You should also use DIV
.trophy-image {
background-color: #FF0000;
margin: 8px;
height: 56px;
float:left;
}
.trophy-info {
background-color: #00FF00;
float:left;
}