Re: How to align a div to the bottom center?

Jon Fritz · ‎Apr 02, 2014

Here's the code I mentioned. It uses vh units, so old browsers dislike it, but if you don't care about them (I don't) and you don't plan to go past 600 pixels in height for your content (right now it's set to 400 min-height for both middle ids) this should work... <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test with VH units</title> <style> body { margin:0; } #topone { width:100%; height:9vh; min-height:50px; background-color:gray; } #middleone { width:900px; margin:0 auto; height:81vh; min-height:400px; } #middle_content { min-height:400px; background-color:red; overflow:hidden; } #bottomone { margin-top:10px; margin-top:1vh; height:9vh; min-height:50px; width:100%; background-color: gray; } #topinfo, #bottominfo { width: 900px; margin: 0 auto; } </style>  </head> <body> <div id="topone"> <div id="topinfo">you can add another div here with the same width as the middleone and margin:0 auto to center it at the same rate as #middleone</div> </div> <div id="middleone"> <div id="middle_content"> Your main content here </div> </div> <div id="bottomone"> <div id="bottominfo">you can add another div here with the same width as the middleone and margin:0 auto to center it at the same rate as #middleone</div> </div> </body> </html>

Jon Fritz · ‎Apr 02, 2014

How important are IE8 and lower to you? EDIT: I know of a secret squirrel way to make it work without position:fixed (without any position attributes actually), but it won't do it in IE8 and lower (it will display more like my first code, 3 bars with white space under the third). You're also stuck keeping the content of the page within a set pixel height to avoid odd overflow issues.

Jon Fritz · ‎Apr 02, 2014

I would simplify. Is this what you're going for (copy into a new blank document)? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #topone, #bottomone { width:100%; min-height:50px; background-color:gray; } #middleone { width:900px; margin:0 auto; background-color:red; min-height:500px; } #bottomone { margin-top:10px; } #topinfo, #bottominfo { width:900px; margin:0 auto; } </style>  </head> <body> <div id="topone"><div id="topinfo">you can add another div here with the same width as the middleone and margin:0 auto to center it at the same rate as #middleone</div></div> <div id="middleone"></div> <div id="bottomone"><div id="bottominfo">you can add another div here with the same width as the middleone and margin:0 auto to center it at the same rate as #middleone</div></div> </body> </html>

Jon Fritz · ‎Apr 02, 2014

Fixed wouldn't be the right tool for this. Actually, any positioning would probably be wrong here. It sounds like you're describing the default behaviour of two centered <div> tags that are adjacent to each other in the html. If you are using any positioning other than the default "no positioning" (static) it will throw that off. Could you post a link to your page so we can see what's happening?

Jon Fritz · ‎Apr 02, 2014

Nancy O. wrote: But position:fixed won't center. Neither will position:absolute. Nancy O. That's why I use a 100% width container and then center the content within that using either text-align:center (example above), or a separate <div> with margin:0 auto and a set width within the fixed one.

Jon Fritz · ‎Apr 02, 2014

What is the ultimate goal here? If you want to have an element hold to the bottom of the screen no matter what and sit on top of any other content, you would use position:fixed... #bottom_nav { width:100%; position:fixed; bottom:0px; text-align:center; z-index:9999; } Then in your html... <div id="bottom_nav">Home | About | Contact | Portfolio</div>

Jon Fritz · ‎Mar 28, 2014

Andoyo Andoyo wrote: What the hell you have done man? You delete all of the database features without give us any alternative... Not sure if you're serious there. Here are some of the alternatives... There's the legacy extension: http://helpx.adobe.com/x-productkb/policy-pricing/dreamweaver-cc-server-extensions.html DMXZone.com's Extensions: http://www.dmxzone.com/3/dreamweaver-extensions The ability to install both DWCC and DWCS6 (which still has all the database stuff) if you are a CC subscriber: http://helpx.adobe.com/creative-cloud/kb/download-previous-versions-creative-applications.html

Jon Fritz · ‎Mar 13, 2014

Placing the favicon.ico in your root directory is perfectly acceptable and will work in all browsers without adding links in the <head>... Typical coder OCD will kick in every time you see that .ico file floating outside your images folder though. A lot of folks will move it into their images folder, then add the links to the <head> to tell the browsers where to find it, to keep their site "clean" All browsers look to your root directory first though and display any .ico found there and if there is none, they will look to your links.

Jon Fritz · ‎Feb 25, 2014

Strange mini rant aside. You can create APDivs in CC, the process is a bit more complicated than the old "click the APDiv button" method since absolute positioning has fallen out of favor for more flexible methods of laying out websites. 1. In DW, click Insert > Div 2. In the Dialogue that pops up, click New CSS Rule 3. In the new dialogue, select ID from the drop down and give the div a Name (unique to this div only) 4. Choose where you want the css written from the bottom drop down and click OK 5. In the new dialogue, choose Positioning and under Position choose Absolute 6. Hit OK, twice You will now be able to click on the new div in Design View and resize or move as you see fit.

Jon Fritz · ‎Jan 27, 2014

Like I mentioned, I'm not sure about version 12.3, but this post seems to have some info that might help you... http://forums.adobe.com/thread/1283959 As for the Synchronization issue, are you just doing a normal Put (up arrow icon) or are you attempting a Synchronize (small circular arrows icon)? Using an actual Put action shouldn't care about synchronization info and if it were missing you should have the option to Put anyway.

Jon Fritz · ‎Jan 27, 2014

Do you have the right version of DWCS6 to update that far? The Perpetual License (Disk/non-cloud version) is different from the Creative Cloud version of DWCS6 and won't allow you to update it as far. Both are separate from the current version (DWCC version 13.2 build 6466). EDIT: I'm not sure about version 12.3, but that looks like it would be a DWCS6 Cloud version number to me and wouldn't be available to a Disk/Download (non-cloud) version as an update.

Jon Fritz · ‎Jan 10, 2014

cknyght wrote: I agree, please bring back the CSS Rule Definition dialog box! At least make it an option in the preferences. I dislike having to click and unclick that "Show Set" thing too. It still exists in CC, though it's undocumented and may not stay. Hit Ctrl + Alt +Shift + P and the CSS Designer will turn into the old CSS Panel.

Jon Fritz · ‎Dec 11, 2013

An anchor to bring you to the very top of a page is redundant code bloat (albeit a very small amount). To link to the top of a page from within the page, you simply use # as the link. I'm not sure what you are saying about not being able to bring the viewer to the exact location of the anchor. I've never seen them not bring you to their exact location, except in situations where the page was too short to scroll far enough to put the anchor at the top of the browser viewport. You can still use named anchors. They weren't completely deprecated and will still validate, though they will show as "Obsolete" under HTML5 (completely valid in html 4.0 tranitional). If you create a Snippet in DW with a blank named anchor, you can use that as your "anchor button". DW still puts in the little anchor icon in CC.

Jon Fritz · ‎Nov 21, 2013

I'm definitely not seeing the same behavior in mine (version 13.1 Build 6443) on Windows 7 or Windows 8 (no 8.1 update). Maybe it was a bad install? You might try uninstalling, running the cleaner tool and reinstalling/reupdating to see if that takes care of the weirdness. Cleaner Tool: http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html

Jon Fritz · ‎Nov 20, 2013

Don't take it personally, there is nothing in your original post that points to your experience level with the program. Part of figuring out problems is verifying the basics, hence the "is it plugged in" style starting point. Have you tried clearing the program cache file/config folder yet? A corrupt program cache can cause all kinds of issues, clearing it will get rid of many of them... http://forums.adobe.com/thread/494811

Jon Fritz · ‎Nov 18, 2013

If all you have done is add an id to a table cell and it changed the layout of the table, that would typically mean you have the id defined in your css and it's picking up some setting from there. Do you have a link you could share so we could see the page in question?

Jon Fritz · ‎Nov 07, 2013

Have you looked into anything here yet? http://helpx.adobe.com/creative-suite/kb/error-u44m1p7-installing-updates-ccm.html

Jon Fritz · ‎Oct 31, 2013

This is a user to user forum, Im not an Adobe employee. I'm just a software user like you (and most of the people here), who likes to break up his day by visiting the forums. I'm not sure how the DW trial info is stored on your machine, but I would try uninstalling and running the cleaner tool here: http://www.adobe.com/support/contact/cscleanertool.html then reinstall and then try installing it again. If that doesn't work, I'm not sure if there is a way to do what you are attempting.

Jon Fritz · ‎Oct 31, 2013

Yes. Both programs can be installed at the same time. they just won't run at the same time on Windows machines (I'm not 100% on if Macs can run them concurrently, but both can be installed at the same time).

Jon Fritz · ‎Oct 24, 2013

Nope, as I said, there is no way to control what happens when a viewer clicks on a .pdf link unless you contol their machine. There is no code that will make a pdf display in a browser that is not set to display it. You can link to a PDF as if it were any other page on your site and one of three things will happen when the user clicks the link... 1. It opens in the browser, like yours is set 2. It opens in Acrobat (or some other program the user has set to read PDFs) 3. It downloads and is placed in the viewer's Downloads folder The opposite is not the case though, you can force a PDF into a file download by first compressing it into a .zip or .sit file first. Then link to that file on your site. When the viewer clicks the link, it will automatically initiate a file download where they will need to decompress it.

Jon Fritz · ‎Oct 24, 2013

PDF forms don't work well online unless you KNOW all of your viewers have their systems set a specific way. Depending on a viewer's settings, PDFs can either display in the browser, display in Acrobat or simply download to their machine. There is no way to control what happens when you link to a PDF in your web page unless you can control all of the viewer's machines that will see it (company intranet for instance). You will be much, much better off re-creating the PDF using HTML Form Elements within DW on a standard .html page. Then, depending on what your server supports, attaching that form.html page to a server-side form processing script. If your server supports PHP, I suggest a premade script like Formmail from http://www.tectite.com. It is a very robust script with many optional features for things like security, file upload, etc. Their website also gives you a ton of info on how to implement it.

Jon Fritz · ‎Oct 01, 2013

Your original post in this thread led me to believe the other solutions offered, in the thread you linked to, didn't work for you and that your problem was, perhaps, slightly different than the one being discussed there. Maybe you were just hoping to submit a bug report and didn't actually want any help with your issue, per se? The absolute best place to do that would be via the official Bug Report/Feature Request form. It's available here: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform Good luck.

Jon Fritz · ‎Oct 01, 2013

The code snippet you pasted above does not help. We need to see the code of the entire page. DW regularly places error warnings in the wrong location. Your actual problem may not be anywhere near the <head> section and DW's alarm may only be going off because the javascript forces it to recognize an error albeit in the wrong location. As a matter of fact, when I add the code above to a new blank document, I get no error at all. Could you please post the entire code of your page with the problem, or better yet, a link to the problem page online?

Jon Fritz · ‎Oct 01, 2013

As I've mentioned, a couple of times now, it's impossible to tell what may be going wrong without seeing your actual code. The behavior you describe does not happen in my versions of DW, which leads me to think it's not a bug within the program, but an actual error somewhere within your page that DW is simply marking in the wrong location (which happens pretty regularly). I've played the missing apostrophe/semi-colon/quote marks game many, many times and a new set of eyes looking at your code may be the only thing needed to find the actual problem. Don't simply trust that DW is going to ensure your code is error free. Many seemingly simple things can cause code errors in the program.

Jon Fritz · ‎Sep 30, 2013

I think Mac users could/can still get rid of it under Window > Application Frame, but us lowly Windows guys are stuck with the application frame. Still, only DW has its open files bound within that frame. Photoshop, Illustrator and InDesign allow you to move your open files onto either screen independent of the app frame without issue.

Jon Fritz · ‎Sep 30, 2013

@ Hans, I think our language barrier has clouded my reply. I am talking about the Application Frame (the gray background of DW on PCs that you can't get rid of) spanning both monitors not any individual document. While problematic, spanning the application frame across both monitors will allow you to have files open on both screens more like Photoshop or Illustrator. @mhollis55, As I illustrate in Step 4 above, I realize doing that is problematic within a normal work flow because you can't click directly on programs that are behind DW's app frame. I'm still hoping the DW dev guys will add the ability to throw files out of the application frame soon. @djhull3917, I think what you actually wanted is in my EDIT above. Opening the Code Inspector from the Windows menu allows you to have the code from a given page on one screen while the design is on the other in a dual monitor set-up.

Jon Fritz · ‎Sep 30, 2013

Without seeing the actual file in question, as long as the file works correctly, I would suggest moving that script to an external .js file. In your template, Copy everything between the <script> and </script> tags (but leave those actual tags behind). Open a new Javascript file and Paste the information there Save the javascript file to your site as a .js In the original <script> tag in the Template, add a source attribute and path to the new .js file... <script src="yourfile.js" type="text/javascript"></script> Make sure the path to the file is correct in your template and the .js is functioning Save and update Child pages If DW still shows an error, there is a different problem in the file and it's simply getting confused and noting an error in the <script> when none exists there (not unheard of).

Jon Fritz · ‎Sep 30, 2013

I've found that DW's error message tends to point to the end of a script if there is an error almost anywhere within it. Without seeing the entire code, it's impossible to say what the problem may be, or even if there technically is a problem. One way to fix it though, if you can't find an error, is to simply move the script to an external .js file, then reference that file in the <head> section.

Jon Fritz · ‎Sep 30, 2013

shunithD wrote: This is all very weird... I'm having the same problem but none of the fixes are working for me... 1. Have tried Murray's fix of deleting the <title></title> tags in this thread: http://forums.adobe.com/message/5641168#5641168 2. Have tried your fix of deleting the: type="text/javascript" from the opening <script> tag. 3. Have tried Jon's fix of the semi-colon before the closing </script> tag. Nothing works except deleting the closing tag itself! However, right now, it's crazy. The error is pointing to a blank line! And the message reads: "There is a syntax error on line 83. Code hinting....." Most weird.... Could you start a new thread on yours? I'm guessing there is an error in your code, but would need to see more in order to help. Please start up a new thread with a link to your malfunctioning page and we can take a look.

Jon Fritz · ‎Sep 30, 2013

That is something I've always thought was strange about DW. You're stuck within the application frame for PC users where programs like Photoshop, Illustrator and InDesign allow you to throw your work onto any screen regardless of where the application frame is. It's annoying, but you can't move pages, css or script files onto your other screens unless you first increase the size of the application frame to cover both. 1. Make sure your application frame is not maximized and stuck to one monitor. Hit the Restore button in the upper right if it's there (double square icon) 2. grab the edge of the app frame and drag it into the second monitor 3. Rearrange your tabs and pallets to your liking 4. Get ready to be frustrated by the relative inability to click background program windows efficiently EDIT: If you just want to separate the code from the design on a single page, go to Window > Code Inspector and you'll have a pallete with the code from the page you are working on in it.

Jon Fritz

Jon Fritz

Activity

Re: How to align a div to the bottom center?

Re: How to align a div to the bottom center?

Re: How to align a div to the bottom center?

Re: How to align a div to the bottom center?

Re: How to align a div to the bottom center?

Re: How to align a div to the bottom center?

Re: OT: Bindings panel, Databases, and Server beha...

Re: How to create favicon in dreamweaver cs5 and u...

Re: layout and ap div in Dreamweaver CC

Re: Dreamweaver CS6 will not update.

Re: Dreamweaver CS6 will not update.

Re: On Dreamweaver CC how do I get to the css rule...

Re: Dreamweaver CC Named Anchor Tag Missing?

Re: Dreamweaver Links

Re: Dreamweaver Links

Re: Dreamweaver CC Named Anchor Tag Missing?

Re: UPDATE FAILURE

Re: Test DreamweaverCC without damaging the versio...

Re: Test DreamweaverCC without damaging the versio...

Re: Help uploading (or linking to) a fillable PDF ...

Re: Help uploading (or linking to) a fillable PDF ...

Re: Why am I getting a syntax error on the </head>...

Re: Why am I getting a syntax error on the </head>...

Re: Why am I getting a syntax error on the </head>...

Re: How do i setup a dual screen workspace on Drea...

Re: How do i setup a dual screen workspace on Drea...

Re: Why am I getting a syntax error on the </head>...

Re: Why am I getting a syntax error on the </head>...

Re: Why am I getting a syntax error on the </head>...

Re: How do i setup a dual screen workspace on Drea...