Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

HTML & CSS


  • Please log in to reply
13 replies to this topic

#1 michael-m

michael-m

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 PM

Posted 19 September 2012 - 08:18 AM

In the same way that a 2 year old on his first bike using stabilizers is training for the Tour de France, I'm building a website...

Using the propriety text editor in Ubuntu (gedit), and begining with this tutorial, I have "developed" a hompage with links to 4 other pages, and the stylesheet. I've managed to tweak and adjust so that I have a nice heading centred at the top of the page, I have lowered the list to be inline with some pictures that I've added, and then the text underneath. All is ok so far. But as the whole background is the same same color, it looks a bit...unfinished.

What I would like to do next (and I think the current layout lends itself naturally to this) is to "divide" the "panels" (i.e. my heading, the list, pictures and the text) into something like this.

I obviously lack a basic understanding of this layout tutorial as I don't know how to incorporate it into my stylesheet or pages.

Is anyone able to offer any hints/tips on merging these two tutorials so that I have the pages/stylesheet of the W3 tutorial but with the layout of the w3schools tutorial?

Yours hopefully...

Michael

thanks.

Edited by michael-m, 19 September 2012 - 08:18 AM.


BC AdBot (Login to Remove)

 


#2 Grinler

Grinler

    Lawrence Abrams


  • Admin
  • 43,503 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:03:37 PM

Posted 19 September 2012 - 08:32 AM

For that example you would typically use four divs like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div layout test</title>
<style>
#header {
 background-color: green;
}

#menu {
 background-color: red;
}

#content {
 background-color: brown;
}

#footer {
 background-color: grey;
}
</style> 
</head>
<body>
<div id="header">Header Here</div>
<div id="menu">Menu here</div>
<div id="content">Content here</div>
<div id="footer">Footer here</div>  
</body>
</html>


Unfortunately, this just makes each div stacked on top of each other as they are block elements and typically start on a new line. You can see this example here: http://jsbin.com/icerih/1/

What we now need is to apply floats to the menu and content divs so that they are side by side. This can be done with the following code. A live example can be found here: http://jsbin.com/enuvaf/1/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div layout test</title>
<style>
#header {
 background-color: green;
}

#menu {
 background-color: red;
 float:left;
 width: 25%;
}

#content {
 background-color: brown;
 float:right;
 width: 75%;
}

#footer {
 clear: both;
 background-color: grey;
}
</style> 
</head>
<body>
<div id="header">Header Here</div>
<div id="menu">Menu here</div>
<div id="content">Content here</div>
<div id="footer">Footer here</div>  
</body>
</html>

As you can see we tell the menu div to float to the left and the content div to float to the right. This places them both side by side. I added some width statements to make it look more like a menu/content area.

Finally in the footer div you will notice I added clear: both. This is to tell the browser that from the footer on, normal page flow is resumed.

Hope this helps.

#3 michael-m

michael-m
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 PM

Posted 19 September 2012 - 01:07 PM

From your two examples, I can see what you've done to divide the page up into the 4 fields, thanks a lot. However, when I try to put what I want into each div, things start going wrong, so I need to go at this from the other direction.

