[SOLVED] Why is my div being stupid?

[FridayRain]

Although you may think you are providing enough information to allow us to help you debug this, you haven't. And that's why bronzemonkey has been trying to get to the bottom of this (with a hell of a lot of patience, I might add)

 

Bronzemonkey didn't try to get the bottom of anything. He didn't even know what was going on. First he rips me by saying I got ahead of myself and should've "sorted this out" before I started adding the PHP. Then he says my most recent link stills displays incorrectly, which is precisely my point of revisiting this thread and posting that exact problem. Next he says it's a CSS issue if it doesn't display correctly without the PHP. In fact it's the opposite, which he would have learned had he read my newer posts.

 

Anyway, I had it on Strict 1.0 the whole time prior to trying it on my webhost. I'll look into HTML 4.1, and currently I'm adding a:active where needed. I know I'm echoing HTML and it's horrible practice. I'm still working on cleaning up all of my code. I wanted to get a barebones feel on my web space, and to get something up so I can get feedback from friends and such.

 

I'll check in later with progress.

[bronzemonkey]

How can we know what is going on when you aren't being clear about what we are seeing or what you did?

 

- You said that you had removed the php and it was working...well how was I to know that what you were showing us was not the "working" static version?

- You've been going on about how it worked fine offline but doesn't on your webhost...and now you seem to be saying that prior to putting it on your webhost you changed the doctype from xhtml 1.0 strict to xhtml 1.1 strict! That's a pretty big deal because, as dbrimlow pointed out, you're not even using xhtml 1.1 strict properly.

- Look back at the start of this topic and you don't even know how to clear floats or what setting {height:100%; width:100%} does - and looking at the current css file you still haven't properly cleared the floats and you still seem to be using {width:100%} where {width:auto} would be more appropriate.

 

Clearing floats - http://www.positioniseverything.net/easyclearing.html

 

Perhaps get around to trying to deal with your css issues and doctype, as suggested, rather than being rude to people who have helped you but you weren't listening.

[FridayRain]

Yeah yeah, it's so fun to come and rip my code apart and express how mean I'm being to people "trying" to help. Make yourselves feel so good about your kindness and PHP ability.

 

My bad. I didn't specify that I removed the PHP in the offline version only just as an experiment. I didn't see a need to upload the "working" version if I wanted people to look at what's going on. Wouldn't that be pointless?

 

This weekend I'll have a lot of time to straighten things out. Apologies for hurting anyone's feelings.

[dbrimlow]

Why does #puddle have to float left and not #clouds? Or do both then?

 

Because you only need to float the containing elements.

 

You need to understand how floats work. Nothing can eff up a layout more than using floats without understanding them. Here is the perfect tutorial: http://css.maxdesign.com.au/floatutorial/index.htm

 

Also, you can, and should, echo html, that's part of the beauty of php, but not until your layout, markup, doctype and css are perfect first.

 

Anyway, I had it on Strict 1.0 the whole time prior to trying it on my webhost.

 

Strict what? If it was XHTML 1.0 Strict, served with a media type of text/html, but using that incorrect mime type charset of content="application/xhtml+xml;charset=iso-8859-1" would mess up your design anyway when you added php ... because it was expecting XML. media type and mime type are interconnected within xhtml. It is unforgiving if you get it wrong.

 

Again, XHTML should ONLY be used if you are parsing XML. What is happening to you is EXACTLY why the whole XHTML vs. HTML debate got started ... people began to see the flaw in using XHTML as text/html.

 

People are stubborn and prone to defend something that may seem right or may happen to work for them ... until it doesn't. XHTML should never have been permitted to be served as text/html ... and it certainly should never have been branded the html replacement. Because it is wrong. XHTML served as text/html simply converts the document to HTML anyway!!

[FridayRain]

Please step down from your valid XHTML high horse a little and give people a break.

[dbrimlow]

You really are an ass, aren't you?  Go figure out your own solutions since you obviously can't get over your own brilliance.

 

Here's a clue for free ... it wasn't the DIV that was stupid.

[FridayRain]

I'm not an ass. Just about every reply of yours mentions XHTML being served wrong and therefore invalid, and I haven't even worked on it yet. I get it and I will fix it. If I didn't know about your big rant thread about the very topic, I wouldn't be so overwhelmed by it. It's suffocating. It's like your religion or something. Yes, I know, I have all these XHTML issues. The wrong DOCTYPE, etc. Let me take what you've told me to fix and actually fix it and get back to you with an update.

 

 

Thanks for the insulting clue. Instead of calling you a hypocrite for telling me not to be...

 

