The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> having trouble with horizonal nav bar
rodni
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rodni
post Jun 17 2020, 12:05 PM
Post #2





Group: Members
Posts: 4
Joined: 17-June 20
Member No.: 27,405
QUOTE(rodni @ Jun 17 2020, 12:04 PM) *

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rodni
post Jun 17 2020, 12:39 PM
Post #4





Group: Members
Posts: 4
Joined: 17-June 20
Member No.: 27,405
QUOTE(pandy @ Jun 17 2020, 12:14 PM) *

Could you link to the page so we can see that with images and all?


sorry yes ofcourse

[url=C:\Users\z1\Downloads\קורס HTML_all_files (1)\mysite\indexmy.html] my website[/url]

This post has been edited by rodni: Jun 17 2020, 12:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. happy.gif

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rodni
post Jun 18 2020, 07:07 AM
Post #6





Group: Members
Posts: 4
Joined: 17-June 20
Member No.: 27,405
QUOTE(pandy @ Jun 17 2020, 03:15 PM) *

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. happy.gif

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 laugh.gif laugh.gif
but i didn't knew about what you said about xhtml is dead i almost finishing an online course sad.gif sad.gif sad.gif
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. tongue.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 18 2020, 03:31 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Jun 18 2020, 02:42 PM) *

XHTML 1.0 that you use is from 2002.

Time flies. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 09:08 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC