Making a web site for a project

AHarvey · 17 Jan 2012 at 16:45

link to site would be great, at least the code.

Riddell · 17 Jan 2012 at 16:53

w1llyg said:
Hit a rock 2day.

Ive been trying to make a side bar with links to different parts of my website. But I cant seem to get the side bar to go on the left handle side and look detached from the content bit.

Ive been following Jeffery Way's video on floating and simple lay out but it just doesnt want to work for me

Threw this together. Is this the type of layout your wanting?: Link

w1llyg · 17 Jan 2012 at 18:00

@Riddell

Thats wat i was aiming for, but heres my version.

Uploaded with ImageShack.us

And i want the nav bar low.
If i put it below <div> /the title section this happens

Uploaded with ImageShack.us

See the table in the middle...

w1llyg · 18 Jan 2012 at 11:35

Ok new problem. Ive moved the navigation bar down to the position i want it. On full screen it looks good, but as soon as i make it half page, the content box goes underneath the navigation bar.

Uploaded with ImageShack.us

Uploaded with ImageShack.us

EDIT: Im tryin to get it into a similar look like the bbc sport page.

w1llyg · 18 Jan 2012 at 12:25

Riddell, please could I have the coding to what you quickly made up please as that may solve my problem.

Riddell · 18 Jan 2012 at 17:01

I can't say for sure, but I think you're having issues because you don't have a "containing" div which contains all your other divs (header, content, navigation etc). If you don't have a containing div, all of your divs will be positioned according to the browser window which is why, when you resize the browser window the nav bar overlaps the content area. All you really need to do is make a new div with a class of container (or whatever you want) and put the rest of you're code inside it. In CSS you would then do something like:

Code:

.container {
width: 960px
margin: auto

For info, my code looks like this:

Code:

<!DOCTYPE HTML>
<html lang="en-US">

<head>
	<meta charset="UTF-8">
	<title>Title goes here</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="container">
	
		<div class="header">
			<h1>Header goes here</h1>
		</div>
		
		<div class="nav">
			<ul>
				<li>Links</li>
				<li>Links</li>
				<li>Links</li>
				<li>Links</li>
				<li>Links</li>
			</ul>
		</div>
		
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			
		</div>
		
		<div class="footer">
			<p>Footer goes here</p>
		</div>
	
	</div>
	
</body>
</html>

The CSS would then be something alone these lines:

Code:

h1, ul, li, p {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
}


.container {
	width:960px;
	margin: auto;
	background-color: #666;
}

.header {
	background-color: red;
	height: 100px;
}

.nav {
	background-color: green;
	width: 20%;
	float: left;
}

.content {
	background-color: blue;
}

.content p {
	margin-left: 20%;
}

.footer {
	background-color: yellow;
	height: 100px;
	clear: both;
}

Getting my head around floats and positioning is still something which I find difficult but hopefully that makes it a bit clearer. If you're still having trouble, feel free to send me your html/css file and I should be able to get it working.

w1llyg · 18 Jan 2012 at 21:31

Thank you Riddell so much!!!!!! <3

Now onto my next problem..... how to i get it to sych the sidebar in with the header so there is no gap.

I also have no footer, because i would like my white background of the wrapper to carry all the way to the bottom of the screen instead.

Another thing is how do i code for my side bar to carry on going down? (unsure if i want it like it is or all the way down.

One last thing, i cant seem to move my text in the wrapper away from the sidebar...ive tried text indent and padding left but neither have been successful

Sorry for being a pain. Left the coding at the bottom too, it may help.

Thanks

Code:

<html>
<head>

<title>CF</title>
<link rel="stylesheet" href="css/Quick.css"/>
</head>
<body>
<div class="container">
  
  
  <div class="header">
    <h1> Cystic Fibrosis </h1>
  </div>
  
    
    <ul class="lsidebar">
          <li><a href="Cystic Fibrosis Website.html">What is CF?</a></li>
          <li><a href="Lungs Cystic Fibrosis.html">Which Organs are affected?</a></li>
          <li><a href="#">Anoxeria in CF</a></li
          ><li><a href="Contact Me.html">Contact Me</a></li>
      </ul> 

  <div class="wrap">
  
    <h2> About CF</h2>
      <p> 
        <strong>Cystic Fibrosis</strong> is a <em>disease.</em>
      </p>


  <dl>
    <h3><dt>Organs affected in CF</dt></h3>
    <ul><li><a href="Lungs Cystic Fibrosis.html"">Lungs</a></li></dt>
    <li>Testes</li>
    </ul>
   </dl>
   
   
     <blockquote>
      <p>
        "Hello, how have you got on?"
      </p>
    </blockquote>
    
    
    
    <p> Visit the <a href="http://www.cftrust.org.uk/aboutcf/whatiscf/" target=_blank"> CF trust website. </a>.</p>
  <img src="Images/New Human Body.jpg" alt"Image of the Human Body"/>
  </div>
  </div>
  

    



</div>

</body>
</html>

Heres the CSS

Code:

body {
	background:#66FFB3;
}

.container {
	width: 800px;
	margin: auto;
	background:#EEE;
}

.wrap {
	width:400px
	margin-left: auto;
	background:#FFF;
}
.lsidebar{
	padding-left:0px;
	list-style:none;
	border-bottom:none;
	float:left;
	width:203px;
	height: 600px;
}
ul.lsidebar li{
    float:left;
}
ul.lsidebar a{
    width:12em;
    display:block;
    border:none;
    padding:5px;
    margin-right:10px;
    background-color:#234f32;
    text-decoration:none;
    color: #0F6;
    text-align:center;
}
ul.lsidebar a:hover{
    width:12em;
    display:block;
    border:none;
    padding:5px;
    margin-right:5px;
    background-color:#92cc47;
    color:#4FFFA7;
    text-decoration:none;
    text-align:center;
}
a{
  color: red;text-decoration: none;
  font-family: Tahoma, Geneva, sans-serif;
}

h1 {
	font-family: Tahoma, Geneva, sans-serif;
	text-align:center
}
h2,h3, h4 {
	font-family:Tahoma, Geneva, sans-serif;
	padding-left: 20px;
}
p {
	font-family: Tahoma, Geneva, sans-serif;
	padding-left: 20px;
}

Riddell · 18 Jan 2012 at 22:27

I posting this on my PS3 (herp derp) so I can't test in my html editor, but here's what I think:

Now onto my next problem..... how to i get it to sych the sidebar in with the header so there is no gap.

This is all to do with the default padding and margin applied to a lot of elements. You might want to try setting the top padding and margin of your h1 and a elements to 0. Basically just play around with settings top margins/padding to 0 until it line's up.

how do i code for my side bar to carry on going down?

If you want the sidebar to only extend down to the last link (with the body text then wrapping around underneath it) don't include a height value. If you want the link area to expand as long as the content area (effectively creating two columns) set height to 100% i.e. 100% of it's containers height.

i cant seem to move my text in the wrapper away from the sidebar...ive tried text indent and padding left but neither have been successful

I think because the nav bar is already taking up space on the left of the page you will need to add it's width to the value you want to indent by. So in your .lsidebar selector, set margin-left to
203 + (whatever you want)px. Essntially, you're applying margin from the container wall, not the nav bar wall.

Hopefully at least some of that works/makes sense.

w1llyg · 19 Jan 2012 at 12:46

Thanks again.

1)I still cant sycn inline together. When i change the margins and nothing happens.

2) EDIT

