hi friends
i have problem!
you can look alive on http://fancyblend.com/onlinecomputer/index.html
http://prntscr.com/88k7mh i wanted to make this!
<div class="nav">
<ul>
<li><a href="#">HOME PAGE</a></li>
<li><a href="#">NEW PRODUCTS</a></li>
<li><a href="#">SPECIALS</a></li>
<li><a href="#">MY ACCOUNT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
.nav
{
width:765px;
height:auto;
background-image:url(../images/navigation_bg.png);
background-repeat:no-repeat;
font-size:12px;
}
.nav ul
{
list-style:none;
padding:0;
}
.nav ul li {
display: inline;
}
.nav ul li a {
display: inline-block;
text-decoration:none;
font-size: 1.5em;
padding-right:5px;
color:white;
}
my outcome is this! http://prntscr.com/88k87n
why it is going to left, i have triend float:left as well! did not work for me
how to make this ! http://prntscr.com/88k8f5
attaching jpg for more understanding friends!
ronpat
August 25, 2015, 6:16am
2
After giving the body a background color, this is how your code is rendered in my browser:
The menu is horizontally and left aligned.
There is not enough information in the code snippit to allow us to replicate the issue. We need to see the surrounding code and images being used.
Perhaps a link to your web site would help us see the problem.
This is not answering your query but I should point out it is considered bad form to use all capital letters as many screen readers spell out words all in caps. You can use CSS text-transform to have the same visual effect.
hi
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Computer Online Shop</title>
<link href="styles/styles.css" media="all" type="text/css" rel="stylesheet">
</head>
<body>
<div id="full_page">
<div id="header">
<div id="header_top">
<div id="header_top_language">
<div id="flags">
<ul>
<li><img src="images/checkbox.png"></li>
<li><p>Choose Language :</p></li>
<li><a href="#"><img src="images/flag_germany.png"></a></li>
<li><a href="#"><img src="images/flag_spain.png"></a></li>
<li><a href="#"><img src="images/flag_uk.png"></a></li>
</ul>
<ul>
<li><img src="images/checkbox.png"></li>
<li> <form action="process.html" method="post" >
<p>Currencies:
<select id="US $">
<option>January</option>
<option>Feburary</option>
<option>March</option>
</select>
</p>
</form>
</li>
</ul>
</div> <!--end of Flag Div -->
</div> <!-- end of header_top_language -->
<div id="header_top_link">
<ul>
<li><a href="#">Specials</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Conatct Us</a></li>
<li><a href="#">Create an account</a></li>
<li><a href="#">Customer Login</a></li>
</ul>
</div> <!--End of Header_Top_Link -->
<div id="header_top_shopping">
</div>
</div>
<div id="border_header">
</div>
<div id="header_bottom">
<div id="logo">
</div>
<div id="header_products">
</div>
</div>
<div class="nav">
<ul>
<li><a href="#">HOME PAGE</a></li>
<li><a href="#">NEW PRODUCTS</a></li>
<li><a href="#">SPECIALS</a></li>
<li><a href="#">MY ACCOUNT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
<div id="middle">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
*
{
margin:auto;
position:relative;
}
ul, li
{
list-style-type:none;
padding:0px;
margin:0px;
}
#full_page
{
width:766px;
height:700px;
}
/*Start of Header */
#header
{
height:245px;
}
/*Start of Header Top */
#header_top > *
{
float:left;
height:100%;
}
#header_top
{
height:91px;
/* border-bottom:1px solid 1px #030303; */
font-family:Tahoma Bold;
font-size:11px;
color:white;
background-image:url(../images/header_background.png);
background-repeat:no-repeat;
background-position:center;
}
#flags
{
margin:-1px;
padding:1px;
line-height:30px;
float:left;
}
#flags > ul
{
margin-top:20px;
margin-left:24px;
}
#flags li
{
float:left;
margin-left:4px;
}
/*#flags li:nth-of-type(1)/**/
#flags li:first-of-type
{
margin-left:8px !important;
}
select {
width:115px;
}
#header_top_language
{
width:242px;
}
/* Start of Header Top 2nd Section */
#header_top_link
{
width:310px;
padding-top:20px;
margin-left:38px;
}
#header_top_link li
{
width:35%;
display: inline-block;
/*padding: 0;
margin: 0; */
background-image:url(../images/checkbox_item.png);
background-repeat:no-repeat;
background-position:left center;
padding-left:20px;
line-height:20px;
height:20px;
float:left;
font-weight:bold;
}
#header_top_link a
{
color:#ffffff;
text-decoration: none;
}
/* End of Header Top 2nd Section */
/* Start of Header Top 3rd Section */
#header_top_shopping
{
width:170px;
/*margin-left:27px; */
padding-top:20px;
float:left;
}
#header_top_shopping_cart_box
{
/*height:56px;/**/
/*height:44px;
padding-top:12px;
width:88px; */
background-image:url(../images/shopping_cart_item.png);
background-repeat:no-repeat;
background-position:left;
/*background-position:20px 27px; */
font-size:11px;
font-weight:bold;
color:white;
/*background-color:white;/*remove*/
}
#header_top_shopping_cart_box span
{
color:yellow !important;
}
/*End of Header Top */
#border_header
{
border-top:1px #00214b solid;
line-height:9px;
height:9px;
border-bottom:1px #00214b solid;
background-color:white;
}
#header_bottom
{
height:107px;
background-image:url(../images/header_bottom_background.png);
background-repeat:no-repeat;
}
#header_bottom > *
{
float:left;
height:100%;
}
#logo
{
width:341px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
padding-top:24px;
margin-left:28px;
}
#header_products
{
width:323px;
padding-top:3px;
background-image:url(../images/products.png);
background-repeat:no-repeat;
margin-left:74px;
}
.nav
{
width:765px;
height:auto;
background-image:url(../images/navigation_bg.png);
background-repeat:no-repeat;
font-size:12px;
}
.nav ul
{
list-style:none;
padding:0;
}
.nav ul li {
display: inline;
}
.nav ul li a {
display: inline-block;
text-decoration:none;
font-size: 1.5em;
padding-right:5px;
color:white;
}
/*End of Header */
#middle
{
height:404px;
background-color:orange; /*remove*/
}
/*Start of Footer */
#footer
{
height:54px;
background-color:red; /*remove*/
}
/*End of Footer */
sir i have uploaded on hostinghttp://fancyblend.com/onlinecomputer/index.html
can you check it now
ronpat
August 25, 2015, 7:52am
6
The menu is snagging on the bottom of the #logo box.
Delete #logo {padding-top:24px}
styles (line 182)
#logo {
background-image: url("../images/logo.png");
background-repeat: no-repeat;
margin-left: 28px;
padding-top: 24px; /* Delete Me */
width: 341px;
}
May I ask what browser you use? Do you have access to Firefox?
i have access of firefox!
i have updated url http://fancyblend.com/onlinecomputer/index.html code here
lastest preview has below image problem!
now have problem of navigation, its not adjusting on navigation
Last problem of !
how this banner have to push little up
ronpat
August 25, 2015, 10:20am
8
style.css (line 192)
.nav {
background-image: url("../images/navigation_bg.png");
background-repeat: no-repeat;
font-size: 12px;
height: 35px;
text-align: center; /* Change to "left" */
width: 765px;
}
style.css (line 219)
.nav ul li a {
color: white;
display: inline-block;
font-size: 1.5em; /* Adjust this value */
padding: 4px 20px; /* Adjust these values */
text-decoration: none;
}
The menu background is one long image. The menu items are individual items. They are not related to each graphic menu segment. As designed, the page can never be responsive. As designed, the page layout can go askew if the user’s font size is much larger or smaller than yours. The menu code can be changed to almost relate the text with the gaphic background.
After you have made the above adjustments to suit yourself, open Firefox and choose “Zoom: Text Only”
ronpat:
padding: 4px 20px;
thanks sir fixed, i am in learning phase, practicing templates
can any one explain
i have tried both options! it works fine for me! so what is best option to use!
ronpat
August 25, 2015, 10:37am
11
http://www.w3.org/TR/CSS2/box.html
For more info, search for “CSS box model”.
padding is inside the box, margin is outside of the box.
In your example above, reducing the width of the horizontal padding might get you closer to the “look” that you seek; however, as I explained, the text and the background image are not properly associated.
I recommend that you take a basic course in HTML and CSS, or at least read a basic tutorial. Knowing the difference between margin and padding is ultra fundamental to writing code.
1 Like
system
November 24, 2015, 5:38pm
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
