Jump to content

CSS Help...

aeroswat

By aeroswat
in CSS Help

Recommended Posts

aeroswat Advanced Member

aeroswat

Posted
Posted

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?

Link to comment
https://forums.phpfreaks.com/topic/196124-css-help/
Share on other sites
aeroswat Advanced Member

aeroswat

Posted
  • Author
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/196124-css-help/#findComment-1029993
Share on other sites
haku Regular Member

haku

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/196124-css-help/#findComment-1030301
Share on other sites
aeroswat Advanced Member

aeroswat

Posted
  • Author
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/196124-css-help/#findComment-1030520
Share on other sites
aeroswat Advanced Member

aeroswat

Posted
  • Author
Posted

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; }

Link to comment
https://forums.phpfreaks.com/topic/196124-css-help/#findComment-1030729
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.