having trouble with horizonal nav bar |
having trouble with horizonal nav bar |
rodni |
Jun 17 2020, 12:04 PM
Post
#1
|
Group: Members Posts: 4 Joined: 17-June 20 Member No.: 27,405 |
hi everyone
i tried to use photo as devider for my navigation bar but the links not straight and the photo repeating itself although i put in the css file "background-repeat: no-repeat" the css code: html,body,h1,h2,h3,h4,h5,h6,p,ul,li,a{ margin:0px; padding:0px; } body{ background-image: url(images/texture-bg.jpg); background-repeat: repeat-x; background-color: #E5E1CA; } #wrapper{ height:900px; background-image: url(images/header.png); background-repeat: repeat-x; } #wrapper #main{ width:960px; height:800px; margin-left: auto; margin-right: auto; direction: rtl; } #wrapper #main #header{ background-image: url(images/mark.png); background-repeat: no-repeat; background-position: right top; height: 96px; } #wrapper #main #logo{ height: 70px; width: 320px; background-image: url(images/logo_03.png); background-repeat: no-repeat; background-position: center center; } #wrapper #main #nav{ background-image: url(images/menu.jpg); background-repeat: repeat-x; height: 44px; margin-top: 15px; padding-top: 2px; padding-bottom: 2px; } #wrapper #main #nav ul{ list-style-type: none; float: right; width: 400px; display: block; } #wrapper #main #nav ul li a{ font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; color: #FFF; font-size: 16px; display: block; float: right; padding: 12px; background-image: url(images/devider.png); background-repeat: no-repeat; background-position: left center; } #footer{ height:100px; background-image: url(images/footer-bg.jpg); background-repeat: repeat-x; background-color: #7A6A53; } the html code in first comment |
rodni |
Jun 17 2020, 12:05 PM
Post
#2
|
Group: Members Posts: 4 Joined: 17-June 20 Member No.: 27,405 |
hi everyone i tried to use photo as devider for my navigation bar but the links not straight and the photo repeating itself although i put in the css file "background-repeat: no-repeat" the css code: html,body,h1,h2,h3,h4,h5,h6,p,ul,li,a{ margin:0px; padding:0px; } body{ background-image: url(images/texture-bg.jpg); background-repeat: repeat-x; background-color: #E5E1CA; } #wrapper{ height:900px; background-image: url(images/header.png); background-repeat: repeat-x; } #wrapper #main{ width:960px; height:800px; margin-left: auto; margin-right: auto; direction: rtl; } #wrapper #main #header{ background-image: url(images/mark.png); background-repeat: no-repeat; background-position: right top; height: 96px; } #wrapper #main #logo{ height: 70px; width: 320px; background-image: url(images/logo_03.png); background-repeat: no-repeat; background-position: center center; } #wrapper #main #nav{ background-image: url(images/menu.jpg); background-repeat: repeat-x; height: 44px; margin-top: 15px; padding-top: 2px; padding-bottom: 2px; } #wrapper #main #nav ul{ list-style-type: none; float: right; width: 400px; display: block; } #wrapper #main #nav ul li a{ font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; color: #FFF; font-size: 16px; display: block; float: right; padding: 12px; background-image: url(images/devider.png); background-repeat: no-repeat; background-position: left center; } #footer{ height:100px; background-image: url(images/footer-bg.jpg); background-repeat: repeat-x; background-color: #7A6A53; } the html code in first comment <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>שביל ישראל</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="main"> <div id="header"> </div> <div id="logo"> </div> <div id="nav"> <ul> <li><a href="#">דף הבית<a/></li> <li><a href="#">טיולים<a/></li> <li><a href="#">גלריה<a/></li> <li><a href="#">מומלצים<a/></li> <li><a href="#">צרו קשר<a/></li> </ul> <div id="search"> </div> </div> <div id="topCon"> <div id="mainPic"> </div> <div id="txtBox"> </div> </div> <div id="bottomCon"> <div id="side"> </div> <div id="tabs"> </div> </div> </div> </div> </div> <div id="footer"> </div> </body> </html> |
pandy |
Jun 17 2020, 12:14 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Could you link to the page so we can see that with images and all?
|
rodni |
Jun 17 2020, 12:39 PM
Post
#4
|
Group: Members Posts: 4 Joined: 17-June 20 Member No.: 27,405 |
|
pandy |
Jun 17 2020, 03:15 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Oh, OK. So the page isn't on the web yet?
It took a while to spot it, but I see the problem now. You see three copies of the image, right? It isn't repeating. You have closed your A tags wrongly, with an XHTML slash instead of a real closing slash in the closing tags. You have this. CODE <a href="#">...<a/> It should be written like this. CODE <a href="#">...</a> It seems browsers see each of your A elements as three. That's why you see three copies of the background image. BTW, XHTML is dead. There is no point in using it. But if you do, it's only so called empty elements, meaning those that don't have a proper closing tag, that should be closed with that XHTML slash. Like BR and IMG. Those that have a closing tag should use that - with the slash in the right place. HTML: CODE <br> <img> <a href="">...</a> XHTML: CODE <br /> <img /> <a href="">...</a> |
rodni |
Jun 18 2020, 07:07 AM
Post
#6
|
Group: Members Posts: 4 Joined: 17-June 20 Member No.: 27,405 |
Oh, OK. So the page isn't on the web yet? It took a while to spot it, but I see the problem now. You see three copies of the image, right? It isn't repeating. You have closed your A tags wrongly, with an XHTML slash instead of a real closing slash in the closing tags. You have this. CODE <a href="#">...<a/> It should be written like this. CODE <a href="#">...</a> It seems browsers see each of your A elements as three. That's why you see three copies of the background image. BTW, XHTML is dead. There is no point in using it. But if you do, it's only so called empty elements, meaning those that don't have a proper closing tag, that should be closed with that XHTML slash. Like BR and IMG. Those that have a closing tag should use that - with the slash in the right place. HTML: CODE <br> <img> <a href="">...</a> XHTML: CODE <br /> <img /> <a href="">...</a> wow man thank you very much i wouldn't see that in a million year but i didn't knew about what you said about xhtml is dead i almost finishing an online course html is that different from xhtml i understood they pretty much the same, no? This post has been edited by rodni: Jun 18 2020, 07:08 AM |
pandy |
Jun 18 2020, 07:42 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I didn't notice those slashes were in the wrong place at first either. One sees what one expects to see and I was focused on the CSS.
No, no big difference. For practical purposes it's mainly those slashes. And the slashes are actually allowed in HTML 5, the current cat's meow, even if I personally think they shouldn't be used. I guess the reason for that is to ease the move from XHTML. So you haven't wasted your time. You could ask them why they teach an outdated technique that was abandoned a decade ago though. IRC XHTML was discontinued in 2010. But of course it can still be used and is understood by browsers. As much as it ever was anyway. How long that will be true I don't know, but probably forever since browsers treats it as HTML anyway. Discontinued just means they stopped any further development of the language and the latest spec is the last. That's XHTML 1.1 that never really took off. XHTML 1.0 that you use is from 2002. |
Christian J |
Jun 18 2020, 03:31 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Jun 18 2020, 05:38 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Doesn't it? And discontinued 2010. Feels like just a few years ago I gloated over that. Still do, sometimes. Some things are so fulfilling they seem to last forever.
|
Lo-Fi Version | Time is now: 23rd April 2024 - 06:31 PM |