PDA

View Full Version : is it an alignment issue?


RainForest
10-24-2012, 04:51 PM
Hello,

I've recently redone our website, and yesterday went to make a small adjustment of adding next and back buttons to the bottom of a couple of pages.

IE, Chrome, and Opera all display the pages correctly, but no matter what I try, Firefox refuses to display the arrows div correctly.

Can anyone identify the problem?

http://ow.ly/eJCfN

gentleone
10-24-2012, 06:36 PM
Can anyone identify the problem?
Yes... the way it's coded doesn't make sense and is causing troubles. Also in Chrome on the Mac. Didn't check other browsers.

Anyways... don't use hotspots for normal links. Actually use it only where it's intended for. Maps!!!

I see also that, besides the arrow buttons, you have also regular 'next' and 'prev' links. Why?

I can give you some code how I would do it, if you want.

RainForest
10-24-2012, 08:13 PM
I used hotspots because I didn't want the buttons to be underlined.

I added "next" and "prev" because I often see that on other websites, and in my line of work we are redundant.

Yes, thanks, I would appreciate any code suggestions you have that might clean it up. It may seem messy to you, but compared to the old site, it's clean as a whistle!

gentleone
10-25-2012, 04:31 PM
I used hotspots because I didn't want the buttons to be underlined.
There is a css property for that.

#arrows a { text-decoration: none }


Okay, this you have:

<div id="arrows">
<p><img src="../images/arrowLeft.gif" alt="left arrow" width="50" height="50" border="0" usemap="#arrowLeft" class="noShadow" />
<map name="arrowLeft" id="arrowLeft">
<area shape="circle" coords="25,24,25" href="../index.html" alt="back arrow" />
</map>
<a href="../index.html">prev</a> | <a href="newsPage3.html">next</a> <img src="../images/arrowRight.gif" alt="right arrow" width="50" height="50" border="0" usemap="#arrowRight" class="noShadow" />
<map name="arrowRight" id="arrowRight">
<area shape="circle" coords="29,23,27" href="newsPage3.html" alt="next arrow" />
</map>
</p>
<!-- end arrows --></div>

This is how I would do it:

<div id="arrows">

<a href="../index.html" class="prev">prev</a>
<a href="newsPage3.html" class="next">next</a>

</div> <!-- end arrows -->

CSS:

#arrows {
height: 52px;
width: 200px;
float: right;
overflow: hidden;
clear: both
}

#arrows a {
display: block;
float: left;
width: 30px;
height: 52px;
margin: 0;
padding: 0;
text-decoration: none;
line-height: 52px;
color: #111
}

#arrows a.prev {
margin-right: 20px;
padding-left: 60px;
background: url(../images/arrowLeft.gif) no-repeat left center
}

#arrows a.next {
padding-right: 60px;
background: url(../images/arrowRight.gif) no-repeat right center
}


Example in action:
http://cssdesk.com/LWQqP

I didn't really test it in the browsers, but this is very basic CSS, so my guess is that you won't have any issues with it.
There is even a better way then this by using the CSS sprites technique for those background images, but perhaps another time :)

RainForest
10-25-2012, 04:51 PM
gentleone, thank you very much for the coding sample and tutorial.

I thought about what you said overnight, and came to realize where you were leading with your questions about why I designed the divs the way I did. Of course you were right - I just needed the nudge. And messy code is the main reason I re-designed the site in the first place, so the last thing I want is more messy code!

I did a little re-writing this morning, just when you were posting your reply. I removed the div, and just inserted the arrows with their links. Nice & clean.

I've copied and saved your code for future reference. I really appreciate you helping me. Thank you.

domedia
10-25-2012, 05:10 PM
Even better is to understand what the code does, than you don't have to save it!

RainForest
10-25-2012, 09:00 PM
I'm with you on that one, domedia! I think I'm understanding it well enough. REMEMBERING it, however, is an entirely different thing! ;-)

gentleone
10-27-2012, 06:44 PM
gentleone, thank you very much for the coding sample and tutorial.
You're welcome!

I thought about what you said overnight, and came to realize where you were leading with your questions about why I designed the divs the way I did.
I didn't mention anything about the 'arrows' div. in fact you needed that div if you wanted to group the arrow buttons and place them at the far right.

I did a little re-writing this morning, just when you were posting your reply. I removed the div, and just inserted the arrows with their links. Nice & clean.
Just a little nit picking :) The align attributes are deprecated. To position the buttons you should use CSS instead.

I've copied and saved your code for future reference.
Just do whatever you want to do with it. Eat it, throw it down the drain... I don't mind :D

RainForest
10-29-2012, 04:50 PM
Just a little nit picking :) The align attributes are deprecated. To position the buttons you should use CSS instead.


OK, so I took out the HTML and added a new CSS rule to each of the arrows. I've always struggled with alignment, so I was happy that the HTML worked in this case. With the new rules, one of the arrows isn't cooperating. I tried text aligning, and floating, but neither works. What am I doing wrong? http://ow.ly/eQSAy

