Php website code

HTML & CSS
#1

Hello there im starting a website up selling web hosting now i have a plans page, to show all the plans we do but when im making the layout it looks like this http://gyazo.com/b1828931686f4be802d518c3b0f38aaf
now when i add another one of the plans this happens http://gyazo.com/695a01133985845a4b6137adfd110a8f

here is the code for the plans http://pastebin.com/bfQ3ebvW

this is the code for the actual plans banner, and when i add another one of these it happens:http://pastebin.com/qJGBULFL

#2

Lets step away from your code a second and take a look at this. See attached image for output. You are using bootstrap Version 2 which is not supported anymore. You may want to upgrade to Version 3. This is actually not a PHP problem. It is with your html.

[code]

Untitled body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } 
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Silver

POPULAR

  • 10 users
  • Unlimited access
  • 3TB of space
  • E-mail support

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

$15.99 / month

Select plan

Bronze

POPULAR

  • 20 users
  • Unlimited access with no limits
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

$10.99 / month

Select plan

Economy

BUDGET

  • 10 users
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

$8.99 / month

Select plan

    <div class="span3">
    	<div class="well">
    		<h2 class="text-info">Economy</h2>
    		<p><span class="label label-info">BUDGET</span></p>
    		<ul>
    			<li>10 users</li>
    			<li>5TB of space</li>
    		</ul>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
    		<hr>
    		<h3>$8.99 / month</h3>
    		<hr>
          <p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
    	</div>
    </div>

</div>

<div class="row">
	<div class="span2">
        <div class="well">
    		<h2 class="muted">Silver</h2>
    		<p><span class="label">POPULAR</span></p>
    		<ul>
    			<li>10 users</li>
    			<li>Unlimited access</li>
    			<li>3TB of space</li>
    			<li>E-mail support</li>
    		</ul>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
    		<hr>
    		<h3>$15.99 / month</h3>
    		<hr>
    		<p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
    	</div>
    </div>
    <div class="span2">
    	<div class="well">
    		<h2 class="text-warning">Bronze</h2>
    		<p><span class="label label-success">POPULAR</span></p>
    		<ul>
    			<li>20 users</li>
    			<li>Unlimited access with no limits</li>
    			<li>5TB of space</li>
    		</ul>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
    		<hr>
    		<h3>$10.99 / month</h3>
    		<hr>
    		<p><a class="btn btn-success btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
    	</div>
    </div>
    <div class="span3">
    	<div class="well">
    		<h2 class="text-info">Plan</h2>
    		<p><span class="label label-info">BUDGET</span></p>
    		<ul>
    			<li>10 users</li>
    			<li>5TB of space</li>
    		</ul>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
    		<hr>
    		<h3>$8.99 / month</h3>
    		<hr>
          <p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
    	</div>
    </div>

    <div class="span2">
    	<div class="well">
    		<h2 class="text-warning">Bronze</h2>
    		<p><span class="label label-success">POPULAR</span></p>
    		<ul>
    			<li>20 users</li>
    			<li>Unlimited access with no limits</li>
    			<li>5TB of space</li>
    		</ul>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
    		<hr>
    		<h3>$10.99 / month</h3>
    		<hr>
    		<p><a class="btn btn-success btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
    	</div>
    </div>
    <div class="span2">
    	<div class="well">
    		<h2 class="text-info">Plan</h2>
    		<p><span class="label label-info">BUDGET</span></p>
    		<ul>
    			<li>10 users</li>
    			<li>5TB of space</li>
    		</ul>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
    		<hr>
    		<h3>$8.99 / month</h3>
    		<hr>
          <p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
    	</div>
    </div>

</div>
[/code]

Capture.JPG
Capture.JPG1260×904 97.9 KB

#3
#4

Not sure how many files you have, but mainly just downloading/linking to version 3 of the css and updating a few class names in your files. You will have to study the docs for changes. Some things have been added, some taken away. Spend some time playing with the examples and getting familiar with bootstrap. If you are already used to version 2, version 3 will be really easy.

http://getbootstrap.com/getting-started/

#5

yeah i put the new css and js files onto the site uploaded it and it just went like this
(see attachment

im fairly new to this btw still learning

bdf6d7ce31fe02965ac2dd3f2d04f051.png
bdf6d7ce31fe02965ac2dd3f2d04f051.png932×946 16.1 KB

#6

You are going to have to set the paths and file names. You cant “Just” upload it. What is the url to this page?

#7

http://purewebhost.co.uk/plans.php and set paths where?

#8

The the css you just uploaded. None of these links are any good.

[code]

[/code]
#9

the css was the bootrap file from the site how can i fix/make the links good exactly?

#10

hey i tried updating my html with a bootstrap upgrader and still no change

#11

Here is the link to whats in your /css folder http://purewebhost.co.uk/css/
As you can see

[code]

[/code] Does not exist

Use

[code]

[/code]

Also your javascript files do not link up either, your only file is bootstrap.min.js

You should also include an index in these folders so people cannot get a file tree.

#12

hi there where would i use/put that code you sent me, also how do i index the files and link up my javascript

#13

You have to remove your css links and put in

[code]

[/code] I'm not sure where bootstrap initiates the css links.

Then below that keep your js links but include on a new line

<script type="text/javascript" src="js/bootstrap.min.js"></script>

Then re-upload the js files you originally had into the js folder. I’m thinking if you don’t re-upload them then your js functionality on your page wont work.

All you need to do is put an index.php file in the directories you dont want people to see.
So if someone visits " http://purewebhost.co.uk/css/ " then they load index.php instead of the file tree.
And then you can display a message to them or what ever.

I think you can do it within your apache server settings aswell

#14

I think you would greatly benefit from studying a few tutorials on basic html. This site has a lot of tutorials on everything with easy to understand explanations. Some of the code may be outdated but it will help you a lot.

http://www.w3schools.com/

Start here:
http://www.w3schools.com/html/default.asp

Sponsor our Newsletter | Privacy Policy | Terms of Service