Re: jQuery / CSS / HTML Stacking Order
Basically when taking space by columns you should take care all columns that are floated left are inside a div before the content div. At the end of your columns you should insert a cleared div. That's the trick. A short example:
Code:
<div id="nav">
<div id="col1" style="float: left; width: 100px;">Test 1</div>
<div id="col2" style="float: left; width: 100px;">Test 2</div>
<div id="col3" style="float: left; width: 100px;">Test 3</div>
<div id="clearDiv" style="clear: both;">Test 1</div>
</div>
<div id="content">Content</div>
By forgetting the "clearDiv" you will get the effect you had before, overlapping the content with the floated columns.
See, your "nav" div stays 0px height when adding floated column divs to the top left corner of "nav", they are just stick in front of your view. However, when adding the "clearDiv" you add a div below the left-floated divs without being sticked in front of your view, so the cleared div will be a view-part of "nav" that will force "nav" to increase the height to get enough space for "clearDiv" and tada ... the "content"-div will go down. I hope this helped anyway.
About your new problem:
Imagine in the example I gave above my "nav"-div would have only 250px width? What will happen with three 100px-width column child divs? Yes, they will cry due too less space. To be more exact the last column child div will be word wrapped to the next line (as you can see in your screenshot).
As first I suggest you to float all your childs to the left.
As second I suggest you to take care of your available width and make sure you do not take too much on your childs:
Your parents content area (width) must not be smaller than all your childs complete size (margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)
Quote:
Originally Posted by
Parker
Maybe post the whole thing & that way it'll be easier for a user to test out & fix it.
Oh well, I like specific questions, we are not here to fix whole problems, we are?
I would never read a source that is longer than 15-20 lines, I do not like problem dumps, the screenshot is a way better. Matt should solve his problem on his way by understanding and finding the solution in own effort. This way it will stay in his head a pretty neat way. :3
Re: jQuery / CSS / HTML Stacking Order
Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.
Also, don't use
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
It's buggy as fuck.
Re: jQuery / CSS / HTML Stacking Order
Quote:
Originally Posted by
bramdebouvere
Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.
Also, don't use
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
It's buggy as fuck.
Like I said previously, there is no need for me to do that. I've posted the necessary parts of which is causing my error, the container and the content inside the container. Don't mean to be offensive, but if you're good at what you know, you'd understand what the displayed code does and possibly how it can be fixed. - Again, did not mean that to be offensive.
Quote:
Originally Posted by
שเ๒єtгเ๒є
Basically when taking space by columns you should take care all columns that are floated left are inside a div before the content div. At the end of your columns you should insert a cleared div. That's the trick. A short example:
Code:
<div id="nav">
<div id="col1" style="float: left; width: 100px;">Test 1</div>
<div id="col2" style="float: left; width: 100px;">Test 2</div>
<div id="col3" style="float: left; width: 100px;">Test 3</div>
<div id="clearDiv" style="clear: both;">Test 1</div>
</div>
<div id="content">Content</div>
By forgetting the "clearDiv" you will get the effect you had before, overlapping the content with the floated columns.
See, your "nav" div stays 0px height when adding floated column divs to the top left corner of "nav", they are just stick in front of your view. However, when adding the "clearDiv" you add a div below the left-floated divs without being sticked in front of your view, so the cleared div will be a view-part of "nav" that will force "nav" to increase the height to get enough space for "clearDiv" and tada ... the "content"-div will go down. I hope this helped anyway.
About your new problem:
Imagine in the example I gave above my "nav"-div would have only 250px width? What will happen with three 100px-width column child divs? Yes, they will cry due too less space. To be more exact the last column child div will be word wrapped to the next line (as you can see in your screenshot).
As first I suggest you to float all your childs to the left.
As second I suggest you to take care of your available width and make sure you do not take too much on your childs:
Your parents content area (width) must not be smaller than all your childs complete size (margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)
Oh well, I like specific questions, we are not here to fix whole problems, we are?
I would never read a source that is longer than 15-20 lines, I do not like problem dumps, the screenshot is a way better. Matt should solve his problem on his way by understanding and finding the solution in own effort. This way it will stay in his head a pretty neat way. :3
Hi, thanks for your input to the problem, I have tried your solution but yet still have a problem with it. I've floated all my divs to the left and have made my clear the same as you would usually but it doesn't seem to want to work. If you have any other solution it'd be greatly admired.
Many thanks,
Matt
Re: jQuery / CSS / HTML Stacking Order
There is auto clear too. You have to apply it to the PARENT in which you floated the div. And it goes like this
PHP Code:
.parentdiv {
overflow:hidden;
zoom:1;
}
I have cleared up some of your dirty coding , also I suggest using 960's grid system since your positioning sucks , this still does not solve the problem through. I am trying hard , but I have no idea what causing it. First i thought its because the p element is inline , but that's not the case. If I come up with something Ill tell you.
PHP Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link href="styles.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="theWrapper container_12"> <!-- container_12 , grid_4 are part of 960 grid -->
<div class="mainButtons greenGradient grid_4">
<div class="theTitles trigger">Book Lessons Now</div>
<div class="toggle">
<input type="text" placeholder="First Name" /><br />
<input type="text" placeholder="Last Name" /><br />
<input type="number" placeholder="Phone Number" /><br />
<input type="email" placeholder="E-Mail Address" /><br />
<button>Send Inquiry</button>
</div>
</div>
<div class="mainButtons redGradient grid_4">
<div class="theTitles trigger">View Our Feed</div>
<div class="toggle">
<div><p>Loading Social Feeds...</p></div>
</div>
</div>
<div class="mainButtons blueGradient grid_4">
<div class="theTitles trigger">Got a Question?</div>
<div class="toggle">
<p>Loading Contact Page...</p>
</div>
</div>
<script>
$(".toggle").slideUp();
$(".trigger").click(function(){
$(this).next(".toggle").slideToggle("slow");
});
</script>
</div>
<div class="container_12">
<div class="somecontent grid_12"></div>
</div>
</body>
</html>
PHP Code:
@import url('960.css'); /* get it from 960.gs */
.theWrapper {
margin-bottom: 15px;
text-shadow: 0px 1px 2px #000;
}
.mainButtons { width: 300px; height: 70px; }
.theTitles {
height: 70px;
line-height: 70px;
text-align: center; /* Old browsers */
color: #FFF;
box-shadow: 0px 0px 3px 0px #000;
border-radius: 5px;
}
.redGradient {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
}
.greenGradient {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
background-color:#3d94f6;
}
.blueGradient {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
}
.theTitles:hover {
cursor: pointer;
}
.toggle {
text-align: center;
display: none;
background-color: #FFF;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0px 0px 3px 0px #000;
border-radius: 5px;
}
.theTitles input {
width: 90%;
border: solid 1px #ccc;
padding: 3px;
margin: 5px 0px;
}
.somecontent { height:50px; background:#ccc; }
.clear { clear:both; }
You don't need to manully style the same div over and over just to toggle it , when you can create one div , and toggle it with any button yet still have different content in it , like so
PHP Code:
<script>
$(".toggle").slideUp();
$(".trigger").click(function(){
$(this).next(".toggle").slideToggle("slow");
});
</script>
Re: jQuery / CSS / HTML Stacking Order
Quote:
Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.
Quote:
Like I said previously, there is no need for me to do that. I've posted the necessary parts of which is causing my error, the container and the content inside the container. Don't mean to be offensive, but if you're good at what you know, you'd understand what the displayed code does and possibly how it can be fixed. - Again, did not mean that to be offensive.
If you did it would allow people to test the code properly. :blushing: Just saying
Re: jQuery / CSS / HTML Stacking Order
By the way , the way I made your CSS lessen with about 20 lines , its easier to debug , and actually find out where the problem is , since all the buttons use the same classes , and same properties.
Re: jQuery / CSS / HTML Stacking Order
Quote:
Originally Posted by
mucski
By the way , the way I made your CSS lessen with about 20 lines , its easier to debug , and actually find out where the problem is , since all the buttons use the same classes , and same properties.
I've not tested your solution out, the buttons all have different classes, but have the same parameters, yes. For example; I have "fastOptionBookTitle", then the others are different. I then set this in the jQuery, so surely that isn't the problem.
Edit:
I have made a JS Fiddle if anyone wants to try what the problem is?:
http://jsfiddle.net/tgvbE/
--
mucski, I copied your code into a new document folder with no modifications.
This is the outputting error:
http://prntscr.com/1dsept
Thank you for your input to the matter anyhow, and if you do come up with something which may fix it it'd be much appreciated.
Anyone else with some suggestions, I'd be exceedingly grateful,
Many thanks,
Matt
Re: jQuery / CSS / HTML Stacking Order
Tbh that's really what I needed :D
mucski, I think he understands that that grid layout is really useful (also looked at their fluid version of it - very nice!), but I don't know whether Matt can revamp his entire website at this point. Let's just help him specifically. But thanks from me anyways for that link!
Edit this Fiddle - jsFiddle
Does the trick for me. I've generalized all your CSS and JS. No more excessive lines of CSS to accomplish the same thing, and best of all: it seems to work with the clearing and stuff (I used the overflow method).
Re: jQuery / CSS / HTML Stacking Order
Quote:
Originally Posted by
EliteGM
Tbh that's really what I needed :D
mucski, I think he understands that that grid layout is really useful (also looked at their fluid version of it - very nice!), but I don't know whether Matt can revamp his entire website at this point. Let's just help him specifically. But thanks from me anyways for that link!
Edit this Fiddle - jsFiddle
Does the trick for me. I've generalized all your CSS and JS. No more excessive lines of CSS to accomplish the same thing, and best of all: it seems to work with the clearing and stuff (I used the overflow method).
This is perfect, thanks Elite, I really appreciate it!
A big thanks to all the other people who attempted to fix my error aswell, thank you!
Many thanks, again,
Matt =)
Re: jQuery / CSS / HTML Stacking Order
Quote:
Originally Posted by
Matt Clarke
I've not tested your solution out, the buttons all have different classes, but have the same parameters, yes. For example; I have "fastOptionBookTitle", then the others are different. I then set this in the jQuery, so surely that isn't the problem.
Edit:
I have made a JS Fiddle if anyone wants to try what the problem is?:
Edit this Fiddle - jsFiddle
--
mucski, I copied your code into a new document folder with no modifications.
This is the outputting error:
Screenshot by Lightshot
Thank you for your input to the matter anyhow, and if you do come up with something which may fix it it'd be much appreciated.
Anyone else with some suggestions, I'd be exceedingly grateful,
Many thanks,
Matt
Seems it did not act that way I expected. It did not increase the parent div height in js runtime.
Interesting solution you offered EliteGM, what was the exact way you told .mainFastOptionContainer to increase the height on runtime? :o
Re: jQuery / CSS / HTML Stacking Order
Quote:
Originally Posted by
שเ๒єtгเ๒є
Seems it did not act that way I expected. It did not increase the parent div height in js runtime.
Interesting solution you offered EliteGM, what was the exact way you told .mainFastOptionContainer to increase the height on runtime? :o
Why exactly would the container's height need to change? Or are you refering to the panel opening/closing? In that case, I direct you to the JS bit of that JSFiddle
Sent from my GT-I9300 using Tapatalk 2
Re: jQuery / CSS / HTML Stacking Order
Quote:
Originally Posted by
EliteGM
Why exactly would the container's height need to change? Or are you refering to the panel opening/closing? In that case, I direct you to the JS bit of that JSFiddle
Sent from my GT-I9300 using Tapatalk 2
I was talking about the view height not css height :P
just the fact the parent box gets larger ...
Re: jQuery / CSS / HTML Stacking Order
Still not sure what you mean by "view" height as opposed to css height. Are you talking about the sliding down effect or not?
Re: jQuery / CSS / HTML Stacking Order
The sliding down effect is the result of what I meant. .mainFastOptionContainer is increasing the view height (there is no css height property ofc) on clicking a link.
I was asking for the specific css lines that cause this effect on your provided solution. As I said above I would do it with a clearing div that finalizes inside of .mainFastOptionContainer, but this seemed to be ineffective on the given problem.
If it is unclear still, let us forget it, I will check out your solution in a detailed way soon then.
Re: jQuery / CSS / HTML Stacking Order
Ah well tbh I'm not even sure what made my thing work. For clearing, I used "overflow: hidden;" on .mainFastOptionContainer so I didn't have to add any extra clear:both; divs.
The truth is: the code was a mess. The CSS was probably twice as long as it should be: all the different classes for the same things were just too much. As a result, the jQuery bit was also too long. As I said, I generalized everything: a single class for every option and the only changing bit being the red/green/blue gradient.
