Needing help with Positioning

Hello, so I currently have this: http://prntscr.com/45w458

And I want this: http://prntscr.com/45w4b9

Can you please help me with positioning the links and also making the text on “union” more spread out?

This is my code(HTML):


<div class="box">
                      <h2>&nbsp;&nbsp;Miners<br>&nbsp;&nbsp;Union
                      <a href="url" class="button">Home</a><a href="url" class="button">Forums</a><a href="url" class="button">Donate</a><a href="url" class="button">Apply</a><ahref="url" class="button">Map</a></h2>
                </div>

CSS:


.button {
  font:bold 11px Arial;
  text-decoration:none;
  background-color:#EEEEEE;
  color:#333333;
  padding:6px 24px 6px 24px;
  border-top:1px solid #CCCCCC;
  border-right:1px solid #333333;
  border-bottom:1px solid #333333;
  border-left:1px solid #CCCCCC;
  font-color:#333300;
}

.box {
        width:90%;
        background-image: url(navbarbackground.png);
        height:65px;
        margin:auto;
}

Thanks!

Use letter-spacing for spreading letters out.

Thanks, I didn’t know I could do that :slight_smile:

Do you know how I could make the links in between both lines of the heading?

Perhaps this page can be of some help.

http://pmob.co.uk/pob/centred-float.htm

