June 30, 200917 yr Hi every body. I am tring to do sothing, CSS. and it seams like its working on the www.w3schools.com on the Totorial. but it does not work on the web: my site Does any one know any reason why? I work on Mac dreamweaver, Safari and Firefox. any ideas? I don't know what to do.
June 30, 200917 yr Just noticed in your html file you have: <style type="text/css" title="currentStyle" media="screen"> @import "file:///Macintosh HD/Users/Vera/Sites/sharmcats/thecode.css"; </style> You will want to change the location of the css file to something like: "/css/thecode.css" And make sure you upload it to your server with the same structure as above
June 30, 200917 yr Author h3 { position:fixed; top:541px; left:116 px; text-align: left; color:#FFFFFF; font-family:ariel; font-size:20px; } .news { position:fixed; line-height:140%; top:572px; left:116 px; text-align: left; color:#92D376; font-family:ariel; font-size:15px; max-width: 155px; } h4 { position:fixed; top:772px; left:116 px; text-align: left; color:#FFFFFF; font-family:ariel; font-size:20px; } .contact { left:116px; top:806px; line-height: 140%; position:fixed; text-align: left; color:#92D376; font-family:ariel; font-size:15px; max-width: 155px; } and there is the HTML: <h3>Our News</h3> <p class="news">Я рада приветствовать Вас на моём сайте,посвящённом удивительным кошкам породы Донской Сфинкс.<p> <h4>Контакты</h4> <p class="contact"> Cheban Ina tel +972547279181 linda168@mail.ru Skype: inochka8</p> </div> it works perfectly on the tutorial of 3WSchool
June 30, 200917 yr Yea you have to change the location to the directory your CSS file is located on the server. See comment above ^^.
June 30, 200917 yr Author thank you very much , it is much better. still not there. but at least I can see it
June 30, 200917 yr Ahh yes I remember the layout finally making it a website If you need any more help then just ask!
June 30, 200917 yr Just ran a validation for your site and it passes and xhtml strict but you need to change this: щённом удивительным кошкам породы Донской Сфинкс.<p> To: щённом удивительным кошкам породы Донской Сфинкс.</p> Hope it helps
June 30, 200917 yr Author one more thing: there is this background I wanna place : #leftbg { background-image:url("/sharmcats/images/midle left.jpg"); background-attachment:fixed; background-repeat:no-repeat; background-position:absolute;; top:366px; left:150px; width:238px; height:581px; } and it doesn't work : <div id="leftbg"> <h3>Our News</h3> </div> it appears on the left top- which is not what I want . thanks for the help.
June 30, 200917 yr Sorry I'm not sure what your trying to get, have you got an image of what it should look like?
June 30, 200917 yr Okay I can see that you have an absolute position why is this needed? try taking that out and the top and left positions?
June 30, 200917 yr Change this: #pageHeader { background-image:url("/sharmcats/images/header.jpg"); background-repeat:no-repeat; width:1024px; height:366px; } #leftbg { background-image:url("/sharmcats/images/midle left.jpg"); background-repeat:no-repeat; width:238px; height:581px; margin-left: 70px; margin-top: -18px; } Also you will want to put the navigation ul items in a div called 'nav' then position that because its currently moving. Also remove all of the fixed positions on the h3 and p tags. Edited June 30, 200917 yr by AdamConder
June 30, 200917 yr Author Oho, thank you very much!!! could you please explain to me why you put: margin-top: -18px; ? Thank you Vera
June 30, 200917 yr Its because it was not being pushed to meet the top: change this: haha making your website here but I don't mind CSS @charset "UTF-8"; /* CSS Document */ body { background-color:#19637D; margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; } #Navigation { line-height:150%; float: right; margin-top: 120px; margin-right: 50px; } #Navigation ul { list-style:none; margin:0; padding:0; border:none; } #Navigationrus { line-height:150%; text-align:right; float: right; margin-right: 85px; margin-top: 120px; } #Navigationrus ul { list-style:none; margin:0; padding:0; border:none; } #pageHeader { background-image:url("/sharmcats/images/header.jpg"); background-repeat:no-repeat; width:1024px; height:366px; } #leftbg { background-image:url("/sharmcats/images/midle left.jpg"); background-repeat:no-repeat; width:238px; height:581px; margin-left: 71px; margin-top: -20px; } h3 { top:541px; left:116px; text-align:left; color:#FFFFFF; font-family:ariel; font-size:20px; } .news { line-height:140%; text-align:left; color:#92D376; font-family:ariel; font-size:15px; max-width:155px; } h4 { top:770px; left:116px; text-align:left; color:#FFFFFF; font-family:ariel; font-size:20px; } .contact { left:116px; top:806px; line-height:140%; position:fixed; text-align:left; color:#92D376; font-family:ariel; font-size:15px; max-width:155px; } a:link { font-weight:bold; text-decoration:none; color:#FFFFFF; } a:visited { font-weight:bold; text-decoration:none; color:#9BDEF5; } a:hover, a:active { text-decoration: none; color: #9BDEF5; } h1 { line-height:150%; text-align:left; color:#19637D; font-family:ariel; font-size:15px; max-width:600px; } HTML <div id="pageHeader"> <div id="Navigationrus"> <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> <li><a href="#">Фотоальбом</a> </li> <li><a href="#">Контакты</a> </li> <li><a href="#">Ссылки</a> </li> </ul> </div> <div id="Navigation"> <ul> <li><a href="#">About us </a></li> <li><a href="#">Our boys </a></li> <li><a href="#">Our Girls </a></li> <li><a href="#">Aveliable </a></li> <li><a href="#">Don sphynx </a></li> <li><a href="#">Gallery </a></li> <li><a href="#">Contact </a></li> <li><a href="#">Links </a></li> </ul> </div> </div> <div id="leftbg"> <h3>Our News</h3> <p class="news">Я рада приветствовать Вас на моём сайте,посвящённом удивительным кошкам породы Донской Сфинкс.</p><p> </p><h4>Контакты</h4> <p class="contact"> Cheban Ina tel +972547279181 linda168@mail.ru Skype: inochka8</p> </div>
June 30, 200917 yr An application called firebug for firefox it lets me edit on the fly locally so I'm practically editing your website Some more changes: h3 { text-align:left; color:#FFFFFF; font-family:ariel; font-size:20px; padding-top: 150px; padding-left: 20px; } .news { line-height:140%; text-align:left; color:#92D376; font-family:ariel; font-size:15px; max-width:155px; padding-left: 20px; } h4 { text-align:left; color:#FFFFFF; font-family:ariel; font-size:20px; padding-left: 20px; }
June 30, 200917 yr Author hi, sorry for another stupid question, but why use : padding-top: 150px; padding-left: 20px; and not: top:700pt left:116px ?
June 30, 200917 yr Because you want the text to be displayed below the sharm's cat logo and you only use the top and left if you are using: position: absolute; or position: fixed; I would recommend that you go and look up about floats and positions more: http://www.barelyfitz.com/screencast/html-training/css/positioning/ A little reputation would go a miss
June 30, 200917 yr No its okay I like helping Any ways I'm still learning as well. Hope you can manage the other stuff as well! If you need help then send me a pm.
June 30, 200917 yr No its okay I like helping Any ways I'm still learning as well. Hope you can manage the other stuff as well! If you need help then send me a pm. Also I would only use top and left etc if you are trying to position a div etc like the main elements. And padding if its text? Just my preference.
Create an account or sign in to comment