rude to people who have helped [me] but [i wasn't] listening

 

...I'll just suggest you not be rude to people you're trying to help.

[FridayRain]

And what brilliance? If I were a brilliant web designer, I wouldn't be here, right? Everyone was a novice at one point.

[FridayRain]

Just to clarify, can I use XHTML Strict 1.0 if I change the charset, or can I not use any XHTML doctype because I'm not using XML?

[FridayRain]

For example, would this be valid?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <title>FridayRain</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-5" />

[FridayRain]

Appears to be solved, but I need to experiment more before I solve the thread.

 

Seems all I needed to do was change #atmosphere from display: table to display: inline.

 

But I also messed around with floating and clearing and at this point I don't know what exactly is different. My CSS still needs to be cleaned up and validated. So far it seems to be fixed. Phew.

[FridayRain]

Please help me verify that the feedback div is indeed displaying correctly for you. It should be in the upper right corner of the main content area.

 

http://www.fridayrain.com

[SuperBlue]

Highs..

 

Hay FridayRain, why dont you clear the drawingboard, and start over from scratch?

 

I had a quick look at your code, and all that echoing is really confusing; Say you happen to delete the closing/end of a div, that could really burn some hours on debugging..

 

I find it easier to use single quotes insted, and usually you only need a few echos to write the entire site. You could even write html outside the php tags, and (like that), save alot of effort otherwhise required.

 

 

Anyway, the issiue is not if the page displays/renders as it is suposed, the question that matters is, dose it render the way you intended?

I cant say so for shure, since from the looks of it your still working on the UI/layout, and witch (i must say) is very basic.

 

Simplifying your code would really help; Your CSS file is really a mess, it looks like you are trying to create a structure to make it easier to understand, but your totally overdoing this, witch makes it hard to re-read the code.

Webdesigners will usually be able to read trough the code, so you dont need to create all these Indents, they are only making it worse, also since it sometimes force horizontal scrolling, its a practice mainly used in programming and scripting, not something as simple as CSS.

 

Some good ways to write CSS documents.

#examble {
  width: 10em;
  height: 10em;
}
/* The OneLine Way */
#examble {width: 10em;height: 10em;}

 

From the looks of it, you are awere of the ui part; So i wont go into details about that, since thats usually something you improve along the way;

I can see what your trying to do here, the rounded cornors could use improvements (visually/graphically), but since you allready aware of that, lets move on to how your doing it.

 

have you ever tryed playing around with the CSS position declarations?

I can give you a hint, say that "position: absolute;" will place the opject relative to the edges of the browser window, thats usually a problem. But if you create a containing div, and this have "position: relative;", then look what happens. Suddenly alot of "display: table;" tricks, and float based layouts become unnessary.

 

An examble of how usefull this can be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">  
.SarCenterContent {
position: relative;
width: 100%;
margin: 0 auto;
text-align: center;
}
.SarCenterContent:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
.sar_01 {
position: relative;
width: 100%;
height: 9px;
background-color: gray;
}
.sar_02 {
position: absolute;
left: -11px;
width: 11px;
height: 9px;
background-color: silver;
overflow: hidden;
}
.sar_03 {
position: absolute;
right: -11px;
width: 11px;
height: 9px;
background-color: gold;
overflow: hidden;
}
.sar_04 {
position: absolute;
left: -11px;
width: 11px;
height: 100%;
background-color: purple;
}
.sar_05 {
position: absolute;
right: -18px;
width: 18px;
height: 100%;
background-color: blue;
}
.sar_06 {
position: relative;
width: 100%;
height: 9px;
background-color: green;
}
.sar_07 {
position: absolute;
left: -11px;
width: 11px;
height: 9px;
background-color: yellow;
overflow: hidden;
}
.sar_08 {
position: absolute;
right: -11px;
width: 11px;
height: 9px;
background-color: brown;
overflow: hidden;
}
</style>
</head>
<body>
    <div class="sar_06">
     <div class="sar_07"></div>
     <div class="sar_08"></div>
    </div>
    <div class="SarCenterContent">
     <div class="sar_04"></div>
     <div class="sar_05"></div>
     <p style="margin:0;padding-top:1em;">Content goes here</p>
     <p style="margin:0;">Content goes here</p>
     <p style="margin:0;">Content goes here</p>
     <p style="margin:0;padding-bottom:1em;">Content goes here</p>
    </div>
     <div class="sar_01">
      <div class="sar_02"></div>
      <div class="sar_03"></div>
     </div>
</body>
</html>

 

So basicly this would alow us to create just about anything from 1-2 column layouts, to the more advanced 3+ column.

And it even covers border creation, witch is something requested for heavy graphical layouts, since this allows something otherwhise best achived using tables.

 

A side note, you wouldent need a "quirks mode fix" for the type of design your trying to achive, because its just making things more difficult then they really are.

 

