Jump to content
Stef's Coding Community
bkelly

area for links

Recommended Posts

I am very new with CSS and slighly knowledgable with HTML. My goal is a simple web site that gets the point across.

 

My CSS file has this section:

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

The index.htm file has this section:

>
</pre>
<ul>

 ... several links are here...

</ul>

 

This is fine in that it creates a section on the left for links and the code wraps around it. The problem is that the entire page is indented on the left allowing for links all the way to the bottom. That means I lose a lot of real estate in the remainder of the page. I though the would reset the width back to normal. I tried changing the to

class="navbar">

with no visible effect.

 

What do I need to change to move the left margin back to the left side after the link area.

if you want to see the page is it here: http://ww w.bke lly.ws

Edited the URL per the comments on spam. Right clicking on it takes me to a site, but certainly not mine. I don't know what is going on here.

Edited by bkelly

Share this post


Link to post
Share on other sites

You would need to remove the position: absolute and replace it with a 'float: left;'.

ul.navbar {
     list-style-type: none;
     padding: 1em; // added some padding here for separation
     margin: 0;
     float: left;
     width: 9em 
     }

For positioning, check out the Tutorials about Floats, Padding and Margins.

Hope this helps.

Share this post


Link to post
Share on other sites

That almost works in that it sets an indented area around the links, but it leaves the remainder of the page indented to the left. I have updated the page and the effect is present: http://ww w.bke lly.ws (edited URL per comments on spam as I understand the intent)

 

and wow, that was a fast response. Thank you.

Edited by bkelly

Share this post


Link to post
Share on other sites

That is because you have no containing

for the whole of your web page which you could then centre on the page using

margin: 0 auto.

When you set up a web page you should divide it into sections - to give you a basic idea

Share this post


Link to post
Share on other sites

I must not be understanding something. It seems to me that when there are identifiers such as:

> </pre>
<ul> 

They make natural divisions. It seems like putting a

around that section is redundant.

 

Regardless, I edited index.htm and added divisions as I understand the reply. (Indicating I probably do not fully understand.) I tried looking at it on my computer and uploaded it to my site with identical results. I did not see any change in the display. Should I be changing the css file also?

 

EDIT

I have edited my css file a bunch trying things and not understanding everything. Maybe I have some things in there are are causing problem. I will include the test css file below. The index.htm file has no PDF or other such code. I think its code is fully visible on the web site so I won't post it here.

  /* A web page must have the following to reference this style sheet */
  /*                         */
  /* If it does, the use of the html tags that are defined here       */
  /* will invoke the characteristics defined for that tag.            */


  /* When the tag "body" is declared in a page, these   */
  /* characteristics will be applied to the page. */

body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    /* background-color: #C0C0C0  */
    /* background="http://www.bkelly.ws/background3.gif" */
    background-image: url(http://www.bkelly.ws/background3.jpg);
    }

p {text-indent: 1cm}

/* replace this navbar with the one below     
ul.navbar {
     list-style-type: none;
     padding: 0;
     margin: 0;
     position: absolute;
     top: 2em;
     left: 1em;
     width: 9em 
     }
     end of original */

ul.navbar {
     list-style-type: none;
     padding: 1em; // added some padding here for separation
     margin: 0;
     float: left;
     width: 9em 
     }      

h1 {
  font-family: Helvetica, Geneva, Arial,
       SunSans-Regular, sans-serif 
  }

/* ul = unordered list, the list items will not be numbered */
ul.navbar li 
  {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black 
  position: left
  }

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 
 }







table
  {
  border: 5px solid rgb( 000, 000,255);
  text-align : left;  
  }            

td
  {
  border: 5px solid rgb( 100, 200, 100);
  padding:5px; 
  text-align : left;  
  }        

tr
  {
  text-align : left;  

  }                

 

EDIT AGAIN (sigh, not getting anywhere fast)

