2 replies [Last post]
tifacola
tifacola's picture
Offline
newbie
United States
Last seen: 10 years 47 weeks ago
United States
Timezone: GMT-7
Joined: 2011-07-03
Posts: 9
Points: 12

I'm kinda new... not THAT new but this is the first time I've tried to do a layout where it appears the header and footer are 100% width, but the container have set widths. I have been messing with the code for days and have broken it back down to just bare basic code to try and figure it out. Check out the footer in red. The text won't wrap, just keeps on going even though the footer div is 960px wide. url= http://www.rockgonewired.com/nwko/index.php

css

@import url(<a href="http://fonts.googleapis.com/css?family=Rokkitt" rel="nofollow">http://fonts.googleapis.com/css?family=Rokkitt</a>);
@import url(<a href="http://fonts.googleapis.com/css?family=Black+Ops+One" rel="nofollow">http://fonts.googleapis.com/css?family=Black+Ops+One</a>|Nothing+You+Could+Do|Bowlby+One|Syncopate|Rock+Salt|UnifrakturCook:700);
 
@charset "utf-8";
/* CSS Document */
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
 
body {
	line-height:1;
	background-color:#000000;
	background-image:url(images/nwko_bg2.jpg);
	background-repeat:no-repeat;
	background-position: top center;
	color:#FFFFFF;
	font-family: 'Rokkitt', Arial, Helvetica, sans-serif;
	font-size:20px;
	margin:0;
    padding:0;
    border:0;
}
 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
 
nav ul {
    list-style:none;
}
 
blockquote, q {
    quotes:none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
 
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
 
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
 
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
 
del {
    text-decoration: line-through;
}
 
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
 
table {
    border-collapse:collapse;
    border-spacing:0;
}
 
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
 
input, select {
    vertical-align:middle;
}
 
h1 {
	font-family: 'UnifrakturCook', Arial;
	font-size:50px;
	}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
 
/*body*/
 
.clear {
	clear:both;
	}
 
#container {
	margin: 0 auto;
	width:960px;
	}
#header1 {
	width:100%;
	height:950px;
	}
	#header2 {
	width:100%;
	height:220px;
	}
#nav-wrapper {
	width:100%;
	height:92px;
	background-image:url(images/menu.png);
	background-position:center;
	background-repeat:repeat-x;
	}
#nav {
	width:960px;
	}
 
#content-wrapper {
	width: 100%;
	background-image:url(images/black90.png);
	border-top: 10px solid black;
	min-height: 50px;
}
 
#footer-wrapper {
	width: 100%;
	/**background-image:url(images/black90.png);**/
	border-top:2px solid white;
	background-color:#FF0000;
}
#footer {
	min-height:500px;
	width:960px;
	margin: 0 auto;
	}
 
#menu { 
	top:30px;
 }
#copyright {
	width:263px;
	font:1px 'Trebuchet MS';
	color:#bbb;
	text-indent:20px;
	position: absolute;
	top: 31px;
	right:674px;
	z-index:1;
	height: -16px;
}
 
#copyright a { color:#bbb; }
#copyright a:hover { color:#fff; }
 
.center {
	width: 960px;
	margin: 0 auto;
}
 
#logo {
	position:absolute;
	width:310px;
	height:70px;
	z-index:101;
	top: 15px;
	background-image:url(images/nwko_logo.png);
	background-repeat:no-repeat;
	}
 
		.skinny {
		width:20%;
		float:right;
		height: 500px;
		background-color:#FF3000;
		}
 
	.wide {
		width:60%;
		float:left:
		height: 500px;
		background-color: white;
		}
 
/* CCONTACTFORM */
 
 
#contact-area {
width: 700px;
margin: 10px 0 100px 90px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 500px;
background-color:#727272;
color:#333;
font-family: 'Rokkitt', arial, serif;
font-size:1.4em;
margin: 0px 0px 7px 0px;
border:none;
}
#contact-area p {
	margin:20px 0 20px 0;}
#contact-area input.checkbox {
	margin:0 0 1px 0px;
	padding:0;
	width:30px;
	background-color:transparent;
	}
 
#contact-area input.checkbox:focus {
	background-color:transparent;
	}
 
#contact-area textarea {
height: 150px;
}
#contact-area textarea:focus, #contact-area input:focus {
	background-color:#fdfdfb;
	-moz-box-shadow: 5px 5px 5px #000;
  -webkit-box-shadow: 5px 5px 5px #000;
  box-shadow: 5px 5px 5px #000;
}
#contact-area input.submit {
width: 130px;
float: right;
background-color:#eeeee3;
text-transform:uppercase;
font-weight:bold;
}
#contact-area input.submit:hover {
width: 130px;
float: right;
-moz-box-shadow: 5px 5px 5px #000;
  -webkit-box-shadow: 5px 5px 5px #000;
  box-shadow: 5px 5px 5px #000;
  color:#FFF;
  background-color:#666666;
text-transform:uppercase;
font-weight:bold;
}
label {
text-align: left;
margin:5px;
padding-top: 5px;
font-size: 1.2em;
color:#727272;
font-family: 'Rokkitt', Arial, Helvetica, sans-serif;
}
.rounded {
			border-radius:7px;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		}
.large {  
width: 6em; 
height: 6em;}	
 
/*social*/
	#buttondiv{
	position:absolute;
	left: 26px;
	top: 69px;
	}
	.buttonimg{
		padding:0; !important
		margin:0; !important
		heigh:49px;
		width:50px;
		}
 
	.buttonimg:hover {
		padding:0;
		margin:0;
		-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	}
	/* end social*/
 

html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>NWKO 2011 - Home</title>
<link rel="stylesheet" type="text/css" href="style.css" /><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
<link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="header1">
<div id="nav-wrapper">
<div id="nav">
</div>
</div>
</div>
<div id="content-wrapper">
<div class="center">
</div>
</div>
<div id="footer-wrapper">
<div id="footer">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</body>
</html>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 50 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

How many words are there in

How many words are there in any language's dictionary that are that long without a space or hyphen?

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

tifacola
tifacola's picture
Offline
newbie
United States
Last seen: 10 years 47 weeks ago
United States
Timezone: GMT-7
Joined: 2011-07-03
Posts: 9
Points: 12

Oh my GAWD! LOL!!!!! Thank

Oh my GAWD! LOL!!!!! Thank YOU!!!!

I have totally butchered this site all over that. I was too lazy to grab the "Lorem ipsum"!