The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Having some issues with moving and centering some items, CSS floats and moving items
champion01
post Jun 13 2015, 02:52 PM
Post #1





Group: Members
Posts: 2
Joined: 13-June 15
Member No.: 22,718
I am coding my own site for practice. And I hit some speed bumps and CANNOT figure it out lol.

I have a few things I am trying to fix and can't figure out:

1.) Center the Nav Bar (it has drop down menus)

2.) move the <h3> blah blah text down so it has some spacing below the nav bar. Currently the h3 is to high up on the page.

3.) Center the <li> icons on the front page, they seem to be floating left. when I arrange it in "center" it just lines up straight up and down the page, it becomes 1 column instead of 3. I am trying to center the 3 columns, and currently they are hugging the left hand side.


I attached the files so you could download them if need be.

my index.html
CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lightsaber Combat Styles</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<header class="main-header">
<a href="index.html" ID="logo">
<h1>Lightsaber Combat Styles</h1>
<h2>May the Force be with you.</h2>
</a>
<div id="nav-center">
<nav>
<ul class="main-nav">
<li><a href="index.html" class="selected">Home</a></li>
<li class="dropdown"><a href="index.html">Lightsaber Combat Styles</a>
<ul class="drop-nav">
<li><a href="style1.html">Style 1</a></li>
<li><a href="style2.html">Style 2</a></li>
<li><a href="style3.html">Style 3</a></li>
<li><a href="style4.html">Style 4</a></li>
<li><a href="style5.html">Style 5</a></li>
<li><a href="style6.html">Style 6</a></li>
<li><a href="style7.html">Style 7</a></li>
</ul>
</li>
<li><a href="lcc.html">Lightsaber Chroegraphy Contest</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<body>

<h3>This is some information about various styles. Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
And some more information Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
</h3>

<div id="wrapper">
<section>
<ul id="gallery">
<li class="saber_styles">
<a href="style1.html">
<img src="img/numeral/roman1.png" alt="Style 1">
<p>Style 1</p>
</a>
</li>
<li class="saber_styles">
<a href="style2.html">
<img src="img/numeral/roman2.png" alt="Style 2">
<p>Style 2</p>
</a>
</li>
<li class="saber_styles">
<a href="style3.html">
<img src="img/numeral/roman3.png" alt="Style 3">
<p>Style 3</p>
</a>
</li>
<li class="saber_styles">
<a href="style4.html">
<img src="img/numeral/roman4.png" alt="Style 4">
<p>Style 4</p>
</a>
</li>
<li class="saber_styles">
<a href="style5.html">
<img src="img/numeral/roman5.png" alt="Style 5">
<p>Style 5</p>
</a>
</li>
<li class="saber_styles">
<a href="style6.html">
<img src="img/numeral/roman6.png" alt="Style 6">
<p>Style 6</p>
</a>
</li>
<li class="saber_styles">
<a href="style7.html">
<img src="img/numeral/roman7.png" alt="Style 7">
<p>Style 7</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2015 Rockstar Enterprises</p>
</footer>
</div>
</body>
</html>


my main.css
CODE

/*****************************
GENERAL
*****************************/

body {
font-family: 'Ubuntu', sans-serif;
}

#wrapper {
max-width: 940px;
margin:0 auto;
padding: 0 5%;
}

a {
text-decoration:none;
}

img {
max-width: 100%;
}

h3 {
margin:0 0 1em 0;
}



/*****************************
COLORS
*****************************/
/*Site Body*/
body {
background-color:#fff;
color:#999;
}

/*header color*/
header {
background:steelblue;
border-color: lightblue;
}

/*nav background on mobile devices*/
/*
nav {
background:lightblue;
}
*/

/*logo text*/
h1, h2 {
color: #fff;
}

/*links*/
a {
color: steelblue;
}




/*****************************
HEADING
*****************************/

header {
float:left;
margin:0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}

#logo {
text-align: center;
margin: 0;
}

h1 {
font-family: 'Ubuntu', sans-serif;
margin: 16px 0px;
font-size: 2em;
font-weight: bold;
}

h2 {
font-size:.75em;
margin:-5px 0 0;
font-weight:bold;
}


/*****************************
NAVIGATION
*****************************/