Something like this perhaps (IE8+).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
	background:#ccc;
}
ul {
	margin:0;
	padding:0;
	list-style:none
}
.wrap {
	width:90%;
	background:#666;
	margin:auto;
	border:10px solid #fff;
	border-radius:4px;
	box-shadow:5px 5px 20px rgba(0,0,0,0.3);
	padding:10px;
}
.wrap:after{
	content:" ";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
.wrap ul {
	display:table;
	width:100%;
}
.wrap li {
	display:table-cell;
	vertical-align:middle
}
.wrap li a {
	text-decoration:none;
	background-color:#EEE;
	color:#333;
	padding:6px 0 6px 0;
	border:1px solid #CCC;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	font-color:#330;
	display:block;
	text-align:center;
}
.wrap h2 {
	margin:0;
	text-transform:uppercase;
	color:#fff;
	width:6em;
	text-align:center;
	line-height:1.0;
	letter-spacing:.04em;
	display:in line-block;
	vertical-align:middle;
	float:left;
}
.wrap h2 span {
	display:block;
	letter-spacing:.2em;
}
.navwrap {
	overflow:hidden;
	padding:10px 0 0;
}
</style>
</head>

<body>
<div class="wrap">
		<h2>Miners <span>Union</span></h2>
		<div class="navwrap">
				<ul class="nav">
						<li><a href="#">Home</a></li>
						<li><a href="#">Forums</a></li>
						<li><a href="#">Donate</a></li>
						<li><a href="#">Apply</a></li>
						<li><a href="#">Map</a></li>
				</ul>
		</div>
</div>
</body>
</html>


Thanks Paul!

IF you don’t mind, could you please point out what value to change to change the height?

To change the height of what? The menu buttons? You can do that by increasing the line height:

.wrap ul {
	display:table;
	width:100%;
        line height: 1.5em /*add this, and adjust value to suit*/
}

Nope, the actual box it is all in

Increase the value of the padding in .wrap from 10px to whatever you want.

Thanks!

I have come onto another problem though, at its current stage it looks like this: http://prntscr.com/45yd1d

But I havn’t changed anything that would do this? How could I fix this?


ul {
	margin:0;
	padding:0;
	list-style:none;
}
.wrap {
	width:87%;
	background-image: url(navbarbackground.png);
	margin:auto;
	box-shadow:5px 5px 20px rgba(0,0,0,0.3);
	padding:0px;
}
.wrap:after{
	content:" ";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
.wrap ul {
	display:table;
	width:100%;
}
.wrap li {
	display:table-cell;
	vertical-align:middle;
}
.wrap li a {
	text-decoration:none;
	background-color:#EEE;
	color:#333;
	padding:6px 0 6px 0;
	border:1px solid #CCC;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	font-color:#330;
	display:block;
	text-align:center;
}
.wrap h2 {
	margin:0;
	text-transform:uppercase;
	color:#fff;
	width:6em;
	text-align:center;
	line-height:1.0;
	letter-spacing:.04em;
	display:in line-block;
	vertical-align:middle;
	float:left;
}
.wrap h2 span {
	display:block;
	letter-spacing:.2em;
}
.navwrap {
	overflow:hidden;
	padding:10px 0 0;
}


<div class="wrap">
		        <h2>Miners <span>Union</span></h2>
		        <div class="navwrap">
				<ul class="nav">
				        <li><a href="#">Home</a></li>
				        <li><a href="#">Forums</a></li>
				        <li><a href="#">Donate</a></li>
				        <li><a href="#">Apply</a></li>
					<li><a href="#">Map</a></li>
				</ul>
		        </div>
                </div>

Hi,

The code above doesn’t produce the result we are seeing in your drawing so there must be some other rules being applied somewhere. We may need to see the full code to determine what’s wrong unless you have an example showing the problem you are seeing.

It looks like you have fixed the width of the nav from the drawing but in the code above it is a percentage width so this shouldn’t happen.

Okay so my full html code is:


<!DOCTYPE html>
<html>

<head>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
        <div class="background">
        <br>

                <div class="wrap">
		        <h2>Miners <span>Union</span></h2>
		        <div class="navwrap">
				<ul class="nav">
				        <li><a href="#">Home</a></li>
				        <li><a href="#">Forums</a></li>
				        <li><a href="#">Donate</a></li>
				        <li><a href="#">Apply</a></li>
					<li><a href="#">Map</a></li>
				</ul>
		        </div>
                </div>

                <br><br>

                <center>
                <img src="wtmu.png" width="90%" Height="200px">
                </center>

                <div class="box2">
                        <h2>&nbsp;&nbsp;Miners Union</h1>
                </div>

        </div>
</body>

</html>

And CSS:


html, body {
	margin:0;
	padding:0;
	height:100%;
}

body {
	background:url(background.jpg);
	font-family:Arial, Helvetica, sans-serif;
}

.background {
	width:40%;
        margin:auto;
	min-height:100%;
	background:#d8d8d8;
	box-shadow:0 0 14px 8px rgba(0,0,0,0.3)
}
         
.box2 {
        width:90%;
        margin:auto;
        height:200px;
        background:#707070;
}

p {
        color:#FFFFFF;
}

}
ul {
	margin:0;
	padding:0;
	list-style:none;
}
.wrap {
	width:87%;
	background-image: url(navbarbackground.png);
	margin:auto;
	box-shadow:5px 5px 20px rgba(0,0,0,0.3);
	padding:0px;
}
.wrap:after{
	content:" ";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
.wrap ul {
	display:table;
	width:100%;
}
.wrap li {
	display:table-cell;
	vertical-align:middle;
}
.wrap li a {
	text-decoration:none;
	background-color:#EEE;
	color:#333;
	padding:6px 0 6px 0;
	border:1px solid #CCC;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	font-color:#330;
	display:block;
	text-align:center;
}
.wrap h2 {
	margin:0;
	text-transform:uppercase;
	color:#fff;
	width:6em;
	text-align:center;
	line-height:1.0;
	letter-spacing:.04em;
	display:in line-block;
	vertical-align:middle;
	float:left;
}
.wrap h2 span {
	display:block;
	letter-spacing:.2em;
}
.navwrap {
	overflow:hidden;
	padding:10px 0 0;
}


        


	





On .navwrap you have overflow:hidden set so it’s clipping anything extra set.

Basically, the navigation section is too wide and it’s clipping off the eextra. The <ul> has default margins and paddings set on it (either or depending on browser) so you need to remove it. You can use a universal reset such as

*{margin:0;padding:0;}

This will reset any default margins and paddings to 0 by default unless you have otherwise set. Or you can lookk into resets which are probably better, such as Eric Meyer Reset.

Thanks! That fixed it :slight_smile:

Actually that wasn’t the problem at all.:slight_smile:

The problem is that you have a typo in your code which is breaking the css. There is a stray bracket here at the top which corrupts the styles for the ul that I gave you.


}
ul {
	margin:0;
	padding:0;
	list-style:none;
}


Make sure you validate your css before looking at any problems because you don’t want to spend hours looking at the wrong thing when its a simple typo :slight_smile:

By the way why is that page so narrow? It’s almost unusable on a small window.

I was hoping to somehow make it wider for smaller windows

I suppose that’s why it wasn’t showing up in Chrome Inspect Element. Should have ran it by the validator first…good catch.

You can add a min-width declaration, to stop it getting too narrow.

.background {
	width:40%;
        min-width: 400px; /* add this, adjusting size to suit */
        margin:auto;
	min-height:100%;
	background:#d8d8d8;
	box-shadow:0 0 14px 8px rgba(0,0,0,0.3)
}

And do ensure you validate your code, as I’ve spotted another couple of errors.

.wrap h2 {
	margin:0;
	text-transform:uppercase;
	color:#fff;
	width:6em;
	text-align:center;
	line-height:1.0;
	letter-spacing:.04em;
	display:in line-block; /* should read inline-block */
	vertical-align:middle;
	float:left;
}
.wrap li a {
	text-decoration:none;
	background-color:#EEE;
	color:#333;
	padding:6px 0 6px 0;
	border:1px solid #CCC;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	font-color:#330; /* font-color is not a valid CSS property */
	display:block;
	text-align:center;
}