Can't create responsive horizontal layout for email sign-up - html

I am trying to create a responsive horizontal layout for an email sign-up form which should look like the image below (image taken at browser width 1024px):
The problem I keep having is that the input button keeps overlapping with the location select field on browser resizing, and the dimensions of the email address input field cannot be modified at all.
I have tried a number of things including setting the widths of the elements individually as percentages and setting to display:inline-block.
I've also tried setting the parent elements to display:table and the child elements to display: table-cell, but this hasn't worked either.
As I am working on top of quite a few layers of legacy code this has proven to be exceptionally difficult - divs nested several levels down and numerous higher level "clearfix" divs. I am not sure how far the latter is influencing things.
Unfortunately the html markup is rather dense in the js fiddle I've created, but I wanted to show as much as possible of the relevant area as shown in Chrome inspector.
I have grabbed the most relevant html markup and css using a chrome plugin and imported in js fiddle: here
The js fiddle represents my latest attempt (of many) using the table display properties for the layout - as in the original shown in the image which I cannot recreate.

Related

PrinceXML full page background with page numbering

PrinceXML is really great and powerful but I’m offended by the way it manages header/footer.
I am trying to have 3 columns with different background colours to run on the full page height. Not a problem until you add a footer to include the page’s number.
In order to show the footer you need to add a bottom margin to the #page, but doing so cut the columns. I tried to use an absolute position without any luck.
Is there anyone who has some experience with complex layouts and page numbering with PrinceXML ?
As a DocRaptor developer, we run into these kinds of problems all the time. Prince headers and footers live INSIDE the page margins. This provides a lot of useful power, but sometimes complicates things, as you've noted.
Without seeing your exact HTML, I'd suggest the following:
Continue experimenting with a zero page margin and absolute positioning and a negative position/margin on the element inside the footer. I think this would work. It might work better if you used a header element. Prince gets weird and buggy on the edges when you do this kind of tricky stuff.
Alternatively, if your column widths are the same for every page/document, try faking the column background colors by using a background-image on #page.

Adjusting length of HTML page depending upon the content

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.

Some margin I don't know where is

I'm creating a website (http://mat3.us/ba/) and as you can see If you access it there is some kind of border, I don't know, It's like the content width is not 100%, only the menu. I tried to find what It is but I couldn't.
It looks like you're using Bootstrap. That issue happens when you don't have containers or rows nested correctly.
In your case, the issue is in section#contact. The first div inside #mapa is a .container, but its sibling is a .row. That messes up the Bootstrap grid system, and causes your layout issue.
I figured this out by going into the browser's Inspect Element, and deleting elements (in the Source Tree, you can select and element and hit Delete/Backspace to remove it) until the issue cleared up. I then Undo the delete, and delete stuff inside it. Repeat until the issue has been identified.
This link does a great job of explaining the grid system in more detail.

Aligning two elements side by side and forcing them to stay on level

CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported

CSS Button Action To Hide Text

I want to build a website that has 4 buttons on the left, which change the text in the main window of the site (traditionally that they would take the user to another seperate page).
What I would like it to do is not have to go to another page when the button is click, but rather to hide the text that is in the main window, and change it to the text that is for that new page.
Is there a way to hide the text, and show different text, using CSS?
Thanks for any help.
It is possible with CSS 2 and no javascript. I made an example for you to see here:
http://jsfiddle.net/theguywholikeslinux/QQrFy/
I haven't actually tested it for browser compatibility but I believe it works in most browsers that support css 2 and positioning reasonably well (including older versions of IE). Accessibility will be perfectly fine as long as you don't mind screen readers reading each page at a time all in one go. (although some confusion might be caused by the links).
Essentially there are 4 divs that all have an id set and a specific width, height and positioning (essentially they are all on top of each other). The links are href="#id#" and when you click them the relevant div comes to the top of the stack so you can see it.)
Only downsides are it can cause weird scrolling problems (e.g links at top of page, content to change all the way at the bottom) and you have to have the same fixed size for all of the elements. So if you want to have pages like this that are going to be more than ~700px tall then your pages that only include 200px of content will still scroll down for another 500px.
You cannot do this in css2! You need a javascript
Update:
You can do it with css 3. Please see example: http://jsfiddle.net/RUDyw/
found here: http://dev.opera.com/articles/view/css3-show-and-hide/
No, you need javascript. JQuery or something of the likes will make it easy.
$('#button1').click(function() {
$('#mainwindowtext').text("new text");
});