Css Help - Topic

Member

Posts: 29,305

Joined: Nov 12 2005

Gold: 710.00

Jul 21 2013 05:42pm

I'm just now learning CSS because I'd like to get proficient enough with it and create some nice UX with Photoshop.

I'm having trouble figuring out how to use margins properly. How do I center the text in the nav and align the logo with the the beginning text of the menu?

Thanks in advance for your help.

Code

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>####</title>
<style type="text/css">

body {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
}

h1 {
font-size: 50px;
}

nav {
position: absolute;
left: 0;
width: 100%;
background-color: #444444;
}

nav ul {
margin: 0 auto;
list-style: none;
}

nav ul li {
float: left;
}

nav ul li a {
display: block;
margin-right: 0px;
width: 100px;
font-size: 14px;
line-height: 50px;
text-align: center;
text-decoration: none;
color: #ffffff;
}

nav ul li a:hover {
color: #ff0000;
}

nav ul li.selected a {
color: #ff0000;
}

#content {
margin-top: 100px;
}

footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #444444;
}

</style>
</head>
<body>
<header>
<h1>logo</h1>
</header>
<nav>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
<section id="content">
<p>asdgasdgasdg asdgasd asdg asdg asdg asd asdg </p>
</section>
<footer>
adgasdg asdg asdg asd a sdg asd ga asdg
</footer>
</body>
</html>

I feel like an idiot because it's probably something simple but bare with me, I'm learning, lol.

This post was edited by Santora on Jul 21 2013 05:43pm

Methical

Member

Posts: 2,324

Joined: Jun 5 2012

Gold: 2,116.01

Jul 21 2013 08:20pm

You have few errors in you css. Send me a pm if you wanna talk about CSS, I will gladly help you

First tip: don't use absolute position

12yno

Member

Posts: 29,305

Joined: Nov 12 2005

Gold: 710.00

Jul 21 2013 08:27pm

Quote (Methical @ Jul 21 2013 10:20pm)

You have few errors in you css. Send me a pm if you wanna talk about CSS, I will gladly help you

First tip: don't use absolute position

Sent ya a PM. Thanks for responding and offering to help.

0n35

Member

Posts: 11,610

Joined: Oct 28 2008

Gold: 1,795.00

Jul 22 2013 06:55pm

Code

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>####</title>
<style type="text/css">
body {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
}

h1 {
font-size: 50px;
text-align:center;
padding-right:5.9em;
}

nav {
height:3em;
text-align:center;
background-color: #444444;
}

nav ul {
margin: 0 auto;
list-style: none;
}

nav ul li {
display:inline;
}

nav ul li a {
padding:0px 20px;
font-size: 14px;
line-height: 50px;
text-decoration: none;
color: #fff;
}

nav ul li a:hover {
color: #ff0000;
}

nav ul li.selected a {
color: #ff0000;
}

#content {
margin-top: 100px;
}

footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #444444;
}
</style>
</head>
<body>
<header>
<h1>logo</h1>
</header>
<nav>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
<section id="content">
<p>asdgasdgasdg asdgasd asdg asdg asdg asd asdg </p>
</section>
<footer>
adgasdg asdg asdg asd a sdg asd ga asdg
</footer>
</body>
</html>

12yno

Member

Posts: 29,305

Joined: Nov 12 2005

Gold: 710.00

Jul 22 2013 09:02pm

Thanks for the help. I ended up floating to the left still and just using it that way. I got impatient and just went with it and actually don't mind how it looks atm. I haven't worked on it today because I'm checking out some jquery and gonna learn how to create drop down menus with it.

html

Code

<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body> <img src="images/banner1.png">

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Community</a></li>
<li><a href="#" class="endmenu">Shop</a></li>
</ul>
</nav>
</body>
</html>

css

Code

* {
margin: 0;
padding: 0;
display: block;
}

body {
width: 1000px;
margin: 0 auto;
padding: 25px;
background-color: #bbbbbb;
color: #444444;
}

a {
text-decoration: none;
}

nav {
position: absolute;
left: 0;
width: 100%;
background-color: #333333;
border: 2px solid #000000;
}

nav ul {
margin: 0 auto;
width: 1000px;
}

nav ul li {
float: left;
}

nav ul li:hover {
background-color: #444444;
}

nav ul li a {
padding: 15px 10px 15px 10px;
text-align: center;
color: #ff0000;
font-family: sans-serif;
font-size: 15px;
border-left: 2px solid #000000;
}

nav ul li a.endmenu {
border-right: 2px solid #000000;
}

nav ul li a:hover {
color: #ffffff;
}

Let me know if you think there's anything I should focus on doing better or if there's a more effective way of doing what I've done so far. I'm definitely open to criticism and would like to know more efficient ways if they exist.

This post was edited by Santora on Jul 22 2013 09:03pm

TiMasse

Member

Posts: 31,806

Joined: Jan 22 2008

Gold: 2,235.56

Jul 24 2013 06:14am