I have a Facebook like button on my site. The site, however, uses primarily content that's centered on the page, and the button is stubbornly left-justified. I've set a custom width on the button to get it more or less centered, but of course the width changes, and sometimes the nominal width includes more or less white space. This makes it look like it isn't centered.
I think if I could get the whole 450px wide by arbitrary height (changes if profile pics of people who liked it appear) region to be shaded it'd look better and feel less off-center. How is this possible?
I just put a table element around the button:
<table bgcolor="DDDDDD" border="1"><tr><th>
<!--Facebook like button stuff goes here-->
</th></tr></table>
I ended up just leaving a border around it without even using the bgcolor attribute. I guess bgcolor is deprecated and using html tables is bad form and there's probably a way sexier CSS solution, but this got the job done.
Another probably better option, and what I did in the production site, was use an AddThis box and a bit of css to set the width of the addthis div and then set the margins on each side to be automatic (and therefore equal, centering the div).
Related
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">
I am attempting to make a page shrink to fully fit a mobile screen but with an image on one side, and an iframe form on the other, it is being pushed to the right on a phone, also does the same with a long header. I have tried every "meta viewport" combination I have seen on here and nothing is working. Is this possible or am I missing something? Thanks! There's a lot of code so not sure what should be posted here.
Link to the page: http://marketing.bigkiteconsulting.com/acton/fs/blocks/showLandingPage/a/9748/p/p-0028/t/page/fm/0
Ok, so i gather your not wanting the form to be above the div with the image and paragraph? that might give you the best look.
The main problem is the image, you need to remove the width and height from the image, and set the width to a percentage using css
<img src="http://marketing.bigkiteconsulting.com/cdnr/57/acton/attachment/9748/f-0037/1/-/-/-/-/image.jpg" border="0" style="width:100%;">
As far as the form, its too wide itself. I would suggest wrapping the last name underneath the first name, and make the email input box smaller, however if that iframe is coming form a third party there's not much you can do to it unless CORS is enabled. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
I know how to make it look like a table, and I know how it would grow when info is added, but the problem is the table's border is rounded and has a header area to it. I was thinking of making it a background image but I don't know how I could get it to grow while keeping the rounded corners..
Image link:
http://i51.tinypic.com/15yyhe0.jpg
Any ideas would be very helpful
To make it grow you have to set the rounded corners as separate backgrounds. In html 5 this is a lot easier, however for the current usage you can check out here
This is an old site, that still works. This can also be done with javascript that doesn't use any images, there are lots of options depending on your end goal.
Are you wanting to grow width or height? Adding columns or rows? Are you going to use <table> or <div> tags?
Or are thinking of using accordions that expand upon user click JS Accordions