Training on HTML\CSS - getting problems with positioning.

Page 1 of 1

1 Replies - 419 Views - Last Post: 16 August 2012 - 06:42 PM

#1 JonyGraphics  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 13-August 12

Training on HTML\CSS - getting problems with positioning.

Posted 16 August 2012 - 12:12 PM

Hello guys, so I'm really in need of money, and since my friend is needing a coder for his templates, I said Ill give it a go, but firstly ill train more on it since the last time I coded a theme was like a year ago.

So I started....

I have made the "Shape" you can see it there:

http://justxp.plutoh...vive/index.html

right, no content.

But i have a problem.

When adding menu, the menus just goes to the left side, not inline instead of going inline and to the right side.

I've tried adding an UL class to it, to position + design it, but the class just doesn't affect it!
I can't use UL\ li style because I already use the <li> at css, thats how the pagination buttons work.

There's my HTML (written by me)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
</head>
<header>
              <div class="header">
			  <div id="logo"><img src="img/logo.png"></div>
			  
			 <ul class="nav">
			 <li>Home</li>
			 <li>Shop</li>
			 <li>Rank</li>
			 <li>Free</li>
			 </ul>
			 
           </div>
              <div class="secondheader">
           </div>
              <div class="thirdheader">
           </div>
</header>

<body>
         <div class="container">
                                  <br />
            <img src="img/slider.png" /><br />
                                  <br />
							<br />
					    
         <span id="fontfamily1">FEATURED</span>&nbsp;
		                          <div id="lines"><img src="img/lines.gif"/>
		                </div>
						
						<!-- Featured boxes start -->
<div class="row-fluid">
         <div class="span3">
		 <div id="box1"></div>
		                   </div>
						    <div class="span3">
							<div id="box2"></div>
		                                      </div>
											  <div class="span3">
							                  <div id="box3"></div>
		                                                        </div>
																   <div class="span3">
							                                       <div id="box4"></div>
		                                                                              </div>
										  
			   
			   </div>
			   <br />
			        <br />
			   	           <span id="fontfamily1">LETEST</span>&nbsp;
		                          <div id="lines1"><img src="img/line2.gif"/>
		                </div>
						
						<!-- Featured boxes start -->
<div class="row-fluid">
         <div class="span3">
		 <div id="box5"></div>
		                   </div>
						    <div class="span3">
							<div id="box6"></div>
		                                      </div>
											  <div class="span3">
							                  <div id="box7"></div>
		                                                        </div>
																   <div class="span3">
							                                       <div id="box8"></div>
		                                                                              </div>
										  
			   
			   </div>
			   <br />
			        <br />
					<div class="row-fluid">
					
		<ul>
			<li class="btn btn-info"><a href=""><span style="color: #545454;">&laquo;</span></a></li>
			<li class="btn btn-current"><a href=""><span style="color: #545454;">1</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">2</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">3</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">4</span></a></li>
			<li class="btn btn-info"><a href=""><span style="color: #545454;">5</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">6</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">7</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">&raquo;</span></a></li>		
<!--Class "arrow" is the arrow -->			
		</ul>
</div>
<br /><br /><br />
</div>
</body>

<div class="footerbefore">
</div>
<div class="footer">
</div>
<div class="subfooter">
</div>


</html>


My own css:
.header {
background-image: url("../img/header.png");
width: 100%;
height: 79px;
}

.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}

.thirdheader {
background-image: url("../img/bhead3.png");
width: 100%;
height: 60px;
border-bottom: solid 6px #f6f6f6;
}

@font-face {
  font-family: telegrafico;
  src: url(‘telegrafico.ttf’);
}

#fontfamily1 {
color: #747272;
font-family: telegrafico;
font-size: 18px;
float: left;
}

#lines {
cursor: default;
float: right;
position: relative; 
bottom: 19px;
left: 2px;
}
#lines1 {
cursor: default;
float: right;
position: relative; 
bottom: 19px;
left: 1px;
}

/* Boxes row 1 */
#box1 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box2 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box3 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box4 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}

/* Boxes row 2 */

#box5 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box6 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box7 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box8 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}

/* Pages */
#page1 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 30px;
height: 28px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
-webkit-border-radius: 3px;
border-radius: 3px;
text-align: center;
padding-top: 10px;
padding-bottom: 5px;

}

.navigation {
display:inline;
}


.footerbefore {
background-image: url("../img/footerbg.png");
width: 100%;
height: 66px;
border-bottom: #d4ccb0;
}

.footerbefore {
background-image: url("../img/footerbg.png");
width: 100%;
height: 66px;
border-bottom: solid 7px #d4ccb0;
}


.footer {
background-image: url("../img/2.png");
width: 100%;
height: 242px;
border-bottom: solid 7px #5c5c5c;
}

.subfooter {
background-image: url("../img/subfooter.png");
width: 100%;
height: 67px;
}

#logo {
margin-left: 350px;
padding: 20px;
}


Grid CSS 'bootstrap' can be found here: http://twitter.github.com/bootstrap/:

http://pastebin.com/ktFueQ5e

I tried everything I know... classing or IDing the UL \ LI, and styling \ positioning it in CSS but it doesn't work.
Please help!

thank you.

P.S this is a training theme released at DeviantART

Is This A Good Question/Topic? 0
  • +

Replies To: Training on HTML\CSS - getting problems with positioning.

#2 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon


Reputation: 1111
  • View blog
  • Posts: 3,061
  • Joined: 28-November 09

Re: Training on HTML\CSS - getting problems with positioning.

Posted 16 August 2012 - 06:42 PM

I would seriously consider a CSS Reset sheet somewhere on the line when you start sites. It's a pain to have to set things manually for a while and get up to speed, but it's far more annoying to have a few pixels off or alignment issues randomly throughout different browsers.

What a reset sheet is is a stylesheet used to reset all elements to 0, no space, and minimum settings.

While your html is fairly clean, you need to remember to go light on the divs. The logo, for instance, could have the style applied to it instead, or the container put on body.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1