With reference to the tutorial mentioned earlier, I've done this which would is based on a similar layou to the divisions you've described:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My dogs' test site</title>
<style type="text/css">
  body {
 padding-left: 11em;
font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
ul.navbar {
 list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 8em;
    left: 1em;
    width: 9em }
h1 {padding-left: 9em;
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
h2 {padding-left: 12em;
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My Main Heading</h1>
<h2>My Secondary Heading</h2>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/>

<p>Welcome to my styled page!<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My dogs' test site</title>
<style type="text/css">
  body {
 padding-left: 11em;
font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
ul.navbar {
 list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 8em;
    left: 1em;
    width: 9em }
h1 {padding-left: 9em;
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
h2 {padding-left: 12em;
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My Main Heading</h1>
<h2>My Secondary Heading</h2>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 19 Sept 2012<br>
  by myself.</address>

</body>
</html>



<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 19 Sept 2012<br>
  by myself.</address>

</body>
</html>



I now want to add the divisions to this in such a way that I can then cut and save the stylesheet for the other pages.

I realise this might not be the most thrilling of sites, but it's challenging enough for me at the moment!.

Thanks again

Michael

Edited by michael-m, 19 September 2012 - 01:16 PM.


#4 Grinler

Grinler

    Lawrence Abrams


  • Admin
  • 43,503 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:03:37 PM

Posted 24 September 2012 - 01:31 PM

Sorry for not getting back to you sooner. All you have to do is take style information and save it to a separate file. The file should be named something.css.

So you would create a file called site.css and it should the following content:

body {
 padding-left: 11em;
font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
ul.navbar {
 list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 8em;
    left: 1em;
    width: 9em }
h1 {padding-left: 9em;
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
h2 {padding-left: 12em;
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }

Save that file someone on your web site. I suggest creating a folder called css in the root of your html folder.

Then you can include that CSS file on every page you create by using the following line:

<link rel="stylesheet" href="/css/style.css">

Please note if you include the css using the above line, then you no longer have to include the style information in each page. This also means when you make a change in the style.css file it will automatically be reflected on every page that includes that file.

#5 michael-m

michael-m
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 PM

Posted 25 September 2012 - 04:43 PM

Thanks for the reply.

I already have a CSS stylesheet as you've suggested in post #4, but it is necessary for me to pad the body and then try to align the headings by "hand/sight".

What I think would be better is to use the CSS stylesheeet that you wrote in #2 which contains the divs/headings.

My problem is that if I try to use the stylesheet with divs, I need to include the "ul.navbar" and "ul.navbar.li" details - which is giving all sorts of weired and wonderful results depending on where I put it!

Basically - I don't know what I'm doing! Though help is on it's way.

Thanks again.

Michael

#6 Grinler

Grinler

    Lawrence Abrams


  • Admin
  • 43,503 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:03:37 PM

Posted 26 September 2012 - 01:12 PM

Post what you have so far with the floating div solution.

#7 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:37 PM

Posted 27 September 2012 - 07:42 AM

Applying css to the elements you want is not hard to understand. Each html element can be assigned a class and an id. Your css can then be set to target by id, or target by class. For example, using these sample html elements:
  <input type="text" id="name" value="foo" />
  <input type="text" class="otherName" value="bar" />

Your css would target those elements like so:
#name
{
  color: blue;
  ...
}

.otherName
{
  color: red;
  ...
}

You can also start at a top level element and drill down to the one you want. Using the following html:
  <form class="myForm">
   <div>
     <input type="text" value="foo" />
   </div>
  <form> 

To style the input element, you could do something like this:
.myForm div input
{
  color: black;
}


You can use combinations of classes, ids, and element types if you want to. View the stylesheet for any website to give yourself models to follow. For instance, one of the old style sheets for BC can be found here.

Edited by groovicus, 27 September 2012 - 07:45 AM.
Added sample url


#8 michael-m

michael-m
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 PM

Posted 27 September 2012 - 04:05 PM

Post what you have so far with the floating div solution.


I'm starting from this (there's 5 html pages, but I'll just post the one):

CSS

body {padding-left: 11em;
font-family: Georgia, "Times New Roman",
          Times, serif;
background-color: #CCCC99; }

ul.navbar {
list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 7.3em;
    left: 1em;
    width: 9em }

h1 {padding-left: 8em; color:blue; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size:30px;}


h2 {padding-left: 9em; color:red; font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif; font-size:20px;}

p  {color:blue;font-size:20px}
ul.navbar li {
    background: #d8da3d;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 0em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }

HTML
<!DOCTYPE html>
<html>
<head>
  <title>My Dog Website</title>

<link rel="stylesheet" href="omydstylesheet.css">

</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="home.html">Home</a>
  <li><a href="meandmydogs.html">My dogs</a>
  <li><a href="dogwalking.html">Dog Walking</a>
  <li><a href="links.html">Links</a>
  <li><a href="contact.html">Contact</a>
</ul>

<!-- Main content -->
<h1>My Dogs Website</h1>
<h2>This is my website about my dogs</h2>
<br>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/>

<p>Welcome to my dog site.</p>

<p>There's stuff missing, but at least it has style.
And it has links, even if they don't go
anywhere...but they do now.</p>

<p>There should be more here, but I don't know
what yet.</p>

<!-- Sign and date the page, it's only polite! -->
<address>27 Sept 2011<br>
  website by me</address>

</html>


I then took your code from post #2 and split it as follows:

CSS

#header {
 background-color: green;
}

#menu {
 background-color: red;
 float:left;
 width: 25%;
}

#content {
 background-color: brown;
 float:right;
 width: 75%;
}

#footer {
 clear: both;
 background-color: grey;
}


HTML


<html>
<head>
<meta charset=utf-8 />
<title>Div layout test</title>
</head>
<body>
<div id="header">Header Here</div>
<div id="menu">Menu here</div>
<div id="content">Content here</div>
<div id="footer">Footer here</div>  
</body>
</html>


I have then tried to merge both CSS sheets and both HTML sheets -this is one example of how I have done it:



CSS
#header {
 background-color: green;
}

#menu {
 background-color: red;
 float:left;
 width: 25%;
}

#content {
 background-color: brown;
 float:right;
 width: 75%;
}






body {padding-left: 11em;
font-family: Georgia, "Times New Roman",
          Times, serif;
background-color: #CCCC99; }

ul.navbar {
list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 7.3em;
    left: 1em;
    width: 9em }

h1 {color:blue; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size:30px;}


h2 {color:red; font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif; font-size:20px;}

p  {color:blue;font-size:20px}
ul.navbar li {
    background: #d8da3d;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 0em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }

#footer {
 clear: both;
 background-color: grey;
}

HTML
<html>
<head>
<meta charset=utf-8 />
<title>Div layout test</title>


  <title>My Dog Website</title>

<link rel="stylesheet" href="omydstylesheet.css">

</head>

<body>

<div id="header">Header Here</div>
<div id="menu">Menu here</div>
<div id="content">Content here</div>
<div id="footer">Footer here</div>  

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="home.html">Home</a>
  <li><a href="meandmydogs.html">My dogs</a>
  <li><a href="dogwalking.html">Dog Walking</a>
  <li><a href="links.html">Links</a>
  <li><a href="contact.html">Contact</a>
</ul>

<!-- Main content -->
<h1>My Dogs Website</h1>
<h2>This is my website about my dogs</h2>
<br>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/>

<p>Welcome to my dog site.</p>

<p>There's stuff missing, but at least it has style.
And it has links, even if they don't go
anywhere...but they do now.</p>

<p>There should be more here, but I don't know
what yet.</p>

<!-- Sign and date the page, it's only polite! -->
<address>27 Sept 2011<br>
  website by me</address>

</body>

</html>



you will be able to see the problem I have. I have tried putting the "ul.navbar" and "ul.list" in other places on the CSS sheet including inside the div brackets but seem to get a differtent problem each time!

Michael

#9 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:06:37 AM

Posted 27 September 2012 - 06:25 PM

Output of code above - What is it that you are trying to achieve?

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#10 michael-m

michael-m
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 PM

Posted 28 September 2012 - 01:46 AM

Output of code above - What is it that you are trying to achieve?


I'm trying to set up the page with a layout like this.

Grinler has given the code for the divisions and a live example in post #2.

The output that you have linked to is begining to take shape, but I need to get rid of the "header here" on a green background and the red brown and grey backgrounds also.

I've tried it so many times and and in so many ways that I'm making careless mistakes now - in my latest css sheet, I've left the green/red/brown/grey in the code.

Essentially, I want the headings at the top so that I'm able to align "center" without padding. Menu bar down the left with the pictures to the right. And text across the whole page at the bottom.

That's it..for now!

Michael

#11 michael-m

michael-m
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 PM

Posted 28 September 2012 - 04:12 AM

Oh my, oh my... I do believe I have finally stumbled upon what it was I was trying to find... (though I need to better align the pictures and the menu, and sort the colours).

CSS

#header {
}

#menu {
 float:left;
 width: 25%;
}

#content {
 float:right;
 width: 75%;
}

#footer {
 clear: both;
}

