The code I have now is the following:
<div id="bint">
<button id="ButtonA">
Option A
</button>
<button id="ButtonB">
Option B
</button>
</div>
This code won't align the buttons unless I remove the div tag.
What is the easiest way to put them in line?
By default the buttons are align in inline-block, so they will appear horizontally.
If you want to present them vertically you sould set a css rule to diplay: block.
You can see more information in the follow link:
Which display mode do HTML buttons have?
I would check out CSS Flexbox, take a look at this Flexbox generator to help you understand it better.
Related
Im using the after property on my h2s to create border lines.
Im using the border lines on my home page and parent page but don't want them on my sub pages is there anyway to display none for this?
thanks
I am not sure what code you have written but to give you an idea, you can do the following:
<span class="border-line">Some text here</span>
Then in your CSS
.border-line {
display: none
}
it simply throw the styling in another style sheet and then link it to your homepage and parent page but not to your other pages it should solve the problem
I am trying to put text on top and img in bottom in the container.
align bottom isnt working
<th id="ship_method" colspan="1" rowspan="1">
<div style="vertical-align:top;">Ship Method</div>
<div style="vertical-align:bottom;">
<img src="unsortImg.png">
</div>
</th>
The vertical-align style only applies to the container element (in this case the <th>), not the element you're trying to align. So you can't use vertical-align to align two elements differently in the same container.
Instead, you can use absolute positioning to place your two elements in the top and bottom. Be sure to make your container position:relative. Check out the demo here: http://jsfiddle.net/8qUeD/
Additionally to #tb11's answer: There is a good change you don't need to actually align your texts like this, but just have them look like they are.
Considering the "lower" content is an image, you could include it as a background image instead and add padding, to that the text doesn't overlap it.
Alternatively, tell us, what is the bigger picture here? What is your overall design? What are the contents/images you want to display here? Is this actually a data table or are you using the table for layout? If you give more details like this, we can give better suggestions.
I have a link at the bottom of my page with
<a href="javascript:scroll(0,0)">
Online Marketing
</a>
To scroll to top of page but it makes the text blue and underlined how do i add some code to remove text deceration to it?
i tried a href="javascript:scroll(0,0)" style="text-decoration: none; color:#FFFFFF;">
but then the scroll to top stopped working does anyone now any way to get round this to remove the text deceration using code on the specific element?
Your code looks right...which is odd. Perhaps try assigning the scroll button to a CSS class.
In your style sheet add
a.StandardTextLink:link, a.StandardTextLink:active, a.StandardTextLink:visited {text-decoration:none;color:#FFF;}
Then in your html
Scroll to top
Hopefully that'll sort it.
C
You could try not using an element that has default styles:
<span onClick="scroll(0,0);" style="cursor: pointer;">Online Marketing</span>
Check spelling of your style-attribute, especially quotas. Expression should work.
Is there any way to align google plus button to right? It seems that g+ button holds some place in case there were more digits. It would be nice if sulution could be using only css/html - no javascript.
update It apears that google has changed a little bit api of 1+ button since yesterday, but still it seems impossible to align it to the right.
update 2
Question has been asked on Aug 24 '11. Since then Google+ has changed several times. There's no need to spam answers to this post anymore (repeated, and same answers!). Options you all suggest didn't existed at the time. Check out parameters on google+ documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters
Nowadays you just add data-align="right" to your <div>. For example:
<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>
That will keep the contents of the <iframe> aligned to the right.
If you would like to align the +1 button right, you should either use the 'tall' form factor, since it expands up, or configure the +1 button to not display the count. Either of these will remove the slack space for numbers on the right side. The documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes
Now that the padding is gone on the right side you can use CSS to align the button.
Add the following attribute to the g:plusone tag:
align="right"
Got the solution from
https://developers.google.com/+/plugins/+1button/#button-sizes
Set the align attribute to right for the +1 button tag.
<g:plusone align="right"></g:plusone>
The easiest solution I have found is to just wrap the plus one button div in a container, give the container a class and style that to float how ever you require.
<!-- Google +1 button -->
<div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div>
.plusonealign {
float: left;
}
encountered this exact problem yesterday. wrapped the namedspaced plus one tag in a div and floated right.
you could always use a stylesheet to override the inline styles that google send down the wire
so for markup like this:
<div class="myPlusOneWrapper">
<div id="theActualPlusOneWrapper" style="whatever google send down the wire">
<!-- blah -->
</div>
</div>
you could have this CSS:
.myPlusOneWrapper
{
float: right;
}
.myPlusOneWrapper > div
{
width: auto !important;
}
the width will then adapt to be as wide as it needs to be, and will take precedence over google's inline style
JS Fiddle
I would try to put the button into a div. Then I would make this div smaller than the button to cut away the right part of the button. You need to adjust the position and overflow options in your css.
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.