Background image broken and horizontal menu help

20 replies [Last post]

Wed, 2009-01-07 15:03

FabioM

Offline

newbie

Last seen: 13 years 47 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.

Tags:

Beginners CSS Questions

Wed, 2009-01-07 19:12

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks 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?

Wed, 2009-01-07 21:46

FabioM

Offline

newbie

Last seen: 13 years 47 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:

Thu, 2009-01-08 16:09

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks ago

Florida

Timezone: GMT-4

Joined: 2008-08-15

Posts: 2637

Points: 1556

errr, what?

Thu, 2009-01-08 16:13

FabioM

Offline

newbie

Last seen: 13 years 47 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?

Thu, 2009-01-08 16:23

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks 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?

Thu, 2009-01-08 16:37

FabioM

Offline

newbie

Last seen: 13 years 47 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?

Thu, 2009-01-08 16:52

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks ago

Florida

Timezone: GMT-4

Joined: 2008-08-15

Posts: 2637

Points: 1556

screenshots are better than

screenshots are better than nothing :rolleyes: :rolleyes:

Thu, 2009-01-08 17:24

FabioM

Offline

newbie

Last seen: 13 years 47 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.

Thu, 2009-01-08 17:30

Triumph (not verified)

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?

Thu, 2009-01-08 17:41

#10

FabioM

Offline

newbie

Last seen: 13 years 47 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.

Thu, 2009-01-08 19:06

#11

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks 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.

Thu, 2009-01-08 19:06

#12

Triumph (not verified)

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.

Thu, 2009-01-08 19:08

#13

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks 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.

Thu, 2009-01-08 19:14

#14

FabioM

Offline

newbie

Last seen: 13 years 47 weeks ago

Joined: 2009-01-07

Posts: 9

Points: 0

Triumph can you see the

Triumph can you see the screenshots?

Thu, 2009-01-08 19:28

#15

Triumph (not verified)

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.

Thu, 2009-01-08 20:05

#16

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks 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?

Thu, 2009-01-08 21:57

#17

FabioM

Offline

newbie

Last seen: 13 years 47 weeks ago

Joined: 2009-01-07

Posts: 9

Points: 0

Here´s the screens:

Attachment	Size
DIV.JPG	78 KB
Bottom.JPG	69.63 KB
Menu.JPG	93.01 KB

Thu, 2009-01-08 22:38

#18

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks 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 !!

Fri, 2009-01-09 00:12

#19

FabioM

Offline

newbie

Last seen: 13 years 47 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.

Fri, 2009-01-09 02:35

#20

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 12 weeks 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.

Background image broken and horizontal menu help

at a glance, everything you

Here it is the part of the

errr, what?

I´m sorry, maybe i didn´t

can you give us a link or

I don´t have one since the

screenshots are better than

But can you help me with my

FabioM wrote:But can you

My native language is

I think we have a

CupidsToejam wrote:I think

Oh wait, there is an

Triumph can you see the

FabioM wrote:Triumph can you

And it could be because my

Here´s the screens:

Okay! After seeing the

It still doesn´t work.

post this site on the web so

User login

Navigation