/*****************************
NAVIGATION *DROP-DOWN*
*****************************/
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@font-face {
font-family: 'icomoon';
src:url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.eot');
src:url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.woff') format('woff'),
url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.ttf') format('truetype'),
url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.svg#icomoon') format('svg');
}
body {
margin: 0;
background: #ecf0f1;
color: #fff;
font-family: sans-serif;
line-height: 1.5;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.main-header {
margin: auto;
width: 100%;
min-height: 90px;
padding: 1em 2em;
border: 2px solid #2675a9;
border-top: none;
border-radius: 0 0 5px 5px;
background: #2980b9;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.logo {
display: block;
text-decoration: none;
float: left;
margin-top: 5px;
}
.logo::before {
color: #fff;
content: "\e001";
font-weight: normal;
font-style: normal;
font-size: 2.5em;
font-family: "icomoon";
-webkit-font-smoothing: antialiased;
}

/* Nav Demo Styles -------------------- */

.main-nav,
.drop-nav {
background: #2c3e50;
}
.main-nav {
float: left;
border-radius: 4px;
margin-top: 8px;
border: solid 1px #1e2a36;
}
.main-nav > li {
float: left;
border-left: solid 1px #1e2a36;
}
.main-nav li:first-child {
border-left: none;
}
.main-nav a {
color: #fff;
display: block;
padding: 10px 30px;
text-decoration: none;
}


.dropdown,
.flyout {
position: relative;
}
.dropdown:after {
font-size: .5em;
display: block;
position: absolute;
top: 38%;
right: 12%;
}
.drop-nav,
.flyout-nav {
position: absolute;
display: none;
}
.drop-nav li {
border-bottom: 1px solid rgba(255,255,255,.2);
}
.dropdown:hover > .drop-nav,
.flyout:hover > .flyout-nav {
display: block;
}
.flyout-nav {
left: 100%;
top: 0;
}
.flyout:hover a,
.flyout-nav {
background: #395066;
}

.main-nav li:hover, .dropdown li:hover, .drop-nav li:hover {
background-color:black;
}


/*****************************
FOOTER
*****************************/

footer {
font-size:0.75em;
text-align:center;
clear:both;
padding-top:50px;
color:#CCC;
}


/*****************************
PAGE: HOME
*****************************/

#gallery {
margin:0px auto;
padding:0;
text-align:center;
list-style:none;
}
#gallery li {
float:left;
width:45%;
margin:2.5%;
background-color: #f5f5f5; /* oval roman numeral color */
color: #bdc3c7;
}

#gallery li a p {
margin:0;
padding:5%;
font-size:1em;
font-weight:bold;
color: #bdc3c7;
}


.saber_styles {
display:block;
max-width:150px;
margin:0 auto 30px;
border-radius:100%;
}


h3 {
margin:0 12% 0% 12%;
border: 2px solid;
color: black;
text-align:center;
}

/*****************************
PAGE: CONTACT US
*****************************/


/*****************************
PAGE: LCC
*****************************/


/*****************************
PAGE: HOME
*****************************/





Attached File  Lightsaber.zip ( 38.44k ) Number of downloads: 275
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
champion01
post Jun 13 2015, 04:34 PM
Post #2





Group: Members
Posts: 2
Joined: 13-June 15
Member No.: 22,718
Thanks to all who are looking at this and are trying to help! I appreciate it! I would love to give you a badge or an award to all those helping!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 14 2015, 04:28 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
1. Well, since the nav doesn't have a width and you probably don't want to give it one, you can't center it the normal way with auto margins. A trick that usually works is to make the block that should be centered inline-block and then it can be centered like an inline element, by using text-align:center with a parent block.

I think this works. Check it out.

CODE
nav          { display: inline-block }
#nav-center  { text-align: center }



You need to move the whole HEADER section inside BODY. You have it between HEAD and BODY now and you can't have anything at all there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 14 2015, 04:59 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
2. Margin doesn't work right off because of the floats and also because of collapsing margins, I think.

First you need to clear the floats. You can do that by adding clear: left to the rule for H3. Then .main-header seems to be the best place to put a bottom-margin.

Basically...

CODE
h3           { clear: left }
.main-header { margin-bottom: 2em }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:02 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC