on this page I'm trying to position the "subscribe" box next to the input box.
so far i've floated all three left, but the final element isn't in the correct spot.
It would be better to tidy up your HTML, but failing that, this will do it:
#mc-embedded-subscribe-form .mc-field-group {
padding-bottom: 0;
}
#mce-responses {position: absolute;}
#subscribe {margin-left: 20px;}
Your clear class will remove the floating. If you remove that class the subscribe box will appear next to the input box. You will probably need some negative top margin or something similar to line it up correctly.
look at this at css
input {
display: inline-block;
}
That's why it isn't working the way you want.
By giving the div with id subscribe the class clear, it inherits clear:both. You need to remove it.
Meanwhile, also remove padding-bottom from #mc-embedded-subscribe-form .mc-field-group.
This should line up the button correctly.
Related
I have an element that is absolutely positioned at the bottom of its box, and then the box itself is part of a series that are all fixed at the height of the tallest box. I am blanking on how to get some whitespace above the absolutely positioned element? JSFiddle here ... the "Do this" button in the tallest box needs some space above it and below the list.
I am trying to insert a line feed and set the white-space but this doesn't work.
.myelement:before {
content: "\00000a";
white-space: pre;
}
Thanks in advance!
You could add a bottom margin to your last li element since they are determining the height.
Add this css:
.providers li:last-child{
margin-bottom:30px;
}
of course that margin could be whatever you need.
Fiddle
Simplest way – add a padding-bottom to your items:
.ListCtr {
padding-bottom:30px;
}
http://jsfiddle.net/zh2os8yt/4/
Since your buttons contain only a small amount of text, this will work unless the screen width gets “really small”. If that’s an issue, you might want to use a bigger padding value for narrow screens using a media query.
But flexbox would be an even better tool to solve this.
Try adding padding-bottom to your boxes. For example you can edit the .ListCtr to the following:
.ListCtr {
position: relative;
padding-bottom:80px;
}
I have a bunch of toggle buttons with labels underneath. If the labels for a button get to be too long then what should be the first button of the next row will get stuck on that label.
Heres my code:
https://jsfiddle.net/Android272/c150305z/
I have looked it up and everyone wants to know how to make their site like pintrest. I don't want this to look like that, I want my second and third rows not to be stuck on the first.
some people suggested to place
display: inline-block;
somewhere but everywere I place it it does not seem to fix it.
That's because you're using unequal heights in your divs.
Set a height to your third section's divs and it will remain equal in row:
section:nth-child(3) div {height:110px}
JsFiddle
Edit: Another way is to save the spacing by adjusting the p but still needs to use height for the parent.
This should do:
section:nth-child(3) div {
height:100px; /* Same amount of space as other divs */
}
section:nth-child(3) div p {
margin-top:3px;
line-height: 15px;
}
JsFiddle
So, I have a form.
I want to add a padding to the form fields. So, when people start typing, the text will appear with a nice gap between the sentences and the left border of the field...
I can use padding-left, but then the who field jumps to the left (but it does work for the text).
I am looking for CSS code that allows me to style the input text on its own.
I tried this code, but that won't work either.
input[type=text] {
padding-left: 20px;
}
EDIT: I posted a picture what happens when using padding-left on input[type=text]. It does work but on the right you can see what happens with the field. The field gets wider..
The issue is because padding gets added to the rendered width of a field.
Use the box-sizing property to solve it.
input[type=text] {
padding-left: 20px;
box-sizing: border-box;
}
Newbie question here. I have a navigation bar with padding in all of my li's, and I want to be able to target the ahref when you click in the padding. Would this be done with onclick/javascript for each li? or is there a simple CSS method?
Also I have a search bar, that I want to focus by clicking on it's padding as well. I assume this would require a similar method.
First, you must set display:inline-block as a property for your links. Then, remove the padding from your list-item and apply it to the links.
Your CSS should reflect the following:
li a {
display: inline-block;
padding: 10px;
}
Here's a fiddle for a working example.
maybe you could specify:
li.someclass a {
display: inline-block; //or display:block;
width: 100%;
height: 100%;
}
(remember to specify width/height of parent container aswell)
not sure if i got you right though
Set the padding to the anchor instead of to the li.
See http://jsfiddle.net/FBsKH/ and compare.
About the search bar, can you post some code?
If I add padding to a <input type="text" /> and I click it on it's padding, it gets focus (tested on Firefox and Chrome). See it here: http://jsfiddle.net/fnsRu/
Edit:
Ah, now I understand what you want with the search bar.
The problem is that AFAIK with CSS you can't set focus to an element.
Then, you can:
Remove paddings: http://jsfiddle.net/fnsRu/3/
Use JavaScript: http://jsfiddle.net/fnsRu/4/
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/