I am relatively new to HTML and CSS and am working on recreating websites.
My output looks like this
My (sloppy) code is here:
Both the CSS and HTML
http://pastebin.com/4EVBj5zK
I would like to know how to properly align my text to the right of the div.
Make the text container have absolute positioning, and then position it to the very top and right of its parent.
You also need to make sure the parent element is relatively positioned.
head{font-family: Verdana, Geneva, sans-serif;
}
body{background-color: #C0C0C0;
}
p{font-family: "Courier New", Courier, monospace;
}
.borderlist{
list-style-position:inside;
list-style-type:none;
}
.header{
font-family: Verdana, Geneva, sans-serif;
font-size: 50px;
float: left-side;
padding-top: 20px;
padding-left: 50px;
}
a:link, a:visited, a:active{
text-decoration: none;
color: #292421;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
display: inline-block;
border : 4px solid orange;
width: 275px;
padding: 30px;
background-color: #D3D3D3;
}
a:hover{
text-decoration: none;
color: #292421;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
border : 4px solid #ee7600;
padding: 30px;
background-color: #E8E8EE;
}
.div_top{
background-color: #E18A07;
width: 700px;
height: 300px;
padding-left: 50px;
padding-top: 75px;
margin-left: 75px;
float:left;
position:relative;
}
.div_top_text{
width: 75px;
top:0px;
right:0px;
position:absolute;
padding-right: 20px;
vertical-align:top;
}
.br_bigger{
margin: 100px;
padding: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style_test.css">
<title>Freepbx Support</title>
</head>
<body>
<header class="header"><b>FreePBX</b> Support</header>
<br>
<div class="div_top">
<li class="borderlist">FreePBX initial setup</li>
<br>
<br>
<br>
<li class="borderlist">FreePBX Advanced setup</li>
<div class="div_top_text">FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX</div>
</div>
</body>
</html>
Try this, this solution would take care of the browser being resized.
* Note: I noticed you are using li tags and I did not see any ul tag, generally li are using along with ul
.list-boxer{
float: left;
}
.list{
width: 275px;
list-style: none;
margin: 0px 0px;
padding: 0px 0px;
}
.list li{
width: inherit;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
padding: 0px;
}
.list li a{
display: block;
padding: 30px 30px;
margin: 25px 0px;
border : 4px solid #ee7600;
}
.div_top_text_boxer{
overflow: hidden;
padding: 25px;
}
.div_top_text{
width: 98%;
padding: 1%;
}
<div class="list-boxer">
<ul class="list">
<li>FreePBX initial setup</li>
<li>FreePBX Advanced setup</li>
</ul>
</div>
<div class="div_top_text_boxer">
<div class="div_top_text">
FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX
</div>
</div>
Related
body {
background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
font-size:50px;
font-family: 'Raleway', sans-serif;
position: absolute;
color: white;
left: 790px;
}
.title {
position: relative;
}
.text {
color: white;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
line-height: 10px;
}
.nfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black|50%;
}
.sfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black;
}
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:750px;
margin-bottom: 500px;
background-color:black;
position: absolute;
}
.text-desc {
color:white;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
}
.buttonnfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonof {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
background-color:#05a2aa;
}
.buttonsfa:hover{
background-color:#05a2aa;
}
.buttonof:hover{
background-color:#05a2aa;
}
<!doctype html>
<html>
<head>
<title> SpeedyAlts </title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class='bg'>
<a class="title"> SpeedyAlts </a>
<div class="nfa">
<center>
<a class="text"> NFA Account </a>
<br>
<br>
<a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
</center>
<a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="sfa">
<center>
<a class="text"> SFA Account </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="of">
<center>
<a class="text"> Optifine Cape </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
</div>
</div>
<script src="https://embed.selly.gg"></script>
</body>
</html>
I have got no idea why it is not working. For some reason with margin-top margin-left etc. It's not moving it up nor down with any of the margins. Could Anyone help? I am not that good at HTML nor with CSS so excuse any code that is badly formatted if there is any. Also, if anyone could give me any advice on problems like this in the future that would be helpful. Thanks.
Your div in question has position:absolute. You will need to either remove this, or use top and bottom, left and right to move it on the page. In your example, if you'd like to move the element up on the page you will need to declare:
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
background-color:black;
position: absolute;
left:750px;
bottom: 500px;
}
Please keep in mind this means your element will always be 500px from the bottom and 750px from the left. It is better to use percentage values.
To move it up, you can try one of these to the class .of :
Margin approach
margin-top:-50px;
Absolute positioning approach
top: 300px; //change this value as needed
Transform approach
transform:translateY(-50px);
im trying to create a website, but im having trouble with 2 parts;
1. I am unable to vertically align the Website title vertically so that its is in the middle of the div.
2. Im trying to left align the menu table with the header div right above it and make it stay as such for all browser types.
I have tried to do different things to get both the above to work, but nothing seems to work and am unable to align either of the elements. Could someone help me please.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Portal</title>
<style>
body{
background-color: black;
}
h1.header{
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
color: #fff;
text-transform: uppercase;
}
#headerdiv{
margin: 0px auto;
border: 1px solid red;
width: 70%;
height: 100px;
padding-top:30px;
}
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
height: 75px;
padding: 0px;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #808080;
border-collapse: collapse;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
height: 100px;
}
a{
color: #808080;
}
#titleSize{
font-size: 25px;
}
#nav {
line-height:30px;
background-color:#4D4D4D;
height:80px;
width:100%;
}
</style>
</head>
<body>
<div id="headerdiv">
<h1 class="header">game<span id="titleSize">portal</span></h1>
</div>
<div id="nav">
<table style="background-color: #4D4D4D; padding-left: 15%;">
<tr>
<td>Home</td>
<td>Games</td>
<td>News</td>
<td>Contact Us</td>
</tr>
<table>
</div>
</body>
</html>
I have tried messing with the positions (abs, fixed, relative) as well as with the margins, but nothing seems to move either of the elements. Thanks in advance.
One way to do it is through padding:
#headerdiv{
width: 200px;
margin:0px auto;
border: 1px solid red;
width: 70%;
height: 70px;
padding-top:30px;
}
Here height has been changed and the rest to 100 has been added to padding-top
There are many ways to do that, example:
http://jsfiddle.net/ovLhjmwb/
For example: Is more easy to have a container that contains all the child elements (and give it a width)
.container {
width: 400px;
margin: auto;
}
Also, vertical aligned text, is a little difficult to do, the easiest way is to use the vertical-align property (that comes with table elements)
#headerdiv table{
vertical-align: middle;
height: 100%;
width: 100%;
}
So I guess there are some more probs. For example use more HTML5 tags and not so many of ID's or classes. Keep your DOM-tree as simple as possible. You will get a better structure and your xode is more readable. BTW I fixed your problems in my solution as well.
HTML:
<header>
<h1>Game<span>Portal</span></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Games</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
body{
background: black;
}
header {
width: 70%;
display: block;
margin: 0 auto;
height: 100px;
border: 1px solid red;
}
header h1 {
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 30px;
color: white;
text-transform: uppercase;
padding-top:13px;
}
header h1 span {
font-size: 25px;
}
nav {
width:70%;
margin:0 auto;
text-align:left;
height: 100px;
background: #4D4D4D;
}
nav ul {
margin-left:-40px;
}
nav ul li {
float:left;
list-style-type:none;
}
nav ul li a{
color: #808080;
height: 62px;
padding:38px 20px 0 20px;
border-left:1px solid #808080;
display: block;
font-size: 15pt;
}
quick note: I just started learning HTML yesterday, this is incredibly new to me so don't be too harsh please--that said, if anyone sees any code that could be done in a simpler way or has any random advice outside of what I'm requesting, please don't hesitate to share. I have a feeling this is terribly scripted, this site is more to help me learn html than for actual use, so there are some area's where I was just using trial and error to make certain things work, and as a result you might see unnecessary code lying around. Point that out too if it bugs you!
ANYWAY, on to the point of the post. I want to have div.textbox inside of div.contentbg with margin-top: 15px. When I try this, however, it applies the margin to div.contentbg instead of div.textbox... it's probably something really stupid. Any help? Thanks in advance! :D
Here's the site: http://jsfiddle.net/gbk8zhwv/1/embedded/result/
Here's the code:
<html> <title>JBROblivion</title> <head> <style> * {
margin: 0;
padding: 0;
}
body {
background-color: black;
margin: 0px;
padding: 0px !important;
height: 100%;
}
a {
margin: 0;
padding: 0;
}
img {
display: block;
margin: 0;
padding: 0;
}
div.contentbg {
background-color: #660000;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
div.textbox {
width: 90%;
margin: 0px auto;
}
div.lrmipsm {
width: 500px;
}
#nav {
width: 100%;
float: left;
margin: 0;
padding: 0;
background-color: #5C0000;
border-bottom: 2px solid #853333;
}
#nav ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 1000px;
}
#nav li {
float: left;
}
#nav li a:link,
a:visited {
display: block;
padding: 15px;
width: 170px;
text-decoration: none;
font-weight: bold;
color: #000000;
background-color: #5C0000;
text-align: center;
text-transform: uppercase;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
#nav li a:hover,
a:active {
background-color: #520000;
}
h1.centre {
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
text-align: center;
text-transform: uppercase;
}
p.introblock {
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
</style> </head>
<body>
<img src="http://yt3.ggpht.com/-HKi7fjQseQ0/VJzF49SbsxI/AAAAAAAAAJI/zbpOKJ0Uy0E/w2120-fcrop64=1,00005a57ffffa5a8-nd/Channel%2BArt%2BMask.jpg" alt="Banner" width="100%">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Milestones</li>
<li>Shop</li>
<li>Youtube </li>
</ul>
</div>
<div class="contentbg">
<div class="textbox">
<h1 class="centre">Intro</h1>
<br>
<div class="lrmipsm">
<p class="introblock">Lorem ipsum... sample text.
</p>
</div>
</div>
</div>
</body>
The reason it does not work is because contentbg does not actually have any of its own content. Notice in the example how it works when you run it because there is content in the first div. If you remove "This is some content" it will not appear to work because there is no content to workout where to begin marginalizing (for lack of a better word) from.
Example
div {
background-color: yellow;
}
div.ex {
background-color:red;
margin-top: 40px;
}
<div>This is some content
<div class="ex">This is some content on the inner div.</div>
</div>
In the case you have a div like yours that is empty I would suggest using the padding property instead. This will leave the divs where they are and instead produce some padding around the content of the div you require padding on.
What i have looks splendid in firefox, but for some reason all of the text won't seem to stay contained within their respective div's in Chrome. Chrome seems to be assigning random height values to the ul and h1 elements, but for the life of me I can't seem to figure out why. EDIT: Okay, I am going crazy with rage. I mean it even works in explorer............ What is Chrome's (read "my") issue!?!?!?!?!?!
I deleted the screen shot, since i've made some changes. I've simply just uploaded it to the site musingsofamachiavellian.com you should be able to see the issue in all its glory there.
THANK YOU SO MUCH, the fix was as easy as adding html { height:100%;}
This is quite literally the first code i've ever written from scratch, so be gentle :|
CSS:
body {
background-color: #a5e2a8; /*A light green*/
min-width: 960px;
}
#Foundation {
width:960px;
height:100%;
background-color: #3b3b3b; /*Milk White*/
background-color: rgba(59,59,59,0.9);
/* background-color: #212121; /*A light black*/
}
#Header {
height:80px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
}
#TitleText{
height:80px;
width:940px;
font-family: Cambria math;
font-size: 48px;
padding: 16px;
color: #F70D1A;
vertical-align: top;
}
#ButtonBar{
height:32px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
}
#ButtonBarUL{
height:32px;
width:940px;
margin:0px;
padding: 6px;
}
.Button {
text-align: center;
font-family: Cambria math;
font-size: 16px;
padding-top: 0px;
padding-left: 0px;
color: #F70D1A;
display: inline-block;
list-style-type: none;
vertical-align: top;
}
#SidebarContainer {
height:100%;
width:160px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.SideBarContent {
width:140px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
text-align: center;
font-family: Cambria math;
font-size: 12px;
color: #212121;
}
#MainContainer {
height:100%;
width:770px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.ArticleContainer {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.ArticleHead {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
border-bottom:1px solid;
font-family: Cambria math;
font-size: 14px;
color: #F60D1B;
}
.ArticleContent {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
font-family: Cambria math;
font-size: 12px;
color: #212121;
}
#Footer {
height:32px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
font-family: Cambria math;
font-size: 12px;
color: #212121;
clear: both;
list-style-type: none;
text-align: center;
}
ul, li {
list-style-type: none;
}
site:
<!DOCTYPE html>
<head>
<link rel='stylesheet' type='text/css' href='core.css' />
<script type='text/javascript' src='script.js'></script>
<title>Musings</title>
</head>
<body>
<div id='Foundation'>
<header id='Header'>
<h1 id='TitleText'>Musings of a Machiavellian</h1>
</header>
<div id='ButtonBar'>
<ul id='ButtonBarUL'>
<li class='Button'>About |</li>
<li class='Button'>Past |</li>
<li class='Button'>Future |</li>
<li class='Button'>FAQ |</li>
</ul>
</div>
<section id='SidebarContainer'>
<div class='SideBarContent'>
<p>Chronicles</p>
</div>
</section>
<section id='MainContainer'>
<div class='ArticleContainer'>
<div class='ArticleHead'>
<h1>Hey! Thanks for stopping by. We're currently under construction...</h1>
</div>
<article class='ArticleContent'>
<p>This will be blog 2.0 - A webspace for own personal experimentation, and to chronicle (err.... blog) some musings.</p>
<p>They'll range in topic from politics, to science, to strategy, to economics. Stay tuned, or simply send me a message.</p>
<p>I'm by no means a web-development expert. If you see something that should be improved, I more than welcome your suggestions. Feel free to shoot me an e-mail!</p>
</article>
</div>
<div class='ArticleContainer'>
<div class='ArticleHead'>
<h1>I hate chrome...</h1>
</div>
<article class='ArticleContent'>
<p>If you're viewing this page in Chrome, chances are it looks jumbled. The reason, no clue... but the search for an answer is quickly turning intot he bane of of my existance.</p>
<p>Frustration level.... over 9000! I mean, it even works in internet exploder...</p>
</article>
</div>
</section>
<footer id='Footer'>
<ul id='ContactInfo'>
<li>info'at'Musings...</li>
</ul>
</footer>
</div>
</body>
</html>
I did alot of tuning up. Take a look here http://codepen.io/anon/pen/Ezham
Noticeable I used %'s instead of pixels and added correct positioning.
I see two things:
1. The Cambria math font is causing problems.
2. You should add this css: html { height: 100% }
I believe this is because the div Foundation needs to match its css. Foundation and foundation. One is capitalized and one is not.
When I linked to my external style-sheet, it seems my wrapper styles are broken. If I paste the styles into the head on my index.html, it works just fine, but not when linking to a .css. All other css rules work perfectly either way, only the wrapper style appears to break.
The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.
the wrapper css:
#wrapper {
width: 960px;
margin: 0 auto;
}
and the html (minus content):
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="cont_left">
</div>
<div id="cont_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Any help or advice would be great.
EDIT: here is the full css:
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}
#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}
#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}
#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}
#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}
#nav_bar li {
display: inline;
padding-left: 58px;
}
#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}
#nav_bar li a:hover {
color: #fff;
background-color: #666;
}
.current {
color: #CCC;
}
#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}
#cont_left {
width: 40%;
margin: 48px;
float: left;
}
#cont_right {
width: 40%;
margin: 48px;
float: right;
}
#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}
#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}
#footer_list li {
display: inline;
padding: 18px;
}
#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}
#footer_list li a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}
EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry. Still in early development stages, got stuck on this issue.
What browser are you using? I've just tried your sample in IE8 and it won't centre at all unless I include the XHTML doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
No idea why, or if you have this or not, but it may help.
View source of the page you are using and click on the CSS document you link you have linked. It should pull up a CSS page with your styles, if not, you're either 1) not linking it correctly or 2) there is a permissions issue on the server.
ADD: Check it in developer tools (F12 -> IE, left-click>inspect Element -> chrome, Firefox).
It will not make a difference whether your css rule is in an external stylesheet or in a <style> tag in head. Things to try;
Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/
Do you have multiple css files? If so, try to include this stylesheet last.
Use firebug (or chrome inspector if you prefer) to inspect your #wrapper element, to see if your definition show up at all (and if its overruled and by what).
I would love to see your entire solution if possible, so i can poke around :)
I have never had this problem before. You may not have the link correct
Make sure that you attached you style sheet correctly:
<link href="Default.css" rel="stylesheet" type="text/css" />
If it is in a folder (say Styles for ex):
<link href="Styles/Default.css" rel="stylesheet" type="text/css" />
If your webpage is in a folder then you need to add "../" to the front
<link href="../Styles/Default.css" rel="stylesheet" type="text/css" />
You can also try !important
#wrapper {
width: 960px;
margin: 0 auto !important;
}
If that does not work, then right click the wrapper element and click "inspect element" in chrome. This will show you all applied css on that element, and what has been over written by what. This will give you a better idea of what is actually going on (downloading Firebug for firefox is also helpful)