This is what I've got:
{LikeButton size="15" color="white"} {ReblogButton size="15" color="white"}
Can anyone please help me make them be in the same line?
You can do it a couple of ways:
.reblog_button, .like_button {
display: block;
float: left;
}
Or:
.reblog_button, .like_button {
display: inline-block !important; /* important needed due to inline styling */
}
Here's what I did:
<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>
And then in the CSS I put
#buttons {
float:right;
}
Related
I know how to collapse (display / hide) a div:
$('#nav').click(function() { $('#hello').toggleClass('hidden'); });
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>
Is it possible to do this without Javascript / jQuery?
I've tried the main answer from this question, but it is not working, as detailed here.
Nobody has mentioned the 'details' element, which seems perfect for this job.
<details>
<summary>Click to toggle</summary>
<span>Oh, hello</span>
</details>
You may use :checked selector.
#hidden {
display: none;
height: 100px;
background: red;
}
:checked + #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
Example fiddle
Well yes, it is, but it's not neat. It involves the :target selector, where you can apply styles to active elements / id's. If we wrap your nav content in a link, we can apply a hashtag which invokes the active rule in our CSS.
Downside, this jumps the page to the location unless prevented by... JavaScript.
a {
color: #000;
text-decoration: none;
}
#hidden {
display: none;
}
#hidden:target {
display: block;
}
<div id="nav">NAV</div>
<div id="hidden">Hello</div>
Here is my scenario:
This page will be translated into different languages.
I want the input type box width should be auto scaled as per translated "search" text without changing CSS / structure.
You need a way for your box model to adapt automatically. Using CSS table layout may serve your purpose.
HTML
<div class="input-row">
<label for="myInput">Search</label>
<input id="myInput" type="text" placeholder="text input"/>
</div>
CSS
.input-row {
display: table;
width: 100%;
}
.input-row label {
display: table-cell;
width:1%;
white-space:nowrap;
}
.input-row input {
display: table-cell;
width:100%;
}
https://jsfiddle.net/836c154c/
Please check
<div class="container">
<div class="right">ASaasasasAaA</div>
<div class="left"><input type="text" style="width:100%"></div>
</div>
css
.container {
height:200px;
border:1px solid;
}
.left {
width:auto;
background:red;
overflow:hidden;
}
.right {
background:blue;
float:left;
}
demo
Here is how you can align items with a new way, with help of flexbox:
HTML:
div {
display: flex;
}
CSS:
label { white-space: nowrap; }
input { width: 100%; }
Demo http://jsfiddle.net/infous/710nz58m/
http://autoprefixer.github.io/ to get browser prefixes
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
I'm looking for the simplest way to break up a collection of inline-blocked divs without resorting to extra markup (such as br).
I started off naively thinking that the following would do the trick except that 'four' ends up on a line of its own as well which I don't really understand.
.inline {
display:inline-block;
}
.newline {
display:block;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
I have tried solutions using :after/:before found here on Stackoverflow but these only work for me if my elements are inline instead of inline-block.
Regrettably I also need to support IE6!
Attempt with floats
This example below does not display properly in IE 6
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.newline {
clear: left;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
The result in IE 6
For IE6 and other old browsers you need to add a clear line for example using this code:
<div class="inline">one</div>
<div class="inline">two</div>
<div class="visualClear"></div>
<div class="inline">three</div>
<div class="inline">four</div>
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.visualClear {
clear: both;
display: block;
}
I know that it isn´t very pretty but it will work for you.
I'm trying to layout field labels and values like this:
Name: Bob
Age: 25
Occupation: Code Monkey
The relevant HTML is
<div class="field">
<span class="reset">End Time:</span>
<span>05:00pm</span>
</div>
<div class="field">
<span class="reset">Items:</span>
<span></span>
</div>
<div class="field">
<span class="reset">Repeats:</span>
<span>Never</span>
</div>
And the relevant CSS is:
div.field {
margin-bottom:10px;
}
span.reset {
display: block;
float: left;
margin-right: 0.5em;
text-align: right;
}
Unfortunately, the "Repeats" field is being shown on the same line as the "Items" field. I verified that this only happens when the value of the "Items" field is empty <span></span>.
I tried added clear: left to span.reset, and while this stops two fields appearing on the same line, it totally messes up the alignment of the labels and fields.
Is there any way I can fix this problem without drastically changing the XHTML?
Thanks,
Don
Add this to your CSS clear: left;:
div.field {
clear:left;
margin-bottom:10px;
}
This will force it to the next line below.
If you want all these to line up you're going to have to give the label (reset?) a fixed width either directly or indirectly. Try this:
div.field { overflow: hidden; }
div.field span { margin-left: 150px; display: block; }
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }