Wed, 2009-01-07 15:03
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.
Wed, 2009-01-07 19:12
#1
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
#2
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
#3
errr, what?
errr, what?
Thu, 2009-01-08 16:13
#4
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
#5
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
#6
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
#7
screenshots are better than
screenshots are better than nothing :rolleyes: :rolleyes:
Thu, 2009-01-08 17:24
#8
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
#9
FabioM wrote:But can you
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
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
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
CupidsToejam wrote:I think
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
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
Triumph can you see the
Triumph can you see the screenshots?
Thu, 2009-01-08 19:28
#15
FabioM wrote:Triumph can you
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
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
Here´s the screens:
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
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
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
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.