HTML - Few Questions That Need Aiding

Hello all! I just started a site and I have two questions that would really help me out.

First - I have a news section on my website that I want people to be able to comment on. I have searched the web forever on this, but I want people to be able to click the comment section below the article which will redirect them to another page where they can add/view comments. I also want people to be able to see how many comments have been posted on the original article. Whats the best way of doing this?

Second - I have a sidebar on my website that provides a quick link to an article that has been posted. Is there anyway I can make that sidebar once and reference throughout the other pages on my website so I don't have to update each individual page?

Thanks in advance for your help.
p.s. the website is http://www.socomfans.com

This is my site currently ... www.fortheloveinc.com (please click to see what I am referring to)

1st Question ~ As you go from page to page on my site, you'll notice the annoying banner at the very top of the page. The site is hosted by godaddy.com, but there must be a way to remove that from my site. All the advertisements as well. Is it because I am temporarily using the free host option when you first purchase a domain do you think? Just wondering how I remove all of that off of my site.

2nd Question ~ I've been using Photoshop, for the graphics on my site (the headers, and the clickable links). I would like to be able to fill my site, from side to side, and from top to bottom. How do I do this using html? Basically make use of the whole page, instead of just little portions of it. Thank you and I'm hoping y'all can help me out with these questions. Much appreciated.

I am a new member and I was hoping someone could help me.

I have looked for answers myself, but I havent come across them.

Question 1-
How do I add a Scroll Bar Box to left side to slip the page into 2 sections, and How to add Links to it?

Question 2-
How Do I make the Screen not move off the page? So the Bottom scrollbar does not show up.

Ex. If I am using Internet Explorer, and I have my Favorites up, and I expand the box, It makes the screen smaller, But the website also gets smaller, but you can still see evrything.

I Hope you guys can help me.

Hi everyone. I'd like people's opinion on something. That something being layout design, or more specifically, width.

When designing your website layouts, what width do you optimise your site for? Which technique do you find works best?

I have had a tendency to make sites that are centered in the browser window and are optimised for 800px width screens, usually setting up the layout to be 788px wide, allowing 12px for a scrollbar if required.

Another technique I have considered is the so-called Holy Grail liquid layout.

With larger screens and half decent graphics cards now a lot cheaper than in the past, do you still optimise based on a 800x600 resolution, or 1024x768?

I guess it can depend on the website's target audience as to how it is designed. For instance, a website aimed at a target audience of the elderly or younger children would need to have an easier to follow layout with larger text etc on screen.

What are your thoughts on this?

So I'm fairly new to Web Development, but I know a few other languages (C++, C (of course), and a bit of Java). I've been digging around the web for some information about having permanent pages inside pages, but turned up little result. What I mean by this is having some sort of fixed page, that wont be reloaded upon clicking local links (Home, etc.)... For example, I stream over Justin.tv, and they have an option to embed your stream to a website. I would like to have this stream embedded on a fixed page so that when users click links to surf the site, it wont keep loading and reloading. Also, the stream will always be in view of the user. In a nutshell, I would like to have a header for the navigation links and banner, a fixed sidebar with the embedded stream, and a content part that would show the rest of the content for the site.

I hope this isn't too confusing to understand, haha.. I tried to make it as easy to understand as I can, but I don't know all of the fancy web development lingo to simplify it.

On my website http://www.ultdmovies.com.

How do I change the height/width of the buttons that say home, contact us, movies, etc.?

How can I add a seperate border under the video like the one under the "mission statement" so I can have other things down on the bottom?

How can I add a colored border around Mission statement and the stuff below it?

Good day all,

I am the pseudo webmaster of my companies intranet site. I basically was the only person in the department that had any HTML knowledge after the last pseudo webmaster left.

The intranet site has about 1200 pages, and was created using a top header frame. Since there are two departments using the same content pages, but with a different home page and header the frames work out pretty good.

I have been wondering if a homepage that can be created which is not in frames, but when someone picks a link it will go into a framed environment. Basically I do not want the homepage to be limited by frames, but every other page I want to appear in a framed environment.

Can anyone help, and let me know how this would be possible?

Thanks
CS

I write for a weekly newspaper and am looking to make the web posts a little nicer on the eyes.
So, there a few bits of help I could REALLY use!

I'll explain each but here's a quick rundown first:
1.) Wrapping text around a captioned image
2.) Single-line breaks in the caption
3.) The biggie -- a pop-up text box when a link is moused over.

1.) When I'm posting an image, a caption is almost always necessary. Here's the code I've been using for the image and caption:
"<table class="image">
<caption align="bottom">CAPTION</caption>
<tr><td><IMAGE LINK></td></tr>
</table>"
But when I post like that, there's a break between paragraphs to show the image, which disrupts the reading flow. I need a code that will let me post an image, add a bottom-aligned caption, and still have the story text print alongside the image.

2.) When posting images and captions using the above code, I'd like to have single-line breaks in the caption. "Name (new line), Job Title." Something like that. When I try this using "<br>" though, there's an extra line space between the two text lines. Surely this is a simple fix, but I'm no html expert.

3.) I'm willing to spend hours to learn this one. Somebody, somebody has to know how to do this one. OK, ESPN.com is the best example I've seen. You mouse over a story link, and a box pops up with a paragraph's description of the story. For someone looking to find new ways to boost hits on a news site, this is a priceless gem. If anyone knows how to do this or something similiar in HTML, PLEASE let me know.
Edit: After posting this, I noticed that the same thing happens on this site. You highlight someone's post, and the beginning of the post's content is displayed. How do I do this???


Thanks in advance to each and every person who reads this, and a special thanks to those who take the time to help. It means much.

aefattwotgm@aol.com

1. Under the picture, there are some tags (funny, meme, comic). When you hover over the tags, they turn white/bright. Is there a way to make this stay white/bright? (http://plustom.tumblr.com/post/18287272359)
2. Under the picture, there are pictures of some people. When you hover over their pictures, they turn white/bright. Is there a way to make this stay white/bright? (http://plustom.tumblr.com/post/18287272359)
3. Under the pictures of the people, there is a link that says "Previous Post". When you hover over it, it gets bold. Is there a way to make this stay unbold? (http://plustom.tumblr.com/post/18287272359)

Current HTML code: (Excuse the faces).

HTML Code:

body {font-family: {font:Text}; font-size: 12px; color: {color:Font}; background-color: {color:Background};}
#right {width: 250px; left: 50%; top: 50px; margin-left: -400px; position: absolute; {block:IfFixedSidebar}position: fixed;{/block:IfFixedSidebar}  -webkit-transition-duration: .3s;}
#right:hover {opacity: 1;}
#right a {text-decoration: none;}
.title {padding-bottom: 10px; border-bottom: 2px solid {color:Tertiary}; font-size: 14px; display: inline-block; font-weight: bold; margin-bottom: 10px;}
a {color: {color:Font};}
.link {font-size: 11px; display: inline-block; margin-top: 5px; font-weight: bold;}
#center {width: 400px; margin: auto; margin-top: 50px;}
#description {margin-bottom: 5px; font-size: 11px; max-width: 200px;}
.entry {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid {color:Secondary};}
.entry img {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow} !important; max-width: 400px;}
.perma {position: absolute; opacity: 0; -webkit-transition-duration: .2s; z-index: 1;}
{block:IndexPage}.entry:hover .perma {opacity: 1;}{/block:IndexPage}
.permalink {display: inline-block; padding: 10px; background-color: {color:Primary}; color: {color:Primary Font};}
.permalink:hover 
.exclamation {display: inline-block; margin-left: 1px; opacity: 0; -webkit-transition-duration: .2s;}
.link:hover .exclamation {opacity: 1;}
.text_perma {width: 100px; text-align: right; position: absolute; margin-left: -110px; -webkit-transition-duration: .2s; opacity: 0;}
{block:IndexPage}.entry:hover .text_perma {opacity: 1;}{/block:IndexPage}
.text_permalink {border-bottom: 1px solid {color:Background}; display: inline-block; -webkit-transition-duration: .2s;}
.text_permalink:hover {border-bottom: 1px solid {color:Secondary};}
h2 {font-size: 14px;}
h2 a {text-decoration: none; border-bottom: 1px solid; -webkit-transition-duration: .2s;}
h2 a:hover {border-bottom: 1px solid {color:Background};}
.label {margin-right: 10px; font-weight: bold;}
.album_art {display: inline-block; margin-right: 10px; float: left;}
.album_art img {width: 150px; height: 150px;}
.audio {display: inline-block; min-height: 150px; max-width: 207px;}
ol.notes {margin-left: -45px; list-style-type: none; width: 400px;}
ol.notes a:hover {text-decoration: none;}
ol.notes blockquote {margin-top: -3px; margin-left: 0px; padding-left: 13px; padding-top: 5px; border-left: 11px solid {color:Primary}; margin-bottom: 0px;}
ol.notes li.note {padding: 5px;}
li.note img {margin-right: 10px; width: 11px; height: auto; opacity: .5; -webkit-transition-duration: .3s;}
li.note:hover img {opacity: 1;}
.entry blockquote {border-left: 2px solid {color:Primary}; padding-left: 10px; margin-left: 25px;}
.player {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow};}
#tags {margin-bottom: 20px;}
#tags a {margin-right: 10px; opacity: .7; text-decoration: none;}
#tags a:hover {opacity: 1;}
.nav_1 {display: inline-block; width: 50%; margin-bottom: 20px;}
.nav_2 {display: inline-block; width: 50%; text-align: right; margin-bottom: 20px;}
#nav a {text-decoration: none;}
#nav a:hover {font-weight: bold;}
.audio_symbol {padding: 7px; background-color: {color:Background}; opacity: .9; border-radius: 100px; position: absolute; margin-top: 7px; margin-left: 7px; font-size: 14px; height: 15px; width: 15px; -webkit-text-stroke: 1px transparent;}
{block:IfInfiniteScrolling}.regular_pagination {display: none;}{/block:IfInfiniteScrolling}

http://plustom.tumblr.com/

This is my current blog and I need some help tweaking it.

1. When you hover over the sidebar title/picture, it turns bright/white. Is there a way to make it stay bright/white without hovering over it?
2. Is there a way to move the sidebar with the title/picture over to the left?
3. When you hover over the picture in the middle, there's a small square box at the top left corner of the picture. It's white when you hover over the picture, but when you hover over the square, it's gray. Is there a way to make the square box stay white all the time?
4. There is a white line under the picture. Is there a way to make it bold similar to the line under "Amnesia"?

Current HTML code: (Can't seem to post rest in next post).



HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}</title>

<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Font" content="#000"/>
<meta name="font:Text" content="Arial"/>
<meta name="color:Primary" content="#dcdcdc"/>
<meta name="color:Primary Font" content="#fff"/>
<meta name="color:Secondary" content="#eee"/>
<meta name="color:Tertiary" content="#ccc"/>
<meta name="color:Shadow" content="#dcdcdc"/>
<meta name="if:Show Caption" content="0"/>
<meta name="if:Fixed Sidebar" content="1"/>
<meta name="if:Infinite Scrolling" content="0"/>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script src="toggle.js" type="text/javascript"><!--mce:1--></script>

<style type="text/css">

body {font-family: {font:Text}; font-size: 12px; color: {color:Font}; background-color: {color:Background};}
#right {width: 250px; left: 50%; top: 50px; margin-left: 220px; position: absolute; {block:IfFixedSidebar}position: fixed;{/block:IfFixedSidebar} opacity: .7; -webkit-transition-duration: .3s;}
#right:hover {opacity: 1;}
#right a {text-decoration: none;}
.title {padding-bottom: 10px; border-bottom: 2px solid {color:Tertiary}; font-size: 14px; display: inline-block; font-weight: bold; margin-bottom: 10px;}
a {color: {color:Font};}
.link {font-size: 11px; display: inline-block; margin-top: 5px; font-weight: bold;}
#center {width: 400px; margin: auto; margin-top: 50px;}
#description {margin-bottom: 5px; font-size: 11px; max-width: 200px;}
.entry {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid {color:Secondary};}
.entry img {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow} !important; max-width: 400px;}
.perma {position: absolute; opacity: 0; -webkit-transition-duration: .2s; z-index: 1;}
{block:IndexPage}.entry:hover .perma {opacity: 1;}{/block:IndexPage}
.permalink {display: inline-block; padding: 10px; background-color: {color:Primary}; color: {color:Primary Font};}
.permalink:hover {opacity: .7;}
.exclamation {display: inline-block; margin-left: 1px; opacity: 0; -webkit-transition-duration: .2s;}
.link:hover .exclamation {opacity: 1;}
.text_perma {width: 100px; text-align: right; position: absolute; margin-left: -110px; -webkit-transition-duration: .2s; opacity: 0;}
{block:IndexPage}.entry:hover .text_perma {opacity: 1;}{/block:IndexPage}
.text_permalink {border-bottom: 1px solid {color:Background}; display: inline-block; -webkit-transition-duration: .2s;}
.text_permalink:hover {border-bottom: 1px solid {color:Secondary};}
h2 {font-size: 14px;}
h2 a {text-decoration: none; border-bottom: 1px solid; -webkit-transition-duration: .2s;}
h2 a:hover {border-bottom: 1px solid {color:Background};}
.label {margin-right: 10px; font-weight: bold;}
.album_art {display: inline-block; margin-right: 10px; float: left;}
.album_art img {width: 150px; height: 150px;}
.audio {display: inline-block; min-height: 150px; max-width: 207px;}
ol.notes {margin-left: -45px; list-style-type: none; width: 400px;}
ol.notes a:hover {text-decoration: none;}
ol.notes blockquote {margin-top: -3px; margin-left: 0px; padding-left: 13px; padding-top: 5px; border-left: 11px solid {color:Primary}; margin-bottom: 0px;}
ol.notes li.note {padding: 5px;}
li.note img {margin-right: 10px; width: 11px; height: auto; opacity: .5; -webkit-transition-duration: .3s;}
li.note:hover img {opacity: 1;}
.entry blockquote {border-left: 2px solid {color:Primary}; padding-left: 10px; margin-left: 25px;}
.player {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow};}
#tags {margin-bottom: 20px;}
#tags a {margin-right: 10px; opacity: .7; text-decoration: none;}
#tags a:hover {opacity: 1;}
.nav_1 {display: inline-block; width: 50%; margin-bottom: 20px;}
.nav_2 {display: inline-block; width: 50%; text-align: right; margin-bottom: 20px;}
#nav a {text-decoration: none;}
#nav a:hover {font-weight: bold;}
.audio_symbol {padding: 7px; background-color: {color:Background}; opacity: .9; border-radius: 100px; position: absolute; margin-top: 7px; margin-left: 7px; font-size: 14px; height: 15px; width: 15px; -webkit-text-stroke: 1px transparent;}
{block:IfInfiniteScrolling}.regular_pagination {display: none;}{/block:IfInfiniteScrolling}

