CSS Help...

aeroswat · March 22, 2010

Since I posted in that forum almost a week ago now and still haven't received a reply maybe It would be ok for me to post here.

Anywho I'm using the blueprint framework and here's what's in the css code that applies

/* A container should group your entire grid. */
.container {
min-width: 950px;
width: 90%;
margin: 0 auto;
overflow: hidden;
}

/* A block should group all your columns per row stack. */
.block {overflow: hidden;}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
to create any composition of columns in a layout. */
.column {float: left;}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 { width: 4%; }
.span-2 { width: 8%; }
.span-3 { width: 12%; }
.span-4 { width: 16%; }
.span-5 { width: 20%; }
.span-6 { width: 25%; }
.span-7 { width: 29%; }
.span-8 { width: 33%; }
.span-9 { width: 37%; }
.span-10 { width: 41%; }
.span-11 { width: 45%; }
.span-12 { width: 50%; }
.span-13 { width: 54%; }
.span-14 { width: 58%; }
.span-15 { width: 62%; }
.span-16 { width: 66%; }
.span-17 { width: 70%; }
.span-18 { width: 75%; }
.span-19 { width: 79%; }
.span-20 { width: 83%; }
.span-21 { width: 87%; }
.span-22 { width: 91%; }
.span-23 { width: 95%; }
.span-24 { width: 100%; margin-right: 0; }

.span-1>div, .span-2>div, .span-3>div, .span-4>div,
.span-5>div, .span-6>div, .span-7>div, .span-8>div,
.span-9>div, .span-10>div, .span-11>div, .span-12>div,
.span-13>div, .span-14>div, .span-15>div, .span-16>div,
.span-17>div, .span-18>div, .span-19>div, .span-20>div,
.span-21>div, .span-22>div, .span-23>div, .span-24>div {
margin: 0 0.833em 0 0;
overflow: hidden;
}

/* Add these to a column to append empty cols. */
.append-1 { padding-right: 4%; }
.append-2 { padding-right: 8%; }
.append-3 { padding-right: 12%; }
.append-4 { padding-right: 16%; }
.append-5 { padding-right: 20%; }
.append-6 { padding-right: 25%; }
.append-7 { padding-right: 29%; }
.append-8 { padding-right: 33%; }
.append-9 { padding-right: 37%; }
.append-10 { padding-right: 41%; }
.append-11 { padding-right: 45%; }
.append-12 { padding-right: 50%; }
.append-13 { padding-right: 54%; }
.append-14 { padding-right: 58%; }
.append-15 { padding-right: 62%; }
.append-16 { padding-right: 66%; }
.append-17 { padding-right: 70%; }
.append-18 { padding-right: 75%; }
.append-19 { padding-right: 79%; }
.append-20 { padding-right: 83%; }
.append-21 { padding-right: 87%; }
.append-22 { padding-right: 91%; }
.append-23 { padding-right: 95%; }

/* Add these to a column to prepend empty cols. */
.prepend-1 { padding-left: 4%; }
.prepend-2 { padding-left: 8%; }
.prepend-3 { padding-left: 12%; }
.prepend-4 { padding-left: 16%; }
.prepend-5 { padding-left: 20%; }
.prepend-6 { padding-left: 25%; }
.prepend-7 { padding-left: 29%; }
.prepend-8 { padding-left: 33%; }
.prepend-9 { padding-left: 37%; }
.prepend-10 { padding-left: 41%; }
.prepend-11 { padding-left: 45%; }
.prepend-12 { padding-left: 50%; }
.prepend-13 { padding-left: 54%; }
.prepend-14 { padding-left: 58%; }
.prepend-15 { padding-left: 62%; }
.prepend-16 { padding-left: 66%; }
.prepend-17 { padding-left: 70%; }
.prepend-18 { padding-left: 75%; }
.prepend-19 { padding-left: 79%; }
.prepend-20 { padding-left: 83%; }
.prepend-21 { padding-left: 87%; }
.prepend-22 { padding-left: 91%; }
.prepend-23 { padding-left: 95%; }


