I host my website on Blogger and have a basic understanding of HTML and CSS. I want to add a collaborative add-your-link thingamajig with SimplyLinked. However...
The HTML they gave me was this:
<script type="text/javascript" src="http://www.simply-linked.com/listwidget.aspx?l=60A7D397-F94E-4840-8DFE-BCCB40BA298F"
></script>
But because I have HTML set the width for every photo posted to my website to be 800px, what really should be a small button at the bottom of the list ends up horribly oversized. See pic here.
How can I (or indeed, can I) override the HTML that programs the body of my blog so that the images in third-party javascript are their proper size?
Thank you!!
[EDIT 7/2/14 12:16 AM]
I so appreciate the responses and am quickly realizing just how little I know about this. Thank you for your help and your patience!
Wyzard: You're absolutely right – it is CSS. (I'm still learning!)
ejay_francisco: The CSS (as Wyzard correctly pointed out) is added right before the end of the skin. It's a ton of code, I don't think I can post the whole thing here..? But maybe this excerpt is helpful:
.post-body img {
width: 800px!important;
height: auto!important; }
#sidebar-left-1 {margin: 0 0px 0 -10px;
}
#Blog1 {margin: 0px 0px 0 30px;
}
#HTML6{
margin:60px 0 0 0px;
}
#navbar, #Attribution1{
display:none;
}]]></b:skin>
You can add this code to your HTML (preferably the <head>, but <body> would work):
<style>
.sl_i a img {
width: 181px;
height: 28px;
}
</style>
…Or even better, add it to your CSS, without the <style> and </style> tags.
Feel free to delete the newlines (carriage returns) and reduce strings of multiple spaces down to a single space if you'd like to conserve space:
<style>.sl_i a img{width:181px;height:28px;}</style>
What it does is target any <img> element nested inside an <a> element nested inside an element of class sl_i. I got that definition by opening the href in a browser window, inspecting the image, and noting its position in the DOM.
DEMONSTRATION: http://jsbin.com/gefiq/1/
Related
I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.
Thanks for any help you can offer me/point me in the write direction.
I am not sure how to explain what is happening.
I current have a page with an image background (the image is 4044,2160 so it is larger than you would view on a single screen (normally)).
Currently when the page loads, the image is top-centered and is not on repeat and thus fills the background completely.
However when inserting html code (CRUD) via javascript, etc. with the resulting page becoming larger than the original in the y direction, the background stops and does not fill the space below.
http://postimg.org/image/jqzx0vuzr/
I am not sure what to do to fix it and most likely think it is a css problem.
Below is code:
HTML
<section id="index" class="index clinic">
<div id="x_container">
Javascript insertion of code
</div>
</section>
CSS
.clinic{
width:100%;
position:relative;
background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
height: 100%;
padding: 0;
}
#index.index {
padding:15% 0 0 0;
}
#xcrud_container{
width: 90%;
margin: 0 auto;
}
It seems that the javascript does not matter as to what is inserted, (have tried lorem ipsum, etc.)
But just to expand on what is inserted, the size of the x_container changes based on a state and this is altered by javascript. (Thus page is not reloaded and background size recalculated)
I have currently tried a clearfix solution (but to no avail) as well as attempting repeat-y on the background image.
Lastly I have attempted to manually create the page through directly saving the html code (i.e. it is not inserted by anything and is apart of the html code of the page) to the page and attempting to see if the background expands. It does not. The background fills the initial view area, however as soon as you scroll down the page, the white area reappears.
Just to make sure this is known the background image is larger than area viewed, thus the white area should not be present.
Any help would be greatly appreciated, as I have been at this for a few days...
Thanks
Change % to Pixels as for example.
.index{
height:1000px;
padding: 0;
}
Thanks for you help guys,
Through the comments and answer I have been able to figure out my own stupidity in trying to force a tag to define the background of the page rather than using body. i.e. .
The reason for my defining it as a section tag is due to its use on previous pages where the was followed by another section and thus the white space area would not be a problem. (Also is the reasoning for the height:100%;, as I had to define the height of the section as being 100% in order to fully create the image within the section.
Thanks again.
Consider this page: http://www.collegeanswerz.com/adelphi-university/academics/professors/do-professors-explain-things-clearly-are-professors-interesting.
The element in question is "Do they make things easy to understand? Are they interesting?" in the light gray box on the top right. When the page loads, it starts off high up, and then it moves 30px down. The same thing happens when you click "Information" in the navbar.
This is the element: <div id="question_sub" class="well"></div>.
Why does this happen, and how can I fix it?
Answer to Why does it Happen
If you try loading your page without javascript the page looks like
Problem
Your page is very heavily dependent on js for dom elements modification and for styling also.
Solution To avoid this style your page in css as maximum as possible, JS should be used for interaction or making web page attractive.
Probable Problem
If you are loading lots of external script which are not related to page content like discus inside head element
Solution
Move all the external js from head to end of body if you are not doing it, or you can load them asynchronously. Refer Mozilla Synch and Async
Another Way
If you want content to be loaded from server only when some portion of it has changed then use application cache technique with this the pages will be loaded from client machine so only initial page load will take time for the first load and then it will be quite fast
Check Using Application Cache
Other Ways
Compress Javascript and CSS
Use gzip compression
there are lot of more stuff, search it you will find ocean of knowledge, reference
If you want to keep the 50px margin between the elements then change the navbar class to also be 50px
.navbar {
margin-bottom: 50px;
}
Currently it is set at 20px;
Remove this code :-
comments powered by <span class="logo-disqus">Disqus</span>
This is a problem about fusion-margin
Remove this:
#college_pages_css .questions {
margin-top: 30px;
And try this, it will work fine:
#college_pages_css .questions {
margin-top: 0;
If you want a margin, put the margin on div#normal ;)
It looks like you're having a CSS issue due to the floating elements.
try floating the nav on the left:
#normal > nav {
float: left;
}
.disqus { float: right }
and wrap the following elements in a div that is floated to the right, for exemple:
<div class="disqus">
<div id="question_sub" class="well">Do they make things easy to understand? Are they interesting?</div>
<p class="stratify" style="display: block;">tip: talk about the best/worst/average cases</p>
<div id="disqus_thread">
</div>
I ma helping someone out to make a web site but I cant find solution how to add HTML & CSS instead of images in the javascript "ContentFlow" it has been downloaded here: http://www.jacksasylum.eu/ContentFlow/
here you can see how it looks with html text:
http://portfoliodummy.medienbayer.de/ContentFlow_mb_test/
as you can see when you move the blocs the text goes up and down! I have tried to add padding to it. not to assign font-size... but it wont work. I need to know if anyone has any idea or maybe solution. I know that images are the best way to go but he wants it to be with HTML.
Thank you for your Help
.ContentFlow * {
margin: 5%; /*adjust the value as you prefer */
}
.ContentFlow .flow .item div.content {
overflow: hidden;
}
tested only on chrome/linux. :-)
This improves the situation. Not sure if further improvement is possible.
You could use
.ContentFlow .flow .item div.content {
overflow:hidden;
white-space:nowrap;
}
Then do hard breaks <br /> on the content to ensure each item fits in the box. There'll be some clipping on resize but you won't have a bounce. You could probably automate where to put the breaks with a little javascript magic too.
I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin
It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin
If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
This is not possible with pure CSS, you will need to use JavaScript