Jump to content

div background

coco243

By coco243
in CSS

Recommended Posts

coco243 Newbie

coco243

Posted
Posted

Hy, I have this annoyng problem. With this ind.html:

<html><head> <link rel="stylesheet" type="text/css" href="ind.css"/> </head><body><div class="inainte"> <p>rosu</p> </div></body></html>
and this ind.css file:
#inainte{background-color:red;margin-left:30%;}
I have this undesireble result:newbitmapimagez.jpgUploaded with ImageShack.usI don't see neither the red div backgorund neither the 30% margin.And Why?
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Your element uses a class attribute. Your rule uses an id attribute:# is for an id. is for a classChoose one of the following solutionsSOLUTION 1Change this<div class="inainte">to this:<div id="inainte">SOLUTION 2change this#inainte{to this:.inainte{

Link to comment
Share on other sites
coco243 Newbie

coco243

Posted
  • Author
Posted

Ok, I don't handle myself.Don't worry I have marked with asterix the hot code.I have this .html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="ind.css"/> <title> Curentul electric </title> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-21359463-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="top"><div> <!-- START OF HIT COUNTER CODE --><br><script language="JavaScript" src="http://www.counter160.com/js.js?img=15"></script><br><a href="http://www.000webhost.com"><img src="http://www.counter160.com/images/15/left.png" alt="Free web hosting" border="0" align="texttop"></a><a href="http://www.hosting24.com"><img alt="Web hosting" src="http://www.counter160.com/images/15/right.png" border="0" align="texttop"></a><!-- END OF HIT COUNTER CODE --> </div> <div id="topx"><!-- Code 2.0 Romanian Top 66 START (damyg.webuda.com) --><script src="http://script.top66.ro/id-463224/7/1/Bine%20ati%20venit!%20Apasati%20OK%20pentru%20a%20vota%20pentru%20acest%20site%20in%20Romanian%20Top%2066/code2.js" type="text/javascript"></script><a href="http://www.top66.ro" title="Promovare gratuita"><img src="http://images.top66.ro/vote/7.gif" alt="Invata electronica practica Top66 Statistici" usemap="#Top66Vote" border="0"></a><!-- Code 2.0 Romanian Top 66 STOP (damyg.webuda.com) --></div> <!-- END TOPx --> </div> <!-- END TOP --> <div id="menu"> <div id="left_nav"> <ul> <li> <a href="acasa.html"> Acasa </a> </li> <li> <a href="bazateoretica.html"> Baza teoretica </a> <ul> <li> <a href="curentulelectric.html"> Curentul electric </a> </li> </ul> </li> <li> <a href="bazamateriala.html"> Baza materiala </a> </li> <li> <a href="proiecte.html"> Proiecte </a> <ul> <li> <a href="tda2030a.html"> Amplificator Operational cu TDA2030A </a> </li> </ul> </li> <li> <a href="contact.html"> Lamuriri </a> </li> </ul> </div> <!--END LEFT_NAV --> </div> <!-- END MENU --> <div id="advertising"> <p align="center"> Spatiu Publicitar </p> </div> <!--END ADVERTISING --> <div id="content"> <div class="title"> <p> Curentul electric </p></div> <div class="textcontent"> <p> Ce este curentul electric? </p> <p> O intrebare esentiala si fundamentala.</p> <p> In cartile de fizica, <b>curentul electric </b>este definit ca fiind <a style="font-style:italic"> miscarea ordonata a <a style="color:blue;font-style:italic">purtatorilor de sarcina </a> .</a></p> <p> Ce sunt <b> purtatorii de sarcina? </b></p> <p> Pentru inceput sa aruncam o scurta privire asupra <a style="color:blue"> materiei </a>. <p> Conform Dictionarului Explicativ al Limbii Romane materia este - "Substanta din care sunt facute diverse obiecte; obiect, corp, element considerat din punctul de vedere al compozitiei sale."<p> <p> Adica tot ce ne inconjoara, ce putem atinge. </p> <p> Deci un obiect oarecare, este format din materie, substanta. Orice obiect fizic este compus la randul sau din componente mai mici, numite <a style="color:blue;"> atomi </a>. </p> <p> <b>Atomul </b>este cea mai mica particula dintr-o substanta care prin procedee chimice obisnuite nu poate fi fragmentata in alte particule mai simple. Deci atomul sta la baza materiei. Orice obiect fizic pe care il vedem si atingem reprezinta materie, care la randul sau este compusa din atomi. </p> <p> Structura atomului - atomul este format dintr-un nucleu de protoni si neutroni in jurul caruia graviteaza pe orbite electronii, formand astfel <i>invelisul electronic</i>. </p> <p>Nucleul - contine <i>sarcini electrice</i> incarcate pozitiv, numite <a style="color:blue">protoni</a>, si <i>sarcini electrice</i> neutre, numite <a style="color:blue"> neutroni </a>. </p> <p> Invelisul electronic - este format din <i>sarcini electrice</i> incarcate negativ, numite <a style="color:blue"> electroni</a>. <p> <br/> <div class="pictureo"> <img src="atom.jpg" style="margin-left: 31%"/> </div> <!-- END PICTUREO --> <p style="margin-left: 38%"> Structura unui atom </p> <p> Ce este <b>sarcina electrica</b>? <p> Thales din Milet ( n. cca. 635 i. Hr.– d. cca. 543 î.Hr.) - un filozof grec a observat prin experimentele sale proprietatea chihlimbarului de a atrage corpuri usoare cand este frecat. Acest fenomen se numeste <a style="color:blue;"> electrizare </a>.</p> <p> Prin acest procedeu, corpurile electrizate incep sa interactioneze intre ele exercitand forte de atragere sau respingere, numite <i>forte de interactiune electrica </i>. Pentru a exprima fenomenul de electrizare a fost introdusa marimea fizica numita, <b>sarcina electrica</b>. </p> <p> Deci pentru a exprima proprietatea de atragere ssau respingere a corpurilor electrizate a fost introdus termenul de sarcina electrica, mergand mai departe si observand faptul ca exista doua feluri de forte, de atractie, respectiv de respingere s-a ajuns la concluzia ca exista doua tipuri de sarcina electrica: <a style="color:blue">sarcina electrica negativa</a> si <a style="color:blue">sarcina electrica pozitiva</a> sau altfel spus, purtatori de sarcina negativa si purtatori de sarcina pozitiva. <p> Revenim la structura atomului si ne aducem aminte ca, electronul este sarcina electrica negativa iar protonul este sarcina electrica pozitiva. Deci asta este compozitia materiei, este formata din atomi care la randul lor au in structura lor protoni si neutroni in nucleu, si electroni pe invelisul electronic. </p> <p> Un aspect important al atomului il prezinta orbitarea electronilor in jurul nucleului, si proprietatea electronilor de a fi mobili spre deosebire de protoni si neutroni, ce raman ficsi in nucleu. Electronii au importanta proprietate ca in anumite situatii sa se poata deplasa de la un atom la celalalt, deci sunt mobili, liberi si in anumite conditii pot migra in interiorul materiei. </p> <p> Deci, </p> <p> Miscarea ordonata a purtatorilor de sarcina (negativi - adica electronii, pentru ca doar ei sunt mobili) reprezinta <b>curentul electric</b>. </p> <p> Deci ne-am format o idee simpla, dar fundamentala si reala asupra existentei curentului electric, nu putem stapani niciun lucru daca nu-i cunoastem originile. O sa vedem in continuare functionalitatea si alte lucruri interesante despre curentul electric. </p> </div> <! END TEXTCONTENT --><!-- *******************HERE IS THE PROBLEM****************** --> <div class="inainte"> <p align="right"> Inainte </p> </div> <!-- END INAINTE --><!-- ******************************************************** --> </div> <!-- END CONTENT --> <div id="down"><div id="trafic"><center><!--/Start trafic.ro/--><script type="text/javascript">t_rid="damygwebudacom";</script><script type="text/javascript" src="http://storage.trafic.ro/js/trafic.js"></script><noscript><p><a href="http://www.trafic.ro/?rid=damygwebudacom"><img alt="trafic ranking" src="http://log.trafic.ro/cgi-bin/pl.dll?rid=damygwebudacom" /></a></p><a href="http://www.trafic.ro">Statistici web</a> </noscript></center><!--/End trafic.ro/--></div> </div> <!-- END DOWN --> </body></html>
and this .css file:
*{ margin: 0px; padding: 0px;}html,body { height: 100%; background-color:rgb(131,131,131);}#top { width: 100%; height: 20%; background-color:rgb(75,81,101);}#menu { float: left; width:20%; min-width: 100px; min-height: 65%; height:auto; background-color:rgb(131,131,131);}#content { margin: 0% 10% 0% 20%; /* IMPORTANT -margin: 0 10% 0 20%; means that the content div has top margin 0%, right margin 10%(advertising), bottom margin 0% and left margin(menu) 20%*/ min-height:65%; min-width: 69%%; height:auto; background-color:rgb(185,194,177);}#advertising { float: right; width: 10%; min-height: 65%; background-color:(131,131,131); height: auto;}#down { width: 100%; height:15%; background-color:rgb(75,81,101); clear:both; margin: 0 auto 0 auto;}.title {padding-top: 10%;text-indent: 4em;font-size: 20px;text-align: center;}#topx { position: absolute; top: 0px; right: 0px;}#trafic { padding-top: 3%; margin-right: auto; margin-left:auto;}.textcontent{ padding-top: 4%; padding-left: 15%; padding-right: 15%; padding-bottom: 5%; text-indent: 20px;}  #picture {background-color:rgb(185,194,177);min-width:100%;float:right;}#pictureo {margin-left:auto;margin-right:auto;background-color:rgb(185,194,177);}#left_nav {   /*  this is the hover menu container */  width: 100%;   min-height: 400px;  background-color: rgb(131,131,131); /* same color with the menu background */#center{margin-left:auto;margin-right:auto;}/* **************THIS IS THE PROBLEM DIV********************** */ .inainte {  margin-right: 10%;background-color: red;}/* ********************************************************** */#left_nav ul, #left_nav li { list-style:none; }/*lu - unordered list, li - list item */ #left_nav ul { padding-bottom: 1px; background-color: blue;}#left_nav li { height: 25px; text-align:center; line-height: 25px; position: relative; background-color: rgb(48,48,48);/* color of the menu list elements*/ border-bottom: 1px solid blue; width: 100%; float:left; }#left_nav ul ul { position:absolute; left: -9999em;top:8px; width:100%; margin:0;}#left_nav li a { display: block; width: 100%; height: 100%; text-decoration: none; color: #fff;}#left_nav li:hover ul {left:100%;}#left_nav li a:hover {background-color: #3366FF;}

Why the " inainte" div has no effect?I want to make an Next link with this div.Of topic: This forum doesn't have an atach option?

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

yes. for FF it's Tools -> Clear Recent History. web browsers tend to cache images and stylesheets to reduce the amount of needed HTTP requests. Usually they will update if there's a difference, but for small changes, it might not. Clearing your cache will rule out one possibility.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

fair enough, but having it written inline is the more expensive way to declare/define your styles. Knowing how to debug your applications should be a higher priority then just finding workarounds to the problem. Chances are issues like this will arise more than once.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...