/* Border on right hand side of a column. */
.border {
border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.colborder {
padding-right: 2%;
margin-right: 2%;
border-right: 1px solid #eee;
}

.colborder>div {
margin: 0;
}


/* Use these classes on an element to push it into the
next column, or to pull it into the previous column. */

.pull-1 { margin-left: -3.333em; }
.pull-2 { margin-left: -6.666em; }
.pull-3 { margin-left: -10em; }
.pull-4 { margin-left: -13.333em; }

.push-0 { margin: 0 0 0 1.5em; }
.push-1 { margin: 0 -3.333em 0 1.5em; }
.push-2 { margin: 0 -6.666em 0 1.5em; }
.push-3 { margin: 0 -10em 0 1.5em; }
.push-4 { margin: 0 -13.333em 0 1.5em; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column. */
.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #eee;
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd;
  color: #ddd;
  width: 100%;
  height: 0.083em;
  margin: 0 0 1.583em;
  border: none;
}
hr.space {
  background: #fff;
  color: #fff;
}

And here is my index page. I made it very simple to try to figure out what was breaking this thing but still no avail.

<html>
<head>
	<link rel="stylesheet" href="css/bpfw/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="css/bpfw/print.css" type="text/css" media="print">	
	<!--[if lt IE 8]><link rel="stylesheet" href="css/bpfw/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
	<div class="container">
		<div class="span-12">
			This is where major news will go!
		</div>
		<div class="span-12 last">
			This is where important information will go!
		</div>
	</div>
</body>
</html>

And it shows up both divs on different lines >:(

This was working before i had made any changes to the file and then i made a couple of changes and it broke. Now i started with a fresh copy of the css and it still doesn't work... I can't figure out why. Does anyone have any thoughts?

phant0m · March 22, 2010

Try float:left or display: inline on the divs.

If that doesn't work, could you post a link to where it can be viewed online?

aeroswat · March 22, 2010

Try float:left or display: inline on the divs.

If that doesn't work, could you post a link to where it can be viewed online?

I have added column into the list of classes for each div. That holds the float:left in it. Still doesn't work :/

The site is www.gamelads.site50.net

Wolphie · March 22, 2010

This should be in the CSS forum, not the PHP forum.

Maq · March 22, 2010

Since I posted in that forum almost a week ago now and still haven't received a reply maybe It would be ok for me to post here.

We wouldn't have different forums if that were the case.

aeroswat · March 22, 2010

Since I posted in that forum almost a week ago now and still haven't received a reply maybe It would be ok for me to post here.

We wouldn't have different forums if that were the case.

Can anyone help me?

phant0m · March 22, 2010

The float:left works just fine

The problem is, that your divs have a width of 50% PLUS a padding of 1.5em which is >100%. That why they'll never be on the same line.

aeroswat · March 22, 2010

The float:left works just fine

The problem is, that your divs have a width of 50% PLUS a padding of 1.5em which is >100%. That why they'll never be on the same line.

Oh I didn't see that with the box I changed it up a little. Shouldn't the padding create a space between the divs?

Edit: Nvm padding applies to what is inside.

aeroswat · March 22, 2010

Is there a way to make a div opaque that is inside of a transparent div without setting the position to appear it is inside the other div?

haku · March 23, 2010

The maximum opacity of an element is the opacity of it's parent element(s). So if you have an element at 50% opacity, then any elements inside it will have an opacity of 50% when their opacity is set to 100%. If you were to set their opacity to 50%, they would have an overall opacity of 25%.

If you want to have a transparent container, you are better off using a transparent .png as a background image, and leaving the element at 100% opacity.

aeroswat · March 23, 2010

The maximum opacity of an element is the opacity of it's parent element(s). So if you have an element at 50% opacity, then any elements inside it will have an opacity of 50% when their opacity is set to 100%. If you were to set their opacity to 50%, they would have an overall opacity of 25%.

If you want to have a transparent container, you are better off using a transparent .png as a background image, and leaving the element at 100% opacity.

Thank you for the advice. I will go probably go ahead and use the transparent png.

aeroswat · March 23, 2010

So now my issue is formatting between browsers. If you take a look at the site in firefox the divs overlap the top div. This shouldn't be so I believe. From how I've got my code I believe that the divs are supposed to be positioned relative to each other. But they are not. Here's my index page

<html>
<head>
	<link rel="stylesheet" href="css/bpfw/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="css/bpfw/print.css" type="text/css" media="print">	
	<!--[if lt IE 8]><link rel="stylesheet" href="css/bpfw/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
	<div class="container">
		<div id="d_header" class="span-24 column" style="position:relative;height:125px">
			<img src="/images/randlogo.png" />
		</div>
		<div style="background: url('/images/border2.png') no-repeat;height:150px;position:relative;top:-30px;left:20px;z-index:2">
		</div>
		<div id="d_body" class="span-24 last" style="position:relative;top:-130px">
		<div class="span-11 column conOutside colwrapper" style="height:300px">
			<div class="conInsidedg" style="width:100%;height:100%">
				This is where major news will go!
			</div>
		</div>
		<div class="span-10 column last conOutside colwrapper" style="height:300px">
			<div class="conInsidedg" style="width:100%;height:100%">
				This is where important information will go!
			</div>
		</div>
		<hr />
		<div class="span-8 column conOutside colwrapper" style="height:300px">
			<div class="conInsidedg" style="width:100%;height:100%">
				This is where recent matches will go!
			</div>
		</div>
		<div class="span-13 column last conOutside colwrapper" style="height:300px">
			<div class="conInsidedg" style="width:100%;height:100%">
				This is where other recent information will go!
			</div>
		</div>
		</div>
		<hr />
		<div id="d_footer" class="span-24 column box last" style="height:50px;margin-bottom:0;">
			This is where our copyright information and small print will go and will be the end of our site
		</div>
	</div>
</body>
</html>

and my css file

/* -----------------------------------------------------------------------


Blueprint CSS Framework 0.9
http://blueprintcss.org

   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;background:url("/images/bgmetal.png") repeat;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}

/* forms.css */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input[type=text], input[type=password], input.text, input.title, textarea, select {background-color:#fff;border:1px solid #bbb;}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;}
input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
input[type=checkbox], input[type=radio], input.checkbox, input.radio {position:relative;top:.25em;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

/* liquid.css */
.container { min-width: 950px; width: 100%; margin: 0 auto; overflow: hidden; }

.block {overflow: hidden;}

.column {float: left;}

.last { margin-right: 0; }

.span-1 { width: 4%; }
.span-2 { width: 8%; }
.span-3 { width: 12%; }
.span-4 { width: 16%; }
.span-5 { width: 20%; }
.span-6 { width: 25%; }
.span-7 { width: 29%; }
.span-8 { width: 33%; }
.span-9 { width: 37%; }
.span-10 { width: 41%; }
.span-11 { width: 45%; }
.span-12 { width: 50%; }
.span-13 { width: 54%; }
.span-14 { width: 58%; }
.span-15 { width: 62%; }
.span-16 { width: 66%; }
.span-17 { width: 70%; }
.span-18 { width: 75%; }
.span-19 { width: 79%; }
.span-20 { width: 83%; }
.span-21 { width: 87%; }
.span-22 { width: 91%; }
.span-23 { width: 95%; }
.span-24 { width: 100%; margin-right: 0; }

.tr { opacity:.4; filter:alpha(opacity=40); }
.notr { opacity:1; filter:alpha(opacity=100); }

.span-1>div, .span-2>div, .span-3>div, .span-4>div,
.span-5>div, .span-6>div, .span-7>div, .span-8>div,
.span-9>div, .span-10>div, .span-11>div, .span-12>div,
.span-13>div, .span-14>div, .span-15>div, .span-16>div,
.span-17>div, .span-18>div, .span-19>div, .span-20>div,
.span-21>div, .span-22>div, .span-23>div, .span-24>div { margin: 0 0.833em 1.5em 0; overflow: hidden; }

.append-1 { padding-right: 4%; }
.append-2 { padding-right: 8%; }
.append-3 { padding-right: 12%; }
.append-4 { padding-right: 16%; }
.append-5 { padding-right: 20%; }
.append-6 { padding-right: 25%; }
.append-7 { padding-right: 29%; }
.append-8 { padding-right: 33%; }
.append-9 { padding-right: 37%; }
.append-10 { padding-right: 41%; }
.append-11 { padding-right: 45%; }
.append-12 { padding-right: 50%; }
.append-13 { padding-right: 54%; }
.append-14 { padding-right: 58%; }
.append-15 { padding-right: 62%; }
.append-16 { padding-right: 66%; }
.append-17 { padding-right: 70%; }
.append-18 { padding-right: 75%; }
.append-19 { padding-right: 79%; }
.append-20 { padding-right: 83%; }
.append-21 { padding-right: 87%; }
.append-22 { padding-right: 91%; }
.append-23 { padding-right: 95%; }

.prepend-1 { padding-left: 4%; }
.prepend-2 { padding-left: 8%; }
.prepend-3 { padding-left: 12%; }
.prepend-4 { padding-left: 16%; }
.prepend-5 { padding-left: 20%; }
.prepend-6 { padding-left: 25%; }
.prepend-7 { padding-left: 29%; }
.prepend-8 { padding-left: 33%; }
.prepend-9 { padding-left: 37%; }
.prepend-10 { padding-left: 41%; }
.prepend-11 { padding-left: 45%; }
.prepend-12 { padding-left: 50%; }
.prepend-13 { padding-left: 54%; }
.prepend-14 { padding-left: 58%; }
.prepend-15 { padding-left: 62%; }
.prepend-16 { padding-left: 66%; }
.prepend-17 { padding-left: 70%; }
.prepend-18 { padding-left: 75%; }
.prepend-19 { padding-left: 79%; }
.prepend-20 { padding-left: 83%; }
.prepend-21 { padding-left: 87%; }
.prepend-22 { padding-left: 91%; }
.prepend-23 { padding-left: 95%; }

.border { border-right: 1px solid #eee; }

.colborder { padding-right: 2%; margin-right: 2%; border-right: 1px solid #eee; }

.colborder>div { margin: 0; }

.colwrapper{ margin-right:3%; margin-left:3%; margin-bottom: 3%; }

.pull-1 { margin-left: -3.333em; }
.pull-2 { margin-left: -6.666em; }
.pull-3 { margin-left: -10em; }
.pull-4 { margin-left: -13.333em; }

.push-0 { margin: 0 0 0 1.5em; }
.push-1 { margin: 0 -3.333em 0 1.5em; }
.push-2 { margin: 0 -6.666em 0 1.5em; }
.push-3 { margin: 0 -10em 0 1.5em; }
.push-4 { margin: 0 -13.333em 0 1.5em; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }

.box {padding: 1.5em;margin-bottom: 1.5em;background: #eee;}
.mb {margin-bottom: 1.5em;}

hr { background: #ddd; color: #ddd; width: 100%; height: 0.083em; margin: 0 0 1.583em; border: none; }
hr.space { background: #fff; color: #fff; }

/* containers.css */
div.conOutside { border-width:5px; border-style: solid; border-color: #315892 #133464 #133464 #315892; overflow:hidden; }
div.conInsideg { overflow:auto; background: url('/images/fbgg3.png') repeat-x; }
div.conInsidedg { overflow:auto; background: url('/images/fbgdg3.png') repeat-x; }
div.conInsider { overflow:auto; background: url('/images/fbgr3.png') repeat-x; }

Sign In

CSS Help...

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information