The locked pixel layout curses problems when your using diffrent font settings in your browser, for instance: A simple font-size change would curse your site to look an undesirable way, to both you and the visitor. Ofcourse this would be the visitors own problem, but atleast we as webdesigners can fix most issiues regarding this, sometimes just by using EM insted of pixel.

 

 

 

 

 

 

 

[FridayRain]

Highs..

 

Hay FridayRain, why dont you clear the drawingboard, and start over from scratch?

 

I could give you quite a few reasons, actually. But thanks.

 

I had a quick look at your code, and all that echoing is really confusing; Say you happen to delete the closing/end of a div, that could really burn some hours on debugging..

 

Won't be an issue.

 

I find it easier to use single quotes insted, and usually you only need a few echos to write the entire site. You could even write html outside the php tags, and (like that), save alot of effort otherwhise required.

 

I'm not that far yet. I know my PHP could be cleaned up, and I'll get to that. What matters most is what works best for me anyway.

 

Anyway, the issiue is not if the page displays/renders as it is suposed, the question that matters is, dose it render the way you intended?

 

Isn't how it's supposed to display and how I intended it to display the same thing?

 

I cant say so for shure, since from the looks of it your still working on the UI/layout, and witch (i must say) is very basic.

 

Gee, thanks.

 

Simplifying your code would really help; Your CSS file is really a mess, it looks like you are trying to create a structure to make it easier to understand, but your totally overdoing this, witch makes it hard to re-read the code.

 

I'm more concerned about how easy it is for me to read, and right now it's pretty easy.

 

Webdesigners will usually be able to read trough the code, so you dont need to create all these Indents, they are only making it worse, also since it sometimes force horizontal scrolling, its a practice mainly used in programming and scripting, not something as simple as CSS.

 

Some good ways to write CSS documents.

#examble {
  width: 10em;
  height: 10em;
}
/* The OneLine Way */
#examble {width: 10em;height: 10em;}

 

Well, since I'm the sole web designer, it only needs to be easy for me. If I post some code I need analyzed, it won't be formatted so.

 

From the looks of it, you are awere of the ui part; So i wont go into details about that, since thats usually something you improve along the way;

I can see what your trying to do here, the rounded cornors could use improvements (visually/graphically), but since you allready aware of that, lets move on to how your doing it.

 

You know, I didn't really ask for a critique just yet, but I'm happy you don't like anything about my site. All I asked for was if the div was displaying in the right place.

 

have you ever tryed playing around with the CSS position declarations?

I can give you a hint, say that "position: absolute;" will place the opject relative to the edges of the browser window, thats usually a problem. But if you create a containing div, and this have "position: relative;", then look what happens. Suddenly alot of "display: table;" tricks, and float based layouts become unnessary.

 

Unnecessary how? Because you'd rather use a different method? Right now the page is displaying how I want it to. Absolute positioning can cause problems. I'd rather not use any positioning attributes.

 

So basicly this would alow us to create just about anything from 1-2 column layouts, to the more advanced 3+ column.

And it even covers border creation, witch is something requested for heavy graphical layouts, since this allows something otherwhise best achived using tables.

 

I'm not a professional, and I'm not in the business of selling my time to build websites for other people.

 

A side note, you wouldent need a "quirks mode fix" for the type of design your trying to achive, because its just making things more difficult then they really are.

 

How difficult, exactly, are they?

 

The locked pixel layout curses problems when your using diffrent font settings in your browser, for instance: A simple font-size change would curse your site to look an undesirable way, to both you and the visitor. Ofcourse this would be the visitors own problem, but atleast we as webdesigners can fix most issiues regarding this, sometimes just by using EM insted of pixel.

 

Honestly, with your spelling mistakes, typos, and constant misuses of "witch" instead of "which" and "curse" instead of "cause," I have to either think you're like twelve or thirteen, not a native English speaker, or somehow you've managed to gain a good knowledge of web development with poor grammar.

 

I can't control someone changing their zoom. I've done it to plenty of business-class websites and they always look hideous. It's a browser issue more than a web design one. We have to design around different resolutions and pack as much text as we can into whatever space we provide ourselves. Instead of going with a fluid design, I went with a fixed width suitable for any resolution 1024x768 and higher. In my experience with other projects, I had very few users come with a resolution under that, and I'm willing to take the risk.

 

Thanks for taking the time.

[FridayRain]

Sorry. Didn't at first notice the link in your sig. So English probably isn't native to you, but you do kinda look thirteen. :-\

[Aureole]

Sorry. Didn't at first notice the link in your sig. So English probably isn't native to you, but you do kinda look thirteen.

 

After reading this topic; you're the one who looks 13 my good sir.

[FridayRain]

Yeah, I bet. Thanks for the help.