I am new to HTML and am making a simple one page website and want to add the twitter widget but when I add the widget it goes below my form. Is there a way to make it go to the right of the page as well as adjust the width of the twitter widget. The code for the webpage is below.
http://codepad.org/QcPq5Xur
Thanks in advance!
Put the form inside it's own div container.
Set a specific width to this div of the amount of space on the left you want it to take up.
Create another new div, and insert the twitter feed script inside of this.
Set a specific width if desired to set an absolute width to it, or a percentage. If you don't set a width it should fill any extra space not used by the div containing the form.
As long as the width of the two divs is less than than the width of the browser area, they will display side by side. You could also wrap the two in another div containing a minimum width if you wanted them to be forced side by side no matter browser resolution.
that's because your form is wrapped with div which is a block level element. Try altering its display to inline-block
<div id="formContainer" style='text-align: center; display: inline-block;'>
<a name="form789985197" id="formAnchor789985197"></a>
</div>
Related
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
I added the fieldset into a panel row, and now I want to keep this panel visible when I scroll in my dashboard like this example
But like in the example, I want to keep the sidebar on the top when the wrapper text disappears.
i'm sure i need javascript instance to perform this
now i just use css code : position:fixed
You have to convert your XML dashboard to HTML and modify the CSS of the panel you want to have absolute positioning.
On my page i have a static header that moves along with the user's scrolling. This works great but when i link to a specific div on the page using the standard method, the div ends up behind the header.
Basically i want to use
Cascading Style Sheet Tutorials
<div name="css-tutorials">CSS Tutorials</div>
But how do i get it so that it doesn't put the div at the very top of the browser window? I checked one method that said add padding to the top of the div but that is not possible with my set up.
Here is the live site. I need to go to the id='Forms' div when you click on the Forms link in the blue bar in the middle of the big picture.
try the below code which animates to that area when you click on Forms & FAQs
$('[href="#Forms"]').click(function(e){
e.preventDefault();
$('html,body').animate({scrollTop:$('#Forms').offset().top - $('#siteHeader').height() + 1})
})
I have 4 div elements on the same line, each set at 25% width to fit the screen. When I click on a div it should disappear, which I have achieved using jQuery. Then, I manually set the width of each of the divs to 33%.
I can keep on doing this manually for more clicks, but is there a way the divs automatically resize them selves like this using jQuery and even continue when 2 divs are on screen so each would should be 50%?
Creating tables will solve this problem. Table columns will automatically resize when you delete one of them. You can easly make div's behave like table.
http://snook.ca/archives/html_and_css/getting_your_di
In that case, you don't need to specify fix width e.g 25, 33.. just set it to auto:
width: auto
That should do the trick for as far as i could understand your question. If that didn't help, you should include your css and html code in the question.
I'm trying to set the max scroll length for my site.
I'm preloading each main page into invisible div's, but on every page the scrollbar vertical height is as long as the longest page I preloaded form external html.
Is there any way to set the maximum scrollable distance with javascript?
I have these empty spaces now on each page...
Change your hiddenPageClass to use display:none; instead of visibility: hidden;
Also, for future reference. Post relevant code here and/or an example at jsFiddle.net. Don't make us go to your personal site.
EDIT
You can see the difference in the two properties in this About.com question.