HTML Forum

**ammar-q** · 03:34 PM

Well I've been coding this site for quiet a long time now and it's my first ever. And I've tried time and time again but I just can't make the layout work...so it's not just me being lazy. Basically the navigation is displaying links blue with underlining and padding, margins don't work and the whole thing is giving me a headache. Plus the website's not working with different resolutions. Someone please help

You can see my site at mangastop.co.nr (yeah it's a manga site...), if you need to see the code just do view page source.
All help appreciated.

**Brian07002** · 06-25-2010, 03:19 PM

Oh-oh-oh it's magic...Ya know!

All singing aside, you should check with w3.org and read about web design there! They cover all your html needs!

**ammar-q** · 06-25-2010, 03:21 PM

I knew I would get a reply like this...
I learnt off w3 schools and I've searched all over the web for answers and I'm getting different answers, so I don't know what's right and wrong anymore =(

**ammar-q** · 06-25-2010, 03:33 PM

Someone please help...
I wish it was as simple as go to w3 schools but I really need help with my layout.

**LadynRed** · 03:38 PM

What browser are you seeing that in? It looks fine in Firefox and IE7 - no blue bordered links, nav looks fine.

If you're talking about the blue links on the right side - there are no styles applied to that list at all.

**kline11** · 06-25-2010, 03:41 PM

Clean up your HTML first, then view it. You had duplicate head and html tags, etc.

Cleaned:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="MangaStop2.css" />
<title>MangaStop - Your No1 Stop For Manga</title>
</head>

<body>

<div id="wrapper">

<div id="top-nav">

<form id="manga-list">
<select name="menu">
<option selected>Manga List</option>
<option value="#">Bleach</option>
<option value="#">Naruto</option>
<option value="#">One Piece</option>
</select>
</form>

<a href="/Bleach/">Manga A-Z</a>
<a href="/One_Piece/">Advanced Search</a>

<a href="/Naruto/">RSS</a>

</div>

<div id="banner">
<img src="http://i848.photobucket.com/albums/ab46/Raitei/MS-NoBoarder.jpg">
</div>

<div id="nav">
<a href="Index.php">Home</a>
<a href="#">Manga A-Z</a>
<a href="#">Updates</a>
<a href="#">Forum</a>

<a href="#">Request Manga</a>
<a href="Newsadd.php">Submit Manga</a>
<a href="#">Contact Us</a>
<a href="#">FAQ</a>
<a href="#">About</a>
</div>

<div id="big3-wrapper">

<div class="big3">

</div>
<div class="big3">
</div>
<div class="big3">
</div>

</div>

<div id="side-list">

<div class="header">
Most Popular Manga
</div>

<div class="list">

<ul>
<li><a href="/Naruto/">Naruto</a></li>

<li><a href="/Bleach/">Bleach</a></li>

<li><a href="/One_Piece/">One Piece</a></li>
</ul>

</div>

<div class="header">
Site Status
</div>

<div class="list">

<ul>
Visitors Today: 00000<br>

Members Online: 00000<br>
guests: 0000<br>
</ul>

</div>

</div>

<div id="content">

<div class="news-entry">
</div>


<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

</div>

<div id="footer">
Footer goes here......blah blah blah....
</div>

</div>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->

</body>

</html>

**ammar-q** · 06-25-2010, 03:46 PM

There were styles but I removed them so someone could give me a fresh code. My old code was a bit funny and even though it worked, I know that's not how the css was meant to be. I'm getting confused about nested divs so if anyone can clear this up for me. My sidelist with the navigation to the right goes like this.

<div id="sidelist"> (main wrapper)
<div class="list"> (my actual list)
<div id="header">(start of the header
</div> (end of header)
<ul>
list goes here...
</ul>
</div> (end of list)

<div id="header">(start of the header
</div> (end of header)
<div class="list"> (my actual list)
<ul>
list goes here...
</ul>
</div> (end of list)

</div> (end of wrapper)

My css is like this
#sidelist
.list
.list ul

But then I'm seeing
.list a:hover
a:hover
a:link
.list li
and all these other ones on different sites and I'm getting confused how it should be on my site.
If anyone can give me the right codes. Well thanks. If you want more info check my code with view page source.

**ammar-q** · 06-25-2010, 03:48 PM

Quote:

Originally Posted by kline11

Clean up your HTML first, then view it. You had duplicate head and html tags, etc.

Cleaned:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="MangaStop2.css" />
<title>MangaStop - Your No1 Stop For Manga</title>
</head>

<body>

<div id="wrapper">

<div id="top-nav">

<form id="manga-list">
<select name="menu">
<option selected>Manga List</option>
<option value="#">Bleach</option>
<option value="#">Naruto</option>
<option value="#">One Piece</option>
</select>
</form>

<a href="/Bleach/">Manga A-Z</a>
<a href="/One_Piece/">Advanced Search</a>

<a href="/Naruto/">RSS</a>

</div>

<div id="banner">
<img src="http://i848.photobucket.com/albums/ab46/Raitei/MS-NoBoarder.jpg">
</div>

<div id="nav">
<a href="Index.php">Home</a>
<a href="#">Manga A-Z</a>
<a href="#">Updates</a>
<a href="#">Forum</a>

<a href="#">Request Manga</a>
<a href="Newsadd.php">Submit Manga</a>
<a href="#">Contact Us</a>
<a href="#">FAQ</a>
<a href="#">About</a>
</div>

<div id="big3-wrapper">

<div class="big3">

</div>
<div class="big3">
</div>
<div class="big3">
</div>

</div>

<div id="side-list">

<div class="header">
Most Popular Manga
</div>

<div class="list">

<ul>
<li><a href="/Naruto/">Naruto</a></li>

<li><a href="/Bleach/">Bleach</a></li>

<li><a href="/One_Piece/">One Piece</a></li>
</ul>

</div>

<div class="header">
Site Status
</div>

<div class="list">

<ul>
Visitors Today: 00000<br>

Members Online: 00000<br>
guests: 0000<br>
</ul>

</div>

</div>

<div id="content">

<div class="news-entry">
</div>


<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

<div class="news-entry">

<h2>
Blah blah
</h2>
<h3>Blah blah blah...</h3>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
</div>

</div>

<div id="footer">
Footer goes here......blah blah blah....
</div>

</div>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->

</body>

</html>

I found two html tags but I can't find the head one.
I'll clear that up now but which html should I get rid of?
<html xmlns="http://www.w3.org/1999/xhtml">
or <html>?

**ammar-q** · 06-25-2010, 04:13 PM

any helpful suggestions???

**kline11** · 06-25-2010, 04:25 PM

Yes, read more about CSS and HTML, unless your going to pay someone to do it for you.

**ammar-q** · 06-25-2010, 04:29 PM

sigh...I come to a help site for people who need help with their codes and I'm told to do it myself...

**amber0hunter** · 06-25-2010, 04:33 PM

Well, I'm not really sure from reading your post what you want the navigation links to look like. If you're just wanting to get rid of the underlines on the links in the side navigation, try something like this:

.sidelink { text-decoration: none; }

Hope this helps.

**ammar-q** · 05:05 PM

Ok this is partly my fault for not making things clear. This is my original sidebar which worked but the code was weird. Mangastop.hoistoi.com/index.php
The 3 images have been removed as they took too much space, that's why in my mangastop.co.nr you can't see them.
That's how I want it to look. I see people going search it up or get better at html and css, but thing is I've tried so I'm now asking for help. I'm getting told to pay for a professional to do these things. Well tbh I'm not asking for a full design with the latest javascript and advanced css. I'm asking for someone if they could please just edit a few lines for me so that my code works. Forget the other errors in the page if anyone can fix my sidebar so it looks like the one on Mangastop.hoistoi.com/index.php then thanks.
I don't see what's so hard about copying and pasting everything into w/e editor you use and editing a few lines then pasting it so I can see. The people on this site are smart that's why I'm asking for help.
Anyone who can help, I appreciate it.

**chrishirst** · 06-25-2010, 07:17 PM

I fail to see how we can actually assist.

The "problems" you stated are not evident on the site and the example (on hostoi) simply does not exist.

**amber0hunter** · 06-26-2010, 12:06 AM

Quote:

Originally Posted by ammar-q

Ok this is partly my fault for not making things clear. This is my original sidebar which worked but the code was weird. Mangastop.hoistoi.com/index.php

This link appears to be sending me to a parking page or something? Not Manga related at all and nothing like what you've described.

**ammar-q** · 06-26-2010, 08:13 AM

sorry my bad. I won't show you that link though, I'll show you my new one, copy and pasted the code from that onto mine, and while it looks fine the code is very strange if you view it.
http://mangastop.hostoi.com/Index2.php

**chrishirst** · 06-26-2010, 08:29 AM

Whats weird??????

the .nr "site" is simply a "frame forward"

**ammar-q** · 06-26-2010, 08:50 AM

sigh...
Go onto mangastop.hoistoi.com/Index2.php and look at the css files and then you'll see what I mean.

**chrishirst** · 06-26-2010, 09:08 AM

they are the same CSS files!

from the webdeveloper toolbar CSS viewer

Code:

http://mangastop.hostoi.com/Index2.php
http://mangastop.hostoi.com/MangaStop2.css

Code:

http://mangastop.co.nr/
http://mangastop.hostoi.com/Index2.php
http://mangastop.hostoi.com/MangaStop2.css

I take it you don't understand what .co.nr "hosting" really is.

It is NOT a hosting plan. It is simply a masking system for hiding free host URLs

**ammar-q** · 06-26-2010, 10:05 AM

Ik it's a masking system, I'm not telling you to go on mangastop.co.nr, i'm saying go on mangastop.hoistoi.com/Index2.php and look at my html code and my css code. Like actually open those files and have a look at how I've coded it.
Type mangastop.hoistoi.com/Index2.php in your adress bar not mangastop.co.nr...

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!