ONE

3. When i make my sidebar 100% it does exactly what i want but my "buttons/links" are super big, each link is a page long.

4. Im also tryin to make the side bar thinner by around 20px, but again nothing happens but the writing in the white area go into the side bar

5. How do I make the image go in the centre?

Uploaded with ImageShack.us

Riddell · 19 Jan 2012 at 17:28

OK,

I've had a bash with your code now and I've come up with this:

HTML:

Code:

<!DOCTYPE HTML>
<html lang="en-US">

  <head>
    <meta charset="UTF-8">
    <title>CF</title>
    <link rel="stylesheet" href="style.css"/>
  </head>

  <body>

  <div class="container">
    
    <div class="header">
      <h1> Cystic Fibrosis </h1>
    </div>
    
    <div class="lsidebar">
      <ul>
          <li><a href="Cystic Fibrosis Website.html">What is CF?</a></li>
          <li><a href="Lungs Cystic Fibrosis.html">Which Organs are affected?</a></li>
          <li><a href="#">Anoxeria in CF</a></li>
          <li><a href="Contact Me.html">Contact Me</a></li>
      </ul> 
    </div>
      
    <div class="content">
    
      <h2> About CF</h2>
        <p> 
          <strong>Cystic Fibrosis</strong> is a <em>disease.</em>
        </p>

      <h3>Organs affected in CF</h3>
      <ul>
        <li><a href="Lungs Cystic Fibrosis.html">Lungs</a></li>
        <li>Testes</li>
      </ul>
    
      <blockquote>
        "Hello, how have you got on?"
      </blockquote>
      
      <p>Visit the <a href="http://www.cftrust.org.uk/aboutcf/whatiscf/">CF trust website.</a></p>
      <img src="Images/New Human Body.jpg" alt="Image of the Human Body"/>
    </div>
 
  </div>

  </body>

</html>

CSS:

Code:

body {
    background:#66FFB3;
    font-family: Tahoma, Geneva, sans-serif;    /* will apply the font-family to all elemens within the body*/
}

a{
  color: red;text-decoration: none;

}

h1 {
    text-align:center;
}
h2,h3, h4 {
    padding-top:0;
    margin-top:0;
}

.container {
	width: 800px;
	margin: auto;
	background:#EEE;
}

.header {
    height: 50px;
    background-color: pink;
}

    .header h1{
        margin:0;
    }

.content {
	background:#666;
    margin-left:203px;          /* Content area starts 203px from the container wall*/
    padding:10px;               /* Sets the padding around the content area*/
    height:600px;
}

.lsidebar{
    background: #CCC;
	list-style:none;
	float:left;
	width:203px;
    height: 620px;              /* header (50px) + content (600px) + content padding (20px [10px top and bottom]) = 620px*/
}

    .lsidebar a{
        background-color:#234f32;
        text-decoration:none;
        color: #0F6;
        text-align:center;
    }
    .lsidebar a:hover{
        background-color:#92cc47;
        color:#4FFFA7;
        text-decoration:none;
        text-align:center;
}

There was some code which was invalid which is why some of your elements aren't displaying correctly. I've added a div for the nav bar to make it a bit easier to position and renamed the "span" div to "content" so that it's a bit more semantic. I've also cleaned up some redundant lines of CSS to make it a bit more streamlined.

Hopefully that helps.

If you want the image to go to the center add this in the css:

Code:

.content img{
    padding-left:200 (or whatever)px;
}

Also, you play SC2? Add me MacroPolo (785)

w1llyg · 23 Jan 2012 at 18:02

Hey again everyone,

Atm I'm trying to embed a Java script.

Its called Jmol. Its a program that renders molecules.
I doubt anyone knows how to use it.

But if you do, im tryin to use a molecule that can be opened with the pdb of 3DK2.

Im tryin to embed the interactive 3D image of it on my website. I can get Jmol on my website but not showing the molecule i want it to show.

If any1 has had any experience with java script ill love you forever