gentleone
10-29-2012, 05:18 PM
If you want it how you had it before with the align attributes, but now with css then this is a way:
http://cssdeck.com/labs/vzkwexwz/0

I removed the arrowLeft and arrowRight classes, cause I saw you didn't used them and I needed classes on the <a> tag and not on the <img> tag in order to get them floated left and right.

In some cases I make a standard rule like 'fl-left ' and 'fl-right' in my css

.fl-left { float: left }
.fl-right ( float: right }

cause you need it a lot and instead of decalring this CSS property on the css selectors in your stylesheet each and every time you need it and thus repeating yourself, you now only have to give the element or tag in your HTML a (extra) class if you want to float it left or right.

RainForest
10-29-2012, 05:38 PM
Yes, I do have and use specific .fltlft and .fltrt classes throughout the site. I didn't use those classes in this case because I also need these images to have no shadow (I've designed all images to have a shadow), so I modified the .noshadow rule to make a new rule that includes a left (or right) float, and no shadow.

I removed the arrowLeft and arrowRight classes, cause I saw you didn't used them and I needed classes on the <a> tag and not on the <img> tag in order to get them floated left and right.But I did use them! (see attached screen shot of live code)

I've added your .arrow rule to the .leftArrow and .rightArrow rules, and that seems to have done the trick. I had not defined a display: block rule, and that made the difference.

Thank you again!

gentleone
10-29-2012, 05:44 PM
Yes, I saw you had those classes in your HTML, but through the web developer tool, I saw no CSS assigned to those buttons. `there were classes, but no CS... or I missed that

RainForest
10-29-2012, 05:57 PM
I spoke too soon. Images still not working right. I'm trying to figure it out now...

The CSS is in the main style sheet, not on the individual pages.

RainForest
10-29-2012, 06:08 PM
It all seems to be working now. I created and applied an ID for each arrow so it would pick up the no shadow and alignment CSS rules, then changed the class to .arrow.

Can you explain why the .arrow class with its display: block property is necessary for the alignment to work?

gentleone
10-29-2012, 07:04 PM
The CSS is in the main style sheet, not on the individual pages.
If I inspect an element with the browsers inbuilt web developer tool, then I can see which CSS styles are declared to that element no matter in which stylesheet they are, if they are on page or even inline. It just shows the styles, but like I said I might have missed it.

Can you explain why the .arrow class with its display: block property is necessary for the alignment to work?
I see you have the classes still on the img tag, so this made me think and I was wrong with my previous demo.

I've updated the demo (http://cssdeck.com/labs/collab/vzkwexwz/0) and I now have only the 'fl-left' and 'fl-right' classes on the img tags and this just works. I don't know what i was thinking by adding 'display: block' because an img is the only inline element that doesn't need that, cause the float property was initially invented for the img tag; to float images left or right (now we build complete layouts with it, but this is just actually a hack, cause there is no better alternative)

Anyways... for all the other inline elements (https://developer.mozilla.org/en-US/docs/HTML/Inline_elements) you will need to change the default 'display: inline' to 'display: block' in order to float it.

RainForest
10-29-2012, 08:34 PM
OK. I think I've got it working AND clean. I deleted the .arrow class, then updated the #arrowLeft and #arrowRight rules so they just float left/right, and then applied the .noShadow class. They're displaying and working correctly, and the code is straightforward.

Thanks again, gentleone. I try to learn as much as I can on my own, but there are just some things I have trouble with, and alignment issues are probably at the top of that list. I also have a tendency to make things a lot more complicated than they need to be! :-p

Your time and assistance in helping me to understand is much appreciated!

gentleone
10-31-2012, 03:45 PM
Thanks again, gentleone. I try to learn as much as I can on my own, but there are just some things I have trouble with, and alignment issues are probably at the top of that list. I also have a tendency to make things a lot more complicated than they need to be! :-p
You're welcome!
If you understand fully the basics of CSS, it will make things alot easier:

normal document flow
CSS box modal
know which elements are inline and which elements are block-level by default
floats and the different ways of clearing them

I once found a good, but easy to understand, tutorial about CSS positioning for beginners. I will have a search if I can find it again.

Another thing. This is what people see on monitors with a width resolution of 1024px and lower. I know there are not much desktop monitors anymore with this resolution, but this is what people also see on an iPad 1 & iPad 2. Your content area drops below the navigation.

https://www.dropbox.com/sh/562d1qogmufbas7/42M68nMGDn/screenshot-cityof.jpg





...

RainForest
11-01-2012, 10:30 PM
You know, I had the same problem with the old site on my Mac. The old site had fairly narrow, fixed-width pages vs the fluid ones I've got on the re-design. Never did figure out why it displayed wrong on Mac, and don't really know what to do about it now. I've already got the front page sidebars at a small percentage - especially the right sidebar - and I did set a minimum width for the page, specifically so it wouldn't do that.

I do plan to add some coding for devices, but I have to learn how first, and I believe DW CS6 has streamlined that from CS5.5 (what I have), so I might wait until I can get CS6.