I found a tutorial on floats here: http://www.webreference.com/html/tutorial20/3.html

and I added this section to my css file

 

#LINKBOX {
float: left;
width: 40%;
margin: 0.5em;
background: #003399;
border: solid thin #D7040B;
color: #FFFFFF;
}

 

And I changed my navigation bar to look like this:








... my links go here ...

class="navbar">


 

I did not detect any changes. Do I need to modify my file and put IDs in for every paragraph. Or maybe I have this so screwed up I ought to delete and start from scratch.

 

LAST EDIT

I don't know why, but when I put the changes on my site, it was not the same as in the directory on my computer. Now I am almost there. The ID = LINKBOX seems to work, and now the remainder of the page wraps around and back to the left below the box of links. But the border is a little box all by itself and is not around the links that I want in the box. Very strange to me.

 

I tried editing the URL to my site per the post about spams but when I test it seems to direct me to some strange page. My site is www dot bkelly dot ws. It is okay to post like this?

 

I have been here all morning and have other things to do so I will let this rest a few hours.

Thanks for the ideas and help you have already provided.

Edited by bkelly

Share this post


Link to post
Share on other sites

An unordered list is already a block-level container and should not require a wrapper div unto its own.

also, by floating the container, even if it was not block-level, it becomes block-level.

 

Go back to the code I supplied and remove the 11em margin on the content area to see if that is what you want, the text wrapping underneath the link area.

Share this post


Link to post
Share on other sites
An unordered list is already a block-level container and should not require a wrapper div unto its own.

also, by floating the container, even if it was not block-level, it becomes block-level.

 

Go back to the code I supplied and remove the 11em margin on the content area to see if that is what you want, the text wrapping underneath the link area.

 

I think I tried that. Here is the section from the CSS that I modified as I understood what you wrote as it looks now:

ul.navbar {
     list-style-type: none;
     margin: 0;
     float: left;
     width: 9em 
     }     

 

I removed the padding but saw little difference. It did not effect that empty box.

 

The code that uses it now looks like this:

>




</pre>
<ul>

 ... links removed from this location ...

</ul>class="navbar"&gt

 

As is, it is pretty close, but there remains an empty box to the left of all the links that has the characteristics I expect. The code is posted to my site and can be seen. I will read some more about those various parameters and see what I can learn.

 

EDIT

I removed the LINKBOX definition from the index.htm file and removed the box. The code now looks like this:

>

</pre>
<ul>
 ... links removed from this location ...
</ul>class="navbar"&gt

 

I liked the box effect, but the text was not being put inside the box. It looks okay not, but I will read more about the box effect and see what I can come up with.

 

So in summary, while I have a new toy to research and figure out, I do have what I asked for.

 

Thanks for your help.:)

Edited by bkelly

Share this post


Link to post
Share on other sites

I haven't followed all the previous posts closely but I found several other things wrong. In Firefox the headings like Alaska Pictures and Software Pages were on the right of the menu but the p tag text relating to them was all below the headings and menu, while in IE7 the text followed the headings as they should.

 

I found lots of other errors which I noted in the files and the html now validates.

 

The way you have coded the menu on the left is that it floats inside the text generally, so I have left that the same although Eric's solution has a margin-left for all the headings and text so that they don't expand around the menu.

See

http://www.wickham43.com/forumposts/bkelly090426.html

http://www.wickham43.com/forumposts/bkelly090426.css

 

Here's an alternative more or less like Eric's:-

http://www.wickham43.com/forumposts/bkelly090426-2.html

http://www.wickham43.com/forumposts/bkelly090426-2.css

Edited by Wickham

Share this post


Link to post
Share on other sites

Eric, Wickham, jlhaslip, and virtual,

 

Your help is much more than anyone could ask for or expect. I captured the files from Wickham and the link from Eric. I will be needing some time to go through them and understand what you have told me.

 

Thanks so much for the time you have spent in my behalf.

Bryan :):D

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...