4 Replies - 315 Views - Last Post: 16 February 2015 - 08:59 AM

#1 Embers  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 09-October 14

Really simple CSS 3 question about moving a button.

Posted 16 February 2015 - 08:32 AM

I am making a website for my project at college, but I am having trouble moving the buttons on the navigation bar in the middle. I have tried so many things and I cannot get it to move up. Here is the navigation bar: http://puu.sh/fZxk5/dc2773359e.png

I have tried using the margins, paddings and making another div. No luck.

The navigation bar is called "header" in css and inside the header is the "nav" div, the CSS code for this is:

#header
{
	color: white;
	
	background-color: black;
	
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 50px;
	margin-right: 50px;
	
	width: auto;
	height: auto;
	
	border-radius: 10px;
	

}

#nav
{
	display: inline;
}




Thanks in advanced!

Is This A Good Question/Topic? 0
  • +

Replies To: Really simple CSS 3 question about moving a button.

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: Really simple CSS 3 question about moving a button.

Posted 16 February 2015 - 08:34 AM

You'll need to post some HTML as well. You need to post enough information for someone to replicate the problem.
Was This Post Helpful? 1
  • +
  • -

#3 Embers  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 09-October 14

Re: Really simple CSS 3 question about moving a button.

Posted 16 February 2015 - 08:38 AM

Ok sorry :/ - Just that if I post all my code, I would feel that I am letting someone else do all the work and that I am trying to get someone else to fix it, which is what I want but I don't want people to think I am not making an effort if you know what I mean?

Here is my HTML:
<html>

<head>
	<title>Mooter Match</title>
	<link rel="stylesheet" type="text/css" href="CSS/homeStyle.css">
	<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
</head>

<body>
	<div id="header">
		<img src="images/logo.png" alt="Mooter Match Logo" width="380" height="70">
		<div id="nav">
		<a href="#" class="navButton">Login/ Sign up</a>
		<a href="#" class="navButton">Debates</a>
		</div>
	</div>
	
	<div id="content">
		<div id="innerContent">
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		<p>Hello World</p>
		</div>
	</div>
	
	<div id="footer">
		<p>Hello World</p>
	</div>
</body>

</html>



Here is my CSS:
#header
{
	color: white;
	
	background-color: black;
	
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 50px;
	margin-right: 50px;
	
	width: auto;
	height: auto;
	
	border-radius: 10px;
	

}

#header img
{
margin: 20px;
}

#nav
{
	display: inline;
}

#innerContent
{
	margin: 10px;
}

#content
{
	background-color: white;
	
	margin-right: 20px;
	margin-left: 20px;
	
-webkit-box-shadow: -1px 1px 36px -3px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 36px -3px rgba(0,0,0,0.75);
box-shadow: -1px 1px 36px -3px rgba(0,0,0,0.75);
}

#footer
{
	color: white;
	background-color: black;
	
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	
	width: auto;
	height: auto;
}

.navButton:hover
{
	background: #febd4b; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#febd4b) to(#fed970)); /*old webkit*/
    background: -webkit-linear-gradient(#febd4b, #fed970); /*new webkit*/
    background: -moz-linear-gradient(#febd4b, #fed970); /*gecko*/
    background: -ms-linear-gradient(#febd4b, #fed970); /*IE10*/
    background: -o-linear-gradient(#febd4b, #fed970); /*opera 11.10+*/
    background: linear-gradient(#febd4b, #fed970); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#febd4b, #fed970); /*PIE*/	
}
.navButton
{
	text-decoration:none;
		font-size: 12px;
	font-weight:bold;
	padding: 7px 12px;
	cursor:pointer;	
	line-height:16px;
	display:inline-block;
	margin:0 0px 0px 0px;	
	border-radius: 2px;
	-moz-border-radius: 2px;/*gecko - mozilla*/ 
	-webkit-border-radius: 2px; /*new webkit - Chrome and Safari*/	
	box-shadow: #e3e3e3 0 1px 1px;	
	-moz-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);/*gecko - mozilla*/ 
	-webkit-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);/*new webkit - Chrome and Safari*/		
	behavior:url(PIE.htc);
	
		text-shadow: 1px 1px 0px #ffe8b2;
	color: #7c5d1b;
	border: 1px solid #d6a437;	
    background: #febd4b; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fed970) to(#febd4b)); /*old webkit*/
    background: -webkit-linear-gradient(#fed970, #febd4b); /*new webkit*/
    background: -moz-linear-gradient(#fed970, #febd4b); /*gecko*/
    background: -ms-linear-gradient(#fed970, #febd4b); /*IE10*/
    background: -o-linear-gradient(#fed970, #febd4b); /*opera 11.10+*/
    background: linear-gradient(#fed970, #febd4b); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#fed970, #febd4b); /*PIE*/
}



Ignore the "Hello World" text that is just a test to expand the content div I made.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: Really simple CSS 3 question about moving a button.

Posted 16 February 2015 - 08:51 AM

#header img {
    margin: 20px;
    vertical-align: middle;
}

Attached Image
Was This Post Helpful? 1
  • +
  • -

#5 Embers  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 09-October 14

Re: Really simple CSS 3 question about moving a button.

Posted 16 February 2015 - 08:59 AM

View Postandrewsw, on 16 February 2015 - 08:51 AM, said:

#header img {
    margin: 20px;
    vertical-align: middle;
}

Attachment Mooter.png


Thank you, it worked.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1