</style>

</head>

<body>

<div id="right"><div style="display: block;"><div class="title"><a href="/">{Title}</a></div></div>
<div id="description">{Description}</div> {block:AskEnabled}<div style="display: block;"><div class="link"></div></div>{/block:AskEnabled} <div style="display: block;"><div class="link"></div></div> <div style="display: block;"></a></div></div> {block:SubmissionsEnabled}<div style="display: block;"></a></div></div>{/block:SubmissionsEnabled} {block:HasPages}{block:Pages}<div style="display: block;"><div class="link"><a href="{URL}">{Label}<div class="exclamation">!</div></a></div></div>{/block:Pages}{/block:HasPages} <div style="display: block;"><div class="link"></a></div></div></div>

<div id="center">

Hi everyone. I am looking to engage someone in conversation about an HTML cut-up excercise I am currently working on. I have some basic HTML and CSS experience from several short evening courses I attended a couple of years ago, built myself a couple of very basic, amateur sites (I am interested in 3d modeling and built myself a couple of portfolio sites to show some of my models), and went as far as to fumble my way through putting together a practice e-commerce site using PHP/mysql/apache. This was all a couple of years ago now and I had thought web design was a thing of my past.

But, in a slightly strange turn of recent events I put myself forward for an seo position at a local web dev company, and came away asked if I would be interested in a junior front end developer role. I am eager to take on this challenge, and have been given an html cut-up excercise to do as a barometer of my abilities.

