habgyp
-
Posts
10 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by habgyp
-
-
It's worth remembering that the img tag is an inline element tag and treated like a text unless it has display: block in the style. If the h3 and img tags were both inside a div which had text-align: center it would align both the text and the img.
Thanks, Wickham! I appreciate your feedback; but the problem I have with that explanation is two-fold:
#1 - "Text", in and of itself, doesn't refer specifically to in-line or block level elements. As proof, the <h3> tags, which all of the text in the above example is a part, are obviously block level elements. And yet, there is no doubt that they are still "text". I could have put the text in a <p> tag and they would still be "text". This indicates that in-line/block level are irrelevant to whether or not the "text" selector applies.
#2 - "Text" and "images" are NOT the same thing... especially from a computer standpoint. It seems illogical for an "image" - <img> - to be affected by a selector that refers specifically to "text" - in this case, text-align:center;.
Again, I appreciate your answer and I hope my response didn't come across as belligerent - that was not my intent. I'm not even disputing that what you said was true. CSS might very well interpret the selectors that way - I'm certainly not arguing that point, as I have no idea. Again, my main issue is that if, in fact, it is interpreting an <img> element to be "text", then that is counter-intuitive to logical programming.
This has been my problem when trying to wrap my head around CSS. I keep hearing, "it makes sense". And, for the most part, I agree with that assessment. However, when I run into things like this it becomes a bigger problem than just the specific exception. The exceptions seems unnecessary. And unnecessary exceptions make things harder to learn - they start to become a case of "the exception defines the rule". I'm of the opinion that things like CSS should be well beyond that in this stage of development.
But that's just me. I tend to be a fly in the ointment sometimes. Of course, I could be missing something altogether here. Someone may look at my code and immediately spot where I coded something wrong or where I am missing some other aspect, but my gut feeling is that I'm going to keep running into things like this.
Anyway, sorry for being such a downer, but I would prefer to focus on learning CSS from the standpoint of trying to do something based on the rules presented. Then, if it doesn't work, have someone show me why I did something wrong (usually, that I was unaware of), instead of finding out that I have to rely on an "official" hack (from a code standpoint) to make the code work.
-Damon
-
Thanks for the responses guys!
I've continued to mess around with the code using both the suggestions you guys gave me as well as just experimenting on my own and I came across some interesting things:
#1 Eddie's first solution is close to accomplishing what I intended (aside from centering the content in the DIV). However, there is a hidden problem there... more on that below.
#2 Andrea's solution works perfectly (again aside from the centering issue). Though, Eddie's point about the .column and .row concept helping newbies switch over is a valid one.
#3 I accidentally solved my centering issue with the images by solving it on the text. Apparently, when I added the text-align:center to the .column CSS, the IMG in that DIV "inherited" the centering property. I can't figure out why, since the text was in an H3 tag & the IMG was not inside of it; but it solved my centering problem, so I guess that's a positive.
#4 IE isn't the only browser that has weird (read: illogical/un-intuitive) quirks. For whatever reason, Firefox doesn't like to "make room" for IMGs that aren't there - even if the dimensions are explicitly stated in the IMG tag. In the end, it's not a huge problem, but can be a pain in the layout stage. Also, it seems Apple doesn't think people using Windows machines should be able to use Safari? I'd like to make sure my layouts are compatible on Safari just like I do with the "Big 3" but I don't own a Mac, so...
#5 Back to Eddie's solution above, the .column DIVs don't actually display inside of the .row DIVs - at least by default. I was going to center my new CSS "table" and figured I could do it by adding the margin: 0 auto; CSS to the .row CSS but it didn't do anything. I then decided to put a border around the .row CSS to see what was really going on. Sure enough, the .row DIVs were collapsed and the .column DIVs were displaying outside. This goes back to my earlier post. Using Ben's solution of using overflow:hidden in the .row CSS pulled the .column DIVs back inside, but I'm still having trouble wrapping my head around why this is necessary.
So there you go. That's what I "discovered". I hope it was as informative to someone else out there as it was to me. Also, I want to thank Eddie & Andrea for their help - as well as Ben.
Oh yeah, if anyone still has questions about what I did or can explain why any of the above happened... go for it!
-Damon
-
Hey, guys, thanks for the replies!
Sorry, it looks I didn't really explain what my bottom line problem was. What I'm trying to figure out is how to get everything to be centered. I already knew how to replace the columns & rows with CSS and even center the "table" as a whole (through auto margins). I'm really trying to find a CSS replacement for the align=center part of the <td>. I know I can style the text with text-align:center; but is there an easy way to get the images to be centered within their divs?
Sorry, I probably should have stated what I was actually trying to figure out from the start
. I guess I posted the whole table dilemma to put things in context and also double check to make sure there wasn't a different way of laying everything else out. But a little more clarification on my part would certainly have been helpful. -
I know that the correct way of laying out anything but data is to use CSS & not html TABLEs but I'm finding it difficult in certain situations to do in a way that isn't... umm.. more cumbersome. I imagine this is just a matter of my lack of familiarity with CSS, but it seems like some tasks just aren't very intuitive.
For example, see the code below. With a table, it's very easy. With CSS, it doesn't appear to be so quick/easy. Of course, I would love to be wrong here, so if anyone has any suggestion, I'd love to hear it. Thanks in advance!
<table> <tr> <td align="center"> <a href="gallery1.htm"> <h3> Gallery #1 </h3> <img src="pic1.jpg" width=300 height=200> </a> </td> <td align="center"> <a href="gallery2.htm"> <h3> Gallery #2 </h3> <img src="pic2.jpg" width=300 height=200> </a> </td> </tr> <tr> <td align="center"> <a href="gallery3.htm"> <h3> Gallery #3 </h3> <img src="pic3.jpg" width=200 height=300> </a> </td> <td align="center"> <a href="gallery4.htm"> <h3> Gallery #4 </h3> <img src="pic4.jpg" width=200 height=300> </a> </td> </tr> </table> -
I just looked over your code and recreated the page. I left comments on all the changes I made.
Thanks, Andrea! Your changes/comments were very helpful. Much appreciated!
-
In this case, setting an overflow property allows that container div to properly enclose floated elements.
Thanks, Ben! That did it.
I guess I'm still unclear on why this is necessary. I don't get why there is overflow in the first place. It seems to me, from a logical standpoint, that if something is contained in an element it should stay in the element by default. Now I understand that 'floating' an element takes it out of the normal flow but it still seems to me that it should remain constrained to its parent element (in this case, another DIV).
I would think the most useful way for 'float' to work would be to change block level elements so they functioned like inline (ie text, etc). I guess my ignorance is showing here, because that's probably not what it's designed to do - and/or there's something else that is designed to do that...
-
One other thing I often do: If you have a containing div that is getting collapsed, adding "overflow:hidden" usually fixes that.
I'd say that works about 90% of the time -- the only time it doesn't work is if you have an element within that div that is relatively or absolutely positioned outside the container, and using overflow:hidden would hide that element.
Thanks, Ben. As you can see from my style-sheet, I don't have anything in absolute or relative except the "container" ID - which everything else is inside of.
I must confess I am unaware of overflow:hidden. What is exactly is it supposed to do?
-
Thanks for the response, Andrea!
Unfortunately, "clearing" the floats is not the problem. I was aware that was necessary and already had it in place. Here's the code and links to two different versions so you can see what I'm experiencing:
EXAMPLE #1
http://habitualgypsy.com/test/template_ex1.htm
This is how the spage looks with the the basic layout. There are the 4 links to photo-albums that I would like to have two per row. The style sheet is as follows:
@charset "UTF-8";
/* CSS Document */
* {
margin:0px;
padding:0px;
}
#container {
position:relative;
width:742px;
margin-top:10px;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
border-width:1px;
border-style:solid;
border-color:#000000;
background-color:#228b22;
}
#header {
background-color:#9acd32;
height:76px;
border-top-width:0px;
border-right-width:0px;
border-bottom-width:1px;
border-left-width:0px;
border-style:solid;
border-color:#000000;
}
#logo {
float:left;
width:100px;
}
#menu {
clear:both;
background-color:purple;
}
#content {
clear:both;
border-top-width:1px;
border-right-width:0px;
border-bottom-width:1px;
border-left-width:0px;
border-style:solid;
border-color:#000000;
background-color:#ffffff;
background-image:url('frog_silhouette.png');
background-repeat:no-repeat;
background-position:center;
}
#footer {
clear:both;
background-color:#9acd32;
}
.nav {
float:left;
color:#9acd32;
background-color:#228b22;
}
.album {
padding:10px;
}
body {
background-color:#006400;
}
h1 {
color:#228b22;
padding-top:5px;
padding-right:5px;
padding-bottom:0px;
padding-left:5px;
font-family:Georgia,Times New Roman,Times,Serif;
font-size:40px;
font-style:bold;
text-align:left;
}
h2 {
color:#228b22;
padding-top:5px;
padding-right:5px;
padding-bottom:0px;
padding-left:5px;
font-family:Georgia,Times New Roman,Times,Serif;
font-size:26px;
font-style:bold;
text-align:left;
}
h3 {
color: #228b22;
font-family:Georgia,Times New Roman,Times,Serif;
font-size:19px;
padding-bottom:5px;
padding-left:5px;
text-align:left;
}
h4 {
color:#228b22;
padding-top:2px;
padding-right:2px;
padding-bottom:4px;
padding-left:8px;
font-family:Georgia,Times New Roman,Times,Serif;
font-size:12px;
font-style:bold;
text-align:left;
}
p {
color: #000000;
font-family: Geneva, Tahoma, Verdana, Sans-serif;
padding-top:0px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
}
img {
border-color:#228b22;
border-style:solid;
border-width:1;
}
a:link {
color:#9acd32;
font-family:Georgia,Times New Roman,Times,Serif;
text-decoration:none;
text-align:left;
}
a:visited {
color:#9acd32;
font-family:Georgia,Times New Roman,Times,Serif;
text-decoration:none;
text-align:left;
}
a:active {
color:#ffff00;
font-family:Georgia,Times New Roman,Times,Serif;
text-decoration:none;
text-align:left;
}
a:hover {
color:#ffff00;
font-family:Georgia,Times New Roman,Times,Serif;
text-decoration:none;
text-align:left;
}
EXAMPLE #2
http://habitualgypsy.com/test/template_ex2.htm
The html is exactly the same. The only changes to the CSS in the style-sheet are as follows:
.album {
float:left;
padding:10px;
}
h3 {
color:purple;
font-family:Georgia,Times New Roman,Times,Serif;
font-size:19px;
padding-bottom:5px;
padding-left:5px;
text-align:left;
}
img {
border-color:purple;
border-style:solid;
border-width:1;
}
The only reason I changed the CSS on h3 & img was so that you could see the text & image border when it broke out of the DIV with the white background.
I'm am very perplexed...
-
I have encountered a perplexing phenomenon on a site I'm working on that I have not run into prior.
To start, I've created a simple template with one main DIV (ID="container") that I've centered through left/right margin values of auto. The "container" DIV is then divided into four DIV's stacked on top of each other. These ID's are as follows: "header", "menu", "body" & "footer". Pretty straight-forward stuff and all the basic formatting works just peachy. Even when I put some content (headers, paragraphs, links, images, etc.), everything still seems to work as one would expect. I have several nested DIV's within the ones above (ie within the "menu" DIV, each link is in a "nav" DIV).
The problem occurs when I add "float:left" to any of my ID's or CLASSES in my style-sheet. The browser then collapses the containing DIV & kicks the nested DIV's outside. Strangely, I can set a height to the CLASS or ID and it will pull the nested DIV back inside (assuming the height parameter is large enough to contain the content in the nested DIV).
My understanding is that an element (block level, for instance such as a DIV) *should* stretch (vertically) to accommodate content unless set to a specific value. The behavior I'm experiencing seems similar to what you would encounter if you forgot to close DIV tag somewhere and it kicked the content out of its containing element. In my case this is *NOT* what is happening... the html code is error-free; the problem doesn't happen until the float:left CSS is added to the ID or CLASS.
I am seriously perplexed. Anyone have a clue what I am doing wrong?
Replacing tables
in CSS
Posted
Thanks, Wickham!
I think I was a bit unclear, as well, about the in-line/block issue. Both <p> & <h...> elements are block even though for some reason I implied <p> was in-line. Your clarification makes that part of my point irrelevant, anyway. It seems we were on the same page there.
What I'm really having the problem with isn't fixing trying to center the content in the DIV. Yes, that was my initial problem. And it is now resolved. My problem is that how it was fixed shouldn't logically have worked. Here's the relevant part of the html again:
<div class="column"> <a href="gallery1.htm"> <h3> Gallery #1 </h3> <img src="pic1.jpg" width=300 height=200> </a> </div>As you can see, the IMG element is not part of any "text" element; it falls outside of the H3 tag. So when I changed the CSS for .column to include text-align:center, I can't see why it should logically affect the IMG element as well.
And, yes, I'm well aware of the irony that I'm "arguing" that what resolved my problem shouldn't be "right"... even though it worked. And, yes, I know I'm really going off on a tangent here. But I'm more concerned with understanding CSS by figuring out how it works. That way I can anticipate its behavior and get the most out of it.
So, I guess what I'm really getting at is that I'm looking for one of two things:
1) somewhat points out that I'm missing something in my code that is making the IMG centered that isn't simply the text-align:center (and I'm still too green to catch it)
or
2) yes, a selector that specifically says "text" will affect an IMG element; and, no, that doesn't "make sense" - but it is a quirk of CSS (at least the current version)
I honestly would prefer #1. Being ignorant about something (then being educated) is far more appealing than the the idea of code not being implemented in a consistent manner.
Sorry for rambling on with a psuedo-rant. I'm not upset, or anything - I just like to really understand things when I use them; and if they don't make sense to me, it's kind of one of my pet peeves. That's just me, anyway.
-Damon