body {
font-family: Georgia, "Times New Roman",
          Times, serif;
background-color: #CCCC99; }

ul.navbar {
list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 7.3em;
    left: 1em;
    width: 9em }

h1 {color:blue; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size:30px;}


h2 {color:red; font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif; font-size:20px;}

p  {color:blue;font-size:20px}
ul.navbar li {
    background: #d8da3d;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 0em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }


HTML


<html>
<head>
<meta charset=utf-8 />
<title>Div layout test</title>


  <title>My Dog Website</title>

<link rel="stylesheet" href="testmix.css">



</head>

<body>

<div id="header"><h1  align="center">My Dogs Website</h1>
<h2 align="center">This is my website about my dogs</h2>
<br></div>


<div id="menu">

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="home.html">Home</a>
  <li><a href="meandmydogs.html">My dogs</a>
  <li><a href="dogwalking.html">Dog Walking</a>
  <li><a href="links.html">Links</a>
  <li><a href="contact.html">Contact</a>
</ul>




</div>

<!-- Main content -->

<div id="content">

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/>

<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/>
</div>


<div id="footer">

<p>Welcome to my dog site.</p>

<p>There's stuff missing, but at least it has style.
And it has links, even if they don't go
anywhere...but they do now.</p>

<p>There should be more here, but I don't know
what yet.</p>

<!-- Sign and date the page, it's only polite! -->
<address>28 Sept 2011<br>
  website by me</address>


</div>  

</body>

</html>





It may be a bit basic, but that will do me ....... for now.

Michael

#12 Grinler

Grinler

    Lawrence Abrams


  • Admin
  • 43,503 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:03:37 PM

Posted 28 September 2012 - 10:27 AM

Yup..that looks good. The only suggestion I have is to put the <!-- Sign and date the page, it's only polite! --> in the footer div and keep the rest in the content div. The footer div is more for copyrights and site links such as contact us, about us, privacy policy, etc.

#13 madelinekim

madelinekim

  • Members
  • 5 posts
  • OFFLINE
  •  
  • Gender:Female
  • Location:india
  • Local time:02:37 PM

Posted 10 October 2012 - 07:22 AM

HTML and CSS can be use to design the site which quite complex. It helps to create the advanced web pages and user friendly website. With the help of CSS you can give attractive and beautiful look to your images.

#14 michael-m

michael-m
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 PM

Posted 11 December 2012 - 04:30 PM

Nearly there, just a few niggles to iron out...

Having decided on the layout I wanted for my "Home", I've set the position of the navigation menu to align with the pictues of the main content using the CSS:

http://www.onemanandyourdog.net/home.html

So I'm happy with the layout of "Home" and "Dog Walking" (for now - maybe I'll want to justify the text at a later date, but that's unimportant for now).

However, for the "In Memory", "Contact" and "Links" pages, I don't have pictures in the main content div, but the text does not align with the navigation menu. I can't adjust the position of the navigation menu as it is set by the stylesheet, and doing so would then move the navigation menu for the "Home" and "Dog Walking" pages also.

Have I commited some kind of "self taught begnner's" fundamental error and bad practice or can my HTML/CSS be changed?

Similarly, I want the text to align with the top of the pictres on the "My Dogs" page.

Any advice, hints, tips, or fixes would be greatly appreciated - can it be fixed, or do I need to go back to the beginning?

Thanks.

Michael




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users