Everything I have ever done web wise, has really been from scratch, so this cut-up business is very new to me. I found several videos on youtube which all centred around the slice tool in photoshop, and then saving out the slices as an html and images file, to then fine tune elsewhere, in my case, Dreamweaver.

I am conscious though, of not having an image heavy webpage, and also am not happy with the huge and complicated table that Photoshop coded for me as a result of all my slicing.

So, does anyone have any experience with Photoshop cut-ups, and ideas to get the best results from the outcome. At the moment, Ive hand coded most of the buttons, so they are no longer images, and added links to them. But I got to a point where all the 1 pixel high 'spacer.gif's' were getting on my nerves that I deleted all of them. Then that left me with a very distorted and empty looking table, so I deleted all the table elements from the code also. So my idea from here is to use divs and absolute positioning to place all the leftover 'necessary' parts, how they look in the original psd image.

Does it sound like I am on the right path? I assume there are several methods of going about a cut-up. Could anyone give me some advice?

Ben

Hiya

I am designing my first website for a charity. I have learnt simple HTML but not that good yet so I am confused on two things:

1. Why can't I see my images, I have been building my site offline and linked to where the images are saved. The other day I could view them and today I can't, I have checked several times that the file route is correct and it is. So why do they just come up with a box and small red x?

2. How do you make words (such as menu navigation) change colour and pop out when you hover over them?

I hope I have posted this in the correct place, forgive me if I haven't but I did not know where else these questions should do.

Any help you can give and also sites that have cool example codes would be great.

Thank you in advance
Michaela

In preparing to learn in-depth info about DW and all the terms that come with web designing:

What exactly does the term slide toggle mean? I came across this term, in one of the threads, and googled it but still did not understand the term.

I was suprised to see that DW has a few critics out there. With each type of programming language, I gather that there are pro's and con's for each but specifically, what are the con's to DW? I invested in CS5 and I am looking forward to working with php and MySQL in conjunction with DW.

Thank you in advance!

Hello i'm new to HTML and i have a few questions.
I am using HTMLdog.com to learn the basics of html/css but i want to know if i should learn 1 at a time or both at the same time.

Can HTML codes be used in the same file as a CSS or do i have to use the href linking code?

Also if i do a CSS file by itself does it have to start with <html> and have the <head> <body> tags?