20 replies [Last post]
FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

Hello

I´m doing a site for a class in university but i´m haveing two problems with my site that doesn´t let me advance.

The first problem i have is related to the background image in the body part of the HTML.

I´m using an image with a resolution of 1024 x 768 and set it as the background image. Then and since i want to have the content of my site in a div, i wrote the code to be that way but my first problems appear when i insert a list in my code which makes the div surpass the dimensions of my background image making the bottom of my page white.

I already tried to put my Div with scroll but it still doesn´t work.

Then my other problem relates to making an horizontal menu. The menu i have stays vertical even though i´ve made a tutorial from a Css bok explaining how to do an horizontal menu.

Here´s my code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="file:///F|/Lusofona/3º Ano/1º Semestre/Interacção Homem-Maquina/Estilos.css" />
</head>
 
<body>
<div class="main">
<h1>O Meu Portfolio</h1>
<ul id="mainNav">
    <li><a href="/index.html" id="homeLink">Home</a></li><br />
    <li><a href="/historiasurf/" id="featureLink">Historia do Surf</a></li><br />
    <li><a href="/fotos/" id="expertLink">Fotos</a></li><br />
    <li><a href="/videos/"  id="quizLink">Videos</a></li><br />
    <li><a href="/portfolio/" id="projectLink">Portfolio</a></li><br />
    <li><a href="/links/" id="horoscopeLink">Links</a></li><br />
  </ul>
</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
 
body {
background: url(imagens/WavePatterns.jpg) repeat-x center top ;
}
 
 
.main { 
background:#FFFFFF ;
width: 700px;
margin: 30px 125px 30px 125px;
padding: 0 0 600px 0;
}
 
ul#mainNav {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px dashed #999;
float:left;
}
 
#mainNav li {
float: left;
width: 12em;
}
 
#mainNav a {
color: #000;
	    font-size: 1.1em;
	    text-transform: uppercase;
	    text-decoration: none;
		border: 1px dashed #999;
		border-left: none;
		padding: 7px 5px 7px 30px;
		display:block;
		background-color: #E7E7E7;
	    background-image: url(images/link.png);
	    background-repeat: no-repeat;
	    background-position: left center;
 
	}
 
#mainNav a:hover {
font-weight: bold;
background: #B2F511 url(images/go.png) no-repeat 5px 50%;
}	

Is it possible to post a couple of screenshots instead of just the code to show the site?

Thanks in advance for your help.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

at a glance, everything you

at a glance, everything you float, needs a width. can you post a link so we can "see" whats going on?

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

Here it is the part of the

Here it is the part of the menu:

And here it is the bottom of the Div which shows white parts instead of just the background image and the Div:

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

errr, what?

errr, what?

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

I´m sorry, maybe i didn´t

I´m sorry, maybe i didn´t understand what you were asking me since english isn´t my mother language.

Can you tell me what you didn´t understand?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

can you give us a link or

can you give us a link or URL to your test site?

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

I don´t have one since the

I don´t have one since the site isn´t supposed to go online but to be delivered to the teachers of my class.

I guess you can´t see the problem just from the screenshots no?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

screenshots are better than

screenshots are better than nothing :rolleyes: :rolleyes:

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

But can you help me with my

But can you help me with my problem?

Maybe i didn´t explain myself well but as far as the 2nd screenshot goes that DIV should be limited at the bottom and not make the background image awfull.

Triumph (not verified)
Anonymous's picture
Guru

FabioM wrote:But can you

FabioM wrote:

But can you help me with my problem?

Maybe i didn´t explain myself well but as far as the 2nd screenshot goes that DIV should be limited at the bottom and not make the background image awfull.

Hmm. I'm not understanding what you're saying either. What is your native language?

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

My native language is

My native language is portuguese.

This is a new screenshot of how i want the DIV to look like:

I took the list off the code which makes the DIV look like i want it to be.
When i insert a new list in the code the page stays like the 2nd screenshot i showed you above.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I think we have a

I think we have a misunderstanding on the term "screenshot". For us, a screenshot is a photo or picture of the design. Oh wait, there is an invisible element in your posts that link to an image. Strange how we cant see it. I highlighted his post to see it. My works network has blocked that page, so I am unable to see the screenshot.

Triumph (not verified)
Anonymous's picture
Guru

CupidsToejam wrote:I think

CupidsToejam wrote:

I think we have a misunderstanding on the term "screenshot". For us, a screenshot is a photo or picture of the design.

Are you not seeing the thumbnails? It's probably a problem with imageshack. Imageshack sucks! Sometimes it works, sometimes it doesn't. Don't rely on free hosting.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Oh wait, there is an

Oh wait, there is an invisible element in your posts that link to an image. Strange how we cant see it. I highlighted his post to see it. My works network has blocked that page, so I am unable to see the screenshot.

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

Triumph can you see the

Triumph can you see the screenshots?

Triumph (not verified)
Anonymous's picture
Guru

FabioM wrote:Triumph can you

FabioM wrote:

Triumph can you see the screenshots?

Sometimes. they take about 2 hours to load. imageshack is a joke.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

And it could be because my

And it could be because my office's network blocked the site, it maybe blocking the images from showing up here also. Can you just upload then directly to CSSCreator?

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

Here´s the screens:

Here´s the screens:

AttachmentSize
DIV.JPG 78 KB
Bottom.JPG 69.63 KB
Menu.JPG 93.01 KB
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Okay! After seeing the

Okay! After seeing the screenshots, I think I understand whats going on here.
the code below will take care of your extra space at bottom. revise your CSS with this

.main { 
background:#FFFFFF;
width: 700px;
margin: 30px auto;
padding: 0;
}

Now, about this list. delete all styles having to do with your UL. then try this

UL {list-style: none; display: inline; margin: 0 10px;}

Hope this helps you !!

FabioM
Offline
newbie
Last seen: 10 years 36 weeks ago
Joined: 2009-01-07
Posts: 9
Points: 0

It still doesn´t work.

It still doesn´t work. I´ve also tried to change the resolution of my image but it seems the problem isn´t there.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

post this site on the web so

post this site on the web so we can look at it deeper. give us a link to a live test site.