Log in

View Full Version : adding CSS and HTML to Visual Web developer? help


paigef
12-12-2007, 03:36 PM
hi, i'm using Visual Web Developer, and i'm trying to add the following http://www.dynamicdrive.com/style/csslibrary/item/cf-navigation-menu-ii/, everytime i do it comes out with no color and very cheap looking.

i insert the CSS code between the <head> tags, and HTML codes between the <div>. am i doing this wrong?

please help, thanks. :)
boogyman
12-12-2007, 03:38 PM
the coding on the demo is fine.

Post the URL to the problematic code so we can better help you
paigef
12-12-2007, 03:39 PM
the URL is in my post above.

i don`t know how to make it clicky, sorry.

edit, oh i see its already clicky. the code should be on there but i can post it here too if you cant see it.
paigef
12-12-2007, 03:57 PM
CSS code


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#cfnavbar{
margin: 0;
padding: 0;
}

#cfnavbar ul{
background: url(media/bgpink.gif) bottom center repeat-x;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}

* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#cfnavbar ul li{
display: inline;
}


#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/dividerpink.gif) bottom right no-repeat;
}

#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}


#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/leftcornerpink.gif) bottom left no-repeat;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/rightcornerpink.gif) bottom right no-repeat;
}

#cfnavbar ul li a:hover{
text-decoration: underline;
}

</style>


HTML code

<div id="cfnavbar">
<ul>
<li><span><a href="http://www.dynamicdrive.com" id="leftcorner">Home</a></span></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://www.dynamicdrive.com/contact.htm" id="rightcorner">Contact</a></li>
</ul>
</div>

<br style="clear: left" />
boogyman
12-12-2007, 04:02 PM
You are referencing the image incorrectly the format for declaring all background properties in one is



selector {
background: color url('urlAddress') repeat attachment position;
}

so for instance one of you right corner should be


#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: transparent url('media/rightcornerpink.gif') no-repeat bottom right ;
}

its suggested to put in a color incase the image doesn't load, the element content will not be comprimised. what I mean by that is that it will still look similar if the image cannot be displayed due to an error(correupt / incorrect location) or user preferences(disable images).
paigef
12-12-2007, 04:27 PM
can you explain in simpler terms please? i cannot speak english very well so is hard for me.

so are you saying i should copy what you said the correct one is ("background: transparent url('media/rightcornerpink.gif') no-repeat bottom right ;") < that into where i messed up?
boogyman
12-12-2007, 04:30 PM
replace


background: url(media/rightcornerpink.gif) bottom right no-repeat;


with


background: url(media/rightcornerpink.gif) no-repeat bottom right;


put no-repeat first (beginning)

for every background image.
paigef
12-12-2007, 04:32 PM
is this all i need to do to fix my problem? thank you

edit, should i do that with left too?

edited again, i did this. and the color is still not coming in! :( :((
paigef
12-12-2007, 04:40 PM
i read your message again, i added no-repeat to every background image. but it still isn't work!
boogyman
12-12-2007, 06:21 PM
dont add it to every background... reverse the order to what you had



<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#cfnavbar{
margin: 0;
padding: 0;
}

#cfnavbar ul{
background: url(media/bgpink.gif) repeat-x bottom center;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}

* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#cfnavbar ul li{
display: inline;
}


#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/dividerpink.gif) no-repeat bottom right;
}

#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}


#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/leftcornerpink.gif) no-repeat bottom left;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/rightcornerpink.gif) no-repeat bottom right;
}

#cfnavbar ul li a:hover{
text-decoration: underline;
}

</style>

if that doesnt work check the the url address url(address) is correct.
paigef
12-12-2007, 06:39 PM
thank you very much so, i will save that code into processir just in case i want use that code again. but i decide to use another css code and whole nother menus! so i find it much easier,, this time.

thank you.