Jump to content

DarkxPunk

Members
 View Profile  See their activity

  • Posts

    465

  • Joined

  • Last visited

 Content Type 

Posts posted by DarkxPunk

    Playing with Fluid Layouts

    in CSS

    Posted · Edited by DarkxPunk

    So my current code...

     

    HTML:

     

    <!DOCTYPE html><html><head>	<meta charset="UTF-8"/>	<meta name="viewport" content="width=device-width, initial-scale=1">	<title>Test Zone 1</title>	<link rel="stylesheet" type="text/css" href="reset.css"/>	<link rel="stylesheet" type="text/css" href="style.css"/>	<script type="text/javascript" src="javascript.js"></script>	<!--[if lt IE 7]>	<style rel="stylesheet" type="text/css">	#pageWrap {height: 100% !important;}	</style>	<![endif]--></head><body>	<div id="pageWrap">		<div id="header" class="contentWrap ">			<div id="headerR" class="col2">				<ul id="nav">					<li><a>Link 1</a></li>					<li><a>Link 2</a></li>					<li><a>Link 3</a></li>				</ul>			</div>			<div id="headerL" class="col2">				<div class="logo">					<div class="logogram"><p>Logo</p></div>					<div class="logotype">						<h1>ComNaBi</h1>						<h2>ComNaSm</h2>					</div>				</div> 			</div>		</div> 			<div class="contentWrap">			<div class="col3L"> 			<h1>Test Zone 1</h1>			</div>			<div class="col3C">			</div>			<div class="col3R">			<p>This is my test zone 1</p>			</div>		</div> 			<div id="push"></div>	</div>	<div id="footer">		<div class="contentWrap">			<div class="col3LC"> 			<h1>Test Zone 1</h1>			</div>			<div class="col3CC"></div>			<div class="col3RC">			<div class="col2S"> 			<h1>Test Zone 1</h1>			</div>			<div class="col2B">			<p>This is my test zone 1</p>			</div>			</div>		</div> 		</div></body></html>

     

     

    CSS:

     

     

    body,html {	height: 100%;	background-color: #000000;}#pageWrap {	min-height: 100%;	height: auto !important;}.contentWrap {	margin: 0 auto;	padding: 3em 1.5em 4.5em;	max-width: 100%;	overflow: hidden;}#header {	height: 18em;	padding: 0 1.5em;	overflow: visible;}#header .col2 {	height: 100%;}#headerL {	background-color: #ed6666;	float: left;}#headerL .logo {	margin: 5em auto 0;}.logo {		width: 26.5em;	height: 8em;}.logo div {	float: left;}.logogram {	width: 12em;	height: 8em;	background-color: #8967ee;}.logotype h1,.logotype h2{	margin: 0;}#headerR {	min-height: 2em !important;	text-align: right;	background-color: #8967ee;	float: right;	position: relative;}#nav {	display: block;	position: absolute;	right: -0.5em; bottom: -0.5em;	font-size: 100%;}#nav li {	margin: 0 0 0 1em;	border: 0.2em solid #27ff00;	float: left;}#nav a {	padding: 0.25em;	display: block;	background-color: #ed6666;	font-size: 2em;}.col2,.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC {	float: left;	min-height: 10em;	height: expression( this.scrollHeight < 101 ? "100px" : "auto" );}.col2 {	width: 50%;	}.col2B {	width: 62%;	background-color: #ed6666;}.col2S {	width: 38%;	background-color: #8967ee;}.col3L,.col3C,.col3R {/* 	width: 33.35%; */	width: 33.33%;}.col3L,.col3R {	background-color: #ed6666;}.col3C {	background-color: #8967ee;	}.col3LC,.col3RC {/* 	width: 49.999998%; */	width: 49.83%;	background-color: #ed6666;}.col3RC {	background-color: #8967ee;}.col3CC {	border-left: 0.1em solid #000000;}#push {	height: 20em;}#footer {	margin: -20em 0 0;	border-top: 0.1em solid #000000;	height: 19.9em;	clear: both;}#footer .contentWrap {	padding: 0 1.5em;}#footer .contentWrap,#footer .contentWrap div {	height: 100%;}@media screen and (max-width: 640px) {	.col2,.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC {		width: 100%;		min-width: 320px;		clear: both;	}	.col3CC {		display: none;	}	#header,#footer .contentWrap {		height: auto;	}	#headerL .logo {		margin: 5em auto;	}	#headerR {		float: left;	}	#nav {		position: static;		float: right;	}}

     

     

     

    Now if you shrink the browser window past the 640px mark, zoom in, then scroll to the right. The content as you will see does not extent all the way, unlike the header... Any ideas?

     

    Here is a picture of the reality and what I want:

     

     

    Reality:

    Reality.png

     

    Want:

    Want.png

     

     

     

    Thanks for any assistance.

     

    ***Update***

     

    This is funny. The problem lies in the fact I have overflow hidden set to contain the floated elements... If I remove the overflow hidden it all scrunches together... If I remove the float, the collapsing margin issue returns. Fun...!

    Playing with Fluid Layouts

    in CSS

    Posted · Edited by DarkxPunk

    I don't understand the point your trying to make... But its fine...

     

    To clarify myself... I hate collapsing margins, the idea of collapsing margins because (some) people want that when writing text is silly to me. Margins are margins, they should not be collapsed in when against each other. Its annoying to me. Floats make margins act like margins, stops that silly collapsing, and make containing elements stay well, contained. Its a pain that I have to float everything when I wanna stack divs because of silly margins.

     

    Anyway rant over... Nothing I can do right now... Still be great a margin-collapse addition to CSS, simply to turn it off!

     

    Now my next post I got an interesting issue...

    Playing with Fluid Layouts

    in CSS

    Posted · Edited by DarkxPunk

    I think what we need is an image / diagram / storyboard / mockup that shows us what you are trying to make the page look like.

     

    Reality

    Reality.png

     

    Want

    Want.png

     

    --EDIT--

     

    So I tried the padding fix again... The reason it did not work last time was because I only added it to the top, needed to be on both the top and bottom.

     

    Now this can't be the best way to fix this, I know I can do floats or position fixed but there must be a better way!

     

    Okay, second thought... I guess floats do work... I got rid of the padding while using floats, but ugh I hate (what I say below).

     

    ***DAMN YOU COLLAPSING MARGINS!***

    Playing with Fluid Layouts

    in CSS

    Posted

    I think I found the cause of the spacing... But I don't understand why, or have a workaround... The margins on the elements I am using are scaled down to fit the smaller default font size... I read a good way to contain margins from overlapping was to add a padding to the wrapper, which I did and it's still affecting... Confused :facepalm:

    Playing with Fluid Layouts

    in CSS

    Posted

    Try avoid using width: 100% as much, especially on block elements, the width will usually end up being total width of parent, but extras like margins will be added to this as well. Whereas a block element as it is, will stretch to full width available to it.

     

    Interesting... Should I still make the html and body 100% width?

     

     

     

    What does your reset.css look like?

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{	margin:0;	padding:0;	border:0;	font-family: arial, helvetica, sans-serif;	vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{	display:block;}body{	line-height:1;	font-size:62.5%;}h1{	font-size:3.2em;	margin:1em 0;}h2{	font-size:2.4em;	margin:1.2em 0;}h3{	font-size:1.8em;	margin:1.3em 0;}h4,a,a:link,a:visited,a:hover,a:active,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{	font-size:1.4em;}h4,p{	margin:1.7em 0;}h5{	font-size:1.3em;	margin:2.4em 0;}h6{	font-size:1.2em;	margin:2.6em 0;}a,a:link,a:visited{	text-decoration:none;}a:hover,a:active{	text-decoration:underline;}ol,ul{	list-style:none;}blockquote,q{	quotes:none;}blockquote:before,blockquote:after,q:before,q:after{	content:'';	content:none;}table{	border-collapse:collapse;	border-spacing:0;}

    Playing with Fluid Layouts

    in CSS

    Posted · Edited by DarkxPunk

    Hey everyone,

     

    Here I wanna list through questions and issues to try and find the best fluid layout framework for me to use.

     

    ***UPDATE***

     

    Please feel free to check out and use any code from here: http://testzone.ormt.ca/

    This is my test zone and I strongly support open source code!

     

    ***UPDATE***

     

    Here is my issue so far: When I shrink the page to 480px an odd spacing appears on these divs... They are not hugging each other...

    <!DOCTYPE html><html><head>	<meta charset="UTF-8"/>	<title>Test Zone 1</title>	<link rel="stylesheet" type="text/css" href="reset.css"/>	<link rel="stylesheet" type="text/css" href="style.css"/>	<script type="text/javascript" src="javascript.js"></script></head><body>	<div id="pageWrap">		<div class="contentWrap">			<div class="col2S"> 			<h1>Test Zone 1</h1>			</div>			<div class="col2B">			<p>This is my test zone 1</p>			</div>		</div> 			<div class="contentWrap">			<div class="col3LC"> 			<h1>Test Zone 1</h1>			</div>			<div class="col3CC"></div>			<div class="col3RC">			<div class="col2S"> 			<h1>Test Zone 1</h1>			</div>			<div class="col2B">			<p>This is my test zone 1</p>			</div>			</div>		</div> 			<div class="contentWrap">			<div class="col3L"> 			<h1>Test Zone 1</h1>			</div>			<div class="col3C">			</div>			<div class="col3R">			<p>This is my test zone 1</p>			</div>		</div> 			<div id="push"></div>	</div>	<div id="footer"></div></body></html>
    body,html {	width: 100%;	height: 100%;}#pageWrap {	width: 100%;	min-height: 100%;	height: auto !important;	height: 100%;}.contentWrap {	margin: 0 auto;	padding: 3em 1.5em 4.5em;	max-width: 96em;	overflow: hidden;}.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC {	float: left;	min-height: 10em;}.col2B {	width: 62%;	background-color: #ed6666;}.col2S {	width: 38%;	background-color: #8967ee;}.col3L,.col3C,.col3R {	width: 33.36%;}.col3L,.col3R {	background-color: #ed6666;}.col3C {	background-color: #8967ee;	}.col3LC,.col3RC {	width: 49.999998%;	background-color: #ed6666;}.col3RC {	background-color: #8967ee;}.col3CC {	border-left: 0.1em solid #000000;}#push {	width: 100%;	height: 20em;}#footer {	margin: -20em 0 0;	border-top: 0.1em solid #000000;	width: 100%;	height: 19.9em;	clear: both;}@media screen and (max-width: 480px) {	.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC {		width: 100%;		float: none;		clear: both;	}	.col3CC {		display: none;	}}

    I will keep playing, but any ideas are greatly appreciated.

    HideShow Toggle

    in JavaScript

    Posted · Edited by DarkxPunk

    So I have been playing around and going over, trying to implement my old toggle, but there are a few factors I keep forgetting to consider. First off my basic toggle is as follows:

    function hideShow(tag) {var element = tag;while (element.className != 'hideShow') {element = element.nextSibling;}element.style.display = element.style.display == 'none' ? 'block' : 'none';}

    My page structure has changed to this:

    <div id="mainWrap"> <div id="styledWrap" onclick="hideShow(this)">  <div id="contentWrap">   <p>Content</p><div class="changeContent">Show(Change to hide when hideShow styleWrap is clicked)</div>  </div> </div> <div id="styledWrap" class="hideShow">  <div id="contentWrap">   <p>Content</p>  </div> </div></div>

    Now I don't know how to properly get that text area to change and for some reason I can't get the basic toggle to work. Will keep playing.

     

    -EDIT-

     

    So I resolved the JS and made it fit:

    function showHide(div) {var element = div.nextSibling.nextSibling;element.style.display = element.style.display == 'none' ? 'block' : 'none';}

    Still need to wrap my head around traversing HTML DOM, but getting there.

     

    -EDIT 2-

     

    Now I think I have it:

    function showHide(div) {var element = div.nextSibling.nextSibling;var viewHide = div.childNodes[1].childNodes[3].childNodes[6];element.style.display = element.style.display == 'none' ? 'block' : 'none';viewHide.innerHTML = viewHide.innerHTML == 'See Examples...' ? 'Hide Examples...' : 'See Examples...';}

    Now that was allot of Node searching, maybe there is a better way? But so far so good.

    HideShow Toggle

    in JavaScript

    Posted

    I guess I just don't understand how it simply finds the "next" div with the correct class when all you are doing is throwing all that is found in an array. But I will play and see if I can grasp it.

    HideShow Toggle

    in JavaScript

    Posted

    Works great!

     

    But I feel there must be a better solution... Maybe its my miss understanding of JS, but can you not traverse HTML DOM from a element?

     

    For example:

     

    onclick run function hideshow

     

    hideshow takes the element that has the on click with that function than leaves that elements and moves down the page from its position till it finds a classname hideshow then applies display: none or display: block.

     

    In other words without first collecting all elements and their classes...

     

    I will use this script in the mean time, but will keep looking for a way to skim it down. Thanks allot.

    HideShow Toggle

    in JavaScript

    Posted

    Well I would like to understand traversing HTML DOM better so I can manipulate it as I need. But in the mean time all I require is this format... I will use it multiple time, but it will just apply to the closest element. Preferably I would like it to work with more than just div elements... Lastly the search at click-time should be fine... Makes it more versatile right?

    HideShow Toggle

    in JavaScript

    Posted 

    <div class="DivWrap"><div class="DivContent clickable"><p>Click here</p></div></div><div class="DivWrap showhide"><div class="DivContent"><p>Happy Birthday Fred!</p></div></div>

    The DivWraps are 100% width, I only want the div content clickable.

    HideShow Toggle

    in JavaScript

    Posted

    First off let me preface with if I understood how to traverse HTML DOM it would be easy as pie...

     

    So for styling purposes I have a div inside a div... Lets call the outside div DivWrap, and the internal one called DivContent... Now I duplicate this again underneath looking like this:

     

    DivWrap

    DivContent

    DivWrap

    DivContent

     

    Now the second DivWrap is hidden by default, and the link to expose it will be in the first DivContent. Now I don't want to create multiple showHide functions for each iteration of this concept, especially when I will have multiple of these on a page. What I require is that when I click the link it will search from that point for the closes Div with the class showHide and simply apply the display:block.

     

    Now I know how to do it when its a direct child, but not when its so spread like this.

     

    Hope that helps.

    Thanks.

     

    (If I figure it out before you reply I will post it :D )

    HideShow Toggle

    in JavaScript

    Posted

    Hey everyone,

     

    So I know how to do a basic HideShow Toggle for a element that is a direct sibling, but what I need is to find the next element with a class of "hideShow". I am still not completely understanding of all the DOM and how to use JS to traverse it, so any help is appreciated.

     

    Thanks.

     

    P.S. I don't wanna use jQuery...

    Fluid layouts

    in CSS

    Posted · Edited by DarkxPunk

    This does not exactly address my issue.

     

    I am using my footer simply because this is where I am having the issue... I need a three column fluid design, the reason is the center column will have a single line creating a divider.

     

    I have been playing further with fluid designs and I just keep hitting bump after bump. For example:

    <!DOCTYPE html><html><head><title>Test 4</title><style type="text/css">	html,body {margin:0;border:0;padding:0;width: 100%;height: auto;min-height: 100%;height: 100% !important;}	body {font-size: 62.5%;}	#wrap {margin: 0 auto;max-width: 95em;height: 100px;background: #fbafaf;}	#divL,#divC,#divR {float: left;height: 100px;width: 100%;}	#divL,#divR {max-width: 46.5em;background: #b0faf5;}	#divC {max-width: 2em;background: #f5b0fa;}</style></head><body><div id="wrap">	<div id="divL">Content L</div>	<div id="divC">C</div>	<div id="divR">Content R</div></div></body></html>

    I would assume that as I shrink the browser window the divs should shrink, they don't, they flow under. I can't understand why... The width is set as a percentage, so why does it not shrink. I am banging my head and can't find any good templates or tutorials on the web.

     

    Another thing is the reason I am using max-width is because apparently using percentage widths don't always display correctly on all browsers, and they recommend what I am doing, but its not working >.<

     

    I need to be schooled on how to do this properly.

     

    Another issue again:

    <!DOCTYPE html><html><head><title>Test 4</title><style type="text/css">	html,body {margin:0;border:0;padding:0;width: 100%;height: auto;min-height: 100%;height: 100% !important;}	body {font-size: 62.5%;}	#wrap {margin: 0 auto;max-width: 95em;height: 100px;background: #fbafaf;}	#divWrap {margin: 0 auto;overflow: hidden;}	#divL,#divC,#divR {float: left;height: 100px;}	#divL,#divR {width: 48%;background: #b0faf5;}	#divC {width: 2%;background: #f5b0fa;}</style></head><body><div id="wrap">	<div id="divWrap">	<div id="divL">Content L</div>	<div id="divC">C</div>	<div id="divR">Content R</div>	</div></div></body></html>

    Why does the divWrap's overflow hidden cover more than the floated elements? Like I am so confused right now.

    Fluid layouts

    in CSS

    Posted

    Hey everyone,

     

    So I think I need a little schooling on fluid web design...

     

    I am attempting to have two columns with a middle divider shrink in width as the browser window shrinks in width. My current attempt is as follows:

    <div id="footerWrap">	<div class="contentWrap">		<div id="footerL">content</div>		<div id="footerD"></div>		<div id="footerR">			<div class="col22">content</div>			<div class="map col21">content</div>		</div>	</div></div>
    .contentWrap {	margin: 0 auto;	padding: 3em 0 4.5em;	max-width: 96em;	min-width: 29em;}#footerWrap {	border-top: 0.1em solid #dfdfdf;	height: 29.9em;}#footerWrap .contentWrap {	padding-top: 0 !important;	padding-bottom: 0 !important;	height: 29.9em;}#footerL,#footerD,#footerR {	float: left;}#footerL,#footerR {	margin: 4em 0 2.9em;	width: 44.7%;	min-width: 29em;}#footerL {	margin: 25.2em 5em 2.9em 0;	text-align: center;}#footerR {	margin: 4em 0 2.9em 5em;}#footerD {	margin: 3em .05em 1.9em;	border-left: 0.1em solid #dfdfdf;	height: 25em;	width: 0.005em;}

    Now as I shrink the browser window, the right most column decided to flow underneath everything... I have it set to percent, so I don't understand why its not simply shrinking.

     

    Thanks for any help.